[WEB-1040] chore: list layout sub issue nesting implementation (#4404)

web/components/issues/issue-layouts/list/block-root.tsx

@@ -0,0 +1,89 @@
+import React, { FC, MutableRefObject, useState } from "react";
+import { observer } from "mobx-react";
+import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
+// components
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { IssueBlock } from "@/components/issues/issue-layouts/list";
+// hooks
+import { useIssueDetail } from "@/hooks/store";
+// types
+import { TRenderQuickActions } from "./list-view-types";
+
+type Props = {
+  issueIds: string[];
+  issueId: string;
+  issuesMap: TIssueMap;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  nestingLevel: number;
+  spacingLeft?: number;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+};
+
+export const IssueBlockRoot: FC<Props> = observer((props) => {
+  const {
+    issueIds,
+    issueId,
+    issuesMap,
+    updateIssue,
+    quickActions,
+    canEditProperties,
+    displayProperties,
+    nestingLevel,
+    spacingLeft = 14,
+    containerRef,
+  } = props;
+  // states
+  const [isExpanded, setExpanded] = useState<boolean>(false);
+  // store hooks
+  const { subIssues: subIssuesStore } = useIssueDetail();
+
+  if (!issueId) return null;
+
+  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+  return (
+    <>
+      <RenderIfVisible
+        key={`${issueId}`}
+        defaultHeight="3rem"
+        root={containerRef}
+        classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
+        changingReference={issueIds}
+      >
+        <IssueBlock
+          issueId={issueId}
+          issuesMap={issuesMap}
+          updateIssue={updateIssue}
+          quickActions={quickActions}
+          canEditProperties={canEditProperties}
+          displayProperties={displayProperties}
+          isExpanded={isExpanded}
+          setExpanded={setExpanded}
+          nestingLevel={nestingLevel}
+          spacingLeft={spacingLeft}
+        />
+      </RenderIfVisible>
+
+      {isExpanded &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssueId: string) => (
+          <IssueBlockRoot
+            key={`${subIssueId}`}
+            issueIds={issueIds}
+            issueId={subIssueId}
+            issuesMap={issuesMap}
+            updateIssue={updateIssue}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            displayProperties={displayProperties}
+            nestingLevel={nestingLevel + 1}
+            spacingLeft={spacingLeft + (displayProperties?.key ? 19 : 0)}
+            containerRef={containerRef}
+          />
+        ))}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/block.tsx

@@ -1,15 +1,18 @@
-import { useRef } from "react";
+import { Dispatch, MouseEvent, SetStateAction, useRef } from "react";
 import { observer } from "mobx-react-lite";
+import { ChevronRight } from "lucide-react";
+// types
 import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
 // ui
 import { Spinner, Tooltip, ControlLink } from "@plane/ui";
+// components
+import { IssueProperties } from "@/components/issues/issue-layouts/properties";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
-import { IssueProperties } from "../properties/all-properties";
 import { TRenderQuickActions } from "./list-view-types";
 
 interface IssueBlockProps {
@@ -19,18 +22,35 @@ interface IssueBlockProps {
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
   canEditProperties: (projectId: string | undefined) => boolean;
+  nestingLevel: number;
+  spacingLeft?: number;
+  isExpanded: boolean;
+  setExpanded: Dispatch<SetStateAction<boolean>>;
 }
 
 export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlockProps) => {
-  const { issuesMap, issueId, updateIssue, quickActions, displayProperties, canEditProperties } = props;
+  const {
+    issuesMap,
+    issueId,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    nestingLevel,
+    spacingLeft = 14,
+    isExpanded,
+    setExpanded,
+  } = props;
   // refs
   const parentRef = useRef(null);
   // hooks
   const {
     router: { workspaceSlug },
   } = useApplication();
+
+  // store hooks
   const { getProjectIdentifierById } = useProject();
-  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
+  const { getIsIssuePeeked, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
 
   const handleIssuePeekOverview = (issue: TIssue) =>
     workspaceSlug &&
@@ -47,28 +67,52 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const canEditIssueProperties = canEditProperties(issue.project_id);
   const projectIdentifier = getProjectIdentifierById(issue.project_id);
 
+  const paddingLeft = `${spacingLeft}px`;
+
+  const handleToggleExpand = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (nestingLevel >= 3) {
+      handleIssuePeekOverview(issue);
+    } else {
+      setExpanded((prevState) => {
+        if (!prevState && workspaceSlug && issue)
+          subIssuesStore.fetchSubIssues(workspaceSlug.toString(), issue.project_id, issue.id);
+        return !prevState;
+      });
+    }
+  };
+
   return (
     <div
       ref={parentRef}
       className={cn(
-        "min-h-[52px] relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
+        "min-h-[52px] relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-8 text-sm",
         {
           "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
           "last:border-b-transparent": !getIsIssuePeeked(issue.id),
         }
       )}
     >
-      <div className="flex w-full truncate">
+      <div className="flex w-full truncate" style={issue.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}>
         <div className="flex flex-grow items-center gap-3 truncate">
-          {displayProperties && displayProperties?.key && (
+          <div className="flex items-center gap-1.5">
-            <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+            <button
-              {projectIdentifier}-{issue.sequence_id}
+              className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
-            </div>
+              onClick={handleToggleExpand}
-          )}
+            >
+              <ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
+            </button>
+            {displayProperties && displayProperties?.key && (
+              <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+                {projectIdentifier}-{issue.sequence_id}
+              </div>
+            )}
 
-          {issue?.tempId !== undefined && (
+            {issue?.tempId !== undefined && (
-            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+              <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-          )}
+            )}
+          </div>
 
           {issue?.is_draft ? (
             <Tooltip tooltipContent={issue.name} isMobile={isMobile}>

web/components/issues/issue-layouts/list/blocks-list.tsx

@@ -1,10 +1,9 @@
 import { FC, MutableRefObject } from "react";
 // components
 import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
-import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { IssueBlockRoot } from "@/components/issues/issue-layouts/list";
-import { IssueBlock } from "@/components/issues";
-import { TRenderQuickActions } from "./list-view-types";
 // types
+import { TRenderQuickActions } from "./list-view-types";
 
 interface Props {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
@@ -22,27 +21,21 @@ export const IssueBlocksList: FC<Props> = (props) => {
   return (
     <div className="relative h-full w-full">
       {issueIds && issueIds.length > 0 ? (
-        issueIds.map((issueId: string) => {
+        issueIds.map((issueId: string) => (
-          if (!issueId) return null;
+          <IssueBlockRoot
-          return (
+            key={`${issueId}`}
-            <RenderIfVisible
+            issueIds={issueIds}
-              key={`${issueId}`}
+            issueId={issueId}
-              defaultHeight="3rem"
+            issuesMap={issuesMap}
-              root={containerRef}
+            updateIssue={updateIssue}
-              classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
+            quickActions={quickActions}
-              changingReference={issueIds}
+            canEditProperties={canEditProperties}
-            >
+            displayProperties={displayProperties}
-              <IssueBlock
+            nestingLevel={0}
-                issueId={issueId}
+            spacingLeft={0}
-                issuesMap={issuesMap}
+            containerRef={containerRef}
-                updateIssue={updateIssue}
+          />
-                quickActions={quickActions}
+        ))
-                canEditProperties={canEditProperties}
-                displayProperties={displayProperties}
-              />
-            </RenderIfVisible>
-          );
-        })
       ) : (
         <div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
       )}

web/components/issues/issue-layouts/list/index.ts

@@ -1,4 +1,5 @@
 export * from "./roots";
+export * from "./block-root";
 export * from "./block";
 export * from "./roots";
 export * from "./blocks-list";

web/components/issues/issue-layouts/properties/index.ts

@@ -1 +1,2 @@
 export * from "./labels";
+export * from "./all-properties";