From 4ac437cb26c50f1621b675b2f4f229f1e52c5f42 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 28 Sep 2023 17:04:57 +0530
Subject: [PATCH 01/10] refactor: filters and display filters to accept
 handlers as props

---
 web/components/headers/project-issues.tsx     | 52 ++++++++++--
 .../display-filters-selection.tsx             | 80 ++++++++++++++-----
 .../display-filters/extra-options.tsx         | 31 ++++---
 .../display-filters/group-by.tsx              | 35 +++-----
 .../display-filters/issue-type.tsx            | 31 +++----
 .../display-filters/order-by.tsx              | 35 +++-----
 .../display-filters/sub-group-by.tsx          | 40 +++-------
 .../issue-layouts/filters/assignees.tsx       | 42 ++++------
 .../issue-layouts/filters/created-by.tsx      | 33 +++-----
 .../filters/filters-selection.tsx             | 58 ++++++++------
 .../issue-layouts/filters/labels.tsx          | 37 ++++-----
 .../issue-layouts/filters/priority.tsx        | 39 +++------
 .../issue-layouts/filters/state-group.tsx     | 39 +++------
 .../issue-layouts/filters/state.tsx           | 43 ++++------
 web/constants/issue.ts                        | 41 +++++-----
 web/store/issue_filters.ts                    | 15 +---
 web/types/view-props.d.ts                     |  2 +
 17 files changed, 310 insertions(+), 343 deletions(-)

diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 086c58cd4d2..183b2999c6b 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -1,14 +1,16 @@
 import { useRouter } from "next/router";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DisplayFiltersSelection, FilterSelection, IssueDropdown, LayoutSelection } from "components/issue-layouts";
 // types
-import { TIssueLayouts } from "types";
+import { IIssueDisplayFilterOptions, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
-export const ProjectIssuesHeader = observer(() => {
+export const ProjectIssuesHeader: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -24,18 +26,54 @@ export const ProjectIssuesHeader = observer(() => {
     });
   };
 
+  const handleFiltersUpdate = (key: keyof IIssueFilterOptions, value: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newValues = issueFilterStore.userFilters?.[key] ?? [];
+
+    if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+    else newValues.push(value);
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: {
+        [key]: newValues,
+      },
+    });
+  };
+
+  const handleDisplayFiltersUpdate = (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    console.log("Triggered");
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        ...updatedDisplayFilter,
+      },
+    });
+  };
+
   return (
     <div className="flex items-center gap-2">
       <LayoutSelection
-        layouts={["calendar", "gantt_chart", "kanban", "list", "spreadsheet"]}
+        layouts={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.layout}
         onChange={(layout) => handleLayoutChange(layout)}
         selectedLayout={issueFilterStore.userDisplayFilters.layout ?? "list"}
       />
       <IssueDropdown title="Filters">
-        <FilterSelection workspaceSlug={workspaceSlug?.toString() ?? ""} projectId={projectId?.toString() ?? ""} />
+        <FilterSelection
+          filters={{}}
+          handleFiltersUpdate={handleFiltersUpdate}
+          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues}
+          projectId={projectId?.toString() ?? ""}
+        />
       </IssueDropdown>
       <IssueDropdown title="View">
-        <DisplayFiltersSelection />
+        <DisplayFiltersSelection
+          displayFilters={issueFilterStore.userDisplayFilters}
+          handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues}
+        />
       </IssueDropdown>
     </div>
   );
diff --git a/web/components/issue-layouts/display-filters/display-filters-selection.tsx b/web/components/issue-layouts/display-filters/display-filters-selection.tsx
index 01394548db3..26fbf9d7f74 100644
--- a/web/components/issue-layouts/display-filters/display-filters-selection.tsx
+++ b/web/components/issue-layouts/display-filters/display-filters-selection.tsx
@@ -1,8 +1,6 @@
 import React from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import {
   FilterDisplayProperties,
@@ -12,23 +10,26 @@ import {
   FilterOrderBy,
   FilterSubGroupBy,
 } from "components/issue-layouts";
-// helpers
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+// types
+import { IIssueDisplayFilterOptions } from "types";
+import { ILayoutDisplayFiltersOptions } from "constants/issue";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions;
+};
 
-export const DisplayFiltersSelection = observer(() => {
-  const { issueFilter: issueFilterStore } = useMobxStore();
+export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
+  const { displayFilters, handleDisplayFiltersUpdate, layoutDisplayFiltersOptions } = props;
 
   const isDisplayFilterEnabled = (displayFilter: string) =>
-    ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.display_filters[
-      issueFilterStore.userDisplayFilters.layout ?? "list"
-    ].includes(displayFilter);
+    layoutDisplayFiltersOptions.display_filters[displayFilters.layout ?? "list"].includes(displayFilter);
 
   return (
     <div className="w-full h-full overflow-hidden overflow-y-auto relative px-2.5 divide-y divide-custom-border-200">
       {/* display properties */}
-      {ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.display_properties[
-        issueFilterStore.userDisplayFilters.layout ?? "list"
-      ] && (
+      {layoutDisplayFiltersOptions.display_properties[displayFilters.layout ?? "list"] && (
         <div className="py-2">
           <FilterDisplayProperties />
         </div>
@@ -37,36 +38,75 @@ export const DisplayFiltersSelection = observer(() => {
       {/* group by */}
       {isDisplayFilterEnabled("group_by") && (
         <div className="py-2">
-          <FilterGroupBy />
+          <FilterGroupBy
+            selectedGroupBy={displayFilters.group_by}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                group_by: val,
+              })
+            }
+          />
         </div>
       )}
 
       {/* sub-group by */}
       {isDisplayFilterEnabled("sub_group_by") && (
         <div className="py-2">
-          <FilterSubGroupBy />
+          <FilterSubGroupBy
+            selectedGroupBy={displayFilters.group_by}
+            selectedSubGroupBy={displayFilters.sub_group_by}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                sub_group_by: val,
+              })
+            }
+          />
         </div>
       )}
 
       {/* order by */}
       {isDisplayFilterEnabled("order_by") && (
         <div className="py-2">
-          <FilterOrderBy />
+          <FilterOrderBy
+            selectedOrderBy={displayFilters.order_by}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                order_by: val,
+              })
+            }
+          />
         </div>
       )}
 
       {/* issue type */}
       {isDisplayFilterEnabled("issue_type") && (
         <div className="py-2">
-          <FilterIssueType />
+          <FilterIssueType
+            selectedIssueType={displayFilters.type}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                type: val,
+              })
+            }
+          />
         </div>
       )}
 
       {/* Options */}
-      {ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.extra_options[issueFilterStore.userDisplayFilters.layout ?? "list"]
-        .access && (
+      {layoutDisplayFiltersOptions.extra_options[displayFilters.layout ?? "list"].access && (
         <div className="py-2">
-          <FilterExtraOptions />
+          <FilterExtraOptions
+            selectedExtraOptions={{
+              show_empty_groups: displayFilters.show_empty_groups ?? false,
+              sub_issue: displayFilters.sub_issue ?? false,
+            }}
+            handleUpdate={(key, val) =>
+              handleDisplayFiltersUpdate({
+                [key]: val,
+              })
+            }
+            enabledExtraOptions={layoutDisplayFiltersOptions.extra_options[displayFilters.layout ?? "list"].values}
+          />
         </div>
       )}
     </div>
diff --git a/web/components/issue-layouts/display-filters/extra-options.tsx b/web/components/issue-layouts/display-filters/extra-options.tsx
index 8b235443562..ba9fe2f8303 100644
--- a/web/components/issue-layouts/display-filters/extra-options.tsx
+++ b/web/components/issue-layouts/display-filters/extra-options.tsx
@@ -1,24 +1,28 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
 
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
+// types
+import { IIssueDisplayFilterOptions, TIssueExtraOptions } from "types";
 // constants
-import { ISSUE_EXTRA_OPTIONS, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { ISSUE_EXTRA_OPTIONS } from "constants/issue";
 
-export const FilterExtraOptions = observer(() => {
-  const [previewEnabled, setPreviewEnabled] = useState(true);
+type Props = {
+  selectedExtraOptions: {
+    sub_issue: boolean;
+    show_empty_groups: boolean;
+  };
+  handleUpdate: (key: keyof IIssueDisplayFilterOptions, val: boolean) => void;
+  enabledExtraOptions: TIssueExtraOptions[];
+};
 
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
+export const FilterExtraOptions: React.FC<Props> = observer((props) => {
+  const { selectedExtraOptions, handleUpdate, enabledExtraOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const isExtraOptionEnabled = (option: string) =>
-    ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.extra_options[
-      issueFilterStore.userDisplayFilters.layout ?? "list"
-    ].values.includes(option);
+  const isExtraOptionEnabled = (option: TIssueExtraOptions) => enabledExtraOptions.includes(option);
 
   return (
     <>
@@ -35,7 +39,8 @@ export const FilterExtraOptions = observer(() => {
             return (
               <FilterOption
                 key={option.key}
-                isChecked={issueFilterStore?.userDisplayFilters?.[option.key] ? true : false}
+                isChecked={selectedExtraOptions?.[option.key] ? true : false}
+                onClick={() => handleUpdate(option.key, !selectedExtraOptions?.[option.key])}
                 title={option.title}
               />
             );
diff --git a/web/components/issue-layouts/display-filters/group-by.tsx b/web/components/issue-layouts/display-filters/group-by.tsx
index 5ad584b584a..e810ea2433c 100644
--- a/web/components/issue-layouts/display-filters/group-by.tsx
+++ b/web/components/issue-layouts/display-filters/group-by.tsx
@@ -1,10 +1,6 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// mobx
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
 // types
@@ -12,24 +8,15 @@ import { TIssueGroupByOptions } from "types";
 // constants
 import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
 
-export const FilterGroupBy = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
-
-  const [previewEnabled, setPreviewEnabled] = React.useState(true);
+type Props = {
+  selectedGroupBy: TIssueGroupByOptions | undefined;
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+};
 
-  const handleGroupBy = (value: TIssueGroupByOptions) => {
-    if (!workspaceSlug || !projectId) return;
+export const FilterGroupBy: React.FC<Props> = observer((props) => {
+  const { selectedGroupBy, handleUpdate } = props;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        group_by: value,
-      },
-    });
-  };
+  const [previewEnabled, setPreviewEnabled] = useState(true);
 
   return (
     <>
@@ -43,8 +30,8 @@ export const FilterGroupBy = observer(() => {
           {ISSUE_GROUP_BY_OPTIONS.map((groupBy) => (
             <FilterOption
               key={groupBy?.key}
-              isChecked={issueFilterStore?.userDisplayFilters?.group_by === groupBy?.key ? true : false}
-              onClick={() => handleGroupBy(groupBy.key)}
+              isChecked={selectedGroupBy === groupBy?.key ? true : false}
+              onClick={() => handleUpdate(groupBy.key)}
               title={groupBy.title}
               multiple={false}
             />
diff --git a/web/components/issue-layouts/display-filters/issue-type.tsx b/web/components/issue-layouts/display-filters/issue-type.tsx
index c2fe34857c4..8d0532a0927 100644
--- a/web/components/issue-layouts/display-filters/issue-type.tsx
+++ b/web/components/issue-layouts/display-filters/issue-type.tsx
@@ -1,10 +1,6 @@
 import React from "react";
-
-import { useRouter } from "next/router";
-
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
 // types
@@ -12,25 +8,16 @@ import { TIssueTypeFilters } from "types";
 // constants
 import { ISSUE_FILTER_OPTIONS } from "constants/issue";
 
-export const FilterIssueType = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+type Props = {
+  selectedIssueType: TIssueTypeFilters | undefined;
+  handleUpdate: (val: TIssueTypeFilters) => void;
+};
 
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
+export const FilterIssueType: React.FC<Props> = observer((props) => {
+  const { selectedIssueType, handleUpdate } = props;
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
-  const handleIssueType = (value: TIssueTypeFilters) => {
-    if (!workspaceSlug || !projectId) return;
-
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        type: value,
-      },
-    });
-  };
-
   return (
     <>
       <FilterHeader
@@ -43,8 +30,8 @@ export const FilterIssueType = observer(() => {
           {ISSUE_FILTER_OPTIONS.map((issueType) => (
             <FilterOption
               key={issueType?.key}
-              isChecked={issueFilterStore?.userDisplayFilters?.type === issueType?.key ? true : false}
-              onClick={() => handleIssueType(issueType?.key)}
+              isChecked={selectedIssueType === issueType?.key ? true : false}
+              onClick={() => handleUpdate(issueType?.key)}
               title={issueType.title}
               multiple={false}
             />
diff --git a/web/components/issue-layouts/display-filters/order-by.tsx b/web/components/issue-layouts/display-filters/order-by.tsx
index b355dbd1bac..9f3471a8f2f 100644
--- a/web/components/issue-layouts/display-filters/order-by.tsx
+++ b/web/components/issue-layouts/display-filters/order-by.tsx
@@ -1,10 +1,6 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// mobx
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
 // types
@@ -12,24 +8,15 @@ import { TIssueOrderByOptions } from "types";
 // constants
 import { ISSUE_ORDER_BY_OPTIONS } from "constants/issue";
 
-export const FilterOrderBy = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
-
-  const [previewEnabled, setPreviewEnabled] = React.useState(true);
+type Props = {
+  selectedOrderBy: TIssueOrderByOptions | undefined;
+  handleUpdate: (val: TIssueOrderByOptions) => void;
+};
 
-  const handleOrderBy = (value: TIssueOrderByOptions) => {
-    if (!workspaceSlug || !projectId) return;
+export const FilterOrderBy: React.FC<Props> = observer((props) => {
+  const { selectedOrderBy, handleUpdate } = props;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        order_by: value,
-      },
-    });
-  };
+  const [previewEnabled, setPreviewEnabled] = useState(true);
 
   return (
     <>
@@ -43,8 +30,8 @@ export const FilterOrderBy = observer(() => {
           {ISSUE_ORDER_BY_OPTIONS.map((orderBy) => (
             <FilterOption
               key={orderBy?.key}
-              isChecked={issueFilterStore?.userDisplayFilters?.order_by === orderBy?.key ? true : false}
-              onClick={() => handleOrderBy(orderBy.key)}
+              isChecked={selectedOrderBy === orderBy?.key ? true : false}
+              onClick={() => handleUpdate(orderBy.key)}
               title={orderBy.title}
               multiple={false}
             />
diff --git a/web/components/issue-layouts/display-filters/sub-group-by.tsx b/web/components/issue-layouts/display-filters/sub-group-by.tsx
index ad83067ec16..199b178bef2 100644
--- a/web/components/issue-layouts/display-filters/sub-group-by.tsx
+++ b/web/components/issue-layouts/display-filters/sub-group-by.tsx
@@ -1,10 +1,6 @@
 import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
 // types
@@ -12,24 +8,16 @@ import { TIssueGroupByOptions } from "types";
 // constants
 import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
 
-export const FilterSubGroupBy = observer(() => {
-  const [previewEnabled, setPreviewEnabled] = useState(true);
+type Props = {
+  selectedGroupBy: TIssueGroupByOptions | undefined;
+  selectedSubGroupBy: TIssueGroupByOptions | undefined;
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+};
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
+  const { selectedGroupBy, selectedSubGroupBy, handleUpdate } = props;
 
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
-
-  const handleSubGroupBy = (value: TIssueGroupByOptions) => {
-    if (!workspaceSlug || !projectId) return;
-
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        sub_group_by: value,
-      },
-    });
-  };
+  const [previewEnabled, setPreviewEnabled] = useState(true);
 
   return (
     <>
@@ -41,17 +29,13 @@ export const FilterSubGroupBy = observer(() => {
       {previewEnabled && (
         <div>
           {ISSUE_GROUP_BY_OPTIONS.map((subGroupBy) => {
-            if (
-              issueFilterStore.userDisplayFilters.group_by !== null &&
-              subGroupBy.key === issueFilterStore.userDisplayFilters.group_by
-            )
-              return null;
+            if (selectedGroupBy !== null && subGroupBy.key === selectedGroupBy) return null;
 
             return (
               <FilterOption
                 key={subGroupBy?.key}
-                isChecked={issueFilterStore?.userDisplayFilters?.sub_group_by === subGroupBy?.key ? true : false}
-                onClick={() => handleSubGroupBy(subGroupBy.key)}
+                isChecked={selectedSubGroupBy === subGroupBy?.key ? true : false}
+                onClick={() => handleUpdate(subGroupBy.key)}
                 title={subGroupBy.title}
                 multiple={false}
               />
diff --git a/web/components/issue-layouts/filters/assignees.tsx b/web/components/issue-layouts/filters/assignees.tsx
index f79db0e33f9..869861e93fb 100644
--- a/web/components/issue-layouts/filters/assignees.tsx
+++ b/web/components/issue-layouts/filters/assignees.tsx
@@ -1,40 +1,33 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
 // ui
 import { Avatar, Loader } from "components/ui";
 
-type Props = { workspaceSlug: string; projectId: string; itemsToRender: number };
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  projectId: string;
+  searchQuery: string;
+};
 
 export const FilterAssignees: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, itemsToRender } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
   const store = useMobxStore();
-  const { issueFilter: issueFilterStore, project: projectStore } = store;
-
-  const handleUpdateAssignees = (value: string) => {
-    const newValues = issueFilterStore.userFilters?.assignees ?? [];
-
-    if (issueFilterStore.userFilters?.assignees?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-    else newValues.push(value);
-
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        assignees: newValues,
-      },
-    });
-  };
+  const { project: projectStore } = store;
 
-  const appliedFiltersCount = issueFilterStore.userFilters?.assignees?.length ?? 0;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const filteredOptions = projectStore.members?.[projectId?.toString() ?? ""]?.filter((member) =>
-    member.member.display_name.toLowerCase().includes(issueFilterStore.filtersSearchQuery.toLowerCase())
+    member.member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
   return (
@@ -53,13 +46,8 @@ export const FilterAssignees: React.FC<Props> = observer((props) => {
                 .map((member) => (
                   <FilterOption
                     key={`assignees-${member?.member?.id}`}
-                    isChecked={
-                      issueFilterStore?.userFilters?.assignees != null &&
-                      issueFilterStore?.userFilters?.assignees.includes(member.member?.id)
-                        ? true
-                        : false
-                    }
-                    onClick={() => handleUpdateAssignees(member.member?.id)}
+                    isChecked={appliedFilters?.includes(member.member?.id) ? true : false}
+                    onClick={() => handleUpdate(member.member?.id)}
                     icon={<Avatar user={member.member} height="18px" width="18px" />}
                     title={member.member?.display_name}
                   />
diff --git a/web/components/issue-layouts/filters/created-by.tsx b/web/components/issue-layouts/filters/created-by.tsx
index c34b461b14d..70d7ac7b1c1 100644
--- a/web/components/issue-layouts/filters/created-by.tsx
+++ b/web/components/issue-layouts/filters/created-by.tsx
@@ -8,33 +8,26 @@ import { FilterHeader, FilterOption } from "components/issue-layouts";
 // ui
 import { Avatar, Loader } from "components/ui";
 
-type Props = { workspaceSlug: string; projectId: string; itemsToRender: number };
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  projectId: string;
+  searchQuery: string;
+};
 
 export const FilterCreatedBy: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, itemsToRender } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
   const store = useMobxStore();
-  const { issueFilter: issueFilterStore, project: projectStore } = store;
+  const { project: projectStore } = store;
 
-  const handleUpdateCreatedBy = (value: string) => {
-    const newValues = issueFilterStore.userFilters?.created_by ?? [];
-
-    if (issueFilterStore.userFilters?.created_by?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-    else newValues.push(value);
-
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        created_by: newValues,
-      },
-    });
-  };
-
-  const appliedFiltersCount = issueFilterStore.userFilters?.created_by?.length ?? 0;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const filteredOptions = projectStore.members?.[projectId?.toString() ?? ""]?.filter((member) =>
-    member.member.display_name.toLowerCase().includes(issueFilterStore.filtersSearchQuery.toLowerCase())
+    member.member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
   return (
@@ -53,8 +46,8 @@ export const FilterCreatedBy: React.FC<Props> = observer((props) => {
                 .map((member) => (
                   <FilterOption
                     key={`created-by-${member.member?.id}`}
-                    isChecked={issueFilterStore?.userFilters?.created_by?.includes(member.member?.id) ? true : false}
-                    onClick={() => handleUpdateCreatedBy(member.member?.id)}
+                    isChecked={appliedFilters?.includes(member.member?.id) ? true : false}
+                    onClick={() => handleUpdate(member.member?.id)}
                     icon={<Avatar user={member.member} height="18px" width="18px" />}
                     title={member.member?.display_name}
                   />
diff --git a/web/components/issue-layouts/filters/filters-selection.tsx b/web/components/issue-layouts/filters/filters-selection.tsx
index 71aa144bf7b..01974e8d3b4 100644
--- a/web/components/issue-layouts/filters/filters-selection.tsx
+++ b/web/components/issue-layouts/filters/filters-selection.tsx
@@ -19,17 +19,21 @@ import { getStatesList } from "helpers/state.helper";
 // types
 import { IIssueFilterOptions } from "types";
 // constants
-import { ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
+import { ILayoutDisplayFiltersOptions, ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
 
 type Props = {
-  workspaceSlug: string;
+  filters: IIssueFilterOptions;
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions;
   projectId: string;
 };
 
 export const FilterSelection: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId } = props;
+  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, projectId } = props;
 
-  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const { project: projectStore } = useMobxStore();
 
   const statesList = getStatesList(projectStore.states?.[projectId?.toString() ?? ""]);
 
@@ -97,16 +101,12 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
             type="text"
             className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
             placeholder="Search"
-            value={issueFilterStore.filtersSearchQuery}
-            onChange={(e) => issueFilterStore.updateFiltersSearchQuery(e.target.value)}
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
             autoFocus
           />
-          {issueFilterStore.filtersSearchQuery !== "" && (
-            <button
-              type="button"
-              className="grid place-items-center"
-              onClick={() => issueFilterStore.updateFiltersSearchQuery("")}
-            >
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
               <X className="text-custom-text-300" size={12} strokeWidth={2} />
             </button>
           )}
@@ -116,9 +116,10 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         {/* priority */}
         <div className="py-2">
           <FilterPriority
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
+            appliedFilters={filters.priority ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("priority", val)}
             itemsToRender={filtersToRender.priority?.currentLength ?? 0}
+            searchQuery={filtersSearchQuery}
           />
           {isViewMoreVisible("priority") && (
             <button
@@ -133,9 +134,10 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         {/* state group */}
         <div className="py-2">
           <FilterStateGroup
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
+            appliedFilters={filters.state_group ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("state_group", val)}
             itemsToRender={filtersToRender.state_group?.currentLength ?? 0}
+            searchQuery={filtersSearchQuery}
           />
           {isViewMoreVisible("state_group") && (
             <button
@@ -150,9 +152,11 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         {/* state */}
         <div className="py-2">
           <FilterState
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
+            appliedFilters={filters.state ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("state", val)}
             itemsToRender={filtersToRender.state?.currentLength ?? 0}
+            searchQuery={filtersSearchQuery}
+            projectId={projectId}
           />
           {isViewMoreVisible("state") && (
             <button
@@ -167,9 +171,11 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         {/* assignees */}
         <div className="py-2">
           <FilterAssignees
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
+            appliedFilters={filters.assignees ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
             itemsToRender={filtersToRender.assignees?.currentLength ?? 0}
+            projectId={projectId}
+            searchQuery={filtersSearchQuery}
           />
           {isViewMoreVisible("assignees") && (
             <button
@@ -184,9 +190,11 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         {/* created_by */}
         <div className="py-2">
           <FilterCreatedBy
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
+            appliedFilters={filters.created_by ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
             itemsToRender={filtersToRender.created_by?.currentLength ?? 0}
+            projectId={projectId}
+            searchQuery={filtersSearchQuery}
           />
           {isViewMoreVisible("created_by") && (
             <button
@@ -201,9 +209,11 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         {/* labels */}
         <div className="py-2">
           <FilterLabels
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
+            appliedFilters={filters.labels ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("labels", val)}
             itemsToRender={filtersToRender.labels?.currentLength ?? 0}
+            projectId={projectId}
+            searchQuery={filtersSearchQuery}
           />
           {isViewMoreVisible("labels") && (
             <button
diff --git a/web/components/issue-layouts/filters/labels.tsx b/web/components/issue-layouts/filters/labels.tsx
index b71c82dc215..258a8872ade 100644
--- a/web/components/issue-layouts/filters/labels.tsx
+++ b/web/components/issue-layouts/filters/labels.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
@@ -12,33 +12,26 @@ const LabelIcons = ({ color }: { color: string }) => (
   <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
 );
 
-type Props = { workspaceSlug: string; projectId: string; itemsToRender: number };
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  projectId: string;
+  searchQuery: string;
+};
 
 export const FilterLabels: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, itemsToRender } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
   const store = useMobxStore();
-  const { issueFilter: issueFilterStore, project: projectStore } = store;
-
-  const handleUpdateLabels = (value: string) => {
-    const newValues = issueFilterStore.userFilters?.labels ?? [];
-
-    if (issueFilterStore.userFilters?.labels?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-    else newValues.push(value);
-
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        labels: newValues,
-      },
-    });
-  };
+  const { project: projectStore } = store;
 
-  const appliedFiltersCount = issueFilterStore.userFilters?.labels?.length ?? 0;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const filteredOptions = projectStore.labels?.[projectId?.toString() ?? ""]?.filter((label) =>
-    label.name.toLowerCase().includes(issueFilterStore.filtersSearchQuery.toLowerCase())
+    label.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
   return (
@@ -57,8 +50,8 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
                 .map((label) => (
                   <FilterOption
                     key={label?.id}
-                    isChecked={issueFilterStore?.userFilters?.labels?.includes(label?.id) ? true : false}
-                    onClick={() => handleUpdateLabels(label?.id)}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
                     icon={<LabelIcons color={label.color} />}
                     title={label.name}
                   />
diff --git a/web/components/issue-layouts/filters/priority.tsx b/web/components/issue-layouts/filters/priority.tsx
index 659f76f3277..5c407d3a7dd 100644
--- a/web/components/issue-layouts/filters/priority.tsx
+++ b/web/components/issue-layouts/filters/priority.tsx
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
 // icons
@@ -50,34 +48,21 @@ const PriorityIcons = ({
   );
 };
 
-type Props = { workspaceSlug: string; projectId: string; itemsToRender: number };
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  searchQuery: string;
+};
 
 export const FilterPriority: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, itemsToRender } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
-
-  const handleUpdatePriority = (value: string) => {
-    const newValues = issueFilterStore.userFilters?.priority ?? [];
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-    if (issueFilterStore.userFilters?.priority?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-    else newValues.push(value);
-
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        priority: newValues,
-      },
-    });
-  };
-
-  const appliedFiltersCount = issueFilterStore.userFilters?.priority?.length ?? 0;
-
-  const filteredOptions = ISSUE_PRIORITIES.filter((p) =>
-    p.key.includes(issueFilterStore.filtersSearchQuery.toLowerCase())
-  );
+  const filteredOptions = ISSUE_PRIORITIES.filter((p) => p.key.includes(searchQuery.toLowerCase()));
 
   return (
     <>
@@ -94,8 +79,8 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
               .map((priority) => (
                 <FilterOption
                   key={priority.key}
-                  isChecked={issueFilterStore.userFilters?.priority?.includes(priority.key) ? true : false}
-                  onClick={() => handleUpdatePriority(priority.key)}
+                  isChecked={appliedFilters?.includes(priority.key) ? true : false}
+                  onClick={() => handleUpdate(priority.key)}
                   icon={<PriorityIcons priority={priority.key} />}
                   title={priority.title}
                 />
diff --git a/web/components/issue-layouts/filters/state-group.tsx b/web/components/issue-layouts/filters/state-group.tsx
index 2601eb308d1..9a32dbd7aff 100644
--- a/web/components/issue-layouts/filters/state-group.tsx
+++ b/web/components/issue-layouts/filters/state-group.tsx
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
 // icons
@@ -10,34 +8,21 @@ import { StateGroupIcon } from "components/icons";
 // constants
 import { ISSUE_STATE_GROUPS } from "constants/issue";
 
-type Props = { workspaceSlug: string; projectId: string; itemsToRender: number };
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  searchQuery: string;
+};
 
 export const FilterStateGroup: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, itemsToRender } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
-
-  const handleUpdateStateGroup = (value: string) => {
-    const newValues = issueFilterStore.userFilters?.state_group ?? [];
-
-    if (issueFilterStore.userFilters?.state_group?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-    else newValues.push(value);
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        state_group: newValues,
-      },
-    });
-  };
-
-  const appliedFiltersCount = issueFilterStore.userFilters?.state_group?.length ?? 0;
-
-  const filteredOptions = ISSUE_STATE_GROUPS.filter((s) =>
-    s.key.includes(issueFilterStore.filtersSearchQuery.toLowerCase())
-  );
+  const filteredOptions = ISSUE_STATE_GROUPS.filter((s) => s.key.includes(searchQuery.toLowerCase()));
 
   return (
     <>
@@ -54,8 +39,8 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
               .map((stateGroup) => (
                 <FilterOption
                   key={stateGroup.key}
-                  isChecked={issueFilterStore.userFilters?.state_group?.includes(stateGroup.key) ? true : false}
-                  onClick={() => handleUpdateStateGroup(stateGroup.key)}
+                  isChecked={appliedFilters?.includes(stateGroup.key) ? true : false}
+                  onClick={() => handleUpdate(stateGroup.key)}
                   icon={<StateGroupIcon stateGroup={stateGroup.key} />}
                   title={stateGroup.title}
                 />
diff --git a/web/components/issue-layouts/filters/state.tsx b/web/components/issue-layouts/filters/state.tsx
index a9bace64859..031715bf49f 100644
--- a/web/components/issue-layouts/filters/state.tsx
+++ b/web/components/issue-layouts/filters/state.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
@@ -12,37 +12,28 @@ import { StateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 
-type Props = { workspaceSlug: string; projectId: string; itemsToRender: number };
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  projectId: string;
+  searchQuery: string;
+};
 
 export const FilterState: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, itemsToRender } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
   const store = useMobxStore();
-  const { issueFilter: issueFilterStore, project: projectStore } = store;
+  const { project: projectStore } = store;
 
   const statesByGroups = projectStore.states?.[projectId?.toString() ?? ""];
   const statesList = getStatesList(statesByGroups);
 
-  const handleUpdateState = (value: string) => {
-    const newValues = issueFilterStore.userFilters?.state ?? [];
-
-    if (issueFilterStore.userFilters?.state?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-    else newValues.push(value);
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        state: newValues,
-      },
-    });
-  };
-
-  const appliedFiltersCount = issueFilterStore.userFilters?.state?.length ?? 0;
-
-  const filteredOptions = statesList?.filter((s) =>
-    s.name.toLowerCase().includes(issueFilterStore.filtersSearchQuery.toLowerCase())
-  );
+  const filteredOptions = statesList?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
 
   return (
     <>
@@ -59,10 +50,10 @@ export const FilterState: React.FC<Props> = observer((props) => {
                 {filteredOptions.slice(0, itemsToRender).map((state) => (
                   <FilterOption
                     key={state.id}
-                    isChecked={issueFilterStore?.userFilters?.state?.includes(state?.id) ? true : false}
-                    onClick={() => handleUpdateState(state?.id)}
-                    icon={<StateGroupIcon stateGroup={state?.group} color={state?.color} />}
-                    title={state?.name}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
+                    title={state.name}
                   />
                 ))}
               </>
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 52fc6c4dba8..5514a8b1b0f 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -2,8 +2,8 @@
 import { Calendar, GanttChart, Kanban, List, Sheet } from "lucide-react";
 // types
 import {
-  IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
+  TIssueExtraOptions,
   TIssueGroupByOptions,
   TIssueLayouts,
   TIssueOrderByOptions,
@@ -107,12 +107,11 @@ export const ISSUE_DISPLAY_PROPERTIES: {
 ];
 
 export const ISSUE_EXTRA_OPTIONS: {
-  key: keyof IIssueDisplayFilterOptions;
+  key: TIssueExtraOptions;
   title: string;
 }[] = [
   { key: "sub_issue", title: "Show sub-issues" }, // in spreadsheet its always false
   { key: "show_empty_groups", title: "Show empty states" }, // filter on front-end
-  { key: "start_target_date", title: "Start target Date" }, // gantt always be true
 ];
 
 export const ISSUE_LAYOUTS: {
@@ -201,25 +200,27 @@ export const ISSUE_GANTT_DISPLAY_FILTERS = [
   { key: "sub_issue", title: "Sub Issue" },
 ];
 
-export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
-  [key: string]: {
-    layout: TIssueLayouts[];
-    filters: {
-      [key in TIssueLayouts]: string[];
-    };
-    display_properties: {
-      [key in TIssueLayouts]: boolean;
-    };
-    display_filters: {
-      [key in TIssueLayouts]: string[];
-    };
-    extra_options: {
-      [key in TIssueLayouts]: {
-        access: boolean;
-        values: string[];
-      };
+export interface ILayoutDisplayFiltersOptions {
+  layout: TIssueLayouts[];
+  filters: {
+    [key in TIssueLayouts]: string[];
+  };
+  display_properties: {
+    [key in TIssueLayouts]: boolean;
+  };
+  display_filters: {
+    [key in TIssueLayouts]: string[];
+  };
+  extra_options: {
+    [key in TIssueLayouts]: {
+      access: boolean;
+      values: TIssueExtraOptions[];
     };
   };
+}
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+  [layoutType: string]: ILayoutDisplayFiltersOptions;
 } = {
   my_issues: {
     layout: ["list", "kanban"],
diff --git a/web/store/issue_filters.ts b/web/store/issue_filters.ts
index cfecd674f8d..35ade307ab1 100644
--- a/web/store/issue_filters.ts
+++ b/web/store/issue_filters.ts
@@ -23,7 +23,6 @@ export interface IIssueFilterStore {
   userFilters: IIssueFilterOptions;
   defaultDisplayFilters: IIssueDisplayFilterOptions;
   defaultFilters: IIssueFilterOptions;
-  filtersSearchQuery: string;
 
   // action
   fetchUserProjectFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
@@ -37,7 +36,6 @@ export interface IIssueFilterStore {
     projectId: string,
     properties: Partial<IIssueDisplayProperties>
   ) => Promise<void>;
-  updateFiltersSearchQuery: (query: string) => void;
 
   // computed
   appliedFilters: TIssueParams[] | null;
@@ -68,7 +66,6 @@ class IssueFilterStore implements IIssueFilterStore {
     created_on: true,
     updated_on: true,
   };
-  filtersSearchQuery: string = "";
 
   // root store
   rootStore;
@@ -88,13 +85,11 @@ class IssueFilterStore implements IIssueFilterStore {
       userDisplayProperties: observable.ref,
       userDisplayFilters: observable.ref,
       userFilters: observable.ref,
-      filtersSearchQuery: observable.ref,
 
       // actions
       fetchUserProjectFilters: action,
       updateUserFilters: action,
       updateDisplayProperties: action,
-      updateFiltersSearchQuery: action,
 
       // computed
       appliedFilters: computed,
@@ -208,7 +203,9 @@ class IssueFilterStore implements IIssueFilterStore {
         this.userDisplayFilters = newViewProps.display_filters;
       });
 
-      await this.projectService.setProjectView(workspaceSlug, projectId, {
+      console.log("Saving...");
+
+      this.projectService.setProjectView(workspaceSlug, projectId, {
         view_props: newViewProps,
       });
     } catch (error) {
@@ -248,12 +245,6 @@ class IssueFilterStore implements IIssueFilterStore {
       console.log("Failed to update user filters in issue filter store", error);
     }
   };
-
-  updateFiltersSearchQuery: (query: string) => void = (query) => {
-    runInAction(() => {
-      this.filtersSearchQuery = query;
-    });
-  };
 }
 
 export default IssueFilterStore;
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
index c142ec0c6fb..3488b8f4efa 100644
--- a/web/types/view-props.d.ts
+++ b/web/types/view-props.d.ts
@@ -30,6 +30,8 @@ export type TIssueOrderByOptions =
 
 export type TIssueTypeFilters = "active" | "backlog" | null;
 
+export type TIssueExtraOptions = "show_empty_groups" | "sub_issue";
+
 export type TIssueParams =
   | "priority"
   | "state_group"

From fd80686cf4e9f0c099580d68117b681ea1f86d6e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 28 Sep 2023 17:18:18 +0530
Subject: [PATCH 02/10] refactor: filters and display filters folder structure

---
 web/components/headers/project-issues.tsx     | 12 ++---
 .../issue-layouts/helpers/dropdown.tsx        | 47 ----------------
 web/components/issue-layouts/index.ts         |  4 --
 web/components/issue-layouts/root.tsx         |  8 +--
 .../display-filters-selection.tsx             |  2 +-
 .../display-filters/display-properties.tsx    |  0
 .../header}/display-filters/extra-options.tsx |  2 +-
 .../header}/display-filters/group-by.tsx      |  2 +-
 .../header}/display-filters/index.ts          |  0
 .../header}/display-filters/issue-type.tsx    |  2 +-
 .../header}/display-filters/order-by.tsx      |  2 +-
 .../header}/display-filters/sub-group-by.tsx  |  2 +-
 .../header}/filters/assignees.tsx             |  2 +-
 .../header}/filters/created-by.tsx            |  6 +--
 .../header}/filters/filters-selection.tsx     |  6 +--
 .../issue-layouts/header}/filters/index.ts    |  0
 .../issue-layouts/header}/filters/labels.tsx  |  2 +-
 .../header}/filters/priority.tsx              |  2 +-
 .../header}/filters/start-date.tsx            |  6 +--
 .../header}/filters/state-group.tsx           |  2 +-
 .../issue-layouts/header}/filters/state.tsx   |  2 +-
 .../header}/filters/target-date.tsx           |  6 +--
 .../issue-layouts/header/helpers/dropdown.tsx | 53 +++++++++++++++++++
 .../header}/helpers/filter-header.tsx         |  0
 .../header}/helpers/filter-option.tsx         |  0
 .../issue-layouts/header}/helpers/index.ts    |  0
 .../issues/issue-layouts/header/index.ts      |  4 ++
 .../header}/layout-selection.tsx              |  0
 web/components/issues/issue-layouts/index.ts  |  1 +
 web/store/issue_filters.ts                    |  2 -
 30 files changed, 90 insertions(+), 87 deletions(-)
 delete mode 100644 web/components/issue-layouts/helpers/dropdown.tsx
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/display-filters-selection.tsx (98%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/display-properties.tsx (100%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/extra-options.tsx (95%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/group-by.tsx (94%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/index.ts (100%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/issue-type.tsx (94%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/order-by.tsx (94%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/display-filters/sub-group-by.tsx (95%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/assignees.tsx (96%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/created-by.tsx (96%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/filters-selection.tsx (99%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/index.ts (100%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/labels.tsx (96%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/priority.tsx (97%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/start-date.tsx (94%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/state-group.tsx (96%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/state.tsx (97%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/filters/target-date.tsx (94%)
 create mode 100644 web/components/issues/issue-layouts/header/helpers/dropdown.tsx
 rename web/components/{issue-layouts => issues/issue-layouts/header}/helpers/filter-header.tsx (100%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/helpers/filter-option.tsx (100%)
 rename web/components/{issue-layouts => issues/issue-layouts/header}/helpers/index.ts (100%)
 create mode 100644 web/components/issues/issue-layouts/header/index.ts
 rename web/components/{issue-layouts => issues/issue-layouts/header}/layout-selection.tsx (100%)

diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 183b2999c6b..df92ed2d0ee 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { DisplayFiltersSelection, FilterSelection, IssueDropdown, LayoutSelection } from "components/issue-layouts";
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 // types
 import { IIssueDisplayFilterOptions, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
@@ -44,8 +44,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const handleDisplayFiltersUpdate = (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
     if (!workspaceSlug || !projectId) return;
 
-    console.log("Triggered");
-
     issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
       display_filters: {
         ...updatedDisplayFilter,
@@ -60,21 +58,21 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         onChange={(layout) => handleLayoutChange(layout)}
         selectedLayout={issueFilterStore.userDisplayFilters.layout ?? "list"}
       />
-      <IssueDropdown title="Filters">
+      <FiltersDropdown title="Filters">
         <FilterSelection
           filters={{}}
           handleFiltersUpdate={handleFiltersUpdate}
           layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues}
           projectId={projectId?.toString() ?? ""}
         />
-      </IssueDropdown>
-      <IssueDropdown title="View">
+      </FiltersDropdown>
+      <FiltersDropdown title="View">
         <DisplayFiltersSelection
           displayFilters={issueFilterStore.userDisplayFilters}
           handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
           layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues}
         />
-      </IssueDropdown>
+      </FiltersDropdown>
     </div>
   );
 });
diff --git a/web/components/issue-layouts/helpers/dropdown.tsx b/web/components/issue-layouts/helpers/dropdown.tsx
deleted file mode 100644
index 33e813d99c5..00000000000
--- a/web/components/issue-layouts/helpers/dropdown.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Fragment } from "react";
-
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// icons
-import { ChevronUp } from "lucide-react";
-
-interface IIssueDropdown {
-  children: React.ReactNode;
-  title?: string;
-}
-
-export const IssueDropdown = ({ children, title = "Dropdown" }: IIssueDropdown) => (
-  <Popover className="relative">
-    {({ open }) => {
-      if (open) {
-      }
-      return (
-        <>
-          <Popover.Button
-            className={`outline-none border border-custom-border-200 text-xs rounded flex items-center gap-2 px-2 py-1.5 hover:bg-custom-background-80 ${
-              open ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          >
-            <div className="font-medium">{title}</div>
-            <div className={`w-3.5 h-3.5 flex items-center justify-center transition-all ${open ? "" : "rotate-180"}`}>
-              <ChevronUp width={14} strokeWidth={2} />
-            </div>
-          </Popover.Button>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Popover.Panel className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden">
-              <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
-            </Popover.Panel>
-          </Transition>
-        </>
-      );
-    }}
-  </Popover>
-);
diff --git a/web/components/issue-layouts/index.ts b/web/components/issue-layouts/index.ts
index 61375f0ffab..e69de29bb2d 100644
--- a/web/components/issue-layouts/index.ts
+++ b/web/components/issue-layouts/index.ts
@@ -1,4 +0,0 @@
-export * from "./display-filters";
-export * from "./filters";
-export * from "./helpers";
-export * from "./layout-selection";
diff --git a/web/components/issue-layouts/root.tsx b/web/components/issue-layouts/root.tsx
index 250f3204a18..38029c63335 100644
--- a/web/components/issue-layouts/root.tsx
+++ b/web/components/issue-layouts/root.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 // components
-import { LayoutSelection } from "./layout-selection";
-import { IssueDropdown } from "./helpers/dropdown";
-import { FilterSelection } from "./filters/filters-selection";
-import { DisplayFiltersSelection } from "./display-filters";
+import { LayoutSelection } from "../issues/issue-layouts/header/layout-selection";
+import { IssueDropdown } from "../issues/issue-layouts/header/helpers/dropdown";
+import { FilterSelection } from "../issues/issue-layouts/header/filters/filters-selection";
+import { DisplayFiltersSelection } from "../issues/issue-layouts/header/display-filters";
 
 import { FilterPreview } from "./filters-preview";
 
diff --git a/web/components/issue-layouts/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
similarity index 98%
rename from web/components/issue-layouts/display-filters/display-filters-selection.tsx
rename to web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
index 26fbf9d7f74..510df434492 100644
--- a/web/components/issue-layouts/display-filters/display-filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
@@ -9,7 +9,7 @@ import {
   FilterIssueType,
   FilterOrderBy,
   FilterSubGroupBy,
-} from "components/issue-layouts";
+} from "components/issues";
 // types
 import { IIssueDisplayFilterOptions } from "types";
 import { ILayoutDisplayFiltersOptions } from "constants/issue";
diff --git a/web/components/issue-layouts/display-filters/display-properties.tsx b/web/components/issues/issue-layouts/header/display-filters/display-properties.tsx
similarity index 100%
rename from web/components/issue-layouts/display-filters/display-properties.tsx
rename to web/components/issues/issue-layouts/header/display-filters/display-properties.tsx
diff --git a/web/components/issue-layouts/display-filters/extra-options.tsx b/web/components/issues/issue-layouts/header/display-filters/extra-options.tsx
similarity index 95%
rename from web/components/issue-layouts/display-filters/extra-options.tsx
rename to web/components/issues/issue-layouts/header/display-filters/extra-options.tsx
index ba9fe2f8303..111d25772e7 100644
--- a/web/components/issue-layouts/display-filters/extra-options.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/extra-options.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // types
 import { IIssueDisplayFilterOptions, TIssueExtraOptions } from "types";
 // constants
diff --git a/web/components/issue-layouts/display-filters/group-by.tsx b/web/components/issues/issue-layouts/header/display-filters/group-by.tsx
similarity index 94%
rename from web/components/issue-layouts/display-filters/group-by.tsx
rename to web/components/issues/issue-layouts/header/display-filters/group-by.tsx
index e810ea2433c..d0a65a94f4b 100644
--- a/web/components/issue-layouts/display-filters/group-by.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/group-by.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // types
 import { TIssueGroupByOptions } from "types";
 // constants
diff --git a/web/components/issue-layouts/display-filters/index.ts b/web/components/issues/issue-layouts/header/display-filters/index.ts
similarity index 100%
rename from web/components/issue-layouts/display-filters/index.ts
rename to web/components/issues/issue-layouts/header/display-filters/index.ts
diff --git a/web/components/issue-layouts/display-filters/issue-type.tsx b/web/components/issues/issue-layouts/header/display-filters/issue-type.tsx
similarity index 94%
rename from web/components/issue-layouts/display-filters/issue-type.tsx
rename to web/components/issues/issue-layouts/header/display-filters/issue-type.tsx
index 8d0532a0927..8732bc739bd 100644
--- a/web/components/issue-layouts/display-filters/issue-type.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/issue-type.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // types
 import { TIssueTypeFilters } from "types";
 // constants
diff --git a/web/components/issue-layouts/display-filters/order-by.tsx b/web/components/issues/issue-layouts/header/display-filters/order-by.tsx
similarity index 94%
rename from web/components/issue-layouts/display-filters/order-by.tsx
rename to web/components/issues/issue-layouts/header/display-filters/order-by.tsx
index 9f3471a8f2f..0387e9abb59 100644
--- a/web/components/issue-layouts/display-filters/order-by.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/order-by.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // types
 import { TIssueOrderByOptions } from "types";
 // constants
diff --git a/web/components/issue-layouts/display-filters/sub-group-by.tsx b/web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx
similarity index 95%
rename from web/components/issue-layouts/display-filters/sub-group-by.tsx
rename to web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx
index 199b178bef2..3a4a06a11f1 100644
--- a/web/components/issue-layouts/display-filters/sub-group-by.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // types
 import { TIssueGroupByOptions } from "types";
 // constants
diff --git a/web/components/issue-layouts/filters/assignees.tsx b/web/components/issues/issue-layouts/header/filters/assignees.tsx
similarity index 96%
rename from web/components/issue-layouts/filters/assignees.tsx
rename to web/components/issues/issue-layouts/header/filters/assignees.tsx
index 869861e93fb..fb803d1d8c5 100644
--- a/web/components/issue-layouts/filters/assignees.tsx
+++ b/web/components/issues/issue-layouts/header/filters/assignees.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Avatar, Loader } from "components/ui";
 
diff --git a/web/components/issue-layouts/filters/created-by.tsx b/web/components/issues/issue-layouts/header/filters/created-by.tsx
similarity index 96%
rename from web/components/issue-layouts/filters/created-by.tsx
rename to web/components/issues/issue-layouts/header/filters/created-by.tsx
index 70d7ac7b1c1..2cefd106eb3 100644
--- a/web/components/issue-layouts/filters/created-by.tsx
+++ b/web/components/issues/issue-layouts/header/filters/created-by.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Avatar, Loader } from "components/ui";
 
diff --git a/web/components/issue-layouts/filters/filters-selection.tsx b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
similarity index 99%
rename from web/components/issue-layouts/filters/filters-selection.tsx
rename to web/components/issues/issue-layouts/header/filters/filters-selection.tsx
index 01974e8d3b4..c1b92dc78a1 100644
--- a/web/components/issue-layouts/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import {
@@ -11,7 +11,7 @@ import {
   FilterPriority,
   FilterState,
   FilterStateGroup,
-} from "components/issue-layouts";
+} from "components/issues";
 // icons
 import { Search, X } from "lucide-react";
 // helpers
diff --git a/web/components/issue-layouts/filters/index.ts b/web/components/issues/issue-layouts/header/filters/index.ts
similarity index 100%
rename from web/components/issue-layouts/filters/index.ts
rename to web/components/issues/issue-layouts/header/filters/index.ts
diff --git a/web/components/issue-layouts/filters/labels.tsx b/web/components/issues/issue-layouts/header/filters/labels.tsx
similarity index 96%
rename from web/components/issue-layouts/filters/labels.tsx
rename to web/components/issues/issue-layouts/header/filters/labels.tsx
index 258a8872ade..a024fcca50a 100644
--- a/web/components/issue-layouts/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/header/filters/labels.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Loader } from "components/ui";
 
diff --git a/web/components/issue-layouts/filters/priority.tsx b/web/components/issues/issue-layouts/header/filters/priority.tsx
similarity index 97%
rename from web/components/issue-layouts/filters/priority.tsx
rename to web/components/issues/issue-layouts/header/filters/priority.tsx
index 5c407d3a7dd..d6dbf1c4f06 100644
--- a/web/components/issue-layouts/filters/priority.tsx
+++ b/web/components/issues/issue-layouts/header/filters/priority.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // icons
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // constants
diff --git a/web/components/issue-layouts/filters/start-date.tsx b/web/components/issues/issue-layouts/header/filters/start-date.tsx
similarity index 94%
rename from web/components/issue-layouts/filters/start-date.tsx
rename to web/components/issues/issue-layouts/header/filters/start-date.tsx
index c93091a112d..a960f1f4c14 100644
--- a/web/components/issue-layouts/filters/start-date.tsx
+++ b/web/components/issues/issue-layouts/header/filters/start-date.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 
 export const FilterStartDate = observer(() => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
diff --git a/web/components/issue-layouts/filters/state-group.tsx b/web/components/issues/issue-layouts/header/filters/state-group.tsx
similarity index 96%
rename from web/components/issue-layouts/filters/state-group.tsx
rename to web/components/issues/issue-layouts/header/filters/state-group.tsx
index 9a32dbd7aff..fd22cd10d26 100644
--- a/web/components/issue-layouts/filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/header/filters/state-group.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // icons
 import { StateGroupIcon } from "components/icons";
 // constants
diff --git a/web/components/issue-layouts/filters/state.tsx b/web/components/issues/issue-layouts/header/filters/state.tsx
similarity index 97%
rename from web/components/issue-layouts/filters/state.tsx
rename to web/components/issues/issue-layouts/header/filters/state.tsx
index 031715bf49f..6a1232588d1 100644
--- a/web/components/issue-layouts/filters/state.tsx
+++ b/web/components/issues/issue-layouts/header/filters/state.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Loader } from "components/ui";
 // icons
diff --git a/web/components/issue-layouts/filters/target-date.tsx b/web/components/issues/issue-layouts/header/filters/target-date.tsx
similarity index 94%
rename from web/components/issue-layouts/filters/target-date.tsx
rename to web/components/issues/issue-layouts/header/filters/target-date.tsx
index 7a00b12a4a0..21cd8f2f212 100644
--- a/web/components/issue-layouts/filters/target-date.tsx
+++ b/web/components/issues/issue-layouts/header/filters/target-date.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
+
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader, FilterOption } from "components/issue-layouts";
+import { FilterHeader, FilterOption } from "components/issues";
 
 export const FilterTargetDate = observer(() => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
diff --git a/web/components/issues/issue-layouts/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/header/helpers/dropdown.tsx
new file mode 100644
index 00000000000..00c589a7665
--- /dev/null
+++ b/web/components/issues/issue-layouts/header/helpers/dropdown.tsx
@@ -0,0 +1,53 @@
+import React, { Fragment } from "react";
+
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// icons
+import { ChevronUp } from "lucide-react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+};
+
+export const FiltersDropdown: React.FC<Props> = (props) => {
+  const { children, title = "Dropdown" } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button
+              className={`outline-none border border-custom-border-200 text-xs rounded flex items-center gap-2 px-2 py-1.5 hover:bg-custom-background-80 ${
+                open ? "text-custom-text-100" : "text-custom-text-200"
+              }`}
+            >
+              <div className="font-medium">{title}</div>
+              <div
+                className={`w-3.5 h-3.5 flex items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+              >
+                <ChevronUp width={14} strokeWidth={2} />
+              </div>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden">
+                <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};
diff --git a/web/components/issue-layouts/helpers/filter-header.tsx b/web/components/issues/issue-layouts/header/helpers/filter-header.tsx
similarity index 100%
rename from web/components/issue-layouts/helpers/filter-header.tsx
rename to web/components/issues/issue-layouts/header/helpers/filter-header.tsx
diff --git a/web/components/issue-layouts/helpers/filter-option.tsx b/web/components/issues/issue-layouts/header/helpers/filter-option.tsx
similarity index 100%
rename from web/components/issue-layouts/helpers/filter-option.tsx
rename to web/components/issues/issue-layouts/header/helpers/filter-option.tsx
diff --git a/web/components/issue-layouts/helpers/index.ts b/web/components/issues/issue-layouts/header/helpers/index.ts
similarity index 100%
rename from web/components/issue-layouts/helpers/index.ts
rename to web/components/issues/issue-layouts/header/helpers/index.ts
diff --git a/web/components/issues/issue-layouts/header/index.ts b/web/components/issues/issue-layouts/header/index.ts
new file mode 100644
index 00000000000..61375f0ffab
--- /dev/null
+++ b/web/components/issues/issue-layouts/header/index.ts
@@ -0,0 +1,4 @@
+export * from "./display-filters";
+export * from "./filters";
+export * from "./helpers";
+export * from "./layout-selection";
diff --git a/web/components/issue-layouts/layout-selection.tsx b/web/components/issues/issue-layouts/header/layout-selection.tsx
similarity index 100%
rename from web/components/issue-layouts/layout-selection.tsx
rename to web/components/issues/issue-layouts/header/layout-selection.tsx
diff --git a/web/components/issues/issue-layouts/index.ts b/web/components/issues/issue-layouts/index.ts
index 30249be797a..647e69f140d 100644
--- a/web/components/issues/issue-layouts/index.ts
+++ b/web/components/issues/issue-layouts/index.ts
@@ -1,2 +1,3 @@
 export * from "./calendar";
+export * from "./header";
 export * from "./kanban";
diff --git a/web/store/issue_filters.ts b/web/store/issue_filters.ts
index 35ade307ab1..84d33dee820 100644
--- a/web/store/issue_filters.ts
+++ b/web/store/issue_filters.ts
@@ -203,8 +203,6 @@ class IssueFilterStore implements IIssueFilterStore {
         this.userDisplayFilters = newViewProps.display_filters;
       });
 
-      console.log("Saving...");
-
       this.projectService.setProjectView(workspaceSlug, projectId, {
         view_props: newViewProps,
       });

From 4cd94cf58d726111c751a2630b134745e2e7337f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 28 Sep 2023 17:44:51 +0530
Subject: [PATCH 03/10] refactor: change issue layout options constant
 structure

---
 web/components/headers/project-issues.tsx     |  10 +-
 .../display-filters-selection.tsx             |   8 +-
 web/constants/issue.ts                        | 141 +++++++++---------
 3 files changed, 78 insertions(+), 81 deletions(-)

diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index df92ed2d0ee..6f2b3f37b5c 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -54,7 +54,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   return (
     <div className="flex items-center gap-2">
       <LayoutSelection
-        layouts={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.layout}
+        layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
         onChange={(layout) => handleLayoutChange(layout)}
         selectedLayout={issueFilterStore.userDisplayFilters.layout ?? "list"}
       />
@@ -62,7 +62,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         <FilterSelection
           filters={{}}
           handleFiltersUpdate={handleFiltersUpdate}
-          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues}
+          layoutDisplayFiltersOptions={
+            ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[issueFilterStore.userDisplayFilters.layout ?? "list"]
+          }
           projectId={projectId?.toString() ?? ""}
         />
       </FiltersDropdown>
@@ -70,7 +72,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         <DisplayFiltersSelection
           displayFilters={issueFilterStore.userDisplayFilters}
           handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
-          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues}
+          layoutDisplayFiltersOptions={
+            ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[issueFilterStore.userDisplayFilters.layout ?? "list"]
+          }
         />
       </FiltersDropdown>
     </div>
diff --git a/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
index 510df434492..1ac173899b1 100644
--- a/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
@@ -24,12 +24,12 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
   const { displayFilters, handleDisplayFiltersUpdate, layoutDisplayFiltersOptions } = props;
 
   const isDisplayFilterEnabled = (displayFilter: string) =>
-    layoutDisplayFiltersOptions.display_filters[displayFilters.layout ?? "list"].includes(displayFilter);
+    layoutDisplayFiltersOptions.display_filters.includes(displayFilter);
 
   return (
     <div className="w-full h-full overflow-hidden overflow-y-auto relative px-2.5 divide-y divide-custom-border-200">
       {/* display properties */}
-      {layoutDisplayFiltersOptions.display_properties[displayFilters.layout ?? "list"] && (
+      {layoutDisplayFiltersOptions.display_properties && (
         <div className="py-2">
           <FilterDisplayProperties />
         </div>
@@ -93,7 +93,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       )}
 
       {/* Options */}
-      {layoutDisplayFiltersOptions.extra_options[displayFilters.layout ?? "list"].access && (
+      {layoutDisplayFiltersOptions.extra_options.access && (
         <div className="py-2">
           <FilterExtraOptions
             selectedExtraOptions={{
@@ -105,7 +105,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
                 [key]: val,
               })
             }
-            enabledExtraOptions={layoutDisplayFiltersOptions.extra_options[displayFilters.layout ?? "list"].values}
+            enabledExtraOptions={layoutDisplayFiltersOptions.extra_options.values}
           />
         </div>
       )}
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 5514a8b1b0f..d2a1f593cc0 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -201,114 +201,107 @@ export const ISSUE_GANTT_DISPLAY_FILTERS = [
 ];
 
 export interface ILayoutDisplayFiltersOptions {
-  layout: TIssueLayouts[];
-  filters: {
-    [key in TIssueLayouts]: string[];
-  };
-  display_properties: {
-    [key in TIssueLayouts]: boolean;
-  };
-  display_filters: {
-    [key in TIssueLayouts]: string[];
-  };
+  filters: string[];
+  display_properties: boolean;
+  display_filters: string[];
   extra_options: {
-    [key in TIssueLayouts]: {
-      access: boolean;
-      values: TIssueExtraOptions[];
-    };
+    access: boolean;
+    values: TIssueExtraOptions[];
   };
 }
 
 export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
-  [layoutType: string]: ILayoutDisplayFiltersOptions;
+  [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
 } = {
   my_issues: {
-    layout: ["list", "kanban"],
-    filters: {
-      list: ["priority", "state_group", "labels", "start_date", "due_date"],
-      kanban: ["priority", "state_group", "labels", "start_date", "due_date"],
-      calendar: [],
-      spreadsheet: [],
-      gantt_chart: [],
-    },
-    display_properties: {
-      list: true,
-      kanban: true,
-      calendar: true,
-      spreadsheet: true,
-      gantt_chart: false,
-    },
-    display_filters: {
-      list: ["group_by", "sub_group_by", "order_by", "issue_type"],
-      kanban: ["group_by", "sub_group_by", "order_by", "issue_type"],
-      calendar: ["issue_type"],
-      spreadsheet: ["issue_type"],
-      gantt_chart: ["order_by", "issue_type"],
-    },
-    extra_options: {
-      list: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "due_date"],
+      display_properties: true,
+      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
+      extra_options: {
         access: true,
         values: ["show_empty_groups", "sub_issue"],
       },
-      kanban: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-      calendar: {
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "due_date"],
+      display_properties: true,
+      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
+      extra_options: {
         access: false,
         values: [],
       },
-      spreadsheet: {
+    },
+    calendar: {
+      filters: [],
+      display_properties: true,
+      display_filters: [],
+      extra_options: {
         access: false,
         values: [],
       },
-      gantt_chart: {
+    },
+    spreadsheet: {
+      filters: [],
+      display_properties: false,
+      display_filters: [],
+      extra_options: {
         access: false,
         values: [],
       },
     },
+    gantt_chart: {
+      filters: [],
+      display_properties: false,
+      display_filters: [],
+      extra_options: {
+        access: true,
+        values: [],
+      },
+    },
   },
   issues: {
-    layout: ["list", "kanban", "calendar", "spreadsheet", "gantt_chart"],
-    filters: {
-      list: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-      kanban: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-      calendar: ["priority", "state", "assignees", "created_by", "labels"],
-      spreadsheet: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-      gantt_chart: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-    },
-    display_properties: {
-      list: true,
-      kanban: true,
-      calendar: true,
-      spreadsheet: true,
-      gantt_chart: false,
-    },
-    display_filters: {
-      list: ["group_by", "sub_group_by", "order_by", "issue_type"],
-      kanban: ["group_by", "sub_group_by", "order_by", "issue_type"],
-      calendar: ["issue_type"],
-      spreadsheet: ["issue_type"],
-      gantt_chart: ["order_by", "issue_type"],
-    },
-    extra_options: {
-      list: {
+    list: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      display_properties: true,
+      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
+      extra_options: {
         access: true,
         values: ["show_empty_groups", "sub_issue"],
       },
-      kanban: {
+    },
+    kanban: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      display_properties: true,
+      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
+      extra_options: {
         access: true,
         values: ["show_empty_groups", "sub_issue"],
       },
-      calendar: {
+    },
+    calendar: {
+      filters: ["priority", "state", "assignees", "created_by", "labels"],
+      display_properties: true,
+      display_filters: ["issue_type"],
+      extra_options: {
         access: false,
         values: [],
       },
-      spreadsheet: {
+    },
+    spreadsheet: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      display_properties: true,
+      display_filters: ["issue_type"],
+      extra_options: {
         access: false,
         values: [],
       },
-      gantt_chart: {
+    },
+    gantt_chart: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      display_properties: false,
+      display_filters: ["order_by", "issue_type"],
+      extra_options: {
         access: true,
         values: ["sub_issue"],
       },

From 0e551964b76e0c7117a850e939eb43853874c2a4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 28 Sep 2023 18:51:18 +0530
Subject: [PATCH 04/10] chore: display filters validations

---
 .../display-filters-selection.tsx             |  11 +-
 .../header/display-filters/group-by.tsx       |  26 +-
 .../header/display-filters/sub-group-by.tsx   |   5 +-
 .../header/filters/filters-selection.tsx      | 230 ++++++++++--------
 web/constants/issue.ts                        |  96 ++++----
 web/store/issue_filters.ts                    |   3 +
 6 files changed, 208 insertions(+), 163 deletions(-)

diff --git a/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
index 1ac173899b1..4bdc0da33af 100644
--- a/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
@@ -23,8 +23,8 @@ type Props = {
 export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
   const { displayFilters, handleDisplayFiltersUpdate, layoutDisplayFiltersOptions } = props;
 
-  const isDisplayFilterEnabled = (displayFilter: string) =>
-    layoutDisplayFiltersOptions.display_filters.includes(displayFilter);
+  const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
+    Object.keys(layoutDisplayFiltersOptions.display_filters).includes(displayFilter);
 
   return (
     <div className="w-full h-full overflow-hidden overflow-y-auto relative px-2.5 divide-y divide-custom-border-200">
@@ -40,6 +40,8 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
         <div className="py-2">
           <FilterGroupBy
             selectedGroupBy={displayFilters.group_by}
+            selectedSubGroupBy={displayFilters.sub_group_by}
+            groupByOptions={layoutDisplayFiltersOptions.display_filters.group_by}
             handleUpdate={(val) =>
               handleDisplayFiltersUpdate({
                 group_by: val,
@@ -50,7 +52,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       )}
 
       {/* sub-group by */}
-      {isDisplayFilterEnabled("sub_group_by") && (
+      {isDisplayFilterEnabled("sub_group_by") && displayFilters.group_by !== null && (
         <div className="py-2">
           <FilterSubGroupBy
             selectedGroupBy={displayFilters.group_by}
@@ -60,6 +62,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
                 sub_group_by: val,
               })
             }
+            subGroupByOptions={layoutDisplayFiltersOptions.display_filters.sub_group_by}
           />
         </div>
       )}
@@ -79,7 +82,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       )}
 
       {/* issue type */}
-      {isDisplayFilterEnabled("issue_type") && (
+      {isDisplayFilterEnabled("type") && (
         <div className="py-2">
           <FilterIssueType
             selectedIssueType={displayFilters.type}
diff --git a/web/components/issues/issue-layouts/header/display-filters/group-by.tsx b/web/components/issues/issue-layouts/header/display-filters/group-by.tsx
index d0a65a94f4b..04820f94c10 100644
--- a/web/components/issues/issue-layouts/header/display-filters/group-by.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/group-by.tsx
@@ -10,11 +10,13 @@ import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
 
 type Props = {
   selectedGroupBy: TIssueGroupByOptions | undefined;
+  selectedSubGroupBy: TIssueGroupByOptions | undefined;
+  groupByOptions: TIssueGroupByOptions[];
   handleUpdate: (val: TIssueGroupByOptions) => void;
 };
 
 export const FilterGroupBy: React.FC<Props> = observer((props) => {
-  const { selectedGroupBy, handleUpdate } = props;
+  const { selectedGroupBy, selectedSubGroupBy, groupByOptions, handleUpdate } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -27,15 +29,19 @@ export const FilterGroupBy: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div>
-          {ISSUE_GROUP_BY_OPTIONS.map((groupBy) => (
-            <FilterOption
-              key={groupBy?.key}
-              isChecked={selectedGroupBy === groupBy?.key ? true : false}
-              onClick={() => handleUpdate(groupBy.key)}
-              title={groupBy.title}
-              multiple={false}
-            />
-          ))}
+          {ISSUE_GROUP_BY_OPTIONS.filter((option) => groupByOptions.includes(option.key)).map((groupBy) => {
+            if (selectedSubGroupBy !== null && groupBy.key === selectedSubGroupBy) return null;
+
+            return (
+              <FilterOption
+                key={groupBy?.key}
+                isChecked={selectedGroupBy === groupBy?.key ? true : false}
+                onClick={() => handleUpdate(groupBy.key)}
+                title={groupBy.title}
+                multiple={false}
+              />
+            );
+          })}
         </div>
       )}
     </>
diff --git a/web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx b/web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx
index 3a4a06a11f1..83f09092d92 100644
--- a/web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx
@@ -12,10 +12,11 @@ type Props = {
   selectedGroupBy: TIssueGroupByOptions | undefined;
   selectedSubGroupBy: TIssueGroupByOptions | undefined;
   handleUpdate: (val: TIssueGroupByOptions) => void;
+  subGroupByOptions: TIssueGroupByOptions[];
 };
 
 export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
-  const { selectedGroupBy, selectedSubGroupBy, handleUpdate } = props;
+  const { selectedGroupBy, selectedSubGroupBy, handleUpdate, subGroupByOptions } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -28,7 +29,7 @@ export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div>
-          {ISSUE_GROUP_BY_OPTIONS.map((subGroupBy) => {
+          {ISSUE_GROUP_BY_OPTIONS.filter((option) => subGroupByOptions.includes(option.key)).map((subGroupBy) => {
             if (selectedGroupBy !== null && subGroupBy.key === selectedGroupBy) return null;
 
             return (
diff --git a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
index c1b92dc78a1..fa4c557e332 100644
--- a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
@@ -92,6 +92,8 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     return filterDetails.currentLength < filterDetails.totalLength;
   };
 
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions.filters.includes(filter);
+
   return (
     <div className="w-full h-full flex flex-col overflow-hidden">
       <div className="p-2.5 bg-custom-background-100">
@@ -114,126 +116,142 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
       </div>
       <div className="w-full h-full divide-y divide-custom-border-20 px-2.5 overflow-y-auto">
         {/* priority */}
-        <div className="py-2">
-          <FilterPriority
-            appliedFilters={filters.priority ?? null}
-            handleUpdate={(val) => handleFiltersUpdate("priority", val)}
-            itemsToRender={filtersToRender.priority?.currentLength ?? 0}
-            searchQuery={filtersSearchQuery}
-          />
-          {isViewMoreVisible("priority") && (
-            <button
-              className="text-custom-primary-100 text-xs font-medium ml-7"
-              onClick={() => handleViewMore("priority")}
-            >
-              View more
-            </button>
-          )}
-        </div>
+        {isFilterEnabled("priority") && (
+          <div className="py-2">
+            <FilterPriority
+              appliedFilters={filters.priority ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("priority", val)}
+              itemsToRender={filtersToRender.priority?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+            />
+            {isViewMoreVisible("priority") && (
+              <button
+                className="text-custom-primary-100 text-xs font-medium ml-7"
+                onClick={() => handleViewMore("priority")}
+              >
+                View more
+              </button>
+            )}
+          </div>
+        )}
 
         {/* state group */}
-        <div className="py-2">
-          <FilterStateGroup
-            appliedFilters={filters.state_group ?? null}
-            handleUpdate={(val) => handleFiltersUpdate("state_group", val)}
-            itemsToRender={filtersToRender.state_group?.currentLength ?? 0}
-            searchQuery={filtersSearchQuery}
-          />
-          {isViewMoreVisible("state_group") && (
-            <button
-              className="text-custom-primary-100 text-xs font-medium ml-7"
-              onClick={() => handleViewMore("state_group")}
-            >
-              View more
-            </button>
-          )}
-        </div>
+        {isFilterEnabled("state_group") && (
+          <div className="py-2">
+            <FilterStateGroup
+              appliedFilters={filters.state_group ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state_group", val)}
+              itemsToRender={filtersToRender.state_group?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+            />
+            {isViewMoreVisible("state_group") && (
+              <button
+                className="text-custom-primary-100 text-xs font-medium ml-7"
+                onClick={() => handleViewMore("state_group")}
+              >
+                View more
+              </button>
+            )}
+          </div>
+        )}
 
         {/* state */}
-        <div className="py-2">
-          <FilterState
-            appliedFilters={filters.state ?? null}
-            handleUpdate={(val) => handleFiltersUpdate("state", val)}
-            itemsToRender={filtersToRender.state?.currentLength ?? 0}
-            searchQuery={filtersSearchQuery}
-            projectId={projectId}
-          />
-          {isViewMoreVisible("state") && (
-            <button
-              className="text-custom-primary-100 text-xs font-medium ml-7"
-              onClick={() => handleViewMore("state")}
-            >
-              View more
-            </button>
-          )}
-        </div>
+        {isFilterEnabled("state") && (
+          <div className="py-2">
+            <FilterState
+              appliedFilters={filters.state ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state", val)}
+              itemsToRender={filtersToRender.state?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+              projectId={projectId}
+            />
+            {isViewMoreVisible("state") && (
+              <button
+                className="text-custom-primary-100 text-xs font-medium ml-7"
+                onClick={() => handleViewMore("state")}
+              >
+                View more
+              </button>
+            )}
+          </div>
+        )}
 
         {/* assignees */}
-        <div className="py-2">
-          <FilterAssignees
-            appliedFilters={filters.assignees ?? null}
-            handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
-            itemsToRender={filtersToRender.assignees?.currentLength ?? 0}
-            projectId={projectId}
-            searchQuery={filtersSearchQuery}
-          />
-          {isViewMoreVisible("assignees") && (
-            <button
-              className="text-custom-primary-100 text-xs font-medium ml-7"
-              onClick={() => handleViewMore("assignees")}
-            >
-              View more
-            </button>
-          )}
-        </div>
+        {isFilterEnabled("assignees") && (
+          <div className="py-2">
+            <FilterAssignees
+              appliedFilters={filters.assignees ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
+              itemsToRender={filtersToRender.assignees?.currentLength ?? 0}
+              projectId={projectId}
+              searchQuery={filtersSearchQuery}
+            />
+            {isViewMoreVisible("assignees") && (
+              <button
+                className="text-custom-primary-100 text-xs font-medium ml-7"
+                onClick={() => handleViewMore("assignees")}
+              >
+                View more
+              </button>
+            )}
+          </div>
+        )}
 
         {/* created_by */}
-        <div className="py-2">
-          <FilterCreatedBy
-            appliedFilters={filters.created_by ?? null}
-            handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
-            itemsToRender={filtersToRender.created_by?.currentLength ?? 0}
-            projectId={projectId}
-            searchQuery={filtersSearchQuery}
-          />
-          {isViewMoreVisible("created_by") && (
-            <button
-              className="text-custom-primary-100 text-xs font-medium ml-7"
-              onClick={() => handleViewMore("created_by")}
-            >
-              View more
-            </button>
-          )}
-        </div>
+        {isFilterEnabled("created_by") && (
+          <div className="py-2">
+            <FilterCreatedBy
+              appliedFilters={filters.created_by ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
+              itemsToRender={filtersToRender.created_by?.currentLength ?? 0}
+              projectId={projectId}
+              searchQuery={filtersSearchQuery}
+            />
+            {isViewMoreVisible("created_by") && (
+              <button
+                className="text-custom-primary-100 text-xs font-medium ml-7"
+                onClick={() => handleViewMore("created_by")}
+              >
+                View more
+              </button>
+            )}
+          </div>
+        )}
 
         {/* labels */}
-        <div className="py-2">
-          <FilterLabels
-            appliedFilters={filters.labels ?? null}
-            handleUpdate={(val) => handleFiltersUpdate("labels", val)}
-            itemsToRender={filtersToRender.labels?.currentLength ?? 0}
-            projectId={projectId}
-            searchQuery={filtersSearchQuery}
-          />
-          {isViewMoreVisible("labels") && (
-            <button
-              className="text-custom-primary-100 text-xs font-medium ml-7"
-              onClick={() => handleViewMore("labels")}
-            >
-              View more
-            </button>
-          )}
-        </div>
+        {isFilterEnabled("labels") && (
+          <div className="py-2">
+            <FilterLabels
+              appliedFilters={filters.labels ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("labels", val)}
+              itemsToRender={filtersToRender.labels?.currentLength ?? 0}
+              projectId={projectId}
+              searchQuery={filtersSearchQuery}
+            />
+            {isViewMoreVisible("labels") && (
+              <button
+                className="text-custom-primary-100 text-xs font-medium ml-7"
+                onClick={() => handleViewMore("labels")}
+              >
+                View more
+              </button>
+            )}
+          </div>
+        )}
 
         {/* start_date */}
-        {/* <div>
-          <FilterStartDate />
-        </div> */}
+        {/* {isFilterEnabled("start_date") && (
+          <div className="py-2">
+            <FilterStartDate />
+          </div>
+        )} */}
 
         {/* due_date */}
-        {/* <div>
-          <FilterTargetDate />
-        </div> */}
+        {/* {isFilterEnabled("target_date") && (
+          <div className="py-2">
+            <FilterTargetDate />
+          </div>
+        )} */}
       </div>
     </div>
   );
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index d2a1f593cc0..701602f3b55 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -3,6 +3,7 @@ import { Calendar, GanttChart, Kanban, List, Sheet } from "lucide-react";
 // types
 import {
   IIssueDisplayProperties,
+  IIssueFilterOptions,
   TIssueExtraOptions,
   TIssueGroupByOptions,
   TIssueLayouts,
@@ -201,9 +202,14 @@ export const ISSUE_GANTT_DISPLAY_FILTERS = [
 ];
 
 export interface ILayoutDisplayFiltersOptions {
-  filters: string[];
+  filters: (keyof IIssueFilterOptions)[];
   display_properties: boolean;
-  display_filters: string[];
+  display_filters: {
+    group_by: TIssueGroupByOptions[];
+    sub_group_by: TIssueGroupByOptions[];
+    order_by: TIssueOrderByOptions[];
+    type: TIssueTypeFilters[];
+  };
   extra_options: {
     access: boolean;
     values: TIssueExtraOptions[];
@@ -215,65 +221,58 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
 } = {
   my_issues: {
     list: {
-      filters: ["priority", "state_group", "labels", "start_date", "due_date"],
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
       display_properties: true,
-      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
+      display_filters: {
+        group_by: ["state_detail.group", "project", "priority", "labels", null],
+        sub_group_by: ["state_detail.group", "project", "priority", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
       extra_options: {
         access: true,
         values: ["show_empty_groups", "sub_issue"],
       },
     },
     kanban: {
-      filters: ["priority", "state_group", "labels", "start_date", "due_date"],
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
       display_properties: true,
-      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
-      extra_options: {
-        access: false,
-        values: [],
+      display_filters: {
+        group_by: ["state_detail.group", "project", "priority", "labels", null],
+        sub_group_by: ["state_detail.group", "project", "priority", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
       },
-    },
-    calendar: {
-      filters: [],
-      display_properties: true,
-      display_filters: [],
       extra_options: {
         access: false,
         values: [],
       },
     },
-    spreadsheet: {
-      filters: [],
-      display_properties: false,
-      display_filters: [],
-      extra_options: {
-        access: false,
-        values: [],
-      },
-    },
-    gantt_chart: {
-      filters: [],
-      display_properties: false,
-      display_filters: [],
-      extra_options: {
-        access: true,
-        values: [],
-      },
-    },
   },
   issues: {
     list: {
-      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
-      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
+      display_filters: {
+        group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
       extra_options: {
         access: true,
         values: ["show_empty_groups", "sub_issue"],
       },
     },
     kanban: {
-      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
-      display_filters: ["group_by", "sub_group_by", "order_by", "issue_type"],
+      display_filters: {
+        group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
       extra_options: {
         access: true,
         values: ["show_empty_groups", "sub_issue"],
@@ -282,25 +281,40 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
     calendar: {
       filters: ["priority", "state", "assignees", "created_by", "labels"],
       display_properties: true,
-      display_filters: ["issue_type"],
+      display_filters: {
+        group_by: [],
+        sub_group_by: [],
+        order_by: [],
+        type: [null, "active", "backlog"],
+      },
       extra_options: {
         access: false,
         values: [],
       },
     },
     spreadsheet: {
-      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
-      display_filters: ["issue_type"],
+      display_filters: {
+        group_by: [],
+        sub_group_by: [],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
       extra_options: {
         access: false,
         values: [],
       },
     },
     gantt_chart: {
-      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
       display_properties: false,
-      display_filters: ["order_by", "issue_type"],
+      display_filters: {
+        group_by: [],
+        sub_group_by: [],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
       extra_options: {
         access: true,
         values: ["sub_issue"],
diff --git a/web/store/issue_filters.ts b/web/store/issue_filters.ts
index 84d33dee820..d9e58b34184 100644
--- a/web/store/issue_filters.ts
+++ b/web/store/issue_filters.ts
@@ -197,6 +197,9 @@ class IssueFilterStore implements IIssueFilterStore {
       },
     };
 
+    // set sub_group_by to null if group_by is set to null
+    if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
+
     try {
       runInAction(() => {
         this.userFilters = newViewProps.filters;

From 4b3a5dea53a536d45c48962da11387444f5df17a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 28 Sep 2023 22:49:09 +0530
Subject: [PATCH 05/10] chore: view less filters functionality

---
 .../header/filters/filters-selection.tsx      | 176 +++++++++++++-----
 1 file changed, 128 insertions(+), 48 deletions(-)

diff --git a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
index fa4c557e332..f53b51a4b5e 100644
--- a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
@@ -84,6 +84,20 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
       }));
   };
 
+  const handleViewLess = (filterName: keyof IIssueFilterOptions) => {
+    const filterDetails = filtersToRender[filterName];
+
+    if (!filterDetails) return;
+
+    setFiltersToRender((prev) => ({
+      ...prev,
+      [filterName]: {
+        ...prev[filterName],
+        currentLength: 5,
+      },
+    }));
+  };
+
   const isViewMoreVisible = (filterName: keyof IIssueFilterOptions): boolean => {
     const filterDetails = filtersToRender[filterName];
 
@@ -92,6 +106,14 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     return filterDetails.currentLength < filterDetails.totalLength;
   };
 
+  const isViewLessVisible = (filterName: keyof IIssueFilterOptions): boolean => {
+    const filterDetails = filtersToRender[filterName];
+
+    if (!filterDetails) return false;
+
+    return filterDetails.currentLength > 5;
+  };
+
   const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions.filters.includes(filter);
 
   return (
@@ -124,14 +146,25 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               itemsToRender={filtersToRender.priority?.currentLength ?? 0}
               searchQuery={filtersSearchQuery}
             />
-            {isViewMoreVisible("priority") && (
-              <button
-                className="text-custom-primary-100 text-xs font-medium ml-7"
-                onClick={() => handleViewMore("priority")}
-              >
-                View more
-              </button>
-            )}
+            {/* TODO: handle view more and less in a better way */}
+            <div className="flex items-center gap-2 ml-7 mt-1">
+              {isViewMoreVisible("priority") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium"
+                  onClick={() => handleViewMore("priority")}
+                >
+                  View more
+                </button>
+              )}
+              {isViewLessVisible("priority") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium"
+                  onClick={() => handleViewLess("priority")}
+                >
+                  View less
+                </button>
+              )}
+            </div>
           </div>
         )}
 
@@ -144,14 +177,24 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               itemsToRender={filtersToRender.state_group?.currentLength ?? 0}
               searchQuery={filtersSearchQuery}
             />
-            {isViewMoreVisible("state_group") && (
-              <button
-                className="text-custom-primary-100 text-xs font-medium ml-7"
-                onClick={() => handleViewMore("state_group")}
-              >
-                View more
-              </button>
-            )}
+            <div className="flex items-center gap-2 ml-7 mt-1">
+              {isViewMoreVisible("state_group") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium ml-7"
+                  onClick={() => handleViewMore("state_group")}
+                >
+                  View more
+                </button>
+              )}
+              {isViewLessVisible("state_group") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium"
+                  onClick={() => handleViewLess("state_group")}
+                >
+                  View less
+                </button>
+              )}
+            </div>
           </div>
         )}
 
@@ -165,14 +208,21 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               searchQuery={filtersSearchQuery}
               projectId={projectId}
             />
-            {isViewMoreVisible("state") && (
-              <button
-                className="text-custom-primary-100 text-xs font-medium ml-7"
-                onClick={() => handleViewMore("state")}
-              >
-                View more
-              </button>
-            )}
+            <div className="flex items-center gap-2 ml-7 mt-1">
+              {isViewMoreVisible("state") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium ml-7"
+                  onClick={() => handleViewMore("state")}
+                >
+                  View more
+                </button>
+              )}
+              {isViewLessVisible("state") && (
+                <button className="text-custom-primary-100 text-xs font-medium" onClick={() => handleViewLess("state")}>
+                  View less
+                </button>
+              )}
+            </div>
           </div>
         )}
 
@@ -186,14 +236,24 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               projectId={projectId}
               searchQuery={filtersSearchQuery}
             />
-            {isViewMoreVisible("assignees") && (
-              <button
-                className="text-custom-primary-100 text-xs font-medium ml-7"
-                onClick={() => handleViewMore("assignees")}
-              >
-                View more
-              </button>
-            )}
+            <div className="flex items-center gap-2 ml-7 mt-1">
+              {isViewMoreVisible("assignees") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium ml-7"
+                  onClick={() => handleViewMore("assignees")}
+                >
+                  View more
+                </button>
+              )}
+              {isViewLessVisible("assignees") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium"
+                  onClick={() => handleViewLess("assignees")}
+                >
+                  View less
+                </button>
+              )}
+            </div>
           </div>
         )}
 
@@ -207,14 +267,24 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               projectId={projectId}
               searchQuery={filtersSearchQuery}
             />
-            {isViewMoreVisible("created_by") && (
-              <button
-                className="text-custom-primary-100 text-xs font-medium ml-7"
-                onClick={() => handleViewMore("created_by")}
-              >
-                View more
-              </button>
-            )}
+            <div className="flex items-center gap-2 ml-7 mt-1">
+              {isViewMoreVisible("created_by") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium ml-7"
+                  onClick={() => handleViewMore("created_by")}
+                >
+                  View more
+                </button>
+              )}
+              {isViewLessVisible("created_by") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium"
+                  onClick={() => handleViewLess("created_by")}
+                >
+                  View less
+                </button>
+              )}
+            </div>
           </div>
         )}
 
@@ -228,14 +298,24 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               projectId={projectId}
               searchQuery={filtersSearchQuery}
             />
-            {isViewMoreVisible("labels") && (
-              <button
-                className="text-custom-primary-100 text-xs font-medium ml-7"
-                onClick={() => handleViewMore("labels")}
-              >
-                View more
-              </button>
-            )}
+            <div className="flex items-center gap-2 ml-7 mt-1">
+              {isViewMoreVisible("labels") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium"
+                  onClick={() => handleViewMore("labels")}
+                >
+                  View more
+                </button>
+              )}
+              {isViewLessVisible("labels") && (
+                <button
+                  className="text-custom-primary-100 text-xs font-medium"
+                  onClick={() => handleViewLess("labels")}
+                >
+                  View less
+                </button>
+              )}
+            </div>
           </div>
         )}
 

From 2bf869db598c62f1a5bd3e0c222ca9cfe9a5b05e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 28 Sep 2023 22:54:37 +0530
Subject: [PATCH 06/10] fix: display filters validation

---
 .../display-filters/display-filters-selection.tsx |  4 ++--
 web/constants/issue.ts                            | 15 ++++-----------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
index 4bdc0da33af..8c4d5d3926f 100644
--- a/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx
@@ -41,7 +41,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
           <FilterGroupBy
             selectedGroupBy={displayFilters.group_by}
             selectedSubGroupBy={displayFilters.sub_group_by}
-            groupByOptions={layoutDisplayFiltersOptions.display_filters.group_by}
+            groupByOptions={layoutDisplayFiltersOptions.display_filters.group_by ?? []}
             handleUpdate={(val) =>
               handleDisplayFiltersUpdate({
                 group_by: val,
@@ -62,7 +62,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
                 sub_group_by: val,
               })
             }
-            subGroupByOptions={layoutDisplayFiltersOptions.display_filters.sub_group_by}
+            subGroupByOptions={layoutDisplayFiltersOptions.display_filters.sub_group_by ?? []}
           />
         </div>
       )}
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 701602f3b55..c782013fc96 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -205,10 +205,10 @@ export interface ILayoutDisplayFiltersOptions {
   filters: (keyof IIssueFilterOptions)[];
   display_properties: boolean;
   display_filters: {
-    group_by: TIssueGroupByOptions[];
-    sub_group_by: TIssueGroupByOptions[];
-    order_by: TIssueOrderByOptions[];
-    type: TIssueTypeFilters[];
+    group_by?: TIssueGroupByOptions[];
+    sub_group_by?: TIssueGroupByOptions[];
+    order_by?: TIssueOrderByOptions[];
+    type?: TIssueTypeFilters[];
   };
   extra_options: {
     access: boolean;
@@ -282,9 +282,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state", "assignees", "created_by", "labels"],
       display_properties: true,
       display_filters: {
-        group_by: [],
-        sub_group_by: [],
-        order_by: [],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -296,8 +293,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        group_by: [],
-        sub_group_by: [],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },
@@ -310,8 +305,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
       display_properties: false,
       display_filters: {
-        group_by: [],
-        sub_group_by: [],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },

From ed10504795689742052f3c719c486891182b0c44 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 28 Sep 2023 23:47:57 +0530
Subject: [PATCH 07/10] refactor: wrap functions around useCallback

---
 web/components/headers/project-issues.tsx     |  66 ++++----
 .../header/filters/assignees.tsx              |  12 +-
 .../header/filters/created-by.tsx             |  12 +-
 .../header/filters/filters-selection.tsx      | 154 +++++++++---------
 .../issue-layouts/header/filters/labels.tsx   |  12 +-
 .../issue-layouts/header/filters/priority.tsx |  12 +-
 6 files changed, 147 insertions(+), 121 deletions(-)

diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 6f2b3f37b5c..32eae2ea2b0 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 
@@ -16,40 +17,49 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
 
   const { issueFilter: issueFilterStore } = useMobxStore();
 
-  const handleLayoutChange = (layout: TIssueLayouts) => {
-    if (!workspaceSlug || !projectId) return;
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        layout,
-      },
-    });
-  };
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
 
-  const handleFiltersUpdate = (key: keyof IIssueFilterOptions, value: string) => {
-    if (!workspaceSlug || !projectId) return;
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string) => {
+      if (!workspaceSlug || !projectId) return;
 
-    const newValues = issueFilterStore.userFilters?.[key] ?? [];
+      const newValues = issueFilterStore.userFilters?.[key] ?? [];
 
-    if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-    else newValues.push(value);
+      if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+      else newValues.push(value);
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        [key]: newValues,
-      },
-    });
-  };
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: newValues,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
 
-  const handleDisplayFiltersUpdate = (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-    if (!workspaceSlug || !projectId) return;
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        ...updatedDisplayFilter,
-      },
-    });
-  };
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
 
   return (
     <div className="flex items-center gap-2">
@@ -60,7 +70,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
       />
       <FiltersDropdown title="Filters">
         <FilterSelection
-          filters={{}}
+          filters={issueFilterStore.userFilters}
           handleFiltersUpdate={handleFiltersUpdate}
           layoutDisplayFiltersOptions={
             ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[issueFilterStore.userDisplayFilters.layout ?? "list"]
diff --git a/web/components/issues/issue-layouts/header/filters/assignees.tsx b/web/components/issues/issue-layouts/header/filters/assignees.tsx
index fb803d1d8c5..252890d52e2 100644
--- a/web/components/issues/issue-layouts/header/filters/assignees.tsx
+++ b/web/components/issues/issue-layouts/header/filters/assignees.tsx
@@ -14,10 +14,11 @@ type Props = {
   itemsToRender: number;
   projectId: string;
   searchQuery: string;
+  viewButtons: React.ReactNode;
 };
 
 export const FilterAssignees: React.FC<Props> = observer((props) => {
-  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery, viewButtons } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -41,9 +42,8 @@ export const FilterAssignees: React.FC<Props> = observer((props) => {
         <div>
           {filteredOptions ? (
             filteredOptions.length > 0 ? (
-              filteredOptions
-                .slice(0, itemsToRender)
-                .map((member) => (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
                   <FilterOption
                     key={`assignees-${member?.member?.id}`}
                     isChecked={appliedFilters?.includes(member.member?.id) ? true : false}
@@ -51,7 +51,9 @@ export const FilterAssignees: React.FC<Props> = observer((props) => {
                     icon={<Avatar user={member.member} height="18px" width="18px" />}
                     title={member.member?.display_name}
                   />
-                ))
+                ))}
+                {viewButtons}
+              </>
             ) : (
               <p className="text-xs text-custom-text-400 italic">No matches found</p>
             )
diff --git a/web/components/issues/issue-layouts/header/filters/created-by.tsx b/web/components/issues/issue-layouts/header/filters/created-by.tsx
index 2cefd106eb3..791e1e9319e 100644
--- a/web/components/issues/issue-layouts/header/filters/created-by.tsx
+++ b/web/components/issues/issue-layouts/header/filters/created-by.tsx
@@ -14,10 +14,11 @@ type Props = {
   itemsToRender: number;
   projectId: string;
   searchQuery: string;
+  viewButtons: React.ReactNode;
 };
 
 export const FilterCreatedBy: React.FC<Props> = observer((props) => {
-  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery, viewButtons } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -41,9 +42,8 @@ export const FilterCreatedBy: React.FC<Props> = observer((props) => {
         <div>
           {filteredOptions ? (
             filteredOptions.length > 0 ? (
-              filteredOptions
-                .slice(0, itemsToRender)
-                .map((member) => (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
                   <FilterOption
                     key={`created-by-${member.member?.id}`}
                     isChecked={appliedFilters?.includes(member.member?.id) ? true : false}
@@ -51,7 +51,9 @@ export const FilterCreatedBy: React.FC<Props> = observer((props) => {
                     icon={<Avatar user={member.member} height="18px" width="18px" />}
                     title={member.member?.display_name}
                   />
-                ))
+                ))}
+                {viewButtons}
+              </>
             ) : (
               <p className="text-xs text-custom-text-400 italic">No matches found</p>
             )
diff --git a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
index f53b51a4b5e..1d17eadfff6 100644
--- a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
@@ -145,26 +145,28 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               handleUpdate={(val) => handleFiltersUpdate("priority", val)}
               itemsToRender={filtersToRender.priority?.currentLength ?? 0}
               searchQuery={filtersSearchQuery}
+              viewButtons={
+                <div className="flex items-center gap-2 ml-7 mt-1">
+                  {/* TODO: handle view more and less in a better way */}
+                  {isViewMoreVisible("priority") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium"
+                      onClick={() => handleViewMore("priority")}
+                    >
+                      View more
+                    </button>
+                  )}
+                  {isViewLessVisible("priority") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium"
+                      onClick={() => handleViewLess("priority")}
+                    >
+                      View less
+                    </button>
+                  )}
+                </div>
+              }
             />
-            {/* TODO: handle view more and less in a better way */}
-            <div className="flex items-center gap-2 ml-7 mt-1">
-              {isViewMoreVisible("priority") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium"
-                  onClick={() => handleViewMore("priority")}
-                >
-                  View more
-                </button>
-              )}
-              {isViewLessVisible("priority") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium"
-                  onClick={() => handleViewLess("priority")}
-                >
-                  View less
-                </button>
-              )}
-            </div>
           </div>
         )}
 
@@ -235,25 +237,27 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               itemsToRender={filtersToRender.assignees?.currentLength ?? 0}
               projectId={projectId}
               searchQuery={filtersSearchQuery}
+              viewButtons={
+                <div className="flex items-center gap-2 ml-7 mt-1">
+                  {isViewMoreVisible("assignees") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium ml-7"
+                      onClick={() => handleViewMore("assignees")}
+                    >
+                      View more
+                    </button>
+                  )}
+                  {isViewLessVisible("assignees") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium"
+                      onClick={() => handleViewLess("assignees")}
+                    >
+                      View less
+                    </button>
+                  )}
+                </div>
+              }
             />
-            <div className="flex items-center gap-2 ml-7 mt-1">
-              {isViewMoreVisible("assignees") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium ml-7"
-                  onClick={() => handleViewMore("assignees")}
-                >
-                  View more
-                </button>
-              )}
-              {isViewLessVisible("assignees") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium"
-                  onClick={() => handleViewLess("assignees")}
-                >
-                  View less
-                </button>
-              )}
-            </div>
           </div>
         )}
 
@@ -266,25 +270,27 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               itemsToRender={filtersToRender.created_by?.currentLength ?? 0}
               projectId={projectId}
               searchQuery={filtersSearchQuery}
+              viewButtons={
+                <div className="flex items-center gap-2 ml-7 mt-1">
+                  {isViewMoreVisible("created_by") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium ml-7"
+                      onClick={() => handleViewMore("created_by")}
+                    >
+                      View more
+                    </button>
+                  )}
+                  {isViewLessVisible("created_by") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium"
+                      onClick={() => handleViewLess("created_by")}
+                    >
+                      View less
+                    </button>
+                  )}
+                </div>
+              }
             />
-            <div className="flex items-center gap-2 ml-7 mt-1">
-              {isViewMoreVisible("created_by") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium ml-7"
-                  onClick={() => handleViewMore("created_by")}
-                >
-                  View more
-                </button>
-              )}
-              {isViewLessVisible("created_by") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium"
-                  onClick={() => handleViewLess("created_by")}
-                >
-                  View less
-                </button>
-              )}
-            </div>
           </div>
         )}
 
@@ -297,25 +303,27 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               itemsToRender={filtersToRender.labels?.currentLength ?? 0}
               projectId={projectId}
               searchQuery={filtersSearchQuery}
+              viewButtons={
+                <div className="flex items-center gap-2 ml-7 mt-1">
+                  {isViewMoreVisible("labels") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium"
+                      onClick={() => handleViewMore("labels")}
+                    >
+                      View more
+                    </button>
+                  )}
+                  {isViewLessVisible("labels") && (
+                    <button
+                      className="text-custom-primary-100 text-xs font-medium"
+                      onClick={() => handleViewLess("labels")}
+                    >
+                      View less
+                    </button>
+                  )}
+                </div>
+              }
             />
-            <div className="flex items-center gap-2 ml-7 mt-1">
-              {isViewMoreVisible("labels") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium"
-                  onClick={() => handleViewMore("labels")}
-                >
-                  View more
-                </button>
-              )}
-              {isViewLessVisible("labels") && (
-                <button
-                  className="text-custom-primary-100 text-xs font-medium"
-                  onClick={() => handleViewLess("labels")}
-                >
-                  View less
-                </button>
-              )}
-            </div>
           </div>
         )}
 
diff --git a/web/components/issues/issue-layouts/header/filters/labels.tsx b/web/components/issues/issue-layouts/header/filters/labels.tsx
index a024fcca50a..407bd707fe4 100644
--- a/web/components/issues/issue-layouts/header/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/header/filters/labels.tsx
@@ -18,10 +18,11 @@ type Props = {
   itemsToRender: number;
   projectId: string;
   searchQuery: string;
+  viewButtons: React.ReactNode;
 };
 
 export const FilterLabels: React.FC<Props> = observer((props) => {
-  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, projectId, searchQuery, viewButtons } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -45,9 +46,8 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
         <div>
           {filteredOptions ? (
             filteredOptions.length > 0 ? (
-              filteredOptions
-                .slice(0, itemsToRender)
-                .map((label) => (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
                   <FilterOption
                     key={label?.id}
                     isChecked={appliedFilters?.includes(label?.id) ? true : false}
@@ -55,7 +55,9 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
                     icon={<LabelIcons color={label.color} />}
                     title={label.name}
                   />
-                ))
+                ))}
+                {viewButtons}
+              </>
             ) : (
               <p className="text-xs text-custom-text-400 italic">No matches found</p>
             )
diff --git a/web/components/issues/issue-layouts/header/filters/priority.tsx b/web/components/issues/issue-layouts/header/filters/priority.tsx
index d6dbf1c4f06..4eff176e0a6 100644
--- a/web/components/issues/issue-layouts/header/filters/priority.tsx
+++ b/web/components/issues/issue-layouts/header/filters/priority.tsx
@@ -53,10 +53,11 @@ type Props = {
   handleUpdate: (val: string) => void;
   itemsToRender: number;
   searchQuery: string;
+  viewButtons: React.ReactNode;
 };
 
 export const FilterPriority: React.FC<Props> = observer((props) => {
-  const { appliedFilters, handleUpdate, itemsToRender, searchQuery } = props;
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery, viewButtons } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -74,9 +75,8 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
       {previewEnabled && (
         <div>
           {filteredOptions.length > 0 ? (
-            filteredOptions
-              .slice(0, itemsToRender)
-              .map((priority) => (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((priority) => (
                 <FilterOption
                   key={priority.key}
                   isChecked={appliedFilters?.includes(priority.key) ? true : false}
@@ -84,7 +84,9 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
                   icon={<PriorityIcons priority={priority.key} />}
                   title={priority.title}
                 />
-              ))
+              ))}
+              {viewButtons}
+            </>
           ) : (
             <p className="text-xs text-custom-text-400 italic">No matches found</p>
           )}

From 546243ce7c39e1f93c8ae12d73b47f87d96c6acc Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 29 Sep 2023 12:06:23 +0530
Subject: [PATCH 08/10] chore: start and target date filter options added

---
 .../core/filters/date-filter-modal.tsx        | 55 +++---------------
 web/components/headers/project-issues.tsx     | 12 +++-
 .../calendar/dropdowns/months-dropdown.tsx    |  2 +-
 .../header/filters/filters-selection.tsx      | 39 ++++++++++---
 .../header/filters/start-date.tsx             | 55 +++++++++++++-----
 .../header/filters/target-date.tsx            | 57 ++++++++++++++-----
 .../header/helpers/filter-header.tsx          |  2 +-
 web/constants/filters.ts                      | 29 ++--------
 8 files changed, 139 insertions(+), 112 deletions(-)

diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index eb285fd6f6f..4a1ec0e8b98 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -1,11 +1,8 @@
 import { Fragment } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// react-datepicker
 import DatePicker from "react-datepicker";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
 // components
 import { DateFilterSelect } from "./date-filter-select";
 // ui
@@ -14,15 +11,12 @@ import { PrimaryButton, SecondaryButton } from "components/ui";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { IIssueFilterOptions } from "types";
 
 type Props = {
   title: string;
-  field: keyof IIssueFilterOptions;
-  filters: IIssueFilterOptions;
   handleClose: () => void;
   isOpen: boolean;
-  onSelect: (option: any) => void;
+  onSelect: (val: string[]) => void;
 };
 
 type TFormValues = {
@@ -37,14 +31,7 @@ const defaultValues: TFormValues = {
   date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
 };
 
-export const DateFilterModal: React.FC<Props> = ({
-  title,
-  field,
-  filters,
-  handleClose,
-  isOpen,
-  onSelect,
-}) => {
+export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, onSelect }) => {
   const { handleSubmit, watch, control } = useForm<TFormValues>({
     defaultValues,
   });
@@ -52,32 +39,13 @@ export const DateFilterModal: React.FC<Props> = ({
   const handleFormSubmit = (formData: TFormValues) => {
     const { filterType, date1, date2 } = formData;
 
-    if (filterType === "range") {
-      onSelect({
-        key: field,
-        value: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`],
-      });
-    } else {
-      const filteredArray = (filters?.[field] as string[])?.filter((item) => {
-        if (item?.includes(filterType)) return false;
+    if (filterType === "range") onSelect([`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`]);
+    else onSelect([`${renderDateFormat(date1)};${filterType}`]);
 
-        return true;
-      });
-
-      const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
-      if (filterOne)
-        onSelect({ key: field, value: [filterOne, `${renderDateFormat(date1)};${filterType}`] });
-      else
-        onSelect({
-          key: field,
-          value: [`${renderDateFormat(date1)};${filterType}`],
-        });
-    }
     handleClose();
   };
 
-  const isInvalid =
-    watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
+  const isInvalid = watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
 
   const nextDay = new Date(watch("date1"));
   nextDay.setDate(nextDay.getDate() + 1);
@@ -117,10 +85,7 @@ export const DateFilterModal: React.FC<Props> = ({
                         <DateFilterSelect title={title} value={value} onChange={onChange} />
                       )}
                     />
-                    <XMarkIcon
-                      className="border-base h-4 w-4 cursor-pointer"
-                      onClick={handleClose}
-                    />
+                    <XMarkIcon className="border-base h-4 w-4 cursor-pointer" onClick={handleClose} />
                   </div>
                   <div className="flex w-full justify-between gap-4">
                     <Controller
@@ -165,11 +130,7 @@ export const DateFilterModal: React.FC<Props> = ({
                     <SecondaryButton className="flex items-center gap-2" onClick={handleClose}>
                       Cancel
                     </SecondaryButton>
-                    <PrimaryButton
-                      type="submit"
-                      className="flex items-center gap-2"
-                      disabled={isInvalid}
-                    >
+                    <PrimaryButton type="submit" className="flex items-center gap-2" disabled={isInvalid}>
                       Apply
                     </PrimaryButton>
                   </div>
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 32eae2ea2b0..d3d18729d97 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -31,13 +31,19 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   );
 
   const handleFiltersUpdate = useCallback(
-    (key: keyof IIssueFilterOptions, value: string) => {
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId) return;
 
       const newValues = issueFilterStore.userFilters?.[key] ?? [];
 
-      if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-      else newValues.push(value);
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
 
       issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
         filters: {
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index b92fe96b904..a6e410e0932 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -26,7 +26,7 @@ export const CalendarMonthsDropdown: React.FC = observer(() => {
     const lastDay = new Date(daysList[daysList.length - 1]);
 
     if (firstDay.getMonth() === lastDay.getMonth() && firstDay.getFullYear() === lastDay.getFullYear())
-      return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} ${firstDay.getFullYear()}`;
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].title} ${firstDay.getFullYear()}`;
 
     if (firstDay.getFullYear() !== lastDay.getFullYear()) {
       return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} ${firstDay.getFullYear()} - ${
diff --git a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
index 1d17eadfff6..cf65b7a7024 100644
--- a/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/header/filters/filters-selection.tsx
@@ -9,8 +9,10 @@ import {
   FilterCreatedBy,
   FilterLabels,
   FilterPriority,
+  FilterStartDate,
   FilterState,
   FilterStateGroup,
+  FilterTargetDate,
 } from "components/issues";
 // icons
 import { Search, X } from "lucide-react";
@@ -20,10 +22,11 @@ import { getStatesList } from "helpers/state.helper";
 import { IIssueFilterOptions } from "types";
 // constants
 import { ILayoutDisplayFiltersOptions, ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
+import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
   filters: IIssueFilterOptions;
-  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string) => void;
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
   layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions;
   projectId: string;
 };
@@ -67,6 +70,14 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
       currentLength: 5,
       totalLength: statesList?.length ?? 0,
     },
+    start_date: {
+      currentLength: 5,
+      totalLength: DATE_FILTER_OPTIONS.length + 1,
+    },
+    target_date: {
+      currentLength: 5,
+      totalLength: DATE_FILTER_OPTIONS.length + 1,
+    },
   });
 
   const handleViewMore = (filterName: keyof IIssueFilterOptions) => {
@@ -118,7 +129,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
 
   return (
     <div className="w-full h-full flex flex-col overflow-hidden">
-      <div className="p-2.5 bg-custom-background-100">
+      <div className="p-2.5 pb-0 bg-custom-background-100">
         <div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
           <Search className="text-custom-text-400" size={12} strokeWidth={2} />
           <input
@@ -328,18 +339,28 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         )}
 
         {/* start_date */}
-        {/* {isFilterEnabled("start_date") && (
+        {isFilterEnabled("start_date") && (
           <div className="py-2">
-            <FilterStartDate />
+            <FilterStartDate
+              appliedFilters={filters.start_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+              itemsToRender={filtersToRender.start_date?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+            />
           </div>
-        )} */}
+        )}
 
-        {/* due_date */}
-        {/* {isFilterEnabled("target_date") && (
+        {/* target_date */}
+        {isFilterEnabled("target_date") && (
           <div className="py-2">
-            <FilterTargetDate />
+            <FilterTargetDate
+              appliedFilters={filters.target_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+              itemsToRender={filtersToRender.target_date?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+            />
           </div>
-        )} */}
+        )}
       </div>
     </div>
   );
diff --git a/web/components/issues/issue-layouts/header/filters/start-date.tsx b/web/components/issues/issue-layouts/header/filters/start-date.tsx
index a960f1f4c14..ad5ed955af8 100644
--- a/web/components/issues/issue-layouts/header/filters/start-date.tsx
+++ b/web/components/issues/issue-layouts/header/filters/start-date.tsx
@@ -1,21 +1,39 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
+import { DateFilterModal } from "components/core";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  itemsToRender: number;
+  searchQuery: string;
+};
+
+export const FilterStartDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery } = props;
 
-export const FilterStartDate = observer(() => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
 
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const appliedFiltersCount = issueFilterStore.userFilters?.start_date?.length ?? 0;
+  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
 
   return (
     <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
       <FilterHeader
         title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
         isPreviewEnabled={previewEnabled}
@@ -23,16 +41,27 @@ export const FilterStartDate = observer(() => {
       />
       {previewEnabled && (
         <div>
-          {issueFilterStore?.userFilters?.start_date &&
-            issueFilterStore?.userFilters?.start_date.length > 0 &&
-            issueFilterStore?.userFilters?.start_date.map((_startDate) => (
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple={false}
+                />
+              ))}
               <FilterOption
-                key={_startDate?.key}
-                isChecked={issueFilterStore?.userFilters?.start_date?.includes(_startDate?.key) ? true : false}
-                title={_startDate.title}
+                isChecked={false}
+                onClick={() => setIsDateFilterModalOpen(true)}
+                title="Custom"
                 multiple={false}
               />
-            ))}
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
         </div>
       )}
     </>
diff --git a/web/components/issues/issue-layouts/header/filters/target-date.tsx b/web/components/issues/issue-layouts/header/filters/target-date.tsx
index 21cd8f2f212..c6ee45b04d3 100644
--- a/web/components/issues/issue-layouts/header/filters/target-date.tsx
+++ b/web/components/issues/issue-layouts/header/filters/target-date.tsx
@@ -1,38 +1,67 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
+import { DateFilterModal } from "components/core";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  itemsToRender: number;
+  searchQuery: string;
+};
+
+export const FilterTargetDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery } = props;
 
-export const FilterTargetDate = observer(() => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
 
-  const store = useMobxStore();
-  const { issueFilter: issueFilterStore } = store;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const appliedFiltersCount = issueFilterStore.userFilters?.target_date?.length ?? 0;
+  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
 
   return (
     <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
       <FilterHeader
         title={`Target date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
       {previewEnabled && (
-        <div className="space-y-[2px] pt-1">
-          {issueFilterStore?.userFilters?.target_date &&
-            issueFilterStore?.userFilters?.target_date.length > 0 &&
-            issueFilterStore?.userFilters?.target_date.map((_targetDate) => (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple={false}
+                />
+              ))}
               <FilterOption
-                key={_targetDate?.key}
-                isChecked={issueFilterStore?.userFilters?.target_date?.includes(_targetDate?.key) ? true : false}
-                title={_targetDate.title}
+                isChecked={false}
+                onClick={() => setIsDateFilterModalOpen(true)}
+                title="Custom"
                 multiple={false}
               />
-            ))}
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
         </div>
       )}
     </>
diff --git a/web/components/issues/issue-layouts/header/helpers/filter-header.tsx b/web/components/issues/issue-layouts/header/helpers/filter-header.tsx
index 6dd0c7a02ff..4513b079550 100644
--- a/web/components/issues/issue-layouts/header/helpers/filter-header.tsx
+++ b/web/components/issues/issue-layouts/header/helpers/filter-header.tsx
@@ -9,7 +9,7 @@ interface IFilterHeader {
 }
 
 export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
-  <div className="flex items-center justify-between gap-2 pb-1 bg-custom-background-100 sticky top-0">
+  <div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
     <div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
     <button
       type="button"
diff --git a/web/constants/filters.ts b/web/constants/filters.ts
index 1172ae47bbd..e4131e451a4 100644
--- a/web/constants/filters.ts
+++ b/web/constants/filters.ts
@@ -1,37 +1,18 @@
-// helper
-import { renderDateFormat } from "helpers/date-time.helper";
-
 export const DATE_FILTER_OPTIONS = [
   {
-    name: "Last week",
-    value: [
-      `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after`,
-      `${renderDateFormat(new Date())};before`,
-    ],
+    name: "1 week from now",
+    value: "1_weeks;after;fromnow",
   },
   {
     name: "2 weeks from now",
-    value: [
-      `${renderDateFormat(new Date())};after`,
-      `${renderDateFormat(new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000))};before`,
-    ],
+    value: "2_weeks;after;fromnow",
   },
   {
     name: "1 month from now",
-    value: [
-      `${renderDateFormat(new Date())};after`,
-      `${renderDateFormat(
-        new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
-      )};before`,
-    ],
+    value: "1_months;after;fromnow",
   },
   {
     name: "2 months from now",
-    value: [
-      `${renderDateFormat(new Date())};after`,
-      `${renderDateFormat(
-        new Date(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate())
-      )};before`,
-    ],
+    value: "2_months;after;fromnow",
   },
 ];

From e3f360d7ffd9562e24bc5e7fc5c6e551a7508ca4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 29 Sep 2023 12:55:52 +0530
Subject: [PATCH 09/10] refactor: query params generator function

---
 web/constants/issue.ts      |   6 +-
 web/helpers/issue.helper.ts | 235 +++++-------------------------------
 web/types/view-props.d.ts   |   1 +
 3 files changed, 31 insertions(+), 211 deletions(-)

diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index c782013fc96..fc21f50cad8 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -279,14 +279,14 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     calendar: {
-      filters: ["priority", "state", "assignees", "created_by", "labels"],
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date"],
       display_properties: true,
       display_filters: {
         type: [null, "active", "backlog"],
       },
       extra_options: {
-        access: false,
-        values: [],
+        access: true,
+        values: ["sub_issue"],
       },
     },
     spreadsheet: {
diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts
index 5cb78bdc861..d0066c0e699 100644
--- a/web/helpers/issue.helper.ts
+++ b/web/helpers/issue.helper.ts
@@ -1,7 +1,9 @@
+// helpers
 import { orderArrayBy } from "helpers/array.helper";
-import { renderDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue, TIssueGroupByOptions, TIssueLayouts, TIssueOrderByOptions, TIssueParams } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
 type THandleIssuesMutation = (
   formData: Partial<IIssue>,
@@ -79,218 +81,35 @@ export const handleIssuesMutation: THandleIssuesMutation = (
   }
 };
 
-export const handleIssueQueryParamsByLayout = (_layout: TIssueLayouts | undefined): TIssueParams[] | null => {
-  if (_layout === "list")
-    return [
-      "priority",
-      "state_group",
-      "state",
-      "assignees",
-      "created_by",
-      "labels",
-      "start_date",
-      "target_date",
-      "group_by",
-      "sub_group_by",
-      "order_by",
-      "type",
-      "sub_issue",
-      "show_empty_groups",
-    ];
-  if (_layout === "kanban")
-    return [
-      "priority",
-      "state_group",
-      "state",
-      "assignees",
-      "created_by",
-      "labels",
-      "start_date",
-      "target_date",
-      "group_by",
-      "sub_group_by",
-      "order_by",
-      "type",
-      "sub_issue",
-      "show_empty_groups",
-    ];
-  if (_layout === "calendar")
-    return [
-      "priority",
-      "state_group",
-      "state",
-      "assignees",
-      "created_by",
-      "labels",
-      "start_date",
-      "target_date",
-      "type",
-    ];
-  if (_layout === "spreadsheet")
-    return [
-      "priority",
-      "state_group",
-      "state",
-      "assignees",
-      "created_by",
-      "labels",
-      "start_date",
-      "target_date",
-      "type",
-      "sub_issue",
-    ];
-  if (_layout === "gantt_chart")
-    return [
-      "priority",
-      "state",
-      "assignees",
-      "created_by",
-      "labels",
-      "start_date",
-      "target_date",
-      "order_by",
-      "type",
-      "sub_issue",
-      "start_target_date",
-    ];
+export const handleIssueQueryParamsByLayout = (
+  layout: TIssueLayouts | undefined,
+  viewType: "my_issues" | "issues"
+): TIssueParams[] | null => {
+  const queryParams: TIssueParams[] = [];
 
-  return null;
-};
+  if (!layout) return null;
 
-export const handleIssueParamsDateFormat = (key: string, start_date: any | null, target_date: any | null) => {
-  if (key === "last_week")
-    return `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after,${renderDateFormat(
-      new Date()
-    )};before`;
+  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
 
-  if (key === "2_weeks_from_now")
-    return `${renderDateFormat(new Date())};after,
-      ${renderDateFormat(new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000))};before`;
+  // add filters query params
+  layoutOptions.filters.forEach((option) => {
+    queryParams.push(option);
+  });
 
-  if (key === "1_month_from_now")
-    return `${renderDateFormat(new Date())};after,${renderDateFormat(
-      new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
-    )};before`;
+  // add display filters query params
+  Object.keys(layoutOptions.display_filters).forEach((option) => {
+    queryParams.push(option as TIssueParams);
+  });
 
-  if (key === "2_months_from_now")
-    return `${renderDateFormat(new Date())};after,${renderDateFormat(
-      new Date(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate())
-    )};before`;
+  // add extra options query params
+  if (layoutOptions.extra_options.access) {
+    layoutOptions.extra_options.values.forEach((option) => {
+      queryParams.push(option);
+    });
+  }
 
-  if (key === "custom" && start_date && target_date)
-    return `${renderDateFormat(start_date)};after,${renderDateFormat(target_date)};before`;
-};
+  // add start_target_date query param for the gantt_chart layout
+  if (layout === "gantt_chart") queryParams.push("start_target_date");
 
-export const issueFilterVisibilityData: {
-  [key: string]: {
-    layout: TIssueLayouts[];
-    filters: {
-      [key in TIssueLayouts]: string[];
-    };
-    display_properties: {
-      [key in TIssueLayouts]: boolean;
-    };
-    display_filters: {
-      [key in TIssueLayouts]: string[];
-    };
-    extra_options: {
-      [key in TIssueLayouts]: {
-        access: boolean;
-        values: string[];
-      };
-    };
-  };
-} = {
-  my_issues: {
-    layout: ["list", "kanban"],
-    filters: {
-      list: ["priority", "state_group", "labels", "start_date", "due_date"],
-      kanban: ["priority", "state_group", "labels", "start_date", "due_date"],
-      calendar: [],
-      spreadsheet: [],
-      gantt_chart: [],
-    },
-    display_properties: {
-      list: true,
-      kanban: true,
-      calendar: true,
-      spreadsheet: true,
-      gantt_chart: false,
-    },
-    display_filters: {
-      list: ["group_by", "order_by", "issue_type"],
-      kanban: ["group_by", "order_by", "issue_type"],
-      calendar: ["issue_type"],
-      spreadsheet: ["issue_type"],
-      gantt_chart: ["order_by", "issue_type"],
-    },
-    extra_options: {
-      list: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-      kanban: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-      calendar: {
-        access: false,
-        values: [],
-      },
-      spreadsheet: {
-        access: false,
-        values: [],
-      },
-      gantt_chart: {
-        access: false,
-        values: [],
-      },
-    },
-  },
-  issues: {
-    layout: ["list", "kanban", "calendar", "spreadsheet", "gantt_chart"],
-    filters: {
-      list: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-      kanban: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-      calendar: ["priority", "state", "assignees", "created_by", "labels"],
-      spreadsheet: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-      gantt_chart: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-    },
-    display_properties: {
-      list: true,
-      kanban: true,
-      calendar: true,
-      spreadsheet: true,
-      gantt_chart: false,
-    },
-    display_filters: {
-      list: ["group_by", "order_by", "issue_type"],
-      kanban: ["group_by", "order_by", "issue_type"],
-      calendar: ["issue_type"],
-      spreadsheet: ["issue_type"],
-      gantt_chart: ["order_by", "issue_type"],
-    },
-    extra_options: {
-      list: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-      kanban: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-      calendar: {
-        access: false,
-        values: [],
-      },
-      spreadsheet: {
-        access: false,
-        values: [],
-      },
-      gantt_chart: {
-        access: true,
-        values: ["sub_issue"],
-      },
-    },
-  },
+  return queryParams;
 };
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
index 3488b8f4efa..48558f3e6b5 100644
--- a/web/types/view-props.d.ts
+++ b/web/types/view-props.d.ts
@@ -38,6 +38,7 @@ export type TIssueParams =
   | "state"
   | "assignees"
   | "created_by"
+  | "subscriber"
   | "labels"
   | "start_date"
   | "target_date"

From 9885603bc2fb2f6b4f590495ce77515603acfdb1 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 29 Sep 2023 13:00:25 +0530
Subject: [PATCH 10/10] fix: query params generator function

---
 web/store/issue_filters.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/store/issue_filters.ts b/web/store/issue_filters.ts
index d9e58b34184..f94eaf87a3f 100644
--- a/web/store/issue_filters.ts
+++ b/web/store/issue_filters.ts
@@ -157,7 +157,7 @@ class IssueFilterStore implements IIssueFilterStore {
 
     if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.target_date = this.calendarLayoutDateRange();
 
-    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout);
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
     if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
 
     return filteredRouteParams;