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>
2024-06-14 14:31:34 +00:00 · 2024-01-12 13:52:04 +05:30 · 2024-01-12 13:52:04 +05:30 · ee2c7c5fa1
commit ee2c7c5fa1
parent d64ae9a2e4
4 changed files with 105 additions and 49 deletions
--- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/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 isEditingAllowedBasedOnProject =
-      canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+  const canEditProperties = useCallback(
+    (projectId: string | undefined) => {
+      const isEditingAllowedBasedOnProject =
+        canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+
+      return enableInlineEditing && isEditingAllowedBasedOnProject;
+    },
+    [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+  );

-    return enableInlineEditing && isEditingAllowedBasedOnProject;
-  };

  const issueIds = (issueStore.groupedIssueIds ?? []) as TUnGroupedIssues;

--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/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;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id },
-    });
+    if (workspaceSlug && issue && issue.project_id && issue.id)
+      setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id });
  };

  const { subIssues: subIssuesStore, issue } = useIssueDetail();
@ -134,16 +131,20 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
              )}
            </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>
+          <ControlLink
+            href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
+            target="_blank"
+            onClick={() => handleIssuePeekOverview(issueDetail)}
+            className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+          >
+            <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">
+                  {issueDetail.name}
+                </div>
+              </Tooltip>
+            </div>
+          </ControlLink>
        </td>
        {/* Rest of the columns */}
        {SPREADSHEET_PROPERTY_LIST.map((property) => {
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/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>
+  );
+});
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/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">
-          <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={portalRef}
-              />
-            ))}
-          </tbody>
-        </table>
+        <SpreadsheetTable
+          displayProperties={displayProperties}
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          issues={issues}
+          isEstimateEnabled={isEstimateEnabled}
+          portalElement={portalRef}
+          quickActions={quickActions}
+          handleIssues={handleIssues}
+          canEditProperties={canEditProperties}
+        />
      </div>
      <div className="border-t border-custom-border-100">
        <div className="z-5 sticky bottom-0 left-0 mb-3">