fix: handle cross project issues in the sub-issues. (#2357)

web/components/issues/sub-issues/issue.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 // next imports
-import Link from "next/link";
 import { useRouter } from "next/router";
+// swr
+import { mutate } from "swr";
 // lucide icons
 import {
   ChevronDown,
@@ -13,6 +14,7 @@ import {
   Loader,
 } from "lucide-react";
 // components
+import { IssuePeekOverview } from "components/issues/peek-overview";
 import { SubIssuesRootList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
@@ -20,6 +22,8 @@ import { Tooltip, CustomMenu } from "components/ui";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
 import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
 
 export interface ISubIssues {
   workspaceSlug: string;
@@ -38,7 +42,6 @@ export interface ISubIssues {
     issueId: string,
     issue?: IIssue | null
   ) => void;
-  setPeekParentId: (id: string) => void;
 }
 
 export const SubIssues: React.FC<ISubIssues> = ({
@@ -54,14 +57,12 @@ export const SubIssues: React.FC<ISubIssues> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
-  setPeekParentId,
 }) => {
   const router = useRouter();
+  const { query } = router;
+  const { peekIssue } = query as { peekIssue: string };
 
   const openPeekOverview = (issue_id: string) => {
-    const { query } = router;
-
-    setPeekParentId(parentIssue?.id);
     router.push({
       pathname: router.pathname,
       query: { ...query, peekIssue: issue_id },
@@ -199,7 +200,17 @@ export const SubIssues: React.FC<ISubIssues> = ({
           handleIssuesLoader={handleIssuesLoader}
           copyText={copyText}
           handleIssueCrudOperation={handleIssueCrudOperation}
-          setPeekParentId={setPeekParentId}
+        />
+      )}
+
+      {peekIssue && peekIssue === issue?.id && (
+        <IssuePeekOverview
+          handleMutation={() =>
+            parentIssue && parentIssue?.id && mutate(SUB_ISSUES(parentIssue?.id))
+          }
+          projectId={issue?.project ?? ""}
+          workspaceSlug={workspaceSlug ?? ""}
+          readOnly={!editable}
         />
       )}
     </div>

web/components/issues/sub-issues/issues-list.tsx

@@ -27,7 +27,6 @@ export interface ISubIssuesRootList {
     issueId: string,
     issue?: IIssue | null
   ) => void;
-  setPeekParentId: (id: string) => void;
 }
 
 export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
@@ -42,7 +41,6 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
-  setPeekParentId,
 }) => {
   const { data: issues, isLoading } = useSWR(
     workspaceSlug && projectId && parentIssue && parentIssue?.id
@@ -83,7 +81,6 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
             handleIssuesLoader={handleIssuesLoader}
             copyText={copyText}
             handleIssueCrudOperation={handleIssueCrudOperation}
-            setPeekParentId={setPeekParentId}
           />
         ))}
 

web/components/issues/sub-issues/root.tsx

@@ -10,7 +10,6 @@ import { ExistingIssuesListModal } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { SubIssuesRootList } from "./issues-list";
 import { ProgressBar } from "./progressbar";
-import { IssuePeekOverview } from "components/issues/peek-overview";
 // ui
 import { CustomMenu } from "components/ui";
 // hooks
@@ -60,8 +59,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
       : null
   );
 
-  const [peekParentId, setPeekParentId] = React.useState<string | null>("");
-
   const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
     visibility: [parentIssue?.id],
     delete: [],
@@ -237,7 +234,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     handleIssuesLoader={handleIssuesLoader}
                     copyText={copyText}
                     handleIssueCrudOperation={handleIssueCrudOperation}
-                    setPeekParentId={setPeekParentId}
                   />
                 </div>
               )}
@@ -363,13 +359,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
             )}
         </>
       )}
-
-      <IssuePeekOverview
-        handleMutation={() => peekParentId && peekIssue && mutateSubIssues(peekParentId)}
-        projectId={projectId ?? ""}
-        workspaceSlug={workspaceSlug ?? ""}
-        readOnly={!isEditable}
-      />
     </div>
   );
 };