chore: issue and properties filter dropdown improvement (#4733)

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}

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}

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}
               />

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
                   }

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
               }

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
               }

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
             }

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
             }

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">

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">

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
               }

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
               }

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}

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}