makeplane · rahulramesha · Sep 13, 2024
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -29,7 +29,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
   const { workspaceSlug, userId } = useParams();
   // store hook
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, orderBy, updateFilters },
   } = useIssues(EIssuesStoreType.PROFILE);
 
   const { workspaceLabels } = useLabel();
@@ -180,6 +180,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
             layoutDisplayFiltersOptions={
               activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
             }
+            orderBy={orderBy}
             displayFilters={issueFilters?.displayFilters ?? {}}
             handleDisplayFiltersUpdate={handleDisplayFilters}
             displayProperties={issueFilters?.displayProperties ?? {}}

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -75,7 +75,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   };
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
     issues: { getGroupIssueCount },
   } = useIssues(EIssuesStoreType.CYCLE);
   const { currentProjectCycleIds, getCycleById } = useCycle();
@@ -275,6 +275,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                   activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                 }
                 displayFilters={issueFilters?.displayFilters ?? {}}
+                orderBy={orderBy}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
                 displayProperties={issueFilters?.displayProperties ?? {}}
                 handleDisplayPropertiesUpdate={handleDisplayProperties}

diff --git a/...workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/...workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -38,7 +38,7 @@ export const CycleIssuesMobileHeader = () => {
   // store hooks
   const { currentProjectDetails } = useProject();
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.CYCLE);
   const activeLayout = issueFilters?.displayFilters?.layout;
 
@@ -188,6 +188,7 @@ export const CycleIssuesMobileHeader = () => {
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
+              orderBy={orderBy}
               handleDisplayFiltersUpdate={handleDisplayFilters}
               displayProperties={issueFilters?.displayProperties ?? {}}
               handleDisplayPropertiesUpdate={handleDisplayProperties}

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
@@ -28,7 +28,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.DRAFT);
   const { currentProjectDetails, loader } = useProject();
   const { projectStates } = useProjectState();
@@ -159,6 +159,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
               layoutDisplayFiltersOptions={
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
+              orderBy={orderBy}
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
               displayProperties={issueFilters?.displayProperties ?? {}}

diff --git a/.../[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx b/.../[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -42,7 +42,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
 
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.PROJECT);
   const {
     project: { projectMemberIds },
@@ -172,6 +172,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
+              orderBy={orderBy}
               handleDisplayFiltersUpdate={handleDisplayFilters}
               displayProperties={issueFilters?.displayProperties ?? {}}
               handleDisplayPropertiesUpdate={handleDisplayProperties}

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -76,7 +76,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const { isMobile } = usePlatformOS();
   // store hooks
   const {
-    issuesFilter: { issueFilters },
+    issuesFilter: { issueFilters, orderBy },
     issues: { getGroupIssueCount },
   } = useIssues(EIssuesStoreType.MODULE);
   const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE);
@@ -273,6 +273,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                 }
                 displayFilters={issueFilters?.displayFilters ?? {}}
+                orderBy={orderBy}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
                 displayProperties={issueFilters?.displayProperties ?? {}}
                 handleDisplayPropertiesUpdate={handleDisplayProperties}

diff --git a/...orkspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx b/...orkspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -42,7 +42,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
   const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
 
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.MODULE);
   const activeLayout = issueFilters?.displayFilters?.layout;
   const { projectStates } = useProjectState();
@@ -169,6 +169,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
+              orderBy={orderBy}
               handleDisplayFiltersUpdate={handleDisplayFilters}
               displayProperties={issueFilters?.displayProperties ?? {}}
               handleDisplayPropertiesUpdate={handleDisplayProperties}

diff --git a/...orkspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/...orkspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -43,7 +43,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const { workspaceSlug, projectId, viewId } = useParams();
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
   const { setTrackElement } = useEventTracker();
   const { toggleCreateIssueModal } = useCommandPalette();
@@ -275,6 +275,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                   activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                 }
                 displayFilters={issueFilters?.displayFilters ?? {}}
+                orderBy={orderBy}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
                 displayProperties={issueFilters?.displayProperties ?? {}}
                 handleDisplayPropertiesUpdate={handleDisplayProperties}

diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -26,7 +26,7 @@ export const GlobalIssuesHeader = observer(() => {
   const { workspaceSlug, globalViewId } = useParams();
   // store hooks
   const {
-    issuesFilter: { filters, updateFilters },
+    issuesFilter: { filters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.GLOBAL);
   const { getViewDetailsById } = useGlobalView();
   const { workspaceLabels } = useLabel();
@@ -130,6 +130,7 @@ export const GlobalIssuesHeader = observer(() => {
                 <DisplayFiltersSelection
                   layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
                   displayFilters={issueFilters?.displayFilters ?? {}}
+                  orderBy={orderBy}
                   handleDisplayFiltersUpdate={handleDisplayFilters}
                   displayProperties={issueFilters?.displayProperties ?? {}}
                   handleDisplayPropertiesUpdate={handleDisplayProperties}

diff --git a/web/core/components/issues/archived-issues-header.tsx b/web/core/components/issues/archived-issues-header.tsx
@@ -19,7 +19,7 @@ export const ArchivedIssuesHeader: FC = observer(() => {
   // store hooks
   const { currentProjectDetails } = useProject();
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.ARCHIVED);
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
@@ -87,6 +87,7 @@ export const ArchivedIssuesHeader: FC = observer(() => {
         <FiltersDropdown title="Display" placement="bottom-end">
           <DisplayFiltersSelection
             displayFilters={issueFilters?.displayFilters || {}}
+            orderBy={orderBy}
             displayProperties={issueFilters?.displayProperties || {}}
             handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
             handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}

diff --git a/web/core/components/issues/filters.tsx b/web/core/components/issues/filters.tsx
@@ -38,7 +38,7 @@ const HeaderFilters = observer(({ currentProjectDetails, projectId, workspaceSlu
     project: { projectMemberIds },
   } = useMember();
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.PROJECT);
 
   const { projectStates } = useProjectState();
@@ -124,6 +124,7 @@ const HeaderFilters = observer(({ currentProjectDetails, projectId, workspaceSlu
       <FiltersDropdown title="Display" placement="bottom-end">
         <DisplayFiltersSelection
           layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
+          orderBy={orderBy}
           displayFilters={issueFilters?.displayFilters ?? {}}
           handleDisplayFiltersUpdate={handleDisplayFilters}
           displayProperties={issueFilters?.displayProperties ?? {}}

diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@@ -14,7 +14,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId, cycleId } = useParams();
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.CYCLE);
 
   const { projectLabels } = useLabel();
@@ -92,7 +92,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
         projectId={projectId.toString()}
         filterParams={{
           filters: { ...appliedFilters, cycle: [cycleId?.toString()] },
-          display_filters: issueFilters?.displayFilters,
+          display_filters: { ...issueFilters?.displayFilters, order_by: orderBy },
           display_properties: issueFilters?.displayProperties,
         }}
       />

diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@@ -14,7 +14,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId, moduleId } = useParams();
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.MODULE);
   const { projectLabels } = useLabel();
   const { projectStates } = useProjectState();
@@ -91,7 +91,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
         projectId={projectId.toString()}
         filterParams={{
           filters: { ...appliedFilters, module: [moduleId.toString()] },
-          display_filters: issueFilters?.displayFilters,
+          display_filters: { ...issueFilters?.displayFilters, order_by: orderBy },
           display_properties: issueFilters?.displayProperties,
         }}
       />

diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -22,7 +22,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   // store hooks
   const { projectLabels } = useLabel();
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.PROJECT);
   const { allowPermissions } = useUserPermissions();
 
@@ -88,7 +88,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
             projectId={projectId}
             filterParams={{
               filters: appliedFilters,
-              display_filters: issueFilters?.displayFilters,
+              display_filters: { ...issueFilters?.displayFilters, order_by: orderBy },
               display_properties: issueFilters?.displayProperties,
             }}
           />

diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -25,7 +25,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId, viewId } = useParams();
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters, updateFilters, orderBy },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
   const { projectLabels } = useLabel();
   const { projectStates } = useProjectState();
@@ -94,7 +94,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   const areFiltersEqual = getAreFiltersEqual(appliedFilters ?? {}, issueFilters, viewDetails);
   const viewFilters = {
     filters: cloneDeep(appliedFilters ?? {}),
-    display_filters: cloneDeep(issueFilters?.displayFilters),
+    display_filters: cloneDeep({ ...issueFilters?.displayFilters, order_by: orderBy }),
     display_properties: cloneDeep(issueFilters?.displayProperties),
   };
   // return if no filters are applied

diff --git a/...ponents/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/...ponents/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueGroupByOptions } from "@plane/types";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+} from "@plane/types";
 // components
 import {
   FilterDisplayProperties,
@@ -15,6 +20,7 @@ import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
 
 type Props = {
   displayFilters: IIssueDisplayFilterOptions | undefined;
+  orderBy: TIssueOrderByOptions;
   displayProperties: IIssueDisplayProperties;
   handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
   handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
@@ -27,6 +33,7 @@ type Props = {
 export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
   const {
     displayFilters,
+    orderBy,
     displayProperties,
     handleDisplayFiltersUpdate,
     handleDisplayPropertiesUpdate,
@@ -100,7 +107,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       {isDisplayFilterEnabled("order_by") && !isEmpty(layoutDisplayFiltersOptions?.display_filters?.order_by) && (
         <div className="py-2">
           <FilterOrderBy
-            selectedOrderBy={displayFilters?.order_by}
+            selectedOrderBy={orderBy}
             handleUpdate={(val) =>
               handleDisplayFiltersUpdate({
                 order_by: val,

diff --git a/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -120,7 +120,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
-          enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
+          enableReorder={issuesFilter?.orderBy === "sort_order" && isAllowed}
           enableAddBlock={isAllowed}
           enableSelection={isBulkOperationsEnabled && isAllowed}
           quickAdd={quickAdd}

diff --git a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -78,7 +78,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   const sub_group_by = displayFilters?.sub_group_by;
   const group_by = displayFilters?.group_by;
 
-  const orderBy = displayFilters?.order_by;
+  const orderBy = issuesFilter?.orderBy;
 
   useEffect(() => {
     fetchIssues("init-loader", { canGroup: true, perPageCount: sub_group_by ? 10 : 30 }, viewId);

diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx
@@ -54,7 +54,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
 
   const displayFilters = issuesFilter?.issueFilters?.displayFilters;
   const displayProperties = issuesFilter?.issueFilters?.displayProperties;
-  const orderBy = displayFilters?.order_by || undefined;
+  const orderBy = issuesFilter?.orderBy || undefined;
 
   const group_by = (displayFilters?.group_by || null) as GroupByColumnTypes | null;
   const showEmptyGroup = displayFilters?.show_empty_groups ?? false;

diff --git a/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -52,7 +52,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
   useWorkspaceIssueProperties(workspaceSlug);
   // store
   const {
-    issuesFilter: { filters, fetchFilters, updateFilters },
+    issuesFilter: { filters, orderBy, fetchFilters, updateFilters },
     issues: { clear, getIssueLoader, getPaginationData, groupedIssueIds, fetchIssues, fetchNextIssues },
   } = useIssues(EIssuesStoreType.GLOBAL);
   const { updateIssue, removeIssue, archiveIssue } = useIssuesActions(EIssuesStoreType.GLOBAL);
@@ -202,7 +202,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
       <IssueLayoutHOC layout={EIssueLayoutTypes.SPREADSHEET}>
         <SpreadsheetView
           displayProperties={issueFilters?.displayProperties ?? {}}
-          displayFilters={issueFilters?.displayFilters ?? {}}
+          orderBy={orderBy}
           handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
           issueIds={Array.isArray(issueIds) ? issueIds : []}
           quickActions={renderQuickActions}

diff --git a/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -112,7 +112,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
     <IssueLayoutHOC layout={EIssueLayoutTypes.SPREADSHEET}>
       <SpreadsheetView
         displayProperties={issuesFilter.issueFilters?.displayProperties ?? {}}
-        displayFilters={issuesFilter.issueFilters?.displayFilters ?? {}}
+        orderBy={issuesFilter?.orderBy}
         handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
         issueIds={issueIds}
         quickActions={renderQuickActions}