enable peekoverview for spreadsheet and minor refactor for faster opening of the peekoverview component (#3361)

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

web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx

@@ -45,12 +45,16 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
   // user role validation
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
-  const canEditProperties = (projectId: string | undefined) => {
+  const canEditProperties = useCallback(
-    const isEditingAllowedBasedOnProject =
+    (projectId: string | undefined) => {
-      canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+      const isEditingAllowedBasedOnProject =
+        canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+
+      return enableInlineEditing && isEditingAllowedBasedOnProject;
+    },
+    [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+  );
 
-    return enableInlineEditing && isEditingAllowedBasedOnProject;
-  };
 
   const issueIds = (issueStore.groupedIssueIds ?? []) as TUnGroupedIssues;
 

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

@@ -8,7 +8,7 @@ import { SPREADSHEET_PROPERTY_DETAILS, SPREADSHEET_PROPERTY_LIST } from "constan
 // components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 // ui
-import { Tooltip } from "@plane/ui";
+import { ControlLink, Tooltip } from "@plane/ui";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { useIssueDetail, useProject } from "hooks/store";
@@ -42,12 +42,13 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     quickActions,
     canEditProperties,
   } = props;
+
   // router
   const router = useRouter();
-
   const { workspaceSlug } = router.query;
-
+  //hooks
   const { getProjectById } = useProject();
+  const { setPeekIssue } = useIssueDetail();
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -55,12 +56,8 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
   const menuActionRef = useRef<HTMLDivElement | null>(null);
 
   const handleIssuePeekOverview = (issue: TIssue) => {
-    const { query } = router;
+    if (workspaceSlug && issue && issue.project_id && issue.id)
-
+      setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id });
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id },
-    });
   };
 
   const { subIssues: subIssuesStore, issue } = useIssueDetail();
@@ -134,16 +131,20 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
               )}
             </div>
           </WithDisplayPropertiesHOC>
-          <div className="w-full overflow-hidden">
+          <ControlLink
-            <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
+            href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
-              <div
+            target="_blank"
-                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)}
-                onClick={() => handleIssuePeekOverview(issueDetail)}
+            className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-              >
+          >
-                {issueDetail.name}
+            <div className="w-full overflow-hidden">
-              </div>
+              <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
-            </Tooltip>
+                <div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100">
-          </div>
+                  {issueDetail.name}
+                </div>
+              </Tooltip>
+            </div>
+          </ControlLink>
         </td>
         {/* Rest of the columns */}
         {SPREADSHEET_PROPERTY_LIST.map((property) => {

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

@@ -0,0 +1,63 @@
+import { observer } from "mobx-react-lite";
+//types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types";
+import { EIssueActions } from "../types";
+//components
+import { SpreadsheetIssueRow } from "./issue-row";
+import { SpreadsheetHeader } from "./spreadsheet-header";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  issues: TIssue[];
+  isEstimateEnabled: boolean;
+  quickActions: (
+    issue: TIssue,
+    customActionButton?: React.ReactElement,
+    portalElement?: HTMLDivElement | null
+  ) => React.ReactNode;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  portalElement: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+export const SpreadsheetTable = observer((props: Props) => {
+  const {
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    issues,
+    isEstimateEnabled,
+    portalElement,
+    quickActions,
+    handleIssues,
+    canEditProperties,
+  } = props;
+
+  return (
+    <table className="divide-x-[0.5px] divide-custom-border-200 overflow-y-auto">
+      <SpreadsheetHeader
+        displayProperties={displayProperties}
+        displayFilters={displayFilters}
+        handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        isEstimateEnabled={isEstimateEnabled}
+      />
+      <tbody>
+        {issues.map(({ id }) => (
+          <SpreadsheetIssueRow
+            key={id}
+            issueId={id}
+            displayProperties={displayProperties}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            nestingLevel={0}
+            isEstimateEnabled={isEstimateEnabled}
+            handleIssues={handleIssues}
+            portalElement={portalElement}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+});

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

@@ -3,12 +3,12 @@ import { observer } from "mobx-react-lite";
 // components
 import { Spinner } from "@plane/ui";
 import { SpreadsheetQuickAddIssueForm } from "components/issues";
+import { SpreadsheetTable } from "./spreadsheet-table";
 // types
 import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssueActions } from "../types";
+//hooks
 import { useProject } from "hooks/store";
-import { SpreadsheetHeader } from "./spreadsheet-header";
-import { SpreadsheetIssueRow } from "./issue-row";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -102,29 +102,17 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
       <div ref={portalRef} className="spreadsheet-menu-portal" />
       <div ref={containerRef} className="horizontal-scroll-enable h-full w-full">
-        <table className="divide-x-[0.5px] divide-custom-border-200 overflow-y-auto">
+        <SpreadsheetTable
-          <SpreadsheetHeader
+          displayProperties={displayProperties}
-            displayProperties={displayProperties}
+          displayFilters={displayFilters}
-            displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-            handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          issues={issues}
-            isEstimateEnabled={isEstimateEnabled}
+          isEstimateEnabled={isEstimateEnabled}
-          />
+          portalElement={portalRef}
-          <tbody>
+          quickActions={quickActions}
-            {issues.map(({ id }) => (
+          handleIssues={handleIssues}
-              <SpreadsheetIssueRow
+          canEditProperties={canEditProperties}
-                key={id}
+        />
-                issueId={id}
-                displayProperties={displayProperties}
-                quickActions={quickActions}
-                canEditProperties={canEditProperties}
-                nestingLevel={0}
-                isEstimateEnabled={isEstimateEnabled}
-                handleIssues={handleIssues}
-                portalElement={portalRef}
-              />
-            ))}
-          </tbody>
-        </table>
       </div>
       <div className="border-t border-custom-border-100">
         <div className="z-5 sticky bottom-0 left-0 mb-3">