Add status select in epic detail view (#83)

Co-authored-by: Julian Rupprecht <rupprecht.julian@web.de>

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

@@ -868,6 +868,8 @@ export class JiraCloudProvider implements IProvider {
               summary: element.fields.summary,
               epic: element.fields.epic,
               labels: element.fields.labels,
+              status: element.fields.status.name,
+              type: element.fields.issuetype.name,
               description: element.fields.description.content[0]?.content[0]?.text,
               assignee: {
                 displayName: element.fields.assignee?.displayName,

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

@@ -586,6 +586,9 @@ export class JiraServerProvider implements IProvider {
               issueKey: element.key,
               summary: element.fields.summary,
               labels: element.fields.labels,
+              projectId: element.fields.project.id,
+              status: element.fields.status.name,
+              type: element.fields.issuetype.name,
               created: element.fields.created,
               updated: element.fields.updated,
               description: element.fields.description.content,
@@ -603,7 +606,6 @@ export class JiraServerProvider implements IProvider {
                   updated: commentElement.updated,
                 })),
               },
-              projectId: element.fields.project.id,
               sprint: element.fields.sprint,
               attachments: element.fields.attachment,
             }))

src/components/EpicDetailView/EpicDetailView.tsx

@@ -11,9 +11,13 @@ import {
   Stack,
   Text,
   Title,
+  Menu,
+  Button,
+  createStyles,
 } from "@mantine/core"
+import { IconCaretDown } from "@tabler/icons"
 import { Issue, User } from "types"
-import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useEffect, useState } from "react"
 import { AssigneeMenu } from "../DetailView/Components/AssigneeMenu"
 import { Description } from "../DetailView/Components/Description"
@@ -34,6 +38,7 @@ import {
 } from "./helpers/storyPointsHelper"
 import { StoryPointsHoverCard } from "./Components/StoryPointsHoverCard";
 import { CommentSection } from "../DetailView/Components/CommentSection";
+import { getIssueTypes, setStatus } from "../CreateIssue/queryFunctions";
 
 export function EpicDetailView({
   issueKey,
@@ -44,7 +49,10 @@ export function EpicDetailView({
   created,
   updated,
   comment,
+  status,
   closeModal,
+  projectId,
+  type,
 }: {
   issueKey: string
   summary: string
@@ -64,10 +72,39 @@ export function EpicDetailView({
       }
     ]
   }
+  status: string
+  projectId: string
+  type: string
   closeModal: () => void
 }) {
   const queryClient = useQueryClient()
-  const reloadEpics = () => queryClient.invalidateQueries({ queryKey: ["epics"] })
+  const reloadEpics = () => {
+    queryClient.invalidateQueries({ queryKey: ["issues"] })
+    queryClient.invalidateQueries({ queryKey: ["epics"] })
+  };
+
+  const [defaultStatus, setDefaultStatus] = useState(status)
+  const statusMutation = useMutation({
+    mutationFn: (targetStatus: string) => setStatus(issueKey, targetStatus),
+    onSuccess: reloadEpics,
+  })
+
+  const { data: issueTypes } = useQuery({
+    queryKey: ["issueTypes", projectId],
+    queryFn: () => getIssueTypes(projectId),
+    enabled: !!projectId,
+  })
+
+  const useStyles = createStyles(
+    (theme, { isOpened }: { isOpened: boolean }) => ({
+      icon: {
+        transition: "transform 150ms ease",
+        transform: isOpened ? "rotate(180deg)" : "rotate(0deg)",
+      },
+    })
+  )
+  const [opened, setOpened] = useState(false)
+  const { classes } = useStyles({ isOpened: opened })
 
   const dateFormat = new Intl.DateTimeFormat("en-GB", {
     dateStyle: "full",
@@ -222,7 +259,38 @@ export function EpicDetailView({
           sx={{ minWidth: "260px", flex: 10 }}
         >
           <Box>
-            <Group position="right" mb="sm">
+            <Group position="apart" mb="sm">
+                <Menu
+                  shadow="md"
+                  onOpen={() => setOpened(true)}
+                  onClose={() => setOpened(false)}
+                >
+                  <Menu.Target>
+                    <Button
+                      rightIcon={<IconCaretDown className={classes.icon} />}
+                    >
+                      {defaultStatus}
+                    </Button>
+                  </Menu.Target>
+
+                  <Menu.Dropdown>
+                    <Menu.Label>Status</Menu.Label>
+                    {issueTypes &&
+                      issueTypes
+                        .find((issueType) => issueType.name === type)
+                        ?.statuses?.map((issueStatus) => (
+                        <Menu.Item
+                          key={issueStatus.id}
+                          onClick={() => {
+                            statusMutation.mutate(issueStatus.name)
+                            setDefaultStatus(issueStatus.name)
+                          }}
+                        >
+                          {issueStatus.name}
+                        </Menu.Item>
+                      ))}
+                  </Menu.Dropdown>
+                </Menu>
               <DeleteIssue issueKey={issueKey} closeModal={closeModal} />
             </Group>
             <Accordion variant="contained" defaultValue="Details" mb={20}>

src/components/EpicView/EpicCard.tsx

@@ -197,6 +197,9 @@ export function EpicCard ({
                     issueKey={issueKey}
                     summary={summary}
                     labels={labels}
+                    status={status}
+                    type={type}
+                    projectId={projectId}
                     assignee={assignee}
                     closeModal={() => setOpened(false)}
                     {...props}