From de8da176d365e0b8ff1ccdbf2e90b8a8f6954541 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 7 Jun 2024 19:33:13 +0530
Subject: [PATCH] chore: issue and properties filter dropdown improvement
 (#4733)

---
 web/components/cycles/cycle-mobile-header.tsx |  2 ++
 web/components/headers/cycle-issues.tsx       |  2 ++
 web/components/headers/global-issues.tsx      |  2 ++
 web/components/headers/module-issues.tsx      |  2 ++
 .../headers/project-draft-issues.tsx          |  2 ++
 web/components/headers/project-issues.tsx     |  2 ++
 .../headers/project-view-issues.tsx           |  2 ++
 .../issues/archived-issues-header.tsx         |  2 ++
 .../display-filters-selection.tsx             | 15 ------------
 .../header/filters/filters-selection.tsx      | 24 +++++++++++++++++--
 .../issues/issues-mobile-header.tsx           |  2 ++
 .../modules/module-mobile-header.tsx          |  2 ++
 .../profile/profile-issues-filter.tsx         |  2 ++
 .../profile/profile-issues-mobile-header.tsx  |  2 ++
 14 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/web/components/cycles/cycle-mobile-header.tsx b/web/components/cycles/cycle-mobile-header.tsx
index 3e37b586f..ce1b45a9b 100644
--- a/web/components/cycles/cycle-mobile-header.tsx
+++ b/web/components/cycles/cycle-mobile-header.tsx
@@ -156,6 +156,8 @@ export const CycleMobileHeader = () => {
               layoutDisplayFiltersOptions={
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
               labels={projectLabels}
               memberIds={projectMemberIds ?? undefined}
               states={projectStates}
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index c26be9606..4e9c37c9d 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -241,6 +241,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 layoutDisplayFiltersOptions={
                   activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                 }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
                 labels={projectLabels}
                 memberIds={projectMemberIds ?? undefined}
                 states={projectStates}
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 1ec2a5d2c..a6a35d16f 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -117,6 +117,8 @@ export const GlobalIssuesHeader: React.FC = observer(() => {
                 layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
                 filters={issueFilters?.filters ?? {}}
                 handleFiltersUpdate={handleFiltersUpdate}
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
                 labels={workspaceLabels ?? undefined}
                 memberIds={workspaceMemberIds ?? undefined}
               />
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 119cb9a94..a433bead5 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -239,6 +239,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                 <FilterSelection
                   filters={issueFilters?.filters ?? {}}
                   handleFiltersUpdate={handleFiltersUpdate}
+                  displayFilters={issueFilters?.displayFilters ?? {}}
+                  handleDisplayFiltersUpdate={handleDisplayFilters}
                   layoutDisplayFiltersOptions={
                     activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                   }
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 8c8a25c9e..f3e70d86b 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -138,6 +138,8 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
             <FilterSelection
               filters={issueFilters?.filters ?? {}}
               handleFiltersUpdate={handleFiltersUpdate}
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
               layoutDisplayFiltersOptions={
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 7042d2c28..43b270b6b 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -182,6 +182,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             <FilterSelection
               filters={issueFilters?.filters ?? {}}
               handleFiltersUpdate={handleFiltersUpdate}
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
               layoutDisplayFiltersOptions={
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 0e8f59e6c..6270093a3 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -216,6 +216,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           <FilterSelection
             filters={issueFilters?.filters ?? {}}
             handleFiltersUpdate={handleFiltersUpdate}
+            displayFilters={issueFilters?.displayFilters ?? {}}
+            handleDisplayFiltersUpdate={handleDisplayFilters}
             layoutDisplayFiltersOptions={
               activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
             }
diff --git a/web/components/issues/archived-issues-header.tsx b/web/components/issues/archived-issues-header.tsx
index 5d4c7d0b9..8a3df40b3 100644
--- a/web/components/issues/archived-issues-header.tsx
+++ b/web/components/issues/archived-issues-header.tsx
@@ -77,6 +77,8 @@ export const ArchivedIssuesHeader: FC = observer(() => {
           <FilterSelection
             filters={issueFilters?.filters || {}}
             handleFiltersUpdate={handleFiltersUpdate}
+            displayFilters={issueFilters?.displayFilters ?? {}}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
             layoutDisplayFiltersOptions={
               activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
             }
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index 0f7b87546..7fb95d95e 100644
--- a/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -7,7 +7,6 @@ import {
   FilterDisplayProperties,
   FilterExtraOptions,
   FilterGroupBy,
-  FilterIssueType,
   FilterOrderBy,
   FilterSubGroupBy,
 } from "@/components/issues";
@@ -111,20 +110,6 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
         </div>
       )}
 
-      {/* issue type */}
-      {isDisplayFilterEnabled("type") && (
-        <div className="py-2">
-          <FilterIssueType
-            selectedIssueType={displayFilters?.type}
-            handleUpdate={(val) =>
-              handleDisplayFiltersUpdate({
-                type: val,
-              })
-            }
-          />
-        </div>
-      )}
-
       {/* Options */}
       {layoutDisplayFiltersOptions?.extra_options.access && (
         <div className="py-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
index 3f45946e0..61ed05a24 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Search, X } from "lucide-react";
-import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
+import { IIssueDisplayFilterOptions, IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // hooks
 import {
   FilterAssignees,
@@ -16,6 +16,7 @@ import {
   FilterTargetDate,
   FilterCycle,
   FilterModule,
+  FilterIssueType,
 } from "@/components/issues";
 import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
 import { useAppRouter } from "@/hooks/store";
@@ -25,6 +26,8 @@ import { useAppRouter } from "@/hooks/store";
 
 type Props = {
   filters: IIssueFilterOptions;
+  displayFilters?: IIssueDisplayFilterOptions | undefined;
+  handleDisplayFiltersUpdate?: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
   layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
   labels?: IIssueLabel[] | undefined;
@@ -37,6 +40,8 @@ type Props = {
 export const FilterSelection: React.FC<Props> = observer((props) => {
   const {
     filters,
+    displayFilters,
+    handleDisplayFiltersUpdate,
     handleFiltersUpdate,
     layoutDisplayFiltersOptions,
     labels,
@@ -52,6 +57,9 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
 
   const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
 
+  const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
+    Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
+
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-custom-background-100 p-2.5 pb-0">
@@ -187,7 +195,19 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
             />
           </div>
         )}
-
+        {/* issue type */}
+        {isDisplayFilterEnabled("type") && displayFilters && handleDisplayFiltersUpdate && (
+          <div className="py-2">
+            <FilterIssueType
+              selectedIssueType={displayFilters.type}
+              handleUpdate={(val) =>
+                handleDisplayFiltersUpdate({
+                  type: val,
+                })
+              }
+            />
+          </div>
+        )}
         {/* start_date */}
         {isFilterEnabled("start_date") && (
           <div className="py-2">
diff --git a/web/components/issues/issues-mobile-header.tsx b/web/components/issues/issues-mobile-header.tsx
index 72df560a9..956aa0d29 100644
--- a/web/components/issues/issues-mobile-header.tsx
+++ b/web/components/issues/issues-mobile-header.tsx
@@ -132,6 +132,8 @@ export const IssuesMobileHeader = observer(() => {
             <FilterSelection
               filters={issueFilters?.filters ?? {}}
               handleFiltersUpdate={handleFiltersUpdate}
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
               layoutDisplayFiltersOptions={
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
diff --git a/web/components/modules/module-mobile-header.tsx b/web/components/modules/module-mobile-header.tsx
index 822054c7f..ababa1ba1 100644
--- a/web/components/modules/module-mobile-header.tsx
+++ b/web/components/modules/module-mobile-header.tsx
@@ -134,6 +134,8 @@ export const ModuleMobileHeader = observer(() => {
             <FilterSelection
               filters={issueFilters?.filters ?? {}}
               handleFiltersUpdate={handleFiltersUpdate}
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
               layoutDisplayFiltersOptions={
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
index 6ba802f9e..faee98152 100644
--- a/web/components/profile/profile-issues-filter.tsx
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -113,6 +113,8 @@ export const ProfileIssuesFilter = observer(() => {
           }
           filters={issueFilters?.filters ?? {}}
           handleFiltersUpdate={handleFiltersUpdate}
+          displayFilters={issueFilters?.displayFilters ?? {}}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
           states={states}
           labels={workspaceLabels}
           memberIds={members}
diff --git a/web/components/profile/profile-issues-mobile-header.tsx b/web/components/profile/profile-issues-mobile-header.tsx
index 657aab0a0..6088d0194 100644
--- a/web/components/profile/profile-issues-mobile-header.tsx
+++ b/web/components/profile/profile-issues-mobile-header.tsx
@@ -147,6 +147,8 @@ const ProfileIssuesMobileHeader = observer(() => {
             }
             filters={issueFilters?.filters ?? {}}
             handleFiltersUpdate={handleFiltersUpdate}
+            displayFilters={issueFilters?.displayFilters ?? {}}
+            handleDisplayFiltersUpdate={handleDisplayFilters}
             states={states}
             labels={workspaceLabels}
             memberIds={members}