From 4ca45a971c0ca60b3ed8ab6dca1fae2f8d6df1c9 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 16 Aug 2024 16:48:00 +0530
Subject: [PATCH] chore: issue filters restructuring. (#5372)

---
 packages/types/src/view-props.d.ts            |  8 ++++--
 .../issues/filters/applied-filters/index.ts   |  1 +
 .../filters/applied-filters/issue-types.tsx   | 11 ++++++++
 web/ce/components/issues/filters/index.ts     |  2 ++
 .../components/issues/filters/issue-types.tsx | 12 ++++++++
 web/ce/components/issues/index.ts             |  1 +
 .../filters/applied-filters/filters-list.tsx  |  9 ++++++
 .../filters/header/display-filters/index.ts   |  2 +-
 .../{issue-type.tsx => issue-grouping.tsx}    | 10 +++----
 .../header/filters/filters-selection.tsx      | 22 +++++++++++----
 .../issues/issue-layouts/kanban/block.tsx     | 10 ++-----
 web/core/constants/issue.ts                   | 28 +++++++++++++++----
 .../helpers/issue-filter-helper.store.ts      |  1 +
 .../issues/filters/active-filters/index.ts    |  1 +
 .../filters/active-filters/issue-types.tsx    |  1 +
 web/ee/components/issues/filters/index.ts     |  2 ++
 .../components/issues/filters/issue-types.tsx |  1 +
 web/ee/components/issues/index.ts             |  1 +
 18 files changed, 94 insertions(+), 29 deletions(-)
 create mode 100644 web/ce/components/issues/filters/applied-filters/index.ts
 create mode 100644 web/ce/components/issues/filters/applied-filters/issue-types.tsx
 create mode 100644 web/ce/components/issues/filters/index.ts
 create mode 100644 web/ce/components/issues/filters/issue-types.tsx
 rename web/core/components/issues/issue-layouts/filters/header/display-filters/{issue-type.tsx => issue-grouping.tsx} (79%)
 create mode 100644 web/ee/components/issues/filters/active-filters/index.ts
 create mode 100644 web/ee/components/issues/filters/active-filters/issue-types.tsx
 create mode 100644 web/ee/components/issues/filters/index.ts
 create mode 100644 web/ee/components/issues/filters/issue-types.tsx

diff --git a/packages/types/src/view-props.d.ts b/packages/types/src/view-props.d.ts
index 819cd56ea..6b0970cf6 100644
--- a/packages/types/src/view-props.d.ts
+++ b/packages/types/src/view-props.d.ts
@@ -51,7 +51,7 @@ export type TIssueOrderByOptions =
   | "sub_issues_count"
   | "-sub_issues_count";
 
-export type TIssueTypeFilters = "active" | "backlog" | null;
+export type TIssueGroupingFilters = "active" | "backlog" | null;
 
 export type TIssueExtraOptions = "show_empty_groups" | "sub_issue";
 
@@ -76,7 +76,8 @@ export type TIssueParams =
   | "sub_issue"
   | "show_empty_groups"
   | "cursor"
-  | "per_page";
+  | "per_page"
+  | "issue_type";
 
 export type TCalendarLayouts = "month" | "week";
 
@@ -94,6 +95,7 @@ export interface IIssueFilterOptions {
   state_group?: string[] | null;
   subscriber?: string[] | null;
   target_date?: string[] | null;
+  issue_type?: string[] | null;
 }
 
 export interface IIssueDisplayFilterOptions {
@@ -107,7 +109,7 @@ export interface IIssueDisplayFilterOptions {
   order_by?: TIssueOrderByOptions;
   show_empty_groups?: boolean;
   sub_issue?: boolean;
-  type?: TIssueTypeFilters;
+  type?: TIssueGroupingFilters;
 }
 export interface IIssueDisplayProperties {
   assignee?: boolean;
diff --git a/web/ce/components/issues/filters/applied-filters/index.ts b/web/ce/components/issues/filters/applied-filters/index.ts
new file mode 100644
index 000000000..592325823
--- /dev/null
+++ b/web/ce/components/issues/filters/applied-filters/index.ts
@@ -0,0 +1 @@
+export * from "./issue-types";
diff --git a/web/ce/components/issues/filters/applied-filters/issue-types.tsx b/web/ce/components/issues/filters/applied-filters/issue-types.tsx
new file mode 100644
index 000000000..fd2daf9c8
--- /dev/null
+++ b/web/ce/components/issues/filters/applied-filters/issue-types.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { observer } from "mobx-react";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedIssueTypeFilters: React.FC<Props> = observer(() => null);
diff --git a/web/ce/components/issues/filters/index.ts b/web/ce/components/issues/filters/index.ts
new file mode 100644
index 000000000..2cd80e3a7
--- /dev/null
+++ b/web/ce/components/issues/filters/index.ts
@@ -0,0 +1,2 @@
+export * from "./applied-filters";
+export * from "./issue-types";
diff --git a/web/ce/components/issues/filters/issue-types.tsx b/web/ce/components/issues/filters/issue-types.tsx
new file mode 100644
index 000000000..bc364c8f8
--- /dev/null
+++ b/web/ce/components/issues/filters/issue-types.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterIssueTypes: React.FC<Props> = observer(() => null);
diff --git a/web/ce/components/issues/index.ts b/web/ce/components/issues/index.ts
index 3bc3bdbfd..97b57af4b 100644
--- a/web/ce/components/issues/index.ts
+++ b/web/ce/components/issues/index.ts
@@ -3,3 +3,4 @@ export * from "./worklog";
 export * from "./issue-modal";
 export * from "./issue-details";
 export * from "./quick-add";
+export * from "./filters";
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
index c0d94dcbc..1227d0d4a 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -20,6 +20,8 @@ import { EUserProjectRoles } from "@/constants/project";
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
 // hooks
 import { useUser } from "@/hooks/store";
+// plane web components
+import { AppliedIssueTypeFilters } from "@/plane-web/components/issues";
 
 type Props = {
   appliedFilters: IIssueFilterOptions;
@@ -131,6 +133,13 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
                   values={value}
                 />
               )}
+              {filterKey === "issue_type" && (
+                <AppliedIssueTypeFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("issue_type", val)}
+                  values={value}
+                />
+              )}
               {isEditingAllowed && (
                 <button
                   type="button"
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts b/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
index 741d0a22a..e6dff8799 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
@@ -2,6 +2,6 @@ export * from "./display-filters-selection";
 export * from "./display-properties";
 export * from "./extra-options";
 export * from "./group-by";
-export * from "./issue-type";
+export * from "./issue-grouping";
 export * from "./order-by";
 export * from "./sub-group-by";
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx
similarity index 79%
rename from web/core/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
rename to web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx
index a24de766d..f3c0fdf13 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { TIssueTypeFilters } from "@plane/types";
+import { TIssueGroupingFilters } from "@plane/types";
 
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
@@ -9,11 +9,11 @@ import { ISSUE_FILTER_OPTIONS } from "@/constants/issue";
 // constants
 
 type Props = {
-  selectedIssueType: TIssueTypeFilters | undefined;
-  handleUpdate: (val: TIssueTypeFilters) => void;
+  selectedIssueType: TIssueGroupingFilters | undefined;
+  handleUpdate: (val: TIssueGroupingFilters) => void;
 };
 
-export const FilterIssueType: React.FC<Props> = observer((props) => {
+export const FilterIssueGrouping: React.FC<Props> = observer((props) => {
   const { selectedIssueType, handleUpdate } = props;
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
@@ -23,7 +23,7 @@ export const FilterIssueType: React.FC<Props> = observer((props) => {
   return (
     <>
       <FilterHeader
-        title="Issue Type"
+        title="Issue Grouping"
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
index 07aa0adac..dc7426b80 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -2,8 +2,9 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Search, X } from "lucide-react";
+// types
 import { IIssueDisplayFilterOptions, IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
-// hooks
+// components
 import {
   FilterAssignees,
   FilterMentions,
@@ -17,12 +18,12 @@ import {
   FilterTargetDate,
   FilterCycle,
   FilterModule,
-  FilterIssueType,
+  FilterIssueGrouping,
 } from "@/components/issues";
-import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
-// components
-// types
 // constants
+import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
+// plane web components
+import { FilterIssueTypes } from "@/plane-web/components/issues";
 
 type Props = {
   filters: IIssueFilterOptions;
@@ -115,6 +116,15 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           </div>
         )}
 
+        {/* issue type */}
+        {isFilterEnabled("issue_type") && (
+          <FilterIssueTypes
+            appliedFilters={filters.issue_type ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("issue_type", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        )}
+
         {/* assignees */}
         {isFilterEnabled("assignees") && (
           <div className="py-2">
@@ -198,7 +208,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
         {/* issue type */}
         {isDisplayFilterEnabled("type") && displayFilters && handleDisplayFiltersUpdate && (
           <div className="py-2">
-            <FilterIssueType
+            <FilterIssueGrouping
               selectedIssueType={displayFilters.type}
               handleUpdate={(val) =>
                 handleDisplayFiltersUpdate({
diff --git a/web/core/components/issues/issue-layouts/kanban/block.tsx b/web/core/components/issues/issue-layouts/kanban/block.tsx
index 0d9ea8a13..df1b5b689 100644
--- a/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -79,17 +79,11 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
         </div>
       </WithDisplayPropertiesHOC>
 
-      {issue?.is_draft ? (
+      <div className="w-full line-clamp-1 text-sm text-custom-text-100 mb-1.5">
         <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
           <span>{issue.name}</span>
         </Tooltip>
-      ) : (
-        <div className="w-full line-clamp-1 text-sm text-custom-text-100 mb-1.5">
-          <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-            <span>{issue.name}</span>
-          </Tooltip>
-        </div>
-      )}
+      </div>
 
       <IssueProperties
         className="flex flex-wrap items-center gap-2 whitespace-nowrap text-custom-text-300 pt-1.5"
diff --git a/web/core/constants/issue.ts b/web/core/constants/issue.ts
index 77f94a319..6b8c40048 100644
--- a/web/core/constants/issue.ts
+++ b/web/core/constants/issue.ts
@@ -8,7 +8,7 @@ import {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
   TIssuePriorities,
-  TIssueTypeFilters,
+  TIssueGroupingFilters,
 } from "@plane/types";
 
 export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
@@ -99,7 +99,7 @@ export const ISSUE_ORDER_BY_OPTIONS: {
 ];
 
 export const ISSUE_FILTER_OPTIONS: {
-  key: TIssueTypeFilters;
+  key: TIssueGroupingFilters;
   title: string;
 }[] = [
   { key: null, title: "All" },
@@ -171,7 +171,7 @@ export interface ILayoutDisplayFiltersOptions {
     group_by?: TIssueGroupByOptions[];
     sub_group_by?: TIssueGroupByOptions[];
     order_by?: TIssueOrderByOptions[];
-    type?: TIssueTypeFilters[];
+    type?: TIssueGroupingFilters[];
   };
   extra_options: {
     access: boolean;
@@ -222,6 +222,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
         "labels",
         "start_date",
         "target_date",
+        "issue_type",
       ],
       display_properties: true,
       display_filters: {
@@ -247,7 +248,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   },
   draft_issues: {
     list: {
-      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date"],
+      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date", "issue_type"],
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "cycle", "module", "priority", "project", "labels", null],
@@ -260,7 +261,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     kanban: {
-      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date"],
+      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date", "issue_type"],
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "cycle", "module", "priority", "project", "labels"],
@@ -331,6 +332,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
         "labels",
         "start_date",
         "target_date",
+        "issue_type",
       ],
       display_properties: true,
       display_filters: {
@@ -355,6 +357,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
         "labels",
         "start_date",
         "target_date",
+        "issue_type",
       ],
       display_properties: true,
       display_filters: {
@@ -369,7 +372,18 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     calendar: {
-      filters: ["priority", "state", "cycle", "module", "assignees", "mentions", "created_by", "labels", "start_date"],
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "issue_type",
+      ],
       display_properties: false,
       display_filters: {
         type: [null, "active", "backlog"],
@@ -391,6 +405,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
         "labels",
         "start_date",
         "target_date",
+        "issue_type",
       ],
       display_properties: true,
       display_filters: {
@@ -414,6 +429,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
         "labels",
         "start_date",
         "target_date",
+        "issue_type",
       ],
       display_properties: false,
       display_filters: {
diff --git a/web/core/store/issue/helpers/issue-filter-helper.store.ts b/web/core/store/issue/helpers/issue-filter-helper.store.ts
index 8ba9e47ea..0377be2aa 100644
--- a/web/core/store/issue/helpers/issue-filter-helper.store.ts
+++ b/web/core/store/issue/helpers/issue-filter-helper.store.ts
@@ -92,6 +92,7 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
       target_date: filters?.target_date || undefined,
       project: filters?.project || undefined,
       subscriber: filters?.subscriber || undefined,
+      issue_type: filters?.issue_type || undefined,
       // display filters
       group_by: displayFilters?.group_by ? EIssueGroupByToServerOptions[displayFilters.group_by] : undefined,
       sub_group_by: displayFilters?.sub_group_by
diff --git a/web/ee/components/issues/filters/active-filters/index.ts b/web/ee/components/issues/filters/active-filters/index.ts
new file mode 100644
index 000000000..592325823
--- /dev/null
+++ b/web/ee/components/issues/filters/active-filters/index.ts
@@ -0,0 +1 @@
+export * from "./issue-types";
diff --git a/web/ee/components/issues/filters/active-filters/issue-types.tsx b/web/ee/components/issues/filters/active-filters/issue-types.tsx
new file mode 100644
index 000000000..dc5e4ee58
--- /dev/null
+++ b/web/ee/components/issues/filters/active-filters/issue-types.tsx
@@ -0,0 +1 @@
+export * from "ce/components/issues/filters/applied-filters/issue-types";
diff --git a/web/ee/components/issues/filters/index.ts b/web/ee/components/issues/filters/index.ts
new file mode 100644
index 000000000..d48e20a98
--- /dev/null
+++ b/web/ee/components/issues/filters/index.ts
@@ -0,0 +1,2 @@
+export * from "./active-filters";
+export * from "./issue-types";
diff --git a/web/ee/components/issues/filters/issue-types.tsx b/web/ee/components/issues/filters/issue-types.tsx
new file mode 100644
index 000000000..e08857af5
--- /dev/null
+++ b/web/ee/components/issues/filters/issue-types.tsx
@@ -0,0 +1 @@
+export * from "ce/components/issues/filters/issue-types";
diff --git a/web/ee/components/issues/index.ts b/web/ee/components/issues/index.ts
index 3bc3bdbfd..97b57af4b 100644
--- a/web/ee/components/issues/index.ts
+++ b/web/ee/components/issues/index.ts
@@ -3,3 +3,4 @@ export * from "./worklog";
 export * from "./issue-modal";
 export * from "./issue-details";
 export * from "./quick-add";
+export * from "./filters";