Add save and close buttons in split view for each issue detail (#142)

MaibornWolff · Feb 27, 2024 · 0d7f1a6 · 0d7f1a6
1 parent f122c4b
commit 0d7f1a6
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 16 deletions.
diff --git a/src/components/DetailView/Components/SplitIssue/SplitIssueCreate.tsx b/src/components/DetailView/Components/SplitIssue/SplitIssueCreate.tsx
@@ -26,8 +26,10 @@ import { createIssue, getAssignableUsersByProject, getCurrentUser } from "../../
 
 export function SplitIssueCreate({
   onCreate,
+  onCancel,
 }: {
   onCreate: (issueKey: string) => void,
+  onCancel: () => void,
 }) {
   const queryClient = useQueryClient();
 
@@ -168,12 +170,7 @@ export function SplitIssueCreate({
             <LabelsSelect form={form} />
             <AttachmentFileInput form={form} />
             <Group justify="right">
-              <Button
-                variant="light"
-                color="gray"
-              >
-                Cancel
-              </Button>
+              <Button variant="light" color="gray" onClick={onCancel}>Cancel</Button>
               <Button type="submit">Create</Button>
             </Group>
           </Stack>

diff --git a/src/components/DetailView/Components/SplitIssue/SplitIssueDetails.tsx b/src/components/DetailView/Components/SplitIssue/SplitIssueDetails.tsx
@@ -1,4 +1,5 @@
-import { Accordion, Box, Breadcrumbs, Group, Paper, ScrollArea, Stack, Text, Title } from "@mantine/core";
+import { Accordion, Box, Breadcrumbs, Button, Group, Paper, ScrollArea, Stack, Text, Title } from "@mantine/core";
+import { IconDeviceFloppy, IconX } from "@tabler/icons-react";
 import { Issue } from "../../../../../types";
 import { EditableEpic } from "../EditableEpic";
 import { IssueIcon } from "../../../BacklogView/Issue/IssueIcon";
@@ -26,6 +27,7 @@ export function SplitIssueDetails(
     labels,
     assignee,
     description,
+    originalIssueDescription,
     subtasks,
     created,
     updated,
@@ -35,10 +37,15 @@ export function SplitIssueDetails(
     sprint,
     attachments,
     onIssueSelected,
+    onIssueClosed,
+    onIssueSaved,
     onIssueDescriptionChanged,
     selectedSplitIssues,
   } : Issue & {
+    originalIssueDescription: string,
     onIssueSelected: (issueKey: string) => void,
+    onIssueClosed: () => void,
+    onIssueSaved: () => void,
     onIssueDescriptionChanged: (newDescription: string) => void,
     selectedSplitIssues: string[],
   },
@@ -63,7 +70,7 @@ export function SplitIssueDetails(
         </Title>
         <ScrollArea.Autosize
           mr="xs"
-          style={{ maxHeight: "70vh" }}
+          style={{ maxHeight: "65vh" }}
           offsetScrollbars
         >
           <Text c="dimmed" mb="sm">
@@ -150,6 +157,19 @@ export function SplitIssueDetails(
           <Attachments issueKey={issueKey} attachments={attachments} />
           <CommentSection issueKey={issueKey} comment={comment} />
         </ScrollArea.Autosize>
+        <Group style={{ position: "absolute", right: "50px", bottom: "15px" }}>
+          <Button
+            c="div"
+            color="primaryBlue"
+            disabled={originalIssueDescription === description}
+            onClick={onIssueSaved}
+          >
+            <IconDeviceFloppy />
+          </Button>
+          <Button c="div" variant="subtle" color="red" onClick={onIssueClosed}>
+            <IconX />
+          </Button>
+        </Group>
       </Stack>
     </Paper>
   );

diff --git a/src/components/DetailView/Components/SplitIssue/SplitView.tsx b/src/components/DetailView/Components/SplitIssue/SplitView.tsx
@@ -16,13 +16,15 @@ export function SplitView({
   onIssuesSwapped,
   opened,
   onClose,
+  onIssueClose,
   onCreate,
   selectedSplitIssues,
 }: {
   onIssueSelected: (issueKey: string) => void,
   onIssuesSwapped: (firstIssueKey: string, secondIssueKey: string) => void,
   opened: boolean,
   onClose: () => void,
+  onIssueClose: (issueKey: string) => void,
   onCreate: (newIssueKey: string, previousNewIssueIdentifier: string) => void,
   selectedSplitIssues: string[],
 }) {
@@ -75,13 +77,32 @@ export function SplitView({
     },
   });
 
+  const mutateDescription = useMutation({
+    mutationFn: (issueKey: string) => editIssue(
+      { description: modifiedDescriptions[issueKey] } as Issue,
+      issueKey,
+    ),
+    onError: () => {
+      showNotification({
+        message: "An error occurred while modifing the Description 😢",
+        color: "red",
+      });
+    },
+    onSuccess: (_, issueKey) => {
+      showNotification({
+        message: `Description of the issue ${issueKey} has been modified!`,
+        color: "green",
+      });
+      setModifiedDescription(issueKey, undefined);
+    },
+  });
+
   function getContentForSplitIssue(issueKey: string) {
     if (isNewIssueIdentifier(issueKey)) {
       return (
         <SplitIssueCreate
-          onCreate={(newIssueKey: string) => {
-            onCreate(newIssueKey, issueKey);
-          }}
+          onCreate={(newIssueKey: string) => onCreate(newIssueKey, issueKey)}
+          onCancel={() => onIssueClose(issueKey)}
         />
       );
     }
@@ -91,7 +112,10 @@ export function SplitView({
         <SplitIssueDetails
           {...issues[issueKey]}
           description={modifiedDescriptions[issueKey] ?? issues[issueKey].description}
+          originalIssueDescription={issues[issueKey].description}
           onIssueSelected={onIssueSelected}
+          onIssueClosed={() => onIssueClose(issueKey)}
+          onIssueSaved={() => mutateDescription.mutate(issueKey)}
           onIssueDescriptionChanged={(newDescription) => {
             setModifiedDescription(
               issueKey,

diff --git a/src/components/DetailView/DetailView.tsx b/src/components/DetailView/DetailView.tsx
@@ -44,9 +44,23 @@ export function DetailView({
 }: Issue & { closeModal: () => void }) {
   const [createSplitViewOpened, setCreateSplitViewOpened] = useState(false);
   const [selectedSplitIssues, setSelectedSplitIssues] = useState<string[]>([issueKey]);
+
+  function closeSplitView() {
+    setSelectedSplitIssues(() => [issueKey]);
+    setCreateSplitViewOpened(false);
+    closeModal();
+  }
+
   const addSelectedIssue = (newIssue: string) => {
     setSelectedSplitIssues((state) => [...state, newIssue]);
   };
+  const removeSelectedIssue = (issue: string) => {
+    const newSelectedSplitIssues = selectedSplitIssues.filter((x) => x !== issue);
+    setSelectedSplitIssues(newSelectedSplitIssues);
+    if (newSelectedSplitIssues.length === 0) {
+      closeSplitView();
+    }
+  };
   const replaceSelectedIssue = (oldIssue: string, newIssue: string) => {
     setSelectedSplitIssues(selectedSplitIssues.with(selectedSplitIssues.indexOf(oldIssue), newIssue));
   };
@@ -143,11 +157,8 @@ export function DetailView({
 
               <SplitView
                 opened={createSplitViewOpened}
-                onClose={() => {
-                  setSelectedSplitIssues(() => [issueKey]);
-                  setCreateSplitViewOpened(false);
-                  closeModal();
-                }}
+                onClose={() => closeSplitView()}
+                onIssueClose={removeSelectedIssue}
                 onCreate={(newIssueKey: string, previousNewIssueIdentifier: string) => {
                   replaceSelectedIssue(previousNewIssueIdentifier, newIssueKey);
                 }}