Add comment support in epic detail view (#84)

Co-authored-by: ayman <118556179+aymka@users.noreply.github.com>
Co-authored-by: Benedict Teutsch <bene210@web.de>

electron/providers/jira-cloud-provider/JiraCloudProvider.ts

@@ -12,6 +12,7 @@ import {
   User,
 } from "../../../types"
 import {
+  JiraEpic,
   JiraIssue,
   JiraIssueType,
   JiraPriority,
@@ -859,10 +860,10 @@ export class JiraCloudProvider implements IProvider {
   async getEpicsByProject(projectIdOrKey: string): Promise<Issue[]> {
     return new Promise((resolve, reject) => {
       this.getRestApiClient(3)
-        .get(`search?jql=issuetype = Epic AND project = ${projectIdOrKey}`)
+        .get(`search?jql=issuetype = Epic AND project = ${projectIdOrKey}&fields=*all`)
         .then(async (response) => {
           const epics: Promise<Issue[]> = Promise.all(
-            response.data.issues.map(async (element: JiraIssue) => ({
+            response.data.issues.map(async (element: JiraEpic) => ({
               issueKey: element.key,
               summary: element.fields.summary,
               epic: element.fields.epic,
@@ -875,7 +876,15 @@ export class JiraCloudProvider implements IProvider {
               subtasks: element.fields.subtasks,
               created: element.fields.created,
               updated: element.fields.updated,
-              comment: element.fields.comment ?? {
+              comment: {
+                comments: element.fields.comment.comments.map((commentElement) => ({
+                  id: commentElement.id,
+                  body: commentElement.body.content[0].content[0].text,
+                  author: commentElement.author,
+                  created: commentElement.created,
+                  updated: commentElement.updated,
+                })),
+              } ?? {
                 comments: [],
               },
               projectId: element.fields.project.id,

electron/providers/jira-server-provider/JiraServerProvider.ts

@@ -11,7 +11,7 @@ import {
   SprintCreate,
   User,
 } from "../../../types"
-import {JiraIssue, JiraIssueType, JiraProject, JiraSprint,} from "../../../types/jira"
+import {JiraEpic, JiraIssue, JiraIssueType, JiraProject, JiraSprint,} from "../../../types/jira"
 import {IProvider} from "../base-provider"
 import {JiraServerInfo, JiraServerUser} from "./server-types";
 
@@ -579,10 +579,10 @@ export class JiraServerProvider implements IProvider {
   getEpicsByProject(projectIdOrKey: string): Promise<Issue[]> {
     return new Promise((resolve, reject) => {
       this.getRestApiClient(2)
-        .get(`search?jql=issuetype = Epic AND project = ${projectIdOrKey}`)
+        .get(`search?jql=issuetype = Epic AND project = ${projectIdOrKey}&fields=*all`)
         .then(async (response) => {
           const epics: Promise<Issue[]> = Promise.all(
-            response.data.issues.map(async (element: JiraIssue) => ({
+            response.data.issues.map(async (element: JiraEpic) => ({
               issueKey: element.key,
               summary: element.fields.summary,
               labels: element.fields.labels,
@@ -593,6 +593,19 @@ export class JiraServerProvider implements IProvider {
                 displayName: element.fields.assignee?.displayName,
                 avatarUrls: element.fields.assignee?.avatarUrls,
               },
+              subtasks: element.fields.subtasks,
+              comment: {
+                comments: element.fields.comment.comments.map((commentElement) => ({
+                  id: commentElement.id,
+                  body: commentElement.body,
+                  author: commentElement.author,
+                  created: commentElement.created,
+                  updated: commentElement.updated,
+                })),
+              },
+              projectId: element.fields.project.id,
+              sprint: element.fields.sprint,
+              attachments: element.fields.attachment,
             }))
           )
           resolve(epics)

src/components/DetailView/Components/CommentSection/queries.ts

@@ -27,6 +27,7 @@ export const addCommentMutation = (queryClient: QueryClient) =>
         color: "green",
       })
       queryClient.invalidateQueries({ queryKey: ["issues"] })
+      queryClient.invalidateQueries({queryKey: ["epics"]})
     },
   })
 
@@ -53,6 +54,7 @@ export const editCommentMutation = (queryClient: QueryClient) =>
         color: "green",
       })
       queryClient.invalidateQueries({ queryKey: ["issues"] })
+      queryClient.invalidateQueries({queryKey: ["epics"]})
     },
   })
 
@@ -77,5 +79,6 @@ export const deleteCommentMutation = (queryClient: QueryClient) =>
         color: "green",
       })
       queryClient.invalidateQueries({ queryKey: ["issues"] })
+      queryClient.invalidateQueries({queryKey: ["epics"]})
     },
   })

src/components/EpicDetailView/EpicDetailView.tsx

@@ -33,6 +33,7 @@ import {
   storyPointsAccumulator,
 } from "./helpers/storyPointsHelper"
 import { StoryPointsHoverCard } from "./Components/StoryPointsHoverCard";
+import { CommentSection } from "../DetailView/Components/CommentSection";
 
 export function EpicDetailView({
   issueKey,
@@ -42,6 +43,7 @@ export function EpicDetailView({
   description,
   created,
   updated,
+  comment,
   closeModal,
 }: {
   issueKey: string
@@ -51,6 +53,17 @@ export function EpicDetailView({
   description: string
   created: string
   updated: string
+  comment: {
+    comments: [
+      {
+        id: string
+        author: User
+        body: string
+        created: string
+        updated: string
+      }
+    ]
+  }
   closeModal: () => void
 }) {
   const queryClient = useQueryClient()
@@ -238,7 +251,17 @@ export function EpicDetailView({
                 </Accordion.Panel>
               </Accordion.Item>
             </Accordion>
-            <Text size="xs" color="dimmed">
+            <Accordion variant="contained" mb={20}>
+                <Accordion.Item value="Comments">
+                  <Accordion.Control sx={{ textAlign: "left" }}>
+                    Comments
+                  </Accordion.Control>
+                  <Accordion.Panel>
+                    <CommentSection issueKey={issueKey} comment={comment} />
+                  </Accordion.Panel>
+                </Accordion.Item>
+              </Accordion>
+              <Text size="xs" color="dimmed">
               Created {dateFormat.format(new Date(created))}
             </Text>
             <Text size="xs" color="dimmed">

types/jira.ts

@@ -1,4 +1,4 @@
-import { Attachment, Priority } from "."
+import {Attachment, Priority} from "."
 
 export interface JiraProject {
   projectTypeKey: string
@@ -18,6 +18,88 @@ export interface JiraSprint {
   name: string
 }
 
+// EpicIssue structure differs from normal Issue structure
+export interface JiraEpic {
+  key: string
+  fields: {
+    description: {
+      type: string,
+      version: string,
+      content: string & {
+        content: {
+          type: string,
+          text: string
+        }[]
+      }[]
+    }
+    summary: string
+    creator: { name: string; displayName: string }
+    status: { name: string }
+    issuetype: { name: string }
+    // TODO: improve this, let's try not to hardcode customfields
+    customfield_10107: number
+    parent: { id: string; fields: { summary: string } }
+    epic: { name: string }
+    labels: string[]
+    assignee: {
+      displayName: string
+      avatarUrls: {
+        "16x16": string
+        "24x24": string
+        "36x36": string
+        "48x48": string
+      }
+    }
+    [rankCustomField: string]: string | unknown
+    subtasks: {
+      id: string
+      key: string
+      fields: {
+        summary: string
+      }
+    }[]
+    project: { id: string }
+    created: string
+    updated: string
+    comment: {
+      comments: [
+        {
+          id: string
+          author: {
+            accountId: string
+            avatarUrls: {
+              "48x48": string
+              "24x24": string
+              "16x16": string
+              "32x32": string
+            }
+            displayName: string
+          }
+          body: {
+            type: string
+            version: number
+            content: [
+              {
+                type: string
+                content: [
+                  {
+                    type: string
+                    text: string
+                  }
+                ]
+              }
+            ]
+          }
+          created: string
+          updated: string
+        }
+      ]
+    }
+    sprint?: JiraSprint
+    attachment?: Attachment[]
+  }
+}
+
 export interface JiraIssue {
   key: string
   fields: {