From da78933c614d45a52532deee57a6ffefc184aaa6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 May 2024 15:24:18 +0530
Subject: [PATCH] [WEB-1274] chore: issue spreadsheet enhancement (#4423)

* chore: border and background remove from cycle and module select

* choe: indentation improvement
---
 web/components/dropdowns/module/index.tsx     |  2 +-
 .../spreadsheet/columns/cycle-column.tsx      |  2 +-
 .../spreadsheet/columns/module-column.tsx     |  2 +-
 .../issues/issue-layouts/spreadsheet/index.ts |  1 +
 .../issue-layouts/spreadsheet/issue-row.tsx   | 30 +++++++++++--------
 .../spreadsheet/spreadsheet-header.tsx        | 14 +++------
 6 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/web/components/dropdowns/module/index.tsx b/web/components/dropdowns/module/index.tsx
index e1441efe9..6883332e1 100644
--- a/web/components/dropdowns/module/index.tsx
+++ b/web/components/dropdowns/module/index.tsx
@@ -73,7 +73,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
     return (
       <>
         {showCount ? (
-          <div className="relative flex max-w-full items-center gap-1">
+          <div className="relative flex items-center max-w-full gap-1">
             {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
             {(value.length > 0 || !!placeholder) && (
               <div className="max-w-40 flex-grow truncate">
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
index 342a9208b..a412c604f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -57,7 +57,7 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
         placeholder="Select cycle"
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full relative flex items-center p-2"
-        buttonClassName="relative border-[0.5px] border-custom-border-400 h-4.5"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent"
         onClose={onClose}
       />
     </div>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
index 75b9ac065..fb742f703 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -68,7 +68,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
         placeholder="Select modules"
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full relative flex items-center p-2"
-        buttonClassName="relative border-[0.5px] border-custom-border-400 h-4.5"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent"
         onClose={onClose}
         multiple
         showCount
diff --git a/web/components/issues/issue-layouts/spreadsheet/index.ts b/web/components/issues/issue-layouts/spreadsheet/index.ts
index 8f7c4a7fd..8fa49e851 100644
--- a/web/components/issues/issue-layouts/spreadsheet/index.ts
+++ b/web/components/issues/issue-layouts/spreadsheet/index.ts
@@ -2,3 +2,4 @@ export * from "./columns";
 export * from "./roots";
 export * from "./spreadsheet-view";
 export * from "./quick-add-issue-form";
+export * from "./spreadsheet-header-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 1bd8a8808..1d1ea1e08 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -50,7 +50,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     containerRef,
     issueIds,
     spreadsheetColumnsList,
-    spacingLeft = 14,
+    spacingLeft = 6,
   } = props;
 
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -96,7 +96,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             quickActions={quickActions}
             canEditProperties={canEditProperties}
             nestingLevel={nestingLevel + 1}
-            spacingLeft={spacingLeft + (displayProperties.key ? 16 : 28)}
+            spacingLeft={spacingLeft + (displayProperties.key ? 12 : 28)}
             isEstimateEnabled={isEstimateEnabled}
             updateIssue={updateIssue}
             portalElement={portalElement}
@@ -140,7 +140,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
     isExpanded,
     setExpanded,
     spreadsheetColumnsList,
-    spacingLeft = 14,
+    spacingLeft = 6,
   } = props;
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
@@ -218,18 +218,22 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
           disabled={!!issueDetail?.tempId}
         >
           <div
-            className="flex min-w-min items-center gap-1 px-4 py-2.5 pr-0"
+            className="flex min-w-min items-center gap-0.5 px-4 py-2.5 pl-1.5 pr-0"
             style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
           >
-            <div className="flex h-5 w-5 items-center justify-center">
-              {issueDetail.sub_issues_count > 0 && (
-                <button
-                  className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
-                  onClick={handleToggleExpand}
-                >
-                  <ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
-                </button>
-              )}
+            <div className="flex items-center">
+              {/* bulk ops */}
+              <span className="size-3.5" />
+              <div className="flex size-4 items-center justify-center">
+                {issueDetail.sub_issues_count > 0 && (
+                  <button
+                    className="flex items-center justify-center size-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
+                    onClick={handleToggleExpand}
+                  >
+                    <ChevronRight className={`size-4 ${isExpanded ? "rotate-90" : ""}`} />
+                  </button>
+                )}
+              </div>
             </div>
 
             <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 968aade3e..63017f0e7 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -1,10 +1,9 @@
 // ui
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+// types
 import { LayersIcon } from "@plane/ui";
-// constants
 // components
-import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
-import { SpreadsheetHeaderColumn } from "./spreadsheet-header-column";
+import { SpreadsheetHeaderColumn } from "@/components/issues/issue-layouts";
 
 interface Props {
   displayProperties: IIssueDisplayProperties;
@@ -25,13 +24,8 @@ export const SpreadsheetHeader = (props: Props) => {
           className="sticky left-0 z-[15] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100"
           tabIndex={-1}
         >
-          <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
-            <span className="flex h-full w-24 flex-shrink-0 items-center px-4 py-2.5">
-              <span className="mr-1.5 text-custom-text-400">#</span>ID
-            </span>
-          </WithDisplayPropertiesHOC>
-          <span className="flex h-full w-full flex-grow items-center justify-center px-4 py-2.5">
-            <LayersIcon className="mr-1.5 h-4 w-4 text-custom-text-400" />
+          <span className="flex h-full w-full flex-grow items-center pl-5 px-4 py-2.5">
+            <LayersIcon className="mr-1 h-4 w-4 text-custom-text-400" />
             Issue
           </span>
         </th>