chore: Refactor Spreadsheet view for better code maintainability and performance (#3322)

* refcator spreadsheet to use table and roow based approach rather than column based

* update spreadsheet and optimized layout

* fix issues in spread sheet

* close quick action menu on click

---------

Co-authored-by: Rahul R <rahulr@Rahuls-MacBook-Pro.local>

web/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -0,0 +1,186 @@
+import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
+import { SPREADSHEET_PROPERTY_DETAILS, SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { Tooltip } from "@plane/ui";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { useIssueDetail, useProject } from "hooks/store";
+import { useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { EIssueActions } from "../types";
+import { observer } from "mobx-react-lite";
+
+interface Props {
+  displayProperties: IIssueDisplayProperties;
+  isEstimateEnabled: boolean;
+  quickActions: (
+    issue: TIssue,
+    customActionButton?: React.ReactElement,
+    portalElement?: HTMLDivElement | null
+  ) => React.ReactNode;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  portalElement: React.MutableRefObject<HTMLDivElement | null>;
+  nestingLevel: number;
+  issueId: string;
+}
+
+export const SpreadsheetIssueRow = observer((props: Props) => {
+  const {
+    displayProperties,
+    issueId,
+    isEstimateEnabled,
+    nestingLevel,
+    portalElement,
+    handleIssues,
+    quickActions,
+    canEditProperties,
+  } = props;
+  // router
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  const { getProjectById } = useProject();
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const [isExpanded, setExpanded] = useState<boolean>(false);
+
+  const menuActionRef = useRef<HTMLDivElement | null>(null);
+
+  const handleIssuePeekOverview = (issue: TIssue) => {
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id },
+    });
+  };
+
+  const { subIssues: subIssuesStore, issue } = useIssueDetail();
+
+  const issueDetail = issue.getIssueById(issueId);
+  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+
+  const paddingLeft = `${nestingLevel * 54}px`;
+
+  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+
+  const handleToggleExpand = () => {
+    setExpanded((prevState) => {
+      if (!prevState && workspaceSlug && issueDetail)
+        subIssuesStore.fetchSubIssues(workspaceSlug.toString(), issueDetail.project_id, issueDetail.id);
+      return !prevState;
+    });
+  };
+
+  const customActionButton = (
+    <div
+      ref={menuActionRef}
+      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
+        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
+      }`}
+      onClick={() => setIsMenuActive(!isMenuActive)}
+    >
+      <MoreHorizontal className="h-3.5 w-3.5" />
+    </div>
+  );
+
+  if (!issueDetail) return null;
+
+  const disableUserActions = !canEditProperties(issueDetail.project_id);
+
+  return (
+    <>
+      <tr>
+        {/* first column/ issue name and key column */}
+        <td className="sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-l-0 after:border-custom-border-100 before:absolute before:h-full before:right-0 before:border before:border-l-0 before:border-custom-border-100">
+          <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
+            <div
+              className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
+              style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
+            >
+              <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
+                <span
+                  className={`flex items-center justify-center font-medium  group-hover:opacity-0 ${
+                    isMenuActive ? "opacity-0" : "opacity-100"
+                  }`}
+                >
+                  {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
+                </span>
+
+                {canEditProperties(issueDetail.project_id) && (
+                  <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
+                    {quickActions(issueDetail, customActionButton, portalElement.current)}
+                  </div>
+                )}
+              </div>
+
+              {issueDetail.sub_issues_count > 0 && (
+                <div className="flex h-6 w-6 items-center justify-center">
+                  <button
+                    className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
+                    onClick={() => handleToggleExpand()}
+                  >
+                    <ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
+                  </button>
+                </div>
+              )}
+            </div>
+          </WithDisplayPropertiesHOC>
+          <div className="w-full overflow-hidden">
+            <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
+              <div
+                className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
+                onClick={() => handleIssuePeekOverview(issueDetail)}
+              >
+                {issueDetail.name}
+              </div>
+            </Tooltip>
+          </div>
+        </td>
+        {/* Rest of the columns */}
+        {SPREADSHEET_PROPERTY_LIST.map((property) => {
+          const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
+
+          const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+
+          return (
+            <WithDisplayPropertiesHOC
+              displayProperties={displayProperties}
+              displayPropertyKey={property}
+              shouldRenderProperty={shouldRenderProperty}
+            >
+              <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
+                <Column
+                  issue={issueDetail}
+                  onChange={(issue: TIssue, data: Partial<TIssue>) =>
+                    handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
+                  }
+                  disabled={disableUserActions}
+                />
+              </td>
+            </WithDisplayPropertiesHOC>
+          );
+        })}
+      </tr>
+
+      {isExpanded &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssueId: string) => (
+          <SpreadsheetIssueRow
+            key={subIssueId}
+            issueId={subIssueId}
+            displayProperties={displayProperties}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            nestingLevel={nestingLevel + 1}
+            isEstimateEnabled={isEstimateEnabled}
+            handleIssues={handleIssues}
+            portalElement={portalElement}
+          />
+        ))}
+    </>
+  );
+});