chore: issue filters restructuring. (#5372)

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;

web/ce/components/issues/filters/applied-filters/index.ts

@@ -0,0 +1 @@
+export * from "./issue-types";

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);

web/ce/components/issues/filters/index.ts

@@ -0,0 +1,2 @@
+export * from "./applied-filters";
+export * from "./issue-types";

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);

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

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"

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

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;
+  selectedIssueType: TIssueGroupingFilters | undefined;
-  handleUpdate: (val: TIssueTypeFilters) => void;
+  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)}
       />

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({

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>
-        <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>
-      )}
 
       <IssueProperties
         className="flex flex-wrap items-center gap-2 whitespace-nowrap text-custom-text-300 pt-1.5"

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: {

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

web/ee/components/issues/filters/active-filters/index.ts

@@ -0,0 +1 @@
+export * from "./issue-types";

web/ee/components/issues/filters/active-filters/issue-types.tsx

@@ -0,0 +1 @@
+export * from "ce/components/issues/filters/applied-filters/issue-types";

web/ee/components/issues/filters/index.ts

@@ -0,0 +1,2 @@
+export * from "./active-filters";
+export * from "./issue-types";

web/ee/components/issues/filters/issue-types.tsx

@@ -0,0 +1 @@
+export * from "ce/components/issues/filters/issue-types";

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