Enhancement of Linked Issues Feature in IssueModal Component

backend/src/resolvers.js

@@ -515,7 +515,32 @@ const resolvers = {
       });
     },
     issue: (parent, { input: { id } }, { db }) => {
-      return db.sequelize.models.Issue.findByPk(id);
+      return db.sequelize.models.Issue.findByPk(id, {
+        include: [
+          {
+            model: db.sequelize.models.Issue,
+            as: 'linkedToIssues',
+            through: {
+              attributes: [
+                ['issue_id', 'issueId'],
+                ['linked_issue_id', 'linkedIssueId'],
+                ['link_type', 'linkType'],
+              ],
+            },
+          },
+          {
+            model: db.sequelize.models.Issue,
+            as: 'linkedByIssues',
+            through: {
+              attributes: [
+                ['issue_id', 'issueId'],
+                ['linked_issue_id', 'linkedIssueId'],
+                ['link_type', 'linkType'],
+              ],
+            },
+          },
+        ],
+      });
     },
   },
 };

backend/src/resolvers/issue.js

@@ -1,12 +1,12 @@
 export const issueResolvers = {
   links: async (parent, args, { db }) => {
     return [
-      ...parent.linkedToIssues.map((issue) => ({
+      ...parent.linkedToIssues?.map((issue) => ({
         ...issue.toJSON(),
         linkType: issue.IssueLinks.linkType,
         linkedIssueId: parent.id,
       })),
-      ...parent.linkedByIssues.map((issue) => ({
+      ...parent.linkedByIssues?.map((issue) => ({
         ...issue.toJSON(),
         linkType: issue.IssueLinks.linkTypeInverted,
         linkedIssueId: parent.id,

frontend/components/IssueModal/IssueLinkedIssues.tsx

@@ -1,59 +1,80 @@
 import React from 'react';
 import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid';
 import { priorityToIcon } from '@/components/Icons';
+import { GET_ISSUE_QUERY } from '@/gql/gql-queries-mutations';
+import { useQuery } from '@apollo/client';
+import { groupBy, lowerCase, startCase } from 'lodash';
+import { BsPlus } from 'react-icons/bs';
+import { Issue } from '@/gql/__generated__/graphql';
 
-const IssueLinkedIssues = ({ issueId }: { issueId?: string }) => {
-  // TODO: This is sample data we need to pull from backend
-  // TODO: Restructure data to group by link type and then map over each group
-  const blockedIssues = [
-    {
-      id: 1,
-      key: 'ticket-1',
-      subject: 'PLACEHOLDER: blocked ticket subject',
-      priority: 3,
-      assignee: 'test',
-      status: 'in progress',
-    },
-    {
-      id: 2,
-      key: 'ticket-2',
-      subject: 'PLACEHOLDER: next ticket name',
-      priority: 5,
-      assignee: 'test',
-      status: 'done',
-    },
-  ];
+type Links = {
+  [key: string]: Issue[];
+};
+
+const IssueLinkedIssues = ({
+  issueId,
+  projectKey,
+}: {
+  issueId?: string;
+  projectKey?: string;
+}) => {
+  const { data, error, loading } = useQuery(GET_ISSUE_QUERY, {
+    skip: !issueId,
+    variables: { input: { id: issueId } },
+  });
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error loading linked issues</div>;
+  }
+
+  const links: Links = data?.issue?.links
+    ? groupBy(data.issue.links, 'linkType')
+    : {};
 
   return (
     <>
-      <div className='pb-5 text-2xl'>Linked Issues</div>
-      {blockedIssues.map(({ id, key, subject, priority, status }) => (
-        <div
-          key={id}
-          className='group flex overflow-hidden rounded border border-primary/10 bg-surface-overlay px-2 shadow-sm hover:cursor-pointer hover:bg-surface-overlay-hovered'
-        >
-          <div className='relative m-1 flex w-full items-center gap-x-1 p-1'>
-            <div>
-              <CheckIcon className='h-6 w-6 text-blue-500' />
-            </div>
-            <div className='text-link-active hover:underline'>
-              {key}
-            </div>
-            <div className='ml-4 shrink grow basis-0'>
-              <div className='flex'>
-                <div className='grow hover:underline'>
-                  {subject}
+      <div className='flex items-center justify-between align-middle'>
+        <div className='text-2xl'>Linked Issues</div>
+        <div className='rounded-md hover:cursor-pointer hover:bg-surface-overlay-hovered'>
+          <BsPlus className='h-6 w-6' />
+        </div>
+      </div>
+      {Object.keys(links).map((linkType) => (
+        <div key={linkType}>
+          <div className='pb-1 pt-2 text-lg opacity-80'>
+            {startCase(lowerCase(linkType))}
+          </div>
+          {links[linkType].map(({ id, title, priority, status }) => (
+            <div
+              key={id}
+              className='group flex overflow-hidden rounded border border-primary/10 bg-surface-overlay px-2 shadow-sm hover:cursor-pointer hover:bg-surface-overlay-hovered'
+            >
+              <div className='relative m-1 flex w-full items-center gap-x-1 p-1'>
+                <div>
+                  <CheckIcon className='h-6 w-6 text-blue-500' />
+                </div>
+                <div className='text-link-active hover:underline'>
+                  {projectKey}-{id}
+                </div>
+                <div className='ml-4 shrink grow basis-0'>
+                  <div className='flex'>
+                    <div className='grow hover:underline'>{title}</div>
+                  </div>
+                </div>
+                <div className='flex'>{priorityToIcon(Number(priority))}</div>
+                <div className='flex items-center justify-center rounded-md bg-blue-500 px-2 text-primary-inverted'>
+                  {status?.name}
+                </div>
+                <div className='right-0 opacity-0 hover:cursor-pointer hover:rounded-md hover:bg-surface-overlay group-hover:opacity-100'>
+                  <XMarkIcon className='h-6 w-6' />
                 </div>
               </div>
             </div>
-            <div className='flex'>{priorityToIcon(priority)}</div>
-            <div className='flex items-center justify-center rounded-md bg-blue-500 px-2 text-primary-inverted'>
-              {status}
-            </div>
-            <div className='right-0 opacity-0 hover:cursor-pointer hover:rounded-md hover:bg-surface-overlay group-hover:opacity-100'>
-              <XMarkIcon className='h-6 w-6' />
-            </div>
-          </div>
+          ))}
         </div>
       ))}
     </>

frontend/components/IssueModal/IssueOverview.tsx

@@ -44,7 +44,10 @@ const IssueOverview = ({
                   <IssueDescription issueId={issueId} />
                 </div>
                 <div>
-                  <IssueLinkedIssues issueId={issueId} />
+                  <IssueLinkedIssues
+                    projectKey={projectKey}
+                    issueId={issueId}
+                  />
                 </div>
                 <div className='pt-5'>
                   <IssueComments issueId={issueId} />

frontend/gql/gql-queries-mutations.ts

@@ -121,6 +121,11 @@ export const GET_ISSUE_QUERY = gql(/* GraphQL */ `
   query GetIssue($input: QueryIssueInput) {
     issue(input: $input) {
       ...IssueFields
+      links {
+        ...IssueFields
+        linkType
+        linkedIssueId
+      }
     }
   }
 `);