fix: Sort nested sub-tasks by start/due date in list and spreadsheet

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

@@ -13,14 +13,17 @@ import { observer } from "mobx-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
-import type { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
+import type { IIssueDisplayProperties, TIssue, TIssueMap, TIssueOrderByOptions } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // components
 import { DropIndicator } from "@plane/ui";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { ListLoaderItemRow } from "@/components/ui/loader/layouts/list-layout-loader";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import type { IBaseIssuesStore } from "@/store/issue/helpers/base-issues.store";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import type { TSelectionHelper } from "@/hooks/use-multiple-select";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
@@ -45,6 +48,7 @@ type Props = {
   isParentIssueBeingDragged?: boolean;
   isLastChild?: boolean;
   shouldRenderByDefault?: boolean;
+  orderBy: TIssueOrderByOptions | undefined;
   isEpic?: boolean;
 };
 
@@ -66,6 +70,7 @@ export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
     isLastChild = false,
     selectionHelpers,
     shouldRenderByDefault,
+    orderBy,
     isEpic = false,
   } = props;
   // states
@@ -78,6 +83,8 @@ export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
   const { isMobile } = usePlatformOS();
   // store hooks
   const { subIssues: subIssuesStore } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const storeType = useIssueStoreType();
+  const { issues } = useIssues(storeType);
 
   const isSubIssue = nestingLevel !== 0;
 
@@ -129,7 +136,11 @@ export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
 
   if (!issueId || !issuesMap[issueId]?.created_at) return null;
 
-  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+  const subIssueIds = subIssuesStore.subIssuesByIssueId(issueId);
+  const subIssues =
+    orderBy && subIssueIds?.length && "issuesSortWithOrderBy" in issues
+      ? (issues as IBaseIssuesStore).issuesSortWithOrderBy(subIssueIds, orderBy)
+      : subIssueIds;
   return (
     <div className="relative" ref={issueBlockRef} id={getIssueBlockId(issueId, groupId)}>
       <DropIndicator classNames={"absolute top-0 z-[2]"} isVisible={instruction === "DRAG_OVER"} />
@@ -164,7 +175,7 @@ export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
 
       {isExpanded &&
         !isEpic &&
-        subIssues?.map((subIssueId) => (
+        subIssues?.map((subIssueId: string) => (
           <IssueBlockRoot
             key={`${subIssueId}`}
             issueId={subIssueId}
@@ -182,6 +193,7 @@ export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
             canDropOverIssue={canDropOverIssue}
             isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
             shouldRenderByDefault={isExpanded}
+            orderBy={orderBy}
           />
         ))}
       {isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}

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

@@ -6,7 +6,7 @@
 
 import type { MutableRefObject } from "react";
 // components
-import type { TIssue, IIssueDisplayProperties, TIssueMap, TGroupedIssues } from "@plane/types";
+import type { TIssue, IIssueDisplayProperties, TIssueMap, TGroupedIssues, TIssueOrderByOptions } from "@plane/types";
 // hooks
 import type { TSelectionHelper } from "@/hooks/use-multiple-select";
 // types
@@ -25,6 +25,7 @@ interface Props {
   isDragAllowed: boolean;
   canDropOverIssue: boolean;
   selectionHelpers: TSelectionHelper;
+  orderBy: TIssueOrderByOptions | undefined;
   isEpic?: boolean;
 }
 
@@ -41,6 +42,7 @@ export function IssueBlocksList(props: Props) {
     selectionHelpers,
     isDragAllowed,
     canDropOverIssue,
+    orderBy,
     isEpic = false,
   } = props;
 
@@ -65,6 +67,7 @@ export function IssueBlocksList(props: Props) {
             isLastChild={index === issueIds.length - 1}
             isDragAllowed={isDragAllowed}
             canDropOverIssue={canDropOverIssue}
+            orderBy={orderBy}
             isEpic={isEpic}
           />
         ))}

apps/web/core/components/issues/issue-layouts/list/list-group.tsx

@@ -132,14 +132,15 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   const loadMore = isPaginating ? (
     <ListLoaderItemRow />
   ) : (
-    <div
+    <button
+      type="button"
       className={
-        "relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-8 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
+        "relative flex h-11 w-full cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-8 text-left text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       }
       onClick={() => loadMoreIssues(group.id)}
     >
       {t("common.load_more")} &darr;
-    </div>
+    </button>
   );
 
   const validateEmptyIssueGroups = (issueCount: number = 0) => {
@@ -198,7 +199,9 @@ export const ListGroup = observer(function ListGroup(props: Props) {
           const sourceGroupId = source?.data?.groupId as string | undefined;
           const currentGroupId = group.id;
 
-          sourceGroupId && handleWorkFlowState(sourceGroupId, currentGroupId);
+          if (sourceGroupId) {
+            handleWorkFlowState(sourceGroupId, currentGroupId);
+          }
 
           const sourceIndex = getGroupIndex(sourceGroupId);
           const currentIndex = getGroupIndex(currentGroupId);
@@ -237,13 +240,17 @@ export const ListGroup = observer(function ListGroup(props: Props) {
       })
     );
   }, [
-    groupRef?.current,
     group,
     orderBy,
     getGroupIndex,
     setDragColumnOrientation,
     setIsDraggingOverColumn,
     isWorkflowDropDisabled,
+    handleCollapsedGroups,
+    t,
+    handleWorkFlowState,
+    handleOnDrop,
+    isExpanded,
   ]);
 
   const isDragAllowed = group_by ? DRAG_ALLOWED_GROUPS.includes(group_by) : true;
@@ -308,6 +315,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
               isDragAllowed={isDragAllowed}
               canDropOverIssue={!canOverlayBeVisible}
               selectionHelpers={selectionHelpers}
+              orderBy={orderBy}
               isEpic={isEpic}
             />
           )}
@@ -317,8 +325,8 @@ export const ListGroup = observer(function ListGroup(props: Props) {
               <>{loadMore}</>
             ) : (
               <>
-                {Array.from({ length: 2 }).map((_, index) => (
-                  <ListLoaderItemRow key={index} />
+                {(["list-group-loader-1", "list-group-loader-2"] as const).map((loaderKey) => (
+                  <ListLoaderItemRow key={loaderKey} />
                 ))}
                 <ListLoaderItemRow ref={setIntersectionElement} />
               </>

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

@@ -15,7 +15,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import { ChevronRightIcon } from "@plane/propel/icons";
 // types
 import { Tooltip } from "@plane/propel/tooltip";
-import type { IIssueDisplayProperties, TIssue } from "@plane/types";
+import type { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // ui
 import { ControlLink, Row } from "@plane/ui";
@@ -27,6 +27,8 @@ import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useIssues } from "@/hooks/store/use-issues";
+import type { IBaseIssuesStore } from "@/store/issue/helpers/base-issues.store";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useProject } from "@/hooks/store/use-project";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import type { TSelectionHelper } from "@/hooks/use-multiple-select";
@@ -53,6 +55,7 @@ interface Props {
   spacingLeft?: number;
   selectionHelpers: TSelectionHelper;
   shouldRenderByDefault?: boolean;
+  orderBy?: TIssueOrderByOptions;
   isEpic?: boolean;
 }
 
@@ -72,17 +75,23 @@ export const SpreadsheetIssueRow = observer(function SpreadsheetIssueRow(props:
     spacingLeft = 6,
     selectionHelpers,
     shouldRenderByDefault,
+    orderBy,
     isEpic = false,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
   // store hooks
   const { subIssues: subIssuesStore } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
-  const { issueMap } = useIssues();
+  const storeType = useIssueStoreType();
+  const { issueMap, issues } = useIssues(storeType);
 
   // derived values
   const issue = issueMap[issueId];
-  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+  const subIssueIds = subIssuesStore.subIssuesByIssueId(issueId);
+  const subIssues =
+    orderBy && subIssueIds?.length && "issuesSortWithOrderBy" in issues
+      ? (issues as IBaseIssuesStore).issuesSortWithOrderBy(subIssueIds, orderBy)
+      : subIssueIds;
   const isIssueSelected = selectionHelpers.getIsEntitySelected(issueId);
   const isIssueActive = selectionHelpers.getIsEntityActive(issueId);
 
@@ -147,6 +156,8 @@ export const SpreadsheetIssueRow = observer(function SpreadsheetIssueRow(props:
             spreadsheetColumnsList={spreadsheetColumnsList}
             selectionHelpers={selectionHelpers}
             shouldRenderByDefault={isExpanded}
+            orderBy={orderBy}
+            isEpic={isEpic}
           />
         ))}
     </>
@@ -193,7 +204,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
   const [isMenuActive, setIsMenuActive] = useState(false);
   // refs
   const cellRef = useRef(null);
-  const menuActionRef = useRef<HTMLDivElement | null>(null);
+  const menuActionRef = useRef<HTMLButtonElement | null>(null);
   // router
   const { workspaceSlug, projectId } = useParams();
   // hooks
@@ -215,15 +226,16 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
   useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
 
   const customActionButton = (
-    <div
+    <button
+      type="button"
       ref={menuActionRef}
       className={`flex h-full w-full cursor-pointer items-center rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
         isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
     >
       <MoreHorizontal className="h-3.5 w-3.5" />
-    </div>
+    </button>
   );
   if (!issueDetail) return null;
 
@@ -371,8 +383,9 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
                   </div>
                 </div>
                 <div
+                  role="presentation"
                   className={`opacity-0 transition-opacity group-hover:opacity-100 ${isMenuActive ? "!opacity-100" : ""}`}
-                  onClick={(e) => e.stopPropagation()}
+                  onMouseDown={(e) => e.stopPropagation()}
                 >
                   {quickActions({
                     issue: issueDetail,

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

@@ -138,14 +138,15 @@ export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props)
             isScrolled={isScrolled}
             spreadsheetColumnsList={spreadsheetColumnsList}
             selectionHelpers={selectionHelpers}
+            orderBy={displayFilters.order_by}
             isEpic={isEpic}
           />
         ))}
       </tbody>
       {canLoadMoreIssues && (
         <tfoot ref={setIntersectionElement}>
-          {Array.from({ length: 3 }).map((_, index) => (
-            <SpreadsheetIssueRowLoader key={index} columnCount={displayPropertiesCount} />
+          {(["spreadsheet-loader-1", "spreadsheet-loader-2", "spreadsheet-loader-3"] as const).map((loaderKey) => (
+            <SpreadsheetIssueRowLoader key={loaderKey} columnCount={displayPropertiesCount} />
           ))}
         </tfoot>
       )}