From 435c09ba01ba8271a038b6923221341df172102b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20R=C3=BCsch?=
 <78490564+maximilianruesch@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:57:51 +0100
Subject: [PATCH] Add first epic detail view (#80)

Co-authored-by: Benedict Teutsch <bene210@web.de>
Co-authored-by: Julian Rupprecht <rupprecht.julian@web.de>
---
 .../jira-cloud-provider/JiraCloudProvider.ts  |  15 +-
 .../Components/AssigneeMenu/queries.ts        |   1 +
 .../DetailView/Components/Labels.tsx          |  17 ++-
 .../EpicDetailView/Components/IssueSprint.tsx | 106 ++++++++++++++
 .../Components/IssueSummary.tsx               |  72 ++++++++++
 .../Components/SubTask/Subtask.tsx            |  62 +++++++++
 .../Components/SubTask/index.ts               |   1 +
 .../Components/SubTask/queries.ts             |  21 +++
 .../Components/SubTask/queryFunctions.ts      |   2 +
 .../EpicDetailView/EpicDetailView.tsx         | 130 ++++++++++++++++++
 .../EpicDetailView/helpers/queryFunctions.ts  |   4 +
 src/components/EpicView/EpicCard.tsx          |  20 ++-
 src/components/EpicView/EpicView.tsx          |   3 +-
 src/components/EpicView/EpicWrapper.tsx       |   2 +-
 types/index.ts                                |  11 +-
 15 files changed, 442 insertions(+), 25 deletions(-)
 create mode 100644 src/components/EpicDetailView/Components/IssueSprint.tsx
 create mode 100644 src/components/EpicDetailView/Components/IssueSummary.tsx
 create mode 100644 src/components/EpicDetailView/Components/SubTask/Subtask.tsx
 create mode 100644 src/components/EpicDetailView/Components/SubTask/index.ts
 create mode 100644 src/components/EpicDetailView/Components/SubTask/queries.ts
 create mode 100644 src/components/EpicDetailView/Components/SubTask/queryFunctions.ts
 create mode 100644 src/components/EpicDetailView/EpicDetailView.tsx
 create mode 100644 src/components/EpicDetailView/helpers/queryFunctions.ts

diff --git a/electron/providers/jira-cloud-provider/JiraCloudProvider.ts b/electron/providers/jira-cloud-provider/JiraCloudProvider.ts
index 6fae6c6f..e837ec4a 100644
--- a/electron/providers/jira-cloud-provider/JiraCloudProvider.ts
+++ b/electron/providers/jira-cloud-provider/JiraCloudProvider.ts
@@ -767,11 +767,7 @@ export class JiraCloudProvider implements IProvider {
                   id: projectId,
                 },
               }),
-              ...(reporter && {
-                reporter: {
-                  id: reporter,
-                },
-              }),
+              ...(reporter && { reporter }),
               ...(priority && priority.id && { priority }),
               ...(assignee &&
                 assignee.id && {
@@ -862,6 +858,15 @@ export class JiraCloudProvider implements IProvider {
                 displayName: element.fields.assignee?.displayName,
                 avatarUrls: element.fields.assignee?.avatarUrls,
               },
+              subtasks: element.fields.subtasks,
+              created: element.fields.created,
+              updated: element.fields.updated,
+              comment: element.fields.comment ?? {
+                comments: [],
+              },
+              projectId: element.fields.project.id,
+              sprint: element.fields.sprint,
+              attachments: element.fields.attachment,
             }))
           )
           resolve(epics)
diff --git a/src/components/DetailView/Components/AssigneeMenu/queries.ts b/src/components/DetailView/Components/AssigneeMenu/queries.ts
index 7a5e2b2d..f59bea01 100644
--- a/src/components/DetailView/Components/AssigneeMenu/queries.ts
+++ b/src/components/DetailView/Components/AssigneeMenu/queries.ts
@@ -17,6 +17,7 @@ export const editIssueMutation = (queryClient: QueryClient, issueKey: string) =>
         message: `The assignee for issue ${issueKey} has been modified!`,
         color: "green",
       })
+      queryClient.invalidateQueries({ queryKey: ["epics"] })
       queryClient.invalidateQueries({ queryKey: ["issues"] })
     },
   })
diff --git a/src/components/DetailView/Components/Labels.tsx b/src/components/DetailView/Components/Labels.tsx
index c82d43a4..59210046 100644
--- a/src/components/DetailView/Components/Labels.tsx
+++ b/src/components/DetailView/Components/Labels.tsx
@@ -16,18 +16,20 @@ import { editIssue } from "../helpers/queryFunctions"
 export function Labels({
   labels,
   issueKey,
+  onMutate = () => {}
 }: {
   labels: string[]
   issueKey: string
+  onMutate?: () => void
 }) {
   const theme = useMantineTheme()
-  const [defaultLabels, setdefaultLabels] = useState(labels)
-  const [showLabelsInput, setshowLabelsInput] = useState(false)
+  const [defaultLabels, setDefaultLabels] = useState(labels)
+  const [showLabelsInput, setShowLabelsInput] = useState(false)
   const { data: allLabels } = useQuery({
     queryKey: ["labels"],
     queryFn: () => getLabels(),
   })
-  const mutationLalbels = useMutation({
+  const mutationLabels = useMutation({
     mutationFn: (issue: Issue) => editIssue(issue, issueKey),
     onError: () => {
       showNotification({
@@ -40,6 +42,7 @@ export function Labels({
         message: `Labels for issue ${issueKey} has been modified!`,
         color: "green",
       })
+      onMutate()
     },
   })
   return (
@@ -62,15 +65,15 @@ export function Labels({
           defaultValue={defaultLabels}
           data={allLabels || []}
           onBlur={() => {
-            setshowLabelsInput(false)
-            mutationLalbels.mutate({
+            setShowLabelsInput(false)
+            mutationLabels.mutate({
               labels: defaultLabels,
             } as Issue)
           }}
-          onChange={(value) => setdefaultLabels(value)}
+          onChange={(value) => setDefaultLabels(value)}
         />
       ) : (
-        <Box onClick={() => setshowLabelsInput(true)}>
+        <Box onClick={() => setShowLabelsInput(true)}>
           {defaultLabels.length !== 0 ? (
             <Group spacing={3}>
               {defaultLabels.map((label) => (
diff --git a/src/components/EpicDetailView/Components/IssueSprint.tsx b/src/components/EpicDetailView/Components/IssueSprint.tsx
new file mode 100644
index 00000000..eecdebed
--- /dev/null
+++ b/src/components/EpicDetailView/Components/IssueSprint.tsx
@@ -0,0 +1,106 @@
+import { Text, Box, Select, useMantineTheme } from "@mantine/core"
+import { showNotification } from "@mantine/notifications"
+import { useMutation, useQuery } from "@tanstack/react-query"
+import { Issue, Sprint } from "types"
+import { useState } from "react"
+import { useCanvasStore } from "../../../lib/Store"
+import {
+  getSprints,
+  moveIssueToBacklog,
+} from "../../CreateIssue/queryFunctions"
+import { editIssue } from "../helpers/queryFunctions"
+
+export function IssueSprint(props: {
+  sprint: Sprint | undefined
+  issueKey: string
+}) {
+  const theme = useMantineTheme()
+  const [defaultsprint, setdefaultsprint] = useState(props.sprint || undefined)
+  const [showSprintInput, setshowSprintInput] = useState(false)
+
+  const boardIds = useCanvasStore((state) => state.selectedProjectBoardIds)
+  const currentBoardId = boardIds[0]
+  const { data: sprints } = useQuery({
+    queryKey: ["sprints"],
+    queryFn: () => getSprints(currentBoardId),
+    enabled: !!currentBoardId,
+  })
+
+  const mutationSprint = useMutation({
+    mutationFn: (issue: Issue) => editIssue(issue, props.issueKey),
+    onError: () => {
+      showNotification({
+        message: `An error occured while modifing the sprint 😢`,
+        color: "red",
+      })
+    },
+    onSuccess: () => {
+      showNotification({
+        message: `The sprint for issue ${props.issueKey} has been modified!`,
+        color: "green",
+      })
+    },
+  })
+  const mutationBacklog = useMutation({
+    mutationFn: () => moveIssueToBacklog(props.issueKey),
+    onError: () => {
+      showNotification({
+        message: `An error occured while modifing the sprint 😢`,
+        color: "red",
+      })
+    },
+    onSuccess: () => {
+      showNotification({
+        message: `The sprint for issue ${props.issueKey} has been modified!`,
+        color: "green",
+      })
+    },
+  })
+  const sprintNames = sprints ? sprints?.map((sprint) => sprint.name) : []
+  return (
+    <span>
+      {showSprintInput ? (
+        <Select
+          nothingFound="No Options"
+          searchable
+          clearable
+          defaultValue={props.sprint ? props.sprint.name : ""}
+          data={sprintNames}
+          onBlur={() => {
+            setshowSprintInput(false)
+            if (defaultsprint)
+              mutationSprint.mutate({
+                sprint: defaultsprint,
+              } as Issue)
+            else mutationBacklog.mutate()
+          }}
+          onChange={(value) => {
+            if (value === "") setdefaultsprint(undefined)
+            else
+              setdefaultsprint(
+                sprints?.find((sprint) => sprint.name === value)!
+              )
+          }}
+        />
+      ) : (
+        <Box
+          onClick={() => setshowSprintInput(true)}
+          sx={{
+            ":hover": {
+              cursor: "pointer",
+              boxShadow: theme.shadows.xs,
+              borderRadius: theme.radius.xs,
+              transition: "background-color .8s ease-out",
+            },
+          }}
+        >
+          {defaultsprint ? (
+            <Text>{defaultsprint.name}</Text>
+          ) : (
+            <Text color="dimmed">None</Text>
+          )}
+        </Box>
+      )}
+    </span>
+  )
+}
diff --git a/src/components/EpicDetailView/Components/IssueSummary.tsx b/src/components/EpicDetailView/Components/IssueSummary.tsx
new file mode 100644
index 00000000..4285b646
--- /dev/null
+++ b/src/components/EpicDetailView/Components/IssueSummary.tsx
@@ -0,0 +1,72 @@
+import { Text, Textarea } from "@mantine/core"
+import { Issue } from "types"
+import { useState } from "react"
+import { showNotification } from "@mantine/notifications"
+import { useMutation } from "@tanstack/react-query"
+import { editIssue } from "../helpers/queryFunctions"
+
+export function IssueSummary({
+  summary,
+  issueKey,
+  onMutate = () => {},
+}: {
+  summary: string
+  issueKey: string
+  onMutate?: () => void
+}) {
+  const [defaultSummary, setDefaultSummary] = useState(summary)
+  const [showSummaryInput, setShowSummaryInput] = useState(false)
+
+  const mutationSummary = useMutation({
+    mutationFn: (issue: Issue) => editIssue(issue, issueKey),
+    onError: () => {
+      showNotification({
+        message: `An error occurred while modifying the summary 😢`,
+        color: "red",
+      })
+    },
+    onSuccess: () => {
+      if (defaultSummary !== summary) {
+        showNotification({
+          message: `The summary of issue ${issueKey} has been modified!`,
+          color: "green",
+        })
+        onMutate()
+      }
+    },
+  })
+  return (
+    <Text>
+      {showSummaryInput ? (
+        <Textarea
+          value={defaultSummary}
+          onChange={(e) => setDefaultSummary(e.target.value)}
+          onBlur={() => {
+            if (defaultSummary === "")
+              showNotification({
+                message: `The summary of an issue cannot be empty`,
+                color: "red",
+              })
+            else {
+              setShowSummaryInput(false)
+              mutationSummary.mutate({
+                summary: defaultSummary,
+              } as Issue)
+            }
+          }}
+          autosize
+          sx={{
+            textarea: {
+              fontSize: "inherit",
+              fontWeight: "inherit",
+            },
+          }}
+        />
+      ) : (
+        <Text lineClamp={1} onClick={() => setShowSummaryInput(true)}>
+          {defaultSummary}
+        </Text>
+      )}
+    </Text>
+  )
+}
diff --git a/src/components/EpicDetailView/Components/SubTask/Subtask.tsx b/src/components/EpicDetailView/Components/SubTask/Subtask.tsx
new file mode 100644
index 00000000..f192a444
--- /dev/null
+++ b/src/components/EpicDetailView/Components/SubTask/Subtask.tsx
@@ -0,0 +1,62 @@
+import { Box, Group, Loader, Text, ThemeIcon } from "@mantine/core"
+import { IconBinaryTree2, IconTrash } from "@tabler/icons"
+import { useQueryClient } from "@tanstack/react-query"
+import { IssueSummary } from "../IssueSummary"
+import { deleteSubtaskMutation } from "./queries"
+
+export function Subtask({
+  id,
+  subtaskKey,
+  fields,
+}: {
+  id: string
+  subtaskKey: string
+  fields: {
+    summary: string
+  }
+}) {
+  const queryClient = useQueryClient()
+  const deleteSubtask = deleteSubtaskMutation(queryClient)
+  return (
+    <Group
+      align="center"
+      key={id}
+      sx={(theme) => ({
+        borderRadius: theme.radius.sm,
+        transition: "background-color .8s ease-out",
+        boxShadow: theme.shadows.xs,
+        ":hover": {
+          backgroundColor: "#ebecf0",
+          transition: "background-color .1s ease-in",
+        },
+      })}
+      p="sm"
+    >
+      <ThemeIcon size="sm" sx={{ flex: 2 }}>
+        <IconBinaryTree2 />
+      </ThemeIcon>
+      <Text size="sm" color="blue" span sx={{ flex: 15 }} lineClamp={1}>
+        {subtaskKey}
+      </Text>
+      <Box sx={{ flex: 50 }}>
+        <IssueSummary summary={fields.summary} issueKey={subtaskKey} />
+      </Box>
+      {deleteSubtask.isLoading && <Loader size="sm" />}
+      <ThemeIcon
+        variant="outline"
+        size="sm"
+        color="gray"
+        ml="auto"
+        sx={{
+          flex: 2,
+          ":hover": { color: "red", borderColor: "red", cursor: "pointer" },
+        }}
+        onClick={() => {
+          deleteSubtask.mutate(subtaskKey)
+        }}
+      >
+        <IconTrash />
+      </ThemeIcon>
+    </Group>
+  )
+}
diff --git a/src/components/EpicDetailView/Components/SubTask/index.ts b/src/components/EpicDetailView/Components/SubTask/index.ts
new file mode 100644
index 00000000..f5c50d5b
--- /dev/null
+++ b/src/components/EpicDetailView/Components/SubTask/index.ts
@@ -0,0 +1 @@
+export * from "./Subtask"
diff --git a/src/components/EpicDetailView/Components/SubTask/queries.ts b/src/components/EpicDetailView/Components/SubTask/queries.ts
new file mode 100644
index 00000000..8b3f83b7
--- /dev/null
+++ b/src/components/EpicDetailView/Components/SubTask/queries.ts
@@ -0,0 +1,21 @@
+import { showNotification } from "@mantine/notifications"
+import { QueryClient, useMutation } from "@tanstack/react-query"
+import { deleteIssueSubtask } from "./queryFunctions"
+
+export const deleteSubtaskMutation = (queryClient: QueryClient) =>
+  useMutation({
+    mutationFn: deleteIssueSubtask,
+    onError: () => {
+      showNotification({
+        message: "The subtask couldn't be deleted! 😢",
+        color: "red",
+      })
+    },
+    onSuccess: () => {
+      showNotification({
+        message: "Subtask  has been deleted!",
+        color: "green",
+      })
+      queryClient.invalidateQueries({ queryKey: ["issues"] })
+    },
+  })
diff --git a/src/components/EpicDetailView/Components/SubTask/queryFunctions.ts b/src/components/EpicDetailView/Components/SubTask/queryFunctions.ts
new file mode 100644
index 00000000..e46a7da9
--- /dev/null
+++ b/src/components/EpicDetailView/Components/SubTask/queryFunctions.ts
@@ -0,0 +1,2 @@
+export const deleteIssueSubtask = (issueIdOrKey: string): Promise<void> =>
+  window.provider.deleteIssue(issueIdOrKey)
diff --git a/src/components/EpicDetailView/EpicDetailView.tsx b/src/components/EpicDetailView/EpicDetailView.tsx
new file mode 100644
index 00000000..3e9ef189
--- /dev/null
+++ b/src/components/EpicDetailView/EpicDetailView.tsx
@@ -0,0 +1,130 @@
+import {
+  Accordion,
+  Box,
+  Breadcrumbs,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core"
+import { Issue, User } from "types"
+import { useQueryClient } from "@tanstack/react-query";
+import { AssigneeMenu } from "../DetailView/Components/AssigneeMenu"
+import { Description } from "../DetailView/Components/Description"
+import { IssueSummary } from "./Components/IssueSummary"
+import { Labels } from "../DetailView/Components/Labels"
+import { ReporterMenu } from "../DetailView/Components/ReporterMenu"
+import { DeleteIssue } from "../DetailView/Components/DeleteIssue"
+import { ColorSchemeToggle } from "../common/ColorSchemeToggle"
+import { IssueIcon } from "../BacklogView/Issue/IssueIcon"
+
+export function EpicDetailView({
+   issueKey,
+   summary,
+   labels,
+   assignee,
+   description,
+   created,
+   updated,
+   closeModal,
+ }: {
+  issueKey: string
+  summary: string
+  labels: string[]
+  assignee?: User
+  description: string
+  created: string
+  updated: string
+  closeModal: () => void
+}) {
+  const queryClient = useQueryClient()
+  const reloadEpics = () => queryClient.invalidateQueries({ queryKey: ["epics"] });
+
+  const dateFormat = new Intl.DateTimeFormat("en-GB", {
+    dateStyle: "full",
+    timeStyle: "short",
+  });
+
+  return (
+      <Paper p="xs">
+        <Breadcrumbs mb="md">
+          <Group>
+            <IssueIcon type="Epic" /> {issueKey}
+          </Group>
+        </Breadcrumbs>
+        <ColorSchemeToggle
+            size="34px"
+            sx={{
+              position: "absolute",
+              top: 19,
+              right: 50,
+            }}
+        />
+        <Group align="flex-start">
+          <Stack
+              sx={{ flex: 13 }}
+              justify="flex-start">
+            <Title
+                size="h1"
+                sx={{ marginBottom: "-10px" }}
+            >
+              <IssueSummary summary={summary} issueKey={issueKey} onMutate={reloadEpics} />
+            </Title>
+            <ScrollArea.Autosize
+                maxHeight="70vh"
+                mr="xs"
+                sx={{ minWidth: "260px" }}
+            ><Text color="dimmed" mb="sm" size="md" sx={{ marginLeft: "7px" }}>
+              Description
+            </Text>
+              <Group sx={{marginLeft: "10px", marginTop: "-7px", marginBottom: "20px"}}>
+                <Description issueKey={issueKey} description={description} />
+              </Group>
+            </ScrollArea.Autosize>
+          </Stack>
+          <ScrollArea.Autosize
+              maxHeight="70vh"
+              sx={{ minWidth: "260px", flex: 10 }}
+          >
+            <Box>
+              <Group position="right" mb="sm">
+                <DeleteIssue issueKey={issueKey} closeModal={closeModal} />
+              </Group>
+              <Accordion variant="contained" defaultValue="Details" mb={20}>
+                <Accordion.Item value="Details">
+                  <Accordion.Control sx={{ textAlign: "left" }}>
+                    Details
+                  </Accordion.Control>
+                  <Accordion.Panel>
+                    <Stack>
+                      <AssigneeMenu
+                          assignee={assignee as Issue["assignee"]}
+                          issueKey={issueKey}
+                      />
+                      <Group grow>
+                        <Text fz="sm" color="dimmed">
+                          Labels
+                        </Text>
+                        <Labels labels={labels} issueKey={issueKey} onMutate={reloadEpics} />
+                      </Group>
+                      <ReporterMenu issueKey={issueKey} />
+                    </Stack>
+                  </Accordion.Panel>
+                </Accordion.Item>
+              </Accordion>
+              <Text size="xs" color="dimmed">
+                Created{" "}
+                {dateFormat.format(new Date(created))}
+              </Text>
+              <Text size="xs" color="dimmed">
+                Updated{" "}
+                {dateFormat.format(new Date(updated))}
+              </Text>
+            </Box>
+          </ScrollArea.Autosize>
+        </Group>
+      </Paper>
+  )
+}
\ No newline at end of file
diff --git a/src/components/EpicDetailView/helpers/queryFunctions.ts b/src/components/EpicDetailView/helpers/queryFunctions.ts
new file mode 100644
index 00000000..8c047062
--- /dev/null
+++ b/src/components/EpicDetailView/helpers/queryFunctions.ts
@@ -0,0 +1,4 @@
+import { Issue } from "types"
+
+export const editIssue = (issue: Issue, issueIdOrKey: string): Promise<void> =>
+  window.provider.editIssue(issue, issueIdOrKey)
diff --git a/src/components/EpicView/EpicCard.tsx b/src/components/EpicView/EpicCard.tsx
index dc80d299..2346a8bf 100644
--- a/src/components/EpicView/EpicCard.tsx
+++ b/src/components/EpicView/EpicCard.tsx
@@ -3,6 +3,7 @@ import {
     Avatar,
     Badge,
     Box,
+    Paper,
     Center,
     Grid,
     Group,
@@ -17,6 +18,7 @@ import {useState} from "react";
 import {useQueryClient} from "@tanstack/react-query";
 import {IconBolt} from "@tabler/icons";
 import {DeleteButton} from "../BacklogView/Issue/DeleteButton";
+import {EpicDetailView} from "../EpicDetailView/EpicDetailView";
 
 export function EpicCard ({
     issueKey,
@@ -26,6 +28,9 @@ export function EpicCard ({
     epic,
     labels,
     assignee,
+    type,
+    projectId,
+    ...props
 }: Issue) {
     let storyPointsColor: string
     const [opened, setOpened] = useState(false)
@@ -55,9 +60,13 @@ export function EpicCard ({
         default:
             storyPointsColor = "gray.6"
     }
+
     return (
         <>
             <DeleteButton mounted={hovered} issueKey={issueKey} />
+            <Paper
+                onClick={() => setOpened(true)}
+            >
             <Grid
                 columns={100}
                 p={3}
@@ -68,6 +77,7 @@ export function EpicCard ({
                     transition: "background-color .8s ease-out",
                     ":hover": hoverStyles,
                 }}
+                onClick={() => setOpened(true)}
             >
                 <Grid.Col
                     span={8}
@@ -175,6 +185,7 @@ export function EpicCard ({
                     </Box>
                 </Grid.Col>
             </Grid>
+            </Paper>
             <Modal
                 opened={opened}
                 onClose={() => {
@@ -187,7 +198,14 @@ export function EpicCard ({
                 overlayBlur={3}
                 withCloseButton={false}
             >
-              {/* TODO open Epic Detail View */}
+                <EpicDetailView
+                    issueKey={issueKey}
+                    summary={summary}
+                    labels={labels}
+                    assignee={assignee}
+                    closeModal={() => setOpened(false)}
+                    {...props}
+                />
             </Modal>
         </>
     )
diff --git a/src/components/EpicView/EpicView.tsx b/src/components/EpicView/EpicView.tsx
index b6651534..440ba7e5 100644
--- a/src/components/EpicView/EpicView.tsx
+++ b/src/components/EpicView/EpicView.tsx
@@ -9,6 +9,7 @@ import {EpicWrapper} from "./EpicWrapper";
 import {getEpics} from "./helpers/queryFetchers";
 
 
+
 export function EpicView() {
   const navigate = useNavigate()
   const projectName = useCanvasStore((state) => state.selectedProject?.name)
@@ -53,7 +54,7 @@ export function EpicView() {
           )}
       </Center>
   )
-  return (
+    return (
     <Stack sx={{ minHeight: "100%"}}>
       <Stack align="left" spacing={0}>
         <Group>
diff --git a/src/components/EpicView/EpicWrapper.tsx b/src/components/EpicView/EpicWrapper.tsx
index 91bbda03..24f8a482 100644
--- a/src/components/EpicView/EpicWrapper.tsx
+++ b/src/components/EpicView/EpicWrapper.tsx
@@ -11,7 +11,7 @@ export function EpicWrapper({
     return (
         <Stack spacing="sm">
             {epics.map((epic: Issue) => (
-                <EpicCard {...epic} key={epic.issueKey} />
+                  <EpicCard {...epic} key={epic.issueKey} />
             ))}
         </Stack>
     )
diff --git a/types/index.ts b/types/index.ts
index 306764bb..b329a177 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -72,16 +72,7 @@ export interface Issue {
     comments: [
       {
         id: string
-        author: {
-          accountId: string
-          avatarUrls: {
-            "48x48": string
-            "24x24": string
-            "16x16": string
-            "32x32": string
-          }
-          displayName: string
-        }
+        author: User
         body: string
         created: string
         updated: string