Support start and due date in epic detail view

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

@@ -793,10 +793,10 @@ export class JiraCloudProvider implements IProvider {
               ...(labels && {
                 labels,
               }),
-              ...(offsetStartDate && {
+              ...(offsetStartDate !== undefined && {
                 [this.customFields.get("Start date")!]: offsetStartDate,
               }),
-              ...(offsetDueDate && {
+              ...(offsetDueDate !== undefined && {
                 [this.customFields.get("Due date")!]: offsetDueDate,
               }),
               ...(sprint && {
@@ -850,24 +850,31 @@ export class JiraCloudProvider implements IProvider {
         .get(`search?jql=issuetype = Epic AND project = ${projectIdOrKey}`)
         .then(async (response) => {
           const epics: Promise<Issue[]> = Promise.all(
-            response.data.issues.map(async (element: JiraIssue) => ({
-              issueKey: element.key,
-              summary: element.fields.summary,
-              labels: element.fields.labels,
-              assignee: {
-                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,
-            }))
+            response.data.issues.map(async (element: JiraIssue) => {
+              const startDate = element.fields[this.customFields.get("Start date")!] as string;
+              const dueDate = element.fields[this.customFields.get("Due date")!] as string;
+
+              return {
+                issueKey: element.key,
+                summary: element.fields.summary,
+                labels: element.fields.labels,
+                assignee: {
+                  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,
+                startDate: startDate ? new Date(startDate) : undefined,
+                dueDate: dueDate ? new Date(dueDate) : undefined,
+              }
+            })
           )
           resolve(epics)
         })

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

@@ -579,15 +579,31 @@ export class JiraServerProvider implements IProvider {
         .get(`search?jql=issuetype = Epic AND project = ${projectIdOrKey}`)
         .then(async (response) => {
           const epics: Promise<Issue[]> = Promise.all(
-            response.data.issues.map(async (element: JiraIssue) => ({
-              issueKey: element.key,
-              summary: element.fields.summary,
-              labels: element.fields.labels,
-              assignee: {
-                displayName: element.fields.assignee?.displayName,
-                avatarUrls: element.fields.assignee?.avatarUrls,
-              },
-            }))
+            response.data.issues.map(async (element: JiraIssue) => {
+              const startDate = element.fields[this.customFields.get("Start date")!] as string;
+              const dueDate = element.fields[this.customFields.get("Due date")!] as string;
+
+              return {
+                issueKey: element.key,
+                summary: element.fields.summary,
+                labels: element.fields.labels,
+                assignee: {
+                  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,
+                startDate: startDate ? new Date(startDate) : undefined,
+                dueDate: dueDate ? new Date(dueDate) : undefined,
+              }
+            })
           )
           resolve(epics)
         })
@@ -878,10 +894,10 @@ export class JiraServerProvider implements IProvider {
               ...(labels && {
                 labels,
               }),
-              ...(offsetStartDate && {
+              ...(offsetStartDate !== undefined && {
                 [this.customFields.get("Start date")!]: offsetStartDate,
               }),
-              ...(offsetDueDate && {
+              ...(offsetDueDate !== undefined && {
                 [this.customFields.get("Due date")!]: offsetDueDate,
               }),
               ...(sprint && {

src/components/EpicDetailView/Components/InlineDatePicker.tsx

@@ -0,0 +1,19 @@
+import { UseMutationResult } from "@tanstack/react-query"
+import { DatePicker } from "@mantine/dates";
+import { DatePickerProps } from "@mantine/dates/lib/components/DatePicker/DatePicker";
+
+export function InlineDatePicker(props: DatePickerProps & {
+  date: Date | undefined
+  mutation: UseMutationResult<unknown, unknown, Date | null>
+}) {
+  return (
+    <DatePicker
+      value={props.date}
+      withinPortal
+      clearable
+      variant="filled"
+      onChange={props.mutation.mutate}
+      {...props}
+    />
+  )
+}

src/components/EpicDetailView/EpicDetailView.tsx

@@ -10,15 +10,18 @@ import {
   Title,
 } from "@mantine/core"
 import { Issue, User } from "types"
-import { useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { showNotification } from "@mantine/notifications";
 import { AssigneeMenu } from "../DetailView/Components/AssigneeMenu"
 import { Description } from "../DetailView/Components/Description"
+import { InlineDatePicker } from "./Components/InlineDatePicker"
 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"
+import { editIssue } from "./helpers/queryFunctions";
 
 export function EpicDetailView({
    issueKey,
@@ -29,6 +32,8 @@ export function EpicDetailView({
    created,
    updated,
    closeModal,
+   startDate,
+   dueDate,
  }: {
   issueKey: string
   summary: string
@@ -38,10 +43,29 @@ export function EpicDetailView({
   created: string
   updated: string
   closeModal: () => void
+  startDate: Date
+  dueDate: Date
 }) {
   const queryClient = useQueryClient()
   const reloadEpics = () => queryClient.invalidateQueries({ queryKey: ["epics"] });
 
+  const useDateMutation = (property: string) => useMutation({
+    mutationFn: async (currentDate: Date | null) =>
+      editIssue({ [property]: currentDate } as unknown as Issue, issueKey).then(reloadEpics),
+    onError: () => {
+      showNotification({
+        message: `An error occurred while modifing the date 😢`,
+        color: "red",
+      })
+    },
+    onSuccess: () => {
+      showNotification({
+        message: `The date for epic ${issueKey} has been modified!`,
+        color: "green",
+      })
+    },
+  })
+
   const dateFormat = new Intl.DateTimeFormat("en-GB", {
     dateStyle: "full",
     timeStyle: "short",
@@ -109,6 +133,28 @@ export function EpicDetailView({
                         </Text>
                         <Labels labels={labels} issueKey={issueKey} onMutate={reloadEpics} />
                       </Group>
+                      <Group grow>
+                        <Text fz="sm" color="dimmed">
+                          Start date
+                        </Text>
+                        <InlineDatePicker
+                          date={startDate}
+                          mutation={useDateMutation('startDate')}
+                          placeholder="Pick start date"
+                          {...(dueDate && { maxDate: dueDate })}
+                        />
+                      </Group>
+                      <Group grow>
+                        <Text fz="sm" color="dimmed">
+                          Due date
+                        </Text>
+                        <InlineDatePicker
+                          date={dueDate}
+                          mutation={useDateMutation('dueDate')}
+                          placeholder="Pick due date"
+                          {...(startDate && { minDate: startDate })}
+                        />
+                      </Group>
                       <ReporterMenu issueKey={issueKey} />
                     </Stack>
                   </Accordion.Panel>