From f3be2faa8f38b9b36c0c3ba09efcc5475c37e535 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 27 Jun 2023 17:12:21 +0530
Subject: [PATCH] fix: resolve z-index issue with quick action menu and disable
 it for completed cycles (#1405)

---
 apps/app/components/core/spreadsheet-view/single-issue.tsx  | 6 ++++--
 .../components/core/spreadsheet-view/spreadsheet-issues.tsx | 4 ++++
 .../components/core/spreadsheet-view/spreadsheet-view.tsx   | 3 ++-
 apps/app/layouts/app-layout/app-header.tsx                  | 2 +-
 apps/app/styles/globals.css                                 | 2 +-
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index 2aabbef93..762de2453 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -49,6 +49,7 @@ type Props = {
   handleEditIssue: (issue: IIssue) => void;
   handleDeleteIssue: (issue: IIssue) => void;
   gridTemplateColumns: string;
+  isCompleted?: boolean;
   user: ICurrentUserResponse | undefined;
   userAuth: UserAuth;
   nestingLevel: number;
@@ -62,6 +63,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   handleEditIssue,
   handleDeleteIssue,
   gridTemplateColumns,
+  isCompleted = false,
   user,
   userAuth,
   nestingLevel,
@@ -170,7 +172,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
       style={{ gridTemplateColumns }}
     >
-      <div className="flex gap-1.5 items-center px-4 sticky z-10 left-0 text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
+      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
         <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
           <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-brand-base w-14">
             {properties.key && (
@@ -178,7 +180,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
                 {issue.project_detail?.identifier}-{issue.sequence_id}
               </span>
             )}
-            {!isNotAllowed && (
+            {!isNotAllowed && !isCompleted && (
               <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
                 <Popover2
                   isOpen={isOpen}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
index 0edfbceb1..c52cfa59a 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
@@ -16,6 +16,7 @@ type Props = {
   handleEditIssue: (issue: IIssue) => void;
   handleDeleteIssue: (issue: IIssue) => void;
   gridTemplateColumns: string;
+  isCompleted?: boolean;
   user: ICurrentUserResponse | undefined;
   userAuth: UserAuth;
   nestingLevel?: number;
@@ -30,6 +31,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
   properties,
   handleEditIssue,
   handleDeleteIssue,
+  isCompleted = false,
   user,
   userAuth,
   nestingLevel = 0,
@@ -61,6 +63,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
         properties={properties}
         handleEditIssue={handleEditIssue}
         handleDeleteIssue={handleDeleteIssue}
+        isCompleted={isCompleted}
         user={user}
         userAuth={userAuth}
         nestingLevel={nestingLevel}
@@ -80,6 +83,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
             properties={properties}
             handleEditIssue={handleEditIssue}
             handleDeleteIssue={handleDeleteIssue}
+            isCompleted={isCompleted}
             user={user}
             userAuth={userAuth}
             nestingLevel={nestingLevel + 1}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
index 5655d11de..15034a633 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
@@ -62,7 +62,7 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   return (
     <div className="h-full rounded-lg text-brand-secondary overflow-x-auto whitespace-nowrap bg-brand-base">
-      <div className="sticky z-20 top-0 border-b border-brand-base bg-brand-surface-1 w-full min-w-max">
+      <div className="sticky z-[2] top-0 border-b border-brand-base bg-brand-surface-1 w-full min-w-max">
         <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
       </div>
       {spreadsheetIssues ? (
@@ -77,6 +77,7 @@ export const SpreadsheetView: React.FC<Props> = ({
               properties={properties}
               handleEditIssue={handleEditIssue}
               handleDeleteIssue={handleDeleteIssue}
+              isCompleted={isCompleted}
               user={user}
               userAuth={userAuth}
             />
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index 1f99e044e..ea7d5558c 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => (
   <div
-    className={`relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4 ${
+    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4 ${
       noHeader ? "md:hidden" : ""
     }`}
   >
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 2e997caea..ccfda2248 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -228,5 +228,5 @@ body {
 
 /* popover2 styling */
 .bp4-popover2-transition-container {
-  z-index: 20 !important;
+  z-index: 1 !important;
 }