From 4c1aee0cfc130a99d1249d2b8936e04aa7e82d4d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 3 Nov 2023 17:20:14 +0530
Subject: [PATCH] fix: resolve z-index and peek overview component bug (#2624)

* fix: resolved z-index issue on peek overview component

* fix: fix issue with peekover view in spreadsheet view

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
---
 .../columns/issue/issue-column.tsx            | 198 ++++++++++--------
 .../issue/spreadsheet-issue-column.tsx        |  14 +-
 .../spreadsheet/spreadsheet-view.tsx          |  19 +-
 .../issues/issue-peek-overview/root.tsx       |   2 +-
 .../issues/issue-peek-overview/view.tsx       |  10 +-
 5 files changed, 140 insertions(+), 103 deletions(-)

diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
index 18daa039a..3fd042c1d 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
@@ -5,7 +5,6 @@ import { MoreHorizontal, Pencil, Trash2, ChevronRight, Link } from "lucide-react
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { IssuePeekOverview } from "components/issues/issue-peek-overview";
 import { Tooltip } from "@plane/ui";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
@@ -16,10 +15,16 @@ type Props = {
   issue: IIssue;
   expanded: boolean;
   handleToggleExpand: (issueId: string) => void;
-  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
   properties: IIssueDisplayProperties;
   handleEditIssue: (issue: IIssue) => void;
   handleDeleteIssue: (issue: IIssue) => void;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
   disableUserActions: boolean;
   nestingLevel: number;
 };
@@ -28,7 +33,7 @@ export const IssueColumn: React.FC<Props> = ({
   issue,
   expanded,
   handleToggleExpand,
-  handleUpdateIssue,
+  setIssuePeekOverView,
   properties,
   handleEditIssue,
   handleDeleteIssue,
@@ -53,105 +58,116 @@ export const IssueColumn: React.FC<Props> = ({
     });
   };
 
+  const handleIssuePeekOverview = (issue: IIssue) => {
+    const { query } = router;
+    setIssuePeekOverView({
+      workspaceSlug: issue?.workspace_detail?.slug,
+      projectId: issue?.project_detail?.id,
+      issueId: issue?.id,
+    });
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssueId: issue?.id },
+    });
+  };
+
   const paddingLeft = `${nestingLevel * 54}px`;
 
   return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
-      {properties.key && (
-        <div
-          className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
-          style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
-        >
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
-            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
-              {issue.project_detail?.identifier}-{issue.sequence_id}
-            </span>
+    <>
+      <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
+        {properties.key && (
+          <div
+            className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
+            style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
+          >
+            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
+              <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
 
-            {!disableUserActions && (
-              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                <Popover2
-                  isOpen={isOpen}
-                  canEscapeKeyClose
-                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                  content={
-                    <div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleCopyText();
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Link className="h-3 w-3" />
-                          <span>Copy link</span>
-                        </div>
-                      </button>
+              {!disableUserActions && (
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                  <Popover2
+                    isOpen={isOpen}
+                    canEscapeKeyClose
+                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                    content={
+                      <div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleCopyText();
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Link className="h-3 w-3" />
+                            <span>Copy link</span>
+                          </div>
+                        </button>
 
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleEditIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Pencil className="h-3 w-3" />
-                          <span>Edit issue</span>
-                        </div>
-                      </button>
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleEditIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Pencil className="h-3 w-3" />
+                            <span>Edit issue</span>
+                          </div>
+                        </button>
 
-                      <button
-                        type="button"
-                        className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleDeleteIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Trash2 className="h-3 w-3" />
-                          <span>Delete issue</span>
-                        </div>
-                      </button>
-                    </div>
-                  }
-                  placement="bottom-start"
+                        <button
+                          type="button"
+                          className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleDeleteIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Trash2 className="h-3 w-3" />
+                            <span>Delete issue</span>
+                          </div>
+                        </button>
+                      </div>
+                    }
+                    placement="bottom-start"
+                  >
+                    <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
+                  </Popover2>
+                </div>
+              )}
+            </div>
+
+            {issue.sub_issues_count > 0 && (
+              <div className="h-6 w-6 flex justify-center items-center">
+                <button
+                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                  onClick={() => handleToggleExpand(issue.id)}
                 >
-                  <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
-                </Popover2>
+                  <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
+                </button>
               </div>
             )}
           </div>
-
-          {issue.sub_issues_count > 0 && (
-            <div className="h-6 w-6 flex justify-center items-center">
-              <button
-                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                onClick={() => handleToggleExpand(issue.id)}
-              >
-                <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-      <IssuePeekOverview
-        workspaceSlug={issue?.workspace_detail?.slug}
-        projectId={issue?.project_detail?.id}
-        issueId={issue?.id}
-        handleIssue={(issueToUpdate) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
-      >
-        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-          <span className="flex items-center px-4 py-2.5 h-full  truncate flex-grow">
-            <div className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]">
+        )}
+        <div className="w-full overflow-hidden">
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <div
+              className="px-4 py-2.5 h-full w-full truncate text-custom-text-100 text-left cursor-pointer text-[0.825rem]"
+              onClick={() => handleIssuePeekOverview(issue)}
+            >
               {issue.name}
             </div>
-          </span>
-        </Tooltip>
-      </IssuePeekOverview>
-    </div>
+          </Tooltip>
+        </div>
+      </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
index 265925eb0..703174de5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
@@ -11,9 +11,15 @@ type Props = {
   issue: IIssue;
   expandedIssues: string[];
   setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
-  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
   properties: IIssueDisplayProperties;
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
   disableUserActions: boolean;
   nestingLevel?: number;
 };
@@ -22,7 +28,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
   issue,
   expandedIssues,
   setExpandedIssues,
-  handleUpdateIssue,
+  setIssuePeekOverView,
   properties,
   handleIssueAction,
   disableUserActions,
@@ -51,9 +57,9 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
         expanded={isExpanded}
         handleToggleExpand={handleToggleExpand}
         properties={properties}
-        handleUpdateIssue={handleUpdateIssue}
         handleEditIssue={() => handleIssueAction(issue, "edit")}
         handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+        setIssuePeekOverView={setIssuePeekOverView}
         disableUserActions={disableUserActions}
         nestingLevel={nestingLevel}
       />
@@ -67,10 +73,10 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
             key={subIssue.id}
             issue={subIssue}
             expandedIssues={expandedIssues}
-            handleUpdateIssue={handleUpdateIssue}
             setExpandedIssues={setExpandedIssues}
             properties={properties}
             handleIssueAction={handleIssueAction}
+            setIssuePeekOverView={setIssuePeekOverView}
             disableUserActions={disableUserActions}
             nestingLevel={nestingLevel + 1}
           />
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 3f49670f3..800383d1d 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { PlusIcon } from "lucide-react";
 // components
 import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
-import { CustomMenu, Spinner } from "@plane/ui";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { Spinner } from "@plane/ui";
 // types
 import {
   IIssue,
@@ -47,6 +47,11 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   } = props;
 
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+  const [issuePeekOverview, setIssuePeekOverView] = useState<{
+    workspaceSlug: string;
+    projectId: string;
+    issueId: string;
+  } | null>(null);
 
   const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
 
@@ -104,11 +109,11 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                       key={`${issue.id}_${index}`}
                       issue={issue}
                       expandedIssues={expandedIssues}
-                      handleUpdateIssue={handleUpdateIssue}
                       setExpandedIssues={setExpandedIssues}
                       properties={displayProperties}
                       handleIssueAction={handleIssueAction}
                       disableUserActions={disableUserActions}
+                      setIssuePeekOverView={setIssuePeekOverView}
                     />
                   ))}
                 </div>
@@ -174,6 +179,14 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
             ))} */}
         </div>
       </div>
+      {issuePeekOverview && (
+        <IssuePeekOverview
+          workspaceSlug={issuePeekOverview?.workspaceSlug}
+          projectId={issuePeekOverview?.projectId}
+          issueId={issuePeekOverview?.issueId}
+          handleIssue={(issueToUpdate: any) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
+        />
+      )}
     </div>
   );
 });
diff --git a/web/components/issues/issue-peek-overview/root.tsx b/web/components/issues/issue-peek-overview/root.tsx
index 142adad92..71a5a39e9 100644
--- a/web/components/issues/issue-peek-overview/root.tsx
+++ b/web/components/issues/issue-peek-overview/root.tsx
@@ -13,7 +13,7 @@ interface IIssuePeekOverview {
   projectId: string;
   issueId: string;
   handleIssue: (issue: Partial<IIssue>) => void;
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx
index 3f1b0765a..83eb7737a 100644
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactNode, useState } from "react";
 import { useRouter } from "next/router";
-import { PanelRightOpen, Square, SquareCode, MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
+import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // components
@@ -165,9 +165,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
         />
       )}
       <div className="w-full !text-base">
-        <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
-          {children}
-        </div>
+        {children && (
+          <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
+            {children}
+          </div>
+        )}
 
         {issueId === peekIssueId && (
           <div