feat: issue link to create relation between issues (#2171)

* feat: issue linking

* fix: search params to filter out selected issue

* style: changed icons

* fix: build error on web-view

* fix: build error

* fix: build error on web-view component

web/components/issues/sidebar-select/blocked.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 
 import { useRouter } from "next/router";
-
 // react-hook-form
 import { UseFormWatch } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// services
+import issuesService from "services/issues.service";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // icons
@@ -29,10 +31,11 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
 }) => {
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
+  const { user } = useUser();
   const { setToastAlert } = useToast();
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const handleClose = () => {
     setIsBlockedModalOpen(false);
@@ -62,21 +65,39 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
       },
     }));
 
-    const newBlocked = [...watch("blocked_issues"), ...selectedIssues];
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            relation_type: "blocked_by" as const,
+            related_issue_detail: issue.blocked_issue_detail,
+            related_issue: issue.blocked_issue_detail.id,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          related_issues: [
+            ...watch("related_issues")?.filter((i) => i.relation_type !== "blocked_by"),
+            ...response,
+          ],
+        });
+      });
 
-    submitChanges({
-      blocked_issues: newBlocked,
-      blocks_list: newBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
-    });
     handleClose();
   };
 
+  const blockedByIssue = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by");
+
   return (
     <>
       <ExistingIssuesListModal
         isOpen={isBlockedModalOpen}
         handleClose={() => setIsBlockedModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
@@ -87,33 +108,42 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         </div>
         <div className="space-y-1 sm:basis-1/2">
           <div className="flex flex-wrap gap-1">
-            {watch("blocked_issues") && watch("blocked_issues").length > 0
-              ? watch("blocked_issues").map((issue) => (
+            {blockedByIssue && blockedByIssue.length > 0
+              ? blockedByIssue.map((relation) => (
                   <div
-                    key={issue.blocked_issue_detail?.id}
+                    key={relation.related_issue_detail?.id}
                     className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
                   >
                     <a
-                      href={`/${workspaceSlug}/projects/${issue.blocked_issue_detail?.project_detail.id}/issues/${issue.blocked_issue_detail?.id}`}
+                      href={`/${workspaceSlug}/projects/${relation.related_issue_detail?.project_detail.id}/issues/${relation.related_issue_detail?.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
                       <BlockedIcon height={10} width={10} />
-                      {`${issue.blocked_issue_detail?.project_detail.identifier}-${issue.blocked_issue_detail?.sequence_id}`}
+                      {`${relation.related_issue_detail?.project_detail.identifier}-${relation.related_issue_detail?.sequence_id}`}
                     </a>
                     <button
                       type="button"
                       className="opacity-0 duration-300 group-hover:opacity-100"
                       onClick={() => {
-                        const updatedBlocked = watch("blocked_issues").filter(
-                          (i) => i.blocked_issue_detail?.id !== issue.blocked_issue_detail?.id
+                        const updatedRelations = watch("related_issues")?.filter(
+                          (i) => i.id !== relation.id
                         );
 
                         submitChanges({
-                          blocked_issues: updatedBlocked,
-                          blocks_list: updatedBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
+                          related_issues: updatedRelations,
                         });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
                       }}
                     >
                       <XMarkIcon className="h-2 w-2" />

web/components/issues/sidebar-select/blocker.tsx

@@ -6,8 +6,11 @@ import { useRouter } from "next/router";
 import { UseFormWatch } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
 // components
 import { ExistingIssuesListModal } from "components/core";
+// services
+import issuesService from "services/issues.service";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon } from "components/icons";
@@ -29,15 +32,19 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
 }) => {
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
+  const { user } = useUser();
   const { setToastAlert } = useToast();
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const handleClose = () => {
     setIsBlockerModalOpen(false);
   };
 
+  const blockerIssue =
+    watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
+
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
       setToastAlert({
@@ -62,12 +69,33 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
       },
     }));
 
-    const newBlockers = [...watch("blocker_issues"), ...selectedIssues];
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issue.blocker_issue_detail.id,
+            relation_type: "blocked_by" as const,
+            related_issue: issueId as string,
+            related_issue_detail: issue.blocker_issue_detail,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          issue_relations: [
+            ...blockerIssue,
+            ...(response ?? []).map((i: any) => ({
+              id: i.id,
+              relation_type: i.relation_type,
+              issue_detail: i.related_issue_detail,
+              issue: i.related_issue,
+            })),
+          ],
+        });
+      });
 
-    submitChanges({
-      blocker_issues: newBlockers,
-      blockers_list: newBlockers.map((i) => i.blocker_issue_detail?.id ?? ""),
-    });
     handleClose();
   };
 
@@ -76,7 +104,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
       <ExistingIssuesListModal
         isOpen={isBlockerModalOpen}
         handleClose={() => setIsBlockerModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
@@ -87,35 +115,42 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         </div>
         <div className="space-y-1 sm:basis-1/2">
           <div className="flex flex-wrap gap-1">
-            {watch("blocker_issues") && watch("blocker_issues").length > 0
-              ? watch("blocker_issues").map((issue) => (
+            {blockerIssue && blockerIssue.length > 0
+              ? blockerIssue.map((relation) => (
                   <div
-                    key={issue.blocker_issue_detail?.id}
+                    key={relation.issue_detail?.id}
                     className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
                   >
                     <a
-                      href={`/${workspaceSlug}/projects/${issue.blocker_issue_detail?.project_detail.id}/issues/${issue.blocker_issue_detail?.id}`}
+                      href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
                       <BlockerIcon height={10} width={10} />
-                      {`${issue.blocker_issue_detail?.project_detail.identifier}-${issue.blocker_issue_detail?.sequence_id}`}
+                      {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
                     </a>
                     <button
                       type="button"
                       className="opacity-0 duration-300 group-hover:opacity-100"
                       onClick={() => {
-                        const updatedBlockers = watch("blocker_issues").filter(
-                          (i) => i.blocker_issue_detail?.id !== issue.blocker_issue_detail?.id
+                        const updatedBlockers = blockerIssue.filter(
+                          (i) => i.issue_detail?.id !== relation.issue_detail?.id
                         );
 
                         submitChanges({
-                          blocker_issues: updatedBlockers,
-                          blockers_list: updatedBlockers.map(
-                            (i) => i.blocker_issue_detail?.id ?? ""
-                          ),
+                          issue_relations: updatedBlockers,
                         });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          relation.issue_detail?.id as string,
+                          relation.id,
+                          user
+                        );
                       }}
                     >
                       <XMarkIcon className="h-2 w-2" />

web/components/issues/sidebar-select/duplicate.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// icons
+import { X, CopyPlus } from "lucide-react";
+// components
+import { BlockerIcon } from "components/icons";
+import { ExistingIssuesListModal } from "components/core";
+// services
+import issuesService from "services/issues.service";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
+  const { issueId, submitChanges, watch, disabled = false } = props;
+
+  const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsDuplicateModalOpen(false);
+  };
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one issue.",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            related_issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "duplicate" as const,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          related_issues: [...watch("related_issues"), ...(response ?? [])],
+        });
+      });
+
+    handleClose();
+  };
+
+  const duplicateIssuesRelation = [
+    ...(watch("related_issues")?.filter((i) => i.relation_type === "duplicate") ?? []),
+    ...(watch("issue_relations") ?? [])
+      ?.filter((i) => i.relation_type === "duplicate")
+      .map((i) => ({
+        ...i,
+        related_issue_detail: i.issue_detail,
+        related_issue: i.issue_detail?.id,
+      })),
+  ];
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isDuplicateModalOpen}
+        handleClose={() => setIsDuplicateModalOpen(false)}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <CopyPlus className="h-4 w-4 flex-shrink-0" />
+          <p>Duplicate</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {duplicateIssuesRelation && duplicateIssuesRelation.length > 0
+              ? duplicateIssuesRelation.map((relation) => (
+                  <div
+                    key={relation.related_issue_detail?.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.related_issue_detail?.project_detail.id}/issues/${relation.related_issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <BlockerIcon height={10} width={10} />
+                      {`${relation.related_issue_detail?.project_detail.identifier}-${relation.related_issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        const updatedBlockers = duplicateIssuesRelation.filter(
+                          (i) => i.related_issue_detail?.id !== relation.related_issue_detail?.id
+                        );
+
+                        submitChanges({
+                          related_issues: updatedBlockers,
+                        });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
+                      }}
+                    >
+                      <X className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsDuplicateModalOpen(true)}
+            disabled={disabled}
+          >
+            Select issues
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};

web/components/issues/sidebar-select/index.ts

@@ -8,3 +8,5 @@ export * from "./module";
 export * from "./parent";
 export * from "./priority";
 export * from "./state";
+export * from "./duplicate";
+export * from "./relates-to";

web/components/issues/sidebar-select/relates-to.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// icons
+import { X } from "lucide-react";
+import { BlockerIcon, RelatedIcon } from "components/icons";
+// components
+import { ExistingIssuesListModal } from "components/core";
+// services
+import issuesService from "services/issues.service";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+export const SidebarRelatesSelect: React.FC<Props> = (props) => {
+  const { issueId, submitChanges, watch, disabled = false } = props;
+
+  const [isRelatesToModalOpen, setIsRelatesToModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsRelatesToModalOpen(false);
+  };
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one issue.",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            related_issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "relates_to" as const,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          related_issues: [...watch("related_issues"), ...(response ?? [])],
+        });
+      });
+
+    handleClose();
+  };
+
+  const relatedToIssueRelation = [
+    ...(watch("related_issues")?.filter((i) => i.relation_type === "relates_to") ?? []),
+    ...(watch("issue_relations") ?? [])
+      ?.filter((i) => i.relation_type === "relates_to")
+      .map((i) => ({
+        ...i,
+        related_issue_detail: i.issue_detail,
+        related_issue: i.issue_detail?.id,
+      })),
+  ];
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isRelatesToModalOpen}
+        handleClose={() => setIsRelatesToModalOpen(false)}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <RelatedIcon className="h-4 w-4 flex-shrink-0" />
+          <p>Relates to</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {relatedToIssueRelation && relatedToIssueRelation.length > 0
+              ? relatedToIssueRelation.map((relation) => (
+                  <div
+                    key={relation.related_issue_detail?.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.related_issue_detail?.project_detail.id}/issues/${relation.related_issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <BlockerIcon height={10} width={10} />
+                      {`${relation.related_issue_detail?.project_detail.identifier}-${relation.related_issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        const updatedBlockers = relatedToIssueRelation.filter(
+                          (i) => i.related_issue_detail?.id !== relation.related_issue_detail?.id
+                        );
+
+                        submitChanges({
+                          related_issues: updatedBlockers,
+                        });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
+                      }}
+                    >
+                      <X className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsRelatesToModalOpen(true)}
+            disabled={disabled}
+          >
+            Select issues
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};

web/components/issues/sidebar.tsx

@@ -30,6 +30,8 @@ import {
   SidebarStateSelect,
   SidebarEstimateSelect,
   SidebarLabelSelect,
+  SidebarDuplicateSelect,
+  SidebarRelatesSelect,
 } from "components/issues";
 // ui
 import { CustomDatePicker, Icon } from "components/ui";
@@ -76,6 +78,8 @@ type Props = {
     | "delete"
     | "all"
     | "subscribe"
+    | "duplicate"
+    | "relates_to"
   )[];
   uneditable?: boolean;
 };
@@ -464,7 +468,19 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
                   <SidebarBlockerSelect
                     issueId={issueId as string}
-                    submitChanges={submitChanges}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
                   />
@@ -472,7 +488,59 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
                   <SidebarBlockedSelect
                     issueId={issueId as string}
-                    submitChanges={submitChanges}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
+                    watch={watchIssue}
+                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
+                  <SidebarDuplicateSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
+                    watch={watchIssue}
+                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
+                  <SidebarRelatesSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
                   />