binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: issue filters restructuring. (#5372)

Browse source
This commit is contained in:
Prateek Shourya 2024-08-16 16:48:00 +05:30 • committed by GitHub
parent 49a895f117
commit 4ca45a971c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 94 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/types/src/view-props.d.ts vendored
View file

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

1
web/ce/components/issues/filters/applied-filters/index.ts Normal file
View file

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

11
web/ce/components/issues/filters/applied-filters/issue-types.tsx Normal file
View file

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

2
web/ce/components/issues/filters/index.ts Normal file
View file

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

12
web/ce/components/issues/filters/issue-types.tsx Normal file
View file

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

1
web/ce/components/issues/index.ts
View file

@ -3,3 +3,4 @@ export * from "./worklog";
export * from "./issue-modal";
export * from "./issue-details";
export * from "./quick-add";
export * from "./filters";

9
web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
View file

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

2
web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
View file

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

10
web/core/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx → web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx
View file

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

22
web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
View file

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

10
web/core/components/issues/issue-layouts/kanban/block.tsx
View file

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

28
web/core/constants/issue.ts
View file

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

1
web/core/store/issue/helpers/issue-filter-helper.store.ts
View file

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

1
web/ee/components/issues/filters/active-filters/index.ts Normal file
View file

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

1
web/ee/components/issues/filters/active-filters/issue-types.tsx Normal file
View file

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

2
web/ee/components/issues/filters/index.ts Normal file
View file

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

1
web/ee/components/issues/filters/issue-types.tsx Normal file
View file

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

1
web/ee/components/issues/index.ts
View file

@ -3,3 +3,4 @@ export * from "./worklog";
export * from "./issue-modal";
export * from "./issue-details";
export * from "./quick-add";
export * from "./filters";