thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: Labels delete & reordering (#2729)

Browse Source 
* fix: Labels reordering inconsistency

* fix: Delete child labels

* feat: multi-select while grouping labels

* refactor: label sorting in mobx computed function

* feat: drag & drop label grouping, un-grouping

* chore: removed label select modal

* fix: moving labels from project store to project label store

* fix: typo changes and build tree function added

* labels feature

* disable dropping group into a group

* fix build errors

* fix more issues

* chore: added combining state UI, fixed scroll issue for label groups

* chore: group icon for label groups

* fix: group cannot be dropped in another group

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: rahulramesha <rahulramesham@gmail.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Lakhan Baheti 2023-11-19 01:46:11 +05:30 committed by sriram veeraghanta
parent d933c73343
commit 63b6150b9c
62 changed files with 862 additions and 520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/headers/cycle-issues.tsx
View File

@ -30,12 +30,12 @@ export const CycleIssuesHeader: React.FC = observer(() => {
issueFilter: issueFilterStore,
cycle: cycleStore,
cycleIssueFilter: cycleIssueFilterStore,
project: projectStore,
project: { currentProjectDetails },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
commandPalette: commandPaletteStore,
} = useMobxStore();
const { currentProjectDetails } = projectStore;
const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -178,7 +178,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
labels={projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/>

6
web/components/headers/module-issues.tsx
View File

@ -30,13 +30,13 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
issueFilter: issueFilterStore,
module: moduleStore,
moduleFilter: moduleFilterStore,
project: projectStore,
project: { currentProjectDetails },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
commandPalette: commandPaletteStore,
} = useMobxStore();
const activeLayout = issueFilterStore.userDisplayFilters.layout;
const { currentProjectDetails } = projectStore;
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
@ -177,7 +177,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
labels={projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/>

7
web/components/headers/project-archived-issues.tsx
View File

@ -21,14 +21,13 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
const { workspaceSlug, projectId } = router.query;
const {
project: projectStore,
project: { currentProjectDetails },
projectLabel: { projectLabels },
projectMember: { projectMembers },
archivedIssueFilters: archivedIssueFiltersStore,
projectState: projectStateStore,
} = useMobxStore();
const { currentProjectDetails } = projectStore;
// for archived issues list layout is the only option
const activeLayout = "list";
@ -119,7 +118,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
labels={projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/>

6
web/components/headers/project-issues.tsx
View File

@ -25,7 +25,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
const {
issueFilter: issueFilterStore,
project: projectStore,
project: { currentProjectDetails },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
inbox: inboxStore,
@ -92,7 +93,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
},
[issueFilterStore, projectId, workspaceSlug]
);
const { currentProjectDetails } = projectStore;
const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
@ -178,7 +178,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
labels={projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/>

7
web/components/headers/project-view-issues.tsx
View File

@ -22,14 +22,13 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
const {
issueFilter: issueFilterStore,
projectViewFilters: projectViewFiltersStore,
project: projectStore,
project: { currentProjectDetails },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
projectViews: projectViewsStore,
} = useMobxStore();
const { currentProjectDetails } = projectStore;
const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;
const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -163,7 +162,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
labels={projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/>

4
web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
View File

@ -15,13 +15,13 @@ import { X } from "lucide-react";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types
import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types";
type Props = {
appliedFilters: IIssueFilterOptions;
handleClearAllFilters: () => void;
handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
labels?: IIssueLabels[] | undefined;
labels?: IIssueLabel[] | undefined;
members?: IUserLite[] | undefined;
projects?: IProject[] | undefined;
states?: IState[] | undefined;

4
web/components/issues/issue-layouts/filters/applied-filters/label.tsx
View File

@ -3,11 +3,11 @@ import { observer } from "mobx-react-lite";
// icons
import { X } from "lucide-react";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
type Props = {
handleRemove: (val: string) => void;
labels: IIssueLabels[] | undefined;
labels: IIssueLabel[] | undefined;
values: string[];
};

4
web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
View File

@ -14,7 +14,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
const {
archivedIssueFilters: archivedIssueFiltersStore,
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
} = useMobxStore();
@ -77,7 +77,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
labels={projectLabels ?? []}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""]}
/>

4
web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
View File

@ -12,7 +12,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
const { workspaceSlug, projectId, cycleId } = router.query;
const {
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
cycleIssueFilter: cycleIssueFilterStore,
projectState: projectStateStore,
@ -72,7 +72,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
labels={projectLabels ?? []}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""]}
/>

4
web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
View File

@ -13,7 +13,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
const { workspaceSlug, projectId, moduleId } = router.query;
const {
project: projectStore,
projectLabel: { projectLabels },
moduleFilter: moduleFilterStore,
projectState: projectStateStore,
projectMember: { projectMembers },
@ -73,7 +73,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
labels={projectLabels ?? []}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""]}
/>

4
web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
View File

@ -14,7 +14,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
const {
issueFilter: issueFilterStore,
project: projectStore,
projectLabel: { projectLabels },
projectState: projectStateStore,
projectMember: { projectMembers },
} = useMobxStore();
@ -77,7 +77,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
labels={projectLabels ?? []}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""]}
/>

4
web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
View File

@ -18,7 +18,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
const { workspaceSlug, projectId, viewId } = router.query;
const {
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
projectViews: projectViewsStore,
@ -99,7 +99,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
labels={projectLabels ?? []}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""]}
/>

4
web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
View File

@ -15,7 +15,7 @@ import {
FilterTargetDate,
} from "components/issues";
// types
import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types";
// constants
import { ILayoutDisplayFiltersOptions } from "constants/issue";
@ -23,7 +23,7 @@ type Props = {
filters: IIssueFilterOptions;
handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
labels?: IIssueLabels[] | undefined;
labels?: IIssueLabel[] | undefined;
members?: IUserLite[] | undefined;
projects?: IProject[] | undefined;
states?: IState[] | undefined;

4
web/components/issues/issue-layouts/filters/header/filters/labels.tsx
View File

@ -5,7 +5,7 @@ import { FilterHeader, FilterOption } from "components/issues";
// ui
import { Loader } from "@plane/ui";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
const LabelIcons = ({ color }: { color: string }) => (
<span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
@ -14,7 +14,7 @@ const LabelIcons = ({ color }: { color: string }) => (
type Props = {
appliedFilters: string[] | null;
handleUpdate: (val: string) => void;
labels: IIssueLabels[] | undefined;
labels: IIssueLabel[] | undefined;
searchQuery: string;
};

6
web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View File

@ -23,6 +23,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
// store
const {
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
cycleIssue: cycleIssueStore,
@ -99,7 +100,6 @@ export const CycleKanBanLayout: React.FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
// const estimates =
@ -137,7 +137,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
@ -164,7 +164,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}

13
web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View File

@ -21,7 +21,8 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
const { workspaceSlug, moduleId } = router.query;
// store
const {
project: projectStore,
project: { workspaceProjects },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
moduleIssue: moduleIssueStore,
@ -97,9 +98,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
// const estimates =
// currentProjectDetails?.estimate !== null
// ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
@ -135,9 +134,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
projects={workspaceProjects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
/>
@ -162,9 +161,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
projects={workspaceProjects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
/>

22
web/components/issues/issue-layouts/kanban/roots/project-root.tsx
View File

@ -21,7 +21,8 @@ export const KanBanLayout: React.FC = observer(() => {
const { workspaceSlug } = router.query as { workspaceSlug: string };
const {
project: projectStore,
project: { workspaceProjects },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
issue: issueStore,
@ -29,7 +30,6 @@ export const KanBanLayout: React.FC = observer(() => {
issueKanBanView: issueKanBanViewStore,
issueDetail: issueDetailStore,
} = useMobxStore();
const { currentProjectDetails } = projectStore;
const issues = issueStore?.getIssues;
@ -92,13 +92,11 @@ export const KanBanLayout: React.FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = workspaceSlug ? projectStore?.projects?.[workspaceSlug] || null : null;
const estimates =
currentProjectDetails?.estimate !== null
? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
: null;
// const estimates =
// currentProjectDetails?.estimate !== null
// ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
// : null;
return (
<>
@ -129,9 +127,9 @@ export const KanBanLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
projects={workspaceProjects}
enableQuickIssueCreate
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
@ -156,9 +154,9 @@ export const KanBanLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
projects={workspaceProjects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
/>

2
web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
View File

@ -56,7 +56,7 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
// const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStateStore?.projectStates || null;
const estimates = null;

6
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -5,7 +5,7 @@ import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
import { KanBan } from "./default";
// types
import { IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
import { IIssue, IIssueDisplayProperties, IIssueLabel, IProject, IState, IUserLite } from "types";
// constants
import { getValueFromObject } from "constants/issue";
@ -63,7 +63,7 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
states: IState[] | null;
stateGroups: any;
priorities: any;
labels: IIssueLabels[] | null;
labels: IIssueLabel[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
issues: any;
@ -181,7 +181,7 @@ export interface IKanBanSwimLanes {
states: IState[] | null;
stateGroups: any;
priorities: any;
labels: IIssueLabels[] | null;
labels: IIssueLabel[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
isDragStarted?: boolean;

4
web/components/issues/issue-layouts/list/default.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import { ListGroupByHeaderRoot } from "./headers/group-by-root";
import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues";
// types
import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabel, IProject, IState, IUserLite } from "types";
// constants
import { getValueFromObject } from "constants/issue";
@ -88,7 +88,7 @@ export interface IList {
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
displayProperties: IIssueDisplayProperties;
states: IState[] | null;
labels: IIssueLabels[] | null;
labels: IIssueLabel[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
stateGroups: any;

4
web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
View File

@ -19,6 +19,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {
const {
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
archivedIssues: archivedIssueStore,
@ -42,7 +43,6 @@ export const ArchivedIssueListLayout: FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
@ -64,7 +64,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}

4
web/components/issues/issue-layouts/list/roots/cycle-root.tsx
View File

@ -21,6 +21,7 @@ export const CycleListLayout: React.FC = observer(() => {
// store
const {
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
issueFilter: issueFilterStore,
@ -59,7 +60,6 @@ export const CycleListLayout: React.FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
@ -85,7 +85,7 @@ export const CycleListLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}

4
web/components/issues/issue-layouts/list/roots/module-root.tsx
View File

@ -21,6 +21,7 @@ export const ModuleListLayout: React.FC = observer(() => {
const {
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
issueFilter: issueFilterStore,
@ -59,7 +60,6 @@ export const ModuleListLayout: React.FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
@ -85,7 +85,7 @@ export const ModuleListLayout: React.FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}

4
web/components/issues/issue-layouts/list/roots/project-root.tsx
View File

@ -20,6 +20,7 @@ export const ListLayout: FC = observer(() => {
// store
const {
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
issue: issueStore,
@ -49,7 +50,6 @@ export const ListLayout: FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
@ -80,7 +80,7 @@ export const ListLayout: FC = observer(() => {
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
enableQuickIssueCreate

2
web/components/issues/issue-layouts/list/roots/project-view-root.tsx
View File

@ -30,7 +30,7 @@ export const ProjectViewListLayout: React.FC = observer(() => {
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
// const labels = projectStore?.projectLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStateStore?.projectStates || null;
const estimates = null;

16
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -1,8 +1,6 @@
import { Fragment, useState } from "react";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import { usePopper } from "react-popper";
// components
@ -44,7 +42,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
noLabelBorder = false,
} = props;
const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
const {
workspace: workspaceStore,
projectLabel: { fetchProjectLabels, projectLabels },
}: RootStore = useMobxStore();
const workspaceSlug = workspaceStore?.workspaceSlug;
const [query, setQuery] = useState("");
@ -53,12 +54,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [isLoading, setIsLoading] = useState<Boolean>(false);
const projectLabels = projectId && projectStore?.labels?.[projectId];
const fetchProjectLabels = () => {
const fetchLabels = () => {
setIsLoading(true);
if (workspaceSlug && projectId)
projectStore.fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
};
const options = (projectLabels ? projectLabels : []).map((label) => ({
@ -169,7 +167,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => !projectLabels && fetchProjectLabels()}
onClick={() => !projectLabels && fetchLabels()}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}

4
web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
View File

@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
// components
import { SpreadsheetColumn } from "components/issues";
// types
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";
type Props = {
displayFilters: IIssueDisplayFilterOptions;
@ -13,7 +13,7 @@ type Props = {
handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
issues: IIssue[] | undefined;
members?: IUserLite[] | undefined;
labels?: IIssueLabels[] | undefined;
labels?: IIssueLabel[] | undefined;
states?: IState[] | undefined;
};

4
web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
View File

@ -5,12 +5,12 @@ import { IssuePropertyLabels } from "../../properties";
// hooks
import useSubIssue from "hooks/use-sub-issue";
// types
import { IIssue, IIssueLabels } from "types";
import { IIssue, IIssueLabel } from "types";
type Props = {
issue: IIssue;
onChange: (formData: Partial<IIssue>) => void;
labels: IIssueLabels[] | undefined;
labels: IIssueLabel[] | undefined;
expandedIssues: string[];
disabled: boolean;
};

5
web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
View File

@ -1,7 +1,6 @@
import React, { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
@ -19,7 +18,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
issueFilter: issueFilterStore,
cycleIssue: cycleIssueStore,
issueDetail: issueDetailStore,
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
} = useMobxStore();
@ -61,7 +60,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues as IIssueUnGroupedStructure}
members={projectMembers?.map((m) => m.member)}
labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
labels={projectLabels || undefined}
states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
handleIssueAction={() => {}}
handleUpdateIssue={handleUpdateIssue}

4
web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
View File

@ -19,7 +19,7 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
issueFilter: issueFilterStore,
moduleIssue: moduleIssueStore,
issueDetail: issueDetailStore,
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
} = useMobxStore();
@ -61,7 +61,7 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues as IIssueUnGroupedStructure}
members={projectMembers?.map((m) => m.member)}
labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
labels={projectLabels ?? undefined}
states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
handleIssueAction={() => {}}
handleUpdateIssue={handleUpdateIssue}

4
web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
View File

@ -19,7 +19,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
issue: issueStore,
issueFilter: issueFilterStore,
issueDetail: issueDetailStore,
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
user: userStore,
@ -63,7 +63,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues as IIssueUnGroupedStructure}
members={projectMembers?.map((m) => m.member)}
labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
labels={projectLabels || undefined}
states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
handleIssueAction={() => {}}
handleUpdateIssue={handleUpdateIssue}

5
web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
View File

@ -1,7 +1,6 @@
import React, { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
@ -19,7 +18,7 @@ export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
issueFilter: issueFilterStore,
projectViewIssues: projectViewIssueStore,
issueDetail: issueDetailStore,
project: projectStore,
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
} = useMobxStore();
@ -61,7 +60,7 @@ export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues as IIssueUnGroupedStructure}
members={projectMembers?.map((m) => m.member)}
labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
labels={projectLabels || undefined}
states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
handleIssueAction={() => {}}
handleUpdateIssue={handleUpdateIssue}

4
web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
View File

@ -27,7 +27,7 @@ import {
// ui
import { CustomMenu } from "@plane/ui";
// types
import { IIssue, IIssueDisplayFilterOptions, IIssueLabels, IState, IUserLite, TIssueOrderByOptions } from "types";
import { IIssue, IIssueDisplayFilterOptions, IIssueLabel, IState, IUserLite, TIssueOrderByOptions } from "types";
// constants
import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
@ -40,7 +40,7 @@ type Props = {
issues: IIssue[] | undefined;
property: string;
members?: IUserLite[] | undefined;
labels?: IIssueLabels[] | undefined;
labels?: IIssueLabel[] | undefined;
states?: IState[] | undefined;
};

4
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -6,7 +6,7 @@ import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreat
import { IssuePeekOverview } from "components/issues/issue-peek-overview";
import { Spinner } from "@plane/ui";
// types
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";
type Props = {
displayProperties: IIssueDisplayProperties;
@ -14,7 +14,7 @@ type Props = {
handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
issues: IIssue[] | undefined;
members?: IUserLite[] | undefined;
labels?: IIssueLabels[] | undefined;
labels?: IIssueLabel[] | undefined;
states?: IState[] | undefined;
handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;

2
web/components/issues/select/label.tsx
View File

@ -29,7 +29,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const { workspaceSlug } = router.query;
const {
project: { labels, fetchProjectLabels },
projectLabel: { labels, fetchProjectLabels },
} = useMobxStore();
const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);

10
web/components/issues/sidebar-select/label.tsx
View File

@ -15,7 +15,7 @@ import { IssueLabelSelect } from "../select";
// icons
import { Plus, X } from "lucide-react";
// types
import { IIssue, IIssueLabels } from "types";
import { IIssue, IIssueLabel } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import useToast from "hooks/use-toast";
@ -28,7 +28,7 @@ type Props = {
uneditable: boolean;
};
const defaultValues: Partial<IIssueLabels> = {
const defaultValues: Partial<IIssueLabel> = {
name: "",
color: "#ff0000",
};
@ -57,20 +57,20 @@ export const SidebarLabelSelect: React.FC<Props> = ({
watch,
control,
setFocus,
} = useForm<Partial<IIssueLabels>>({
} = useForm<Partial<IIssueLabel>>({
defaultValues,
});
const { user } = useUser();
const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabel[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
const handleNewLabel = async (formData: Partial<IIssueLabel>) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
await issueLabelService

8
web/components/labels/create-label-modal.tsx
View File

@ -12,7 +12,7 @@ import { Button, Input } from "@plane/ui";
// icons
import { ChevronDown } from "lucide-react";
// types
import type { IIssueLabels, IState } from "types";
import type { IIssueLabel, IState } from "types";
// constants
import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
import useToast from "hooks/use-toast";
@ -22,7 +22,7 @@ type Props = {
isOpen: boolean;
projectId: string;
handleClose: () => void;
onSuccess?: (response: IIssueLabels) => void;
onSuccess?: (response: IIssueLabel) => void;
};
const defaultValues: Partial<IState> = {
@ -47,7 +47,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
reset,
setValue,
setFocus,
} = useForm<IIssueLabels>({
} = useForm<IIssueLabel>({
defaultValues,
});
@ -69,7 +69,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast();
const onSubmit = async (formData: IIssueLabels) => {
const onSubmit = async (formData: IIssueLabel) => {
if (!workspaceSlug) return;
await projectLabelStore

20
web/components/labels/create-update-label-inline.tsx
View File

@ -11,7 +11,7 @@ import { Popover, Transition } from "@headlessui/react";
// ui
import { Button, Input } from "@plane/ui";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
// fetch-keys
import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
import useToast from "hooks/use-toast";
@ -20,11 +20,11 @@ type Props = {
labelForm: boolean;
setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
isUpdating: boolean;
labelToUpdate: IIssueLabels | null;
labelToUpdate?: IIssueLabel;
onClose?: () => void;
};
const defaultValues: Partial<IIssueLabels> = {
const defaultValues: Partial<IIssueLabel> = {
name: "",
color: "rgb(var(--color-text-200))",
};
@ -50,7 +50,7 @@ export const CreateUpdateLabelInline = observer(
watch,
setValue,
setFocus,
} = useForm<IIssueLabels>({
} = useForm<IIssueLabel>({
defaultValues,
});
@ -60,7 +60,7 @@ export const CreateUpdateLabelInline = observer(
if (onClose) onClose();
};
const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
const handleLabelCreate: SubmitHandler<IIssueLabel> = async (formData) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
await projectLabelStore
@ -79,7 +79,7 @@ export const CreateUpdateLabelInline = observer(
});
};
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
const handleLabelUpdate: SubmitHandler<IIssueLabel> = async (formData) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
await projectLabelStore
@ -128,9 +128,7 @@ export const CreateUpdateLabelInline = observer(
e.preventDefault();
handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
}}
className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
labelForm ? "" : "hidden"
}`}
className={`flex scroll-m-8 items-center gap-2 bg-custom-background-100 w-full ${labelForm ? "" : "hidden"}`}
>
<div className="flex-shrink-0">
<Popover className="relative z-10 flex h-full w-full items-center justify-center">
@ -198,10 +196,10 @@ export const CreateUpdateLabelInline = observer(
)}
/>
</div>
<Button variant="neutral-primary" onClick={() => handleClose()}>
<Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
Cancel
</Button>
<Button variant="primary" type="submit" loading={isSubmitting}>
<Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
{isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
</Button>
</form>

4
web/components/labels/delete-label-modal.tsx
View File

@ -12,12 +12,12 @@ import useToast from "hooks/use-toast";
// ui
import { Button } from "@plane/ui";
// types
import type { IIssueLabels } from "types";
import type { IIssueLabel } from "types";
type Props = {
isOpen: boolean;
onClose: () => void;
data: IIssueLabels | null;
data: IIssueLabel | null;
};
export const DeleteLabelModal: React.FC<Props> = observer((props) => {

2
web/components/labels/index.ts
View File

@ -4,5 +4,5 @@ export * from "./delete-label-modal";
export * from "./label-select";
export * from "./labels-list-modal";
export * from "./project-setting-label-group";
export * from "./project-setting-label-list-item";
export * from "./project-setting-label-item";
export * from "./project-setting-label-list";

24
web/components/labels/label-block/drag-handle.tsx Normal file
View File

@ -0,0 +1,24 @@
import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
import { MoreVertical } from "lucide-react";
interface IDragHandle {
isDragging: boolean;
dragHandleProps: DraggableProvidedDragHandleProps;
}
export const DragHandle = (props: IDragHandle) => {
const { isDragging, dragHandleProps } = props;
return (
<button
type="button"
className={`rounded text-custom-sidebar-text-200 flex flex-shrink-0 mr-1 group-hover:opacity-100 ${
isDragging ? "opacity-100" : "opacity-0"
}`}
{...dragHandleProps}
>
<MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
<MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400 -ml-5" />
</button>
);
};

80
web/components/labels/label-block/label-item-block.tsx Normal file
View File

@ -0,0 +1,80 @@
import { useRef, useState } from "react";
import { LucideIcon, X } from "lucide-react";
import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
//ui
import { CustomMenu } from "@plane/ui";
//types
import { IIssueLabel } from "types";
//hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
//components
import { DragHandle } from "./drag-handle";
import { LabelName } from "./label-name";
//types
export interface ICustomMenuItem {
CustomIcon: LucideIcon;
onClick: (label: IIssueLabel) => void;
isVisible: boolean;
text: string;
}
interface ILabelItemBlock {
label: IIssueLabel;
isDragging: boolean;
customMenuItems: ICustomMenuItem[];
dragHandleProps: DraggableProvidedDragHandleProps;
handleLabelDelete: (label: IIssueLabel) => void;
isLabelGroup?: boolean;
}
export const LabelItemBlock = (props: ILabelItemBlock) => {
const { label, isDragging, customMenuItems, dragHandleProps, handleLabelDelete, isLabelGroup } = props;
//state
const [isMenuActive, setIsMenuActive] = useState(false);
//refs
const actionSectionRef = useRef<HTMLDivElement | null>(null);
useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
return (
<div className="flex items-center group">
<div className="flex items-center">
<DragHandle isDragging={isDragging} dragHandleProps={dragHandleProps} />
<LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
</div>
<div
ref={actionSectionRef}
className={`absolute right-3 flex items-start gap-3.5 px-4 ${
isMenuActive || isLabelGroup
? "opacity-100"
: "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
} ${isLabelGroup && "-top-0.5"}`}
>
<CustomMenu ellipsis buttonClassName="h-4 w-4 leading-4 text-custom-sidebar-text-400">
{customMenuItems.map(
({ isVisible, onClick, CustomIcon, text }) =>
isVisible && (
<CustomMenu.MenuItem onClick={() => onClick(label)}>
<span className="flex items-center justify-start gap-2">
<CustomIcon className="h-4 w-4" />
<span>{text}</span>
</span>
</CustomMenu.MenuItem>
)
)}
</CustomMenu>
{!isLabelGroup && (
<div className="py-0.5">
<button className="flex h-4 w-4 items-center justify-start gap-2" onClick={() => handleLabelDelete(label)}>
<X className="h-4 w-4 text-custom-sidebar-text-400 flex-shrink-0" />
</button>
</div>
)}
</div>
</div>
);
};

27
web/components/labels/label-block/label-name.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Component } from "lucide-react";
interface ILabelName {
name: string;
color: string;
isGroup: boolean;
}
export const LabelName = (props: ILabelName) => {
const { name, color, isGroup } = props;
return (
<div className="flex items-center gap-3">
{isGroup ? (
<Component className="h-3.5 w-3.5" color={color} />
) : (
<span
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: color && color !== "" ? color : "#000",
}}
/>
)}
<h6 className="text-sm">{name}</h6>
</div>
);
};

4
web/components/labels/label-select.tsx
View File

@ -6,12 +6,12 @@ import { Check, ChevronDown, Search } from "lucide-react";
// ui
import { Tooltip } from "@plane/ui";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
type Props = {
value: string[];
onChange: (data: string[]) => void;
labels: IIssueLabels[] | undefined;
labels: IIssueLabel[] | undefined;
className?: string;
buttonClassName?: string;
optionsClassName?: string;

27
web/components/labels/labels-list-modal.tsx
View File

@ -11,12 +11,12 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { LayerStackIcon } from "@plane/ui";
import { Search } from "lucide-react";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
type Props = {
isOpen: boolean;
handleClose: () => void;
parent: IIssueLabels | undefined;
parent: IIssueLabel | undefined;
};
export const LabelsListModal: React.FC<Props> = observer((props) => {
@ -27,7 +27,9 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
const { workspaceSlug, projectId } = router.query;
// store
const { projectLabel: projectLabelStore, project: projectStore } = useMobxStore();
const {
projectLabel: { projectLabels, fetchProjectLabels, updateLabel },
} = useMobxStore();
// states
const [query, setQuery] = useState("");
@ -35,28 +37,24 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
// api call to fetch project details
useSWR(
workspaceSlug && projectId ? "PROJECT_LABELS" : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
: null
workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
);
// derived values
const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
const filteredLabels: IIssueLabels[] =
const filteredLabels: IIssueLabel[] =
query === ""
? issueLabels ?? []
: issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
? projectLabels ?? []
: projectLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
const handleModalClose = () => {
handleClose();
setQuery("");
};
const addChildLabel = async (label: IIssueLabels) => {
const addChildLabel = async (label: IIssueLabel) => {
if (!workspaceSlug || !projectId) return;
await projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
await updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
parent: parent?.id!,
});
};
@ -108,7 +106,7 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
)}
<ul className="text-sm text-gray-700">
{filteredLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
const children = projectLabels?.filter((l) => l.parent === label.id);
if (
(label.parent === "" || label.parent === null) && // issue does not have any other parent
@ -128,7 +126,6 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
}
onClick={() => {
addChildLabel(label);
handleClose();
}}
>
<span

248
web/components/labels/project-setting-label-group.tsx
View File

@ -1,146 +1,164 @@
import React from "react";
import { useRouter } from "next/router";
import React, { Dispatch, SetStateAction, useState } from "react";
import { Disclosure, Transition } from "@headlessui/react";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomMenu } from "@plane/ui";
// icons
import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
import { ChevronDown, Pencil, Trash2 } from "lucide-react";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
import {
Draggable,
DraggableProvided,
DraggableProvidedDragHandleProps,
DraggableStateSnapshot,
Droppable,
} from "@hello-pangea/dnd";
import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
import { CreateUpdateLabelInline } from "./create-update-label-inline";
import { ProjectSettingLabelItem } from "./project-setting-label-item";
import useDraggableInPortal from "hooks/use-draggable-portal";
type Props = {
label: IIssueLabels;
labelChildren: IIssueLabels[];
handleLabelDelete: () => void;
editLabel: (label: IIssueLabels) => void;
addLabelToGroup: (parentLabel: IIssueLabels) => void;
label: IIssueLabel;
labelChildren: IIssueLabel[];
handleLabelDelete: (label: IIssueLabel) => void;
dragHandleProps: DraggableProvidedDragHandleProps;
draggableSnapshot: DraggableStateSnapshot;
isUpdating: boolean;
setIsUpdating: Dispatch<SetStateAction<boolean>>;
isDropDisabled: boolean;
};
export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
const { label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete } = props;
const {
label,
labelChildren,
handleLabelDelete,
draggableSnapshot: groupDragSnapshot,
dragHandleProps,
isUpdating,
setIsUpdating,
isDropDisabled,
} = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const [isEditLabelForm, setEditLabelForm] = useState(false);
// store
const { projectLabel: projectLabelStore } = useMobxStore();
const renderDraggable = useDraggableInPortal();
const removeFromGroup = (label: IIssueLabels) => {
if (!workspaceSlug || !projectId) return;
projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
parent: null,
});
};
const customMenuItems: ICustomMenuItem[] = [
{
CustomIcon: Pencil,
onClick: () => {
setEditLabelForm(true);
setIsUpdating(true);
},
isVisible: true,
text: "Edit label",
},
{
CustomIcon: Trash2,
onClick: handleLabelDelete,
isVisible: true,
text: "Delete label",
},
];
return (
<Disclosure
as="div"
className="rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
className={`rounded border-[0.5px] border-custom-border-200 text-custom-text-100 ${
groupDragSnapshot.combineTargetFor ? "bg-custom-background-80" : "bg-custom-background-100"
}`}
defaultOpen
>
{({ open }) => (
<>
<div className="flex cursor-pointer items-center justify-between gap-2">
<div className="flex items-center gap-2">
<Component className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
<h6>{label.name}</h6>
</div>
<div className="flex items-center gap-2">
<CustomMenu ellipsis buttonClassName="!text-custom-sidebar-text-400">
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
<span className="flex items-center justify-start gap-2">
<Plus className="h-4 w-4" />
<span>Add more labels</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(label)}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-4 w-4" />
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleLabelDelete}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-4 w-4" />
<span>Delete label</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
<Disclosure.Button>
<span>
<ChevronDown
className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
/>
</span>
</Disclosure.Button>
</div>
</div>
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
<Droppable
key={`label.group.droppable.${label.id}`}
droppableId={`label.group.droppable.${label.id}`}
isCombineEnabled={!groupDragSnapshot.isDragging && !isUpdating}
isDropDisabled={groupDragSnapshot.isDragging || isUpdating || isDropDisabled}
>
<Disclosure.Panel>
<div className="mt-2.5 ml-6">
{labelChildren.map((child) => (
<div
key={child.id}
className="group flex items-center justify-between border-b-[0.5px] border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
>
<h5 className="flex items-center gap-3">
<span
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: child.color && child.color !== "" ? child.color : "#000000",
{(droppableProvided) => (
<div
className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}
ref={droppableProvided.innerRef}
{...droppableProvided.droppableProps}
>
<>
<div className="relative flex cursor-pointer items-center justify-between gap-2">
{isEditLabelForm ? (
<CreateUpdateLabelInline
labelForm={isEditLabelForm}
setLabelForm={setEditLabelForm}
isUpdating={true}
labelToUpdate={label}
onClose={() => {
setEditLabelForm(false);
setIsUpdating(false);
}}
/>
{child.name}
</h5>
<div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
<div className="h-4 w-4">
<CustomMenu
customButton={
<div className="h-4 w-4">
<Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
</div>
}
>
<CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
<span className="flex items-center justify-start gap-2">
<X className="h-4 w-4" />
<span>Remove from group</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(child)}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-4 w-4" />
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
) : (
<LabelItemBlock
label={label}
isDragging={groupDragSnapshot.isDragging}
customMenuItems={customMenuItems}
dragHandleProps={dragHandleProps}
handleLabelDelete={handleLabelDelete}
isLabelGroup={true}
/>
)}
<div className="flex items-center">
<button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
<X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
</button>
</div>
</div>
<Disclosure.Button>
<span>
<ChevronDown
className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
/>
</span>
</Disclosure.Button>
</div>
))}
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Disclosure.Panel>
<div className="mt-2.5 ml-6">
{labelChildren.map((child, index) => (
<div key={child.id} className={`group w-full flex items-center text-sm`}>
<Draggable
draggableId={`label.draggable.${child.id}`}
index={index}
isDragDisabled={groupDragSnapshot.isDragging || isUpdating}
>
{renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
<div className="w-full py-1" ref={provided.innerRef} {...provided.draggableProps}>
<ProjectSettingLabelItem
label={child}
handleLabelDelete={() => handleLabelDelete(child)}
draggableSnapshot={snapshot}
dragHandleProps={provided.dragHandleProps!}
setIsUpdating={setIsUpdating}
isChild
/>
</div>
))}
</Draggable>
</div>
))}
</div>
</Disclosure.Panel>
</Transition>
{droppableProvided.placeholder}
</>
</div>
</Disclosure.Panel>
</Transition>
)}
</Droppable>
</>
)}
</Disclosure>

91
web/components/labels/project-setting-label-item.tsx Normal file
View File

@ -0,0 +1,91 @@
import React, { Dispatch, SetStateAction, useState } from "react";
import { useRouter } from "next/router";
import { useMobxStore } from "lib/mobx/store-provider";
import { DraggableProvidedDragHandleProps, DraggableStateSnapshot } from "@hello-pangea/dnd";
// types
import { IIssueLabel } from "types";
//icons
import { X, Pencil } from "lucide-react";
//components
import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
import { CreateUpdateLabelInline } from "./create-update-label-inline";
type Props = {
label: IIssueLabel;
handleLabelDelete: (label: IIssueLabel) => void;
draggableSnapshot: DraggableStateSnapshot;
dragHandleProps: DraggableProvidedDragHandleProps;
setIsUpdating: Dispatch<SetStateAction<boolean>>;
isChild: boolean;
};
export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
const { label, setIsUpdating, handleLabelDelete, draggableSnapshot, dragHandleProps, isChild } = props;
const { combineTargetFor, isDragging } = draggableSnapshot;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectLabel: projectLabelStore } = useMobxStore();
//state
const [isEditLabelForm, setEditLabelForm] = useState(false);
const removeFromGroup = (label: IIssueLabel) => {
if (!workspaceSlug || !projectId) return;
projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
parent: null,
});
};
const customMenuItems: ICustomMenuItem[] = [
{
CustomIcon: X,
onClick: removeFromGroup,
isVisible: !!label.parent,
text: "Remove from group",
},
{
CustomIcon: Pencil,
onClick: () => {
setEditLabelForm(true);
setIsUpdating(true);
},
isVisible: true,
text: "Edit label",
},
];
return (
<div
className={`relative group flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 ${
!isChild && combineTargetFor ? "bg-custom-background-80" : ""
} ${isDragging ? "shadow-custom-shadow-xs bg-custom-background-80" : ""} bg-custom-background-100 px-1 py-2.5`}
>
{isEditLabelForm ? (
<CreateUpdateLabelInline
labelForm={isEditLabelForm}
setLabelForm={setEditLabelForm}
isUpdating={true}
labelToUpdate={label}
onClose={() => {
setEditLabelForm(false);
setIsUpdating(false);
}}
/>
) : (
<LabelItemBlock
label={label}
isDragging={isDragging}
customMenuItems={customMenuItems}
dragHandleProps={dragHandleProps}
handleLabelDelete={handleLabelDelete}
/>
)}
</div>
);
};

73
web/components/labels/project-setting-label-list-item.tsx
View File

@ -1,73 +0,0 @@
import React, { useRef, useState } from "react";
//hook
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// ui
import { CustomMenu } from "@plane/ui";
// types
import { IIssueLabels } from "types";
//icons
import { Component, X, Pencil } from "lucide-react";
type Props = {
label: IIssueLabels;
addLabelToGroup: (parentLabel: IIssueLabels) => void;
editLabel: (label: IIssueLabels) => void;
handleLabelDelete: () => void;
};
export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
const { label, addLabelToGroup, editLabel, handleLabelDelete } = props;
const [isMenuActive, setIsMenuActive] = useState(false);
const actionSectionRef = useRef<HTMLDivElement | null>(null);
useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
return (
<div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
<div className="flex items-center gap-3">
<span
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: label.color && label.color !== "" ? label.color : "#000",
}}
/>
<h6 className="text-sm">{label.name}</h6>
</div>
<div
ref={actionSectionRef}
className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
isMenuActive ? "opacity-100" : ""
}`}
>
<CustomMenu
customButton={
<div className="h-4 w-4" onClick={() => setIsMenuActive(!isMenuActive)}>
<Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
</div>
}
>
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
<span className="flex items-center justify-start gap-2">
<Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
<span>Convert to group</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(label)}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-4 w-4" />
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
<div className="py-0.5">
<button className="flex h-4 w-4 items-center justify-start gap-2" onClick={handleLabelDelete}>
<X className="h-4 w-4 text-custom-sidebar-text-400 flex-shrink-0" />
</button>
</div>
</div>
</div>
);
};

234
web/components/labels/project-setting-label-list.tsx
View File

@ -1,75 +1,96 @@
import React, { useState, useRef } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
import {
DragDropContext,
Draggable,
DraggableProvided,
DraggableStateSnapshot,
DropResult,
Droppable,
} from "@hello-pangea/dnd";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import {
CreateUpdateLabelInline,
DeleteLabelModal,
LabelsListModal,
ProjectSettingLabelItem,
ProjectSettingLabelGroup,
} from "components/labels";
import { CreateUpdateLabelInline, DeleteLabelModal, ProjectSettingLabelGroup } from "components/labels";
// ui
import { Button, Loader } from "@plane/ui";
import { EmptyState } from "components/common";
// images
import emptyLabel from "public/empty-state/label.svg";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
//component
import { ProjectSettingLabelItem } from "./project-setting-label-item";
import useDraggableInPortal from "hooks/use-draggable-portal";
const LABELS_ROOT = "labels.root";
export const ProjectSettingsLabelList: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const renderDraggable = useDraggableInPortal();
// store
const { project: projectStore } = useMobxStore();
const {
projectLabel: { fetchProjectLabels, projectLabels, updateLabelPosition, projectLabelsTree },
} = useMobxStore();
// states
const [labelForm, setLabelForm] = useState(false);
const [showLabelForm, setLabelForm] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
const [labelsListModal, setLabelsListModal] = useState(false);
const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabel | null>(null);
const [isDraggingGroup, setIsDraggingGroup] = useState(false);
// ref
const scrollToRef = useRef<HTMLFormElement>(null);
// api call to fetch project details
useSWR(
workspaceSlug && projectId ? "PROJECT_LABELS" : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
: null
workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
);
// derived values
const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
const newLabel = () => {
setIsUpdating(false);
setLabelForm(true);
};
const addLabelToGroup = (parentLabel: IIssueLabels) => {
setLabelsListModal(true);
setParentLabel(parentLabel);
};
const onDragEnd = (result: DropResult) => {
const { combine, draggableId, destination, source } = result;
const editLabel = (label: IIssueLabels) => {
setLabelForm(true);
setIsUpdating(true);
setLabelToUpdate(label);
// return if dropped outside the DragDropContext
if (!combine && !destination) return;
const childLabel = draggableId.split(".")[2];
let parentLabel: string | undefined | null = destination?.droppableId?.split(".")[3];
const index = destination?.index || 0;
const prevParentLabel: string | undefined | null = source?.droppableId?.split(".")[3];
const prevIndex = source?.index;
if (combine && combine.draggableId) parentLabel = combine?.draggableId?.split(".")[2];
if (destination?.droppableId === LABELS_ROOT) parentLabel = null;
if (result.reason == "DROP" && childLabel != parentLabel) {
updateLabelPosition(
workspaceSlug?.toString()!,
projectId?.toString()!,
childLabel,
parentLabel,
index,
prevParentLabel == parentLabel,
prevIndex
);
return;
}
};
return (
<>
<LabelsListModal isOpen={labelsListModal} parent={parentLabel} handleClose={() => setLabelsListModal(false)} />
<DeleteLabelModal
isOpen={!!selectDeleteLabel}
data={selectDeleteLabel ?? null}
@ -82,64 +103,105 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
Add label
</Button>
</div>
<div className="space-y-3 py-6 h-full w-full">
{labelForm && (
<CreateUpdateLabelInline
labelForm={labelForm}
setLabelForm={setLabelForm}
isUpdating={isUpdating}
labelToUpdate={labelToUpdate}
ref={scrollToRef}
onClose={() => {
setLabelForm(false);
setIsUpdating(false);
setLabelToUpdate(null);
}}
/>
<div className="w-full">
{showLabelForm && (
<div className="w-full rounded border border-custom-border-200 px-3.5 py-2">
<CreateUpdateLabelInline
labelForm={showLabelForm}
setLabelForm={setLabelForm}
isUpdating={isUpdating}
ref={scrollToRef}
onClose={() => {
setLabelForm(false);
setIsUpdating(false);
}}
/>
</div>
)}
{/* labels */}
{issueLabels &&
issueLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
<>
{projectLabelsTree && (
<DragDropContext
onDragEnd={onDragEnd}
autoScrollerOptions={{
startFromPercentage: 1,
disabled: false,
maxScrollAtPercentage: 0,
maxPixelScroll: 2,
}}
>
<Droppable
droppableId={LABELS_ROOT}
isCombineEnabled={!isDraggingGroup}
ignoreContainerClipping={true}
isDropDisabled={isUpdating}
>
{(droppableProvided, droppableSnapshot) => (
<div className={`mt-3`} ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
{projectLabelsTree.map((label, index) => {
if (label.children && label.children.length) {
return (
<Draggable
key={`label.draggable.${label.id}`}
draggableId={`label.draggable.${label.id}.group`}
index={index}
isDragDisabled={isUpdating}
>
{(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
const isGroup = droppableSnapshot.draggingFromThisWith?.split(".")[3] === "group";
setIsDraggingGroup(isGroup);
if (children && children.length === 0) {
if (!label.parent)
return (
<ProjectSettingLabelItem
key={label.id}
label={label}
addLabelToGroup={() => addLabelToGroup(label)}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
} else {
return (
<ProjectSettingLabelGroup
key={label.id}
label={label}
labelChildren={children}
addLabelToGroup={addLabelToGroup}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
}
})}
return (
<div ref={provided.innerRef} {...provided.draggableProps} className="mt-3">
<ProjectSettingLabelGroup
key={label.id}
label={label}
labelChildren={label.children || []}
isDropDisabled={isGroup}
dragHandleProps={provided.dragHandleProps!}
handleLabelDelete={(label: IIssueLabel) => setSelectDeleteLabel(label)}
draggableSnapshot={snapshot}
isUpdating={isUpdating}
setIsUpdating={setIsUpdating}
/>
</div>
);
}}
</Draggable>
);
}
return (
<Draggable
key={`label.draggable.${label.id}`}
draggableId={`label.draggable.${label.id}`}
index={index}
isDragDisabled={isUpdating}
>
{renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps} className="mt-3">
<ProjectSettingLabelItem
dragHandleProps={provided.dragHandleProps!}
draggableSnapshot={snapshot}
label={label}
setIsUpdating={setIsUpdating}
handleLabelDelete={(label) => setSelectDeleteLabel(label)}
isChild={false}
/>
</div>
))}
</Draggable>
);
})}
{droppableProvided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
)}
</>
{/* loading state */}
{!issueLabels && (
{!projectLabels && (
<Loader className="space-y-5">
<Loader.Item height="42px" />
<Loader.Item height="42px" />
@ -149,7 +211,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
)}
{/* empty state */}
{issueLabels && issueLabels.length === 0 && (
{projectLabels && projectLabels.length === 0 && (
<EmptyState
title="No labels yet"
description="Create labels to help organize and filter issues in you project"

1
web/components/project/member-list.tsx
View File

@ -24,7 +24,6 @@ export const ProjectMemberList: React.FC = observer(() => {
// store
const {
project: projectStore,
projectMember: { projectMembers, fetchProjectMembers },
} = useMobxStore();

4
web/components/ui/labels-list.tsx
View File

@ -2,10 +2,10 @@ import { FC } from "react";
// ui
import { Tooltip } from "@plane/ui";
// types
import { IIssueLabels } from "types";
import { IIssueLabel } from "types";
type IssueLabelsListProps = {
labels?: (IIssueLabels | undefined)[];
labels?: (IIssueLabel | undefined)[];
length?: number;
showLength?: boolean;
};

6
web/components/views/form.tsx
View File

@ -27,7 +27,7 @@ const defaultValues: Partial<IProjectView> = {
export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, handleClose, data, preLoadedData }) => {
const {
project: projectStore,
projectLabel: { projectLabels },
projectState: projectStateStore,
projectMember: { projectMembers },
} = useMobxStore();
@ -167,7 +167,7 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
});
}}
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.list}
labels={projectStore.projectLabels ?? undefined}
labels={projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member) ?? undefined}
states={projectStateStore.projectStates ?? undefined}
/>
@ -181,7 +181,7 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
appliedFilters={selectedFilters}
handleClearAllFilters={clearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectStore.projectLabels ?? []}
labels={projectLabels ?? []}
members={projectMembers?.map((m) => m.member) ?? []}
states={projectStateStore.projectStates ?? []}
/>

16
web/helpers/array.helper.ts
View File

@ -1,3 +1,5 @@
import { IIssueLabelTree } from "types";
export const groupBy = (array: any[], key: string) => {
const innerKey = key.split("."); // split the key by dot
return array.reduce((result, currentValue) => {
@ -74,3 +76,17 @@ export const orderGroupedDataByField = <T>(groupedData: GroupedItems<T>, orderBy
}
return groupedData;
};
export const buildTree = (array: any[], parent = null) => {
const tree: IIssueLabelTree[] = [];
array.forEach((item: any) => {
if (item.parent === parent) {
const children = buildTree(array, item.id);
item.children = children;
tree.push(item);
}
});
return tree;
};

31
web/hooks/use-draggable-portal.ts Normal file
View File

@ -0,0 +1,31 @@
import { createPortal } from "react-dom";
import { useEffect, useRef } from "react";
import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
const useDraggableInPortal = () => {
const self = useRef<Element>();
useEffect(() => {
const div = document.createElement("div");
div.style.position = "absolute";
div.style.pointerEvents = "none";
div.style.top = "0";
div.style.width = "100%";
div.style.height = "100%";
self.current = div;
document.body.appendChild(div);
return () => {
document.body.removeChild(div);
};
}, [self.current]);
return (render: any) => (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
const element = render(provided, snapshot);
if (self.current && snapshot?.isDragging) {
return createPortal(element, self.current);
}
return element;
};
};
export default useDraggableInPortal;

3
web/layouts/auth-layout/project-wrapper.tsx
View File

@ -20,7 +20,8 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
// store
const {
user: { fetchUserProjectInfo, projectMemberInfo, hasPermissionToProject },
project: { fetchProjectDetails, fetchProjectLabels, fetchProjectEstimates, workspaceProjects },
project: { fetchProjectDetails, fetchProjectEstimates, workspaceProjects },
projectLabel: { fetchProjectLabels },
projectMember: { fetchProjectMembers },
projectState: { fetchProjectStates },
cycle: { fetchCycles },

4
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -33,7 +33,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
import { orderArrayBy } from "helpers/array.helper";
// types
import { NextPageWithLayout } from "types/app";
import { IIssueLabels, IPage, IPageBlock, IProjectMember } from "types";
import { IIssueLabel, IPage, IPageBlock, IProjectMember } from "types";
// fetch-keys
import {
PAGE_BLOCKS_LIST,
@ -86,7 +86,7 @@ const PageDetailsPage: NextPageWithLayout = () => {
: null
);
const { data: labels } = useSWR<IIssueLabels[]>(
const { data: labels } = useSWR<IIssueLabel[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)

10
web/services/issue/issue_label.service.ts
View File

@ -3,7 +3,7 @@ import { API_BASE_URL } from "helpers/common.helper";
import { APIService } from "services/api.service";
import { TrackEventService } from "services/track_event.service";
// types
import { IIssueLabels, IUser } from "types";
import { IIssueLabel, IUser } from "types";
const trackEventServices = new TrackEventService();
@ -12,7 +12,7 @@ export class IssueLabelService extends APIService {
super(API_BASE_URL);
}
async getWorkspaceIssueLabels(workspaceSlug: string): Promise<IIssueLabels[]> {
async getWorkspaceIssueLabels(workspaceSlug: string): Promise<IIssueLabel[]> {
return this.get(`/api/workspaces/${workspaceSlug}/labels/`)
.then((response) => response?.data)
.catch((error) => {
@ -20,7 +20,7 @@ export class IssueLabelService extends APIService {
});
}
async getProjectIssueLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabels[]> {
async getProjectIssueLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabel[]> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`)
.then((response) => response?.data)
.catch((error) => {
@ -33,9 +33,9 @@ export class IssueLabelService extends APIService {
projectId: string,
data: any,
user: IUser | undefined
): Promise<IIssueLabels> {
): Promise<IIssueLabel> {
return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`, data)
.then((response: { data: IIssueLabels; [key: string]: any }) => {
.then((response: { data: IIssueLabel; [key: string]: any }) => {
trackEventServices.trackIssueLabelEvent(
{
workSpaceId: response?.data?.workspace_detail?.id,

187
web/store/project/project-label.store.ts
View File

@ -1,30 +1,49 @@
import { observable, action, makeObservable, runInAction } from "mobx";
import { observable, action, makeObservable, runInAction, computed } from "mobx";
// types
import { RootStore } from "../root";
import { IIssueLabels } from "types";
import { IIssueLabel, IIssueLabelTree } from "types";
// services
import { IssueLabelService } from "services/issue";
import { ProjectService } from "services/project";
import { buildTree } from "helpers/array.helper";
export interface IProjectLabelStore {
loader: boolean;
error: any | null;
// labels
createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => Promise<IIssueLabels>;
labels: {
[projectId: string]: IIssueLabel[] | null; // project_id: labels
} | null;
// computed
projectLabels: IIssueLabel[] | null;
projectLabelsTree: IIssueLabelTree[] | null;
// actions
getProjectLabelById: (labelId: string) => IIssueLabel | null;
fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
updateLabel: (
workspaceSlug: string,
projectId: string,
labelId: string,
data: Partial<IIssueLabels>
) => Promise<IIssueLabels>;
data: Partial<IIssueLabel>
) => Promise<IIssueLabel>;
updateLabelPosition: (
workspaceSlug: string,
projectId: string,
labelId: string,
parentId: string | null | undefined,
index: number,
isSameParent: boolean,
prevIndex: number | undefined
) => Promise<IIssueLabel>;
deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
}
export class ProjectLabelStore implements IProjectLabelStore {
loader: boolean = false;
error: any | null = null;
labels: {
[projectId: string]: IIssueLabel[]; // projectId: labels
} | null = {};
// root store
rootStore;
// service
@ -34,12 +53,18 @@ export class ProjectLabelStore implements IProjectLabelStore {
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable,
error: observable,
// labels
loader: observable.ref,
error: observable.ref,
labels: observable.ref,
// computed
projectLabels: computed,
projectLabelsTree: computed,
// actions
getProjectLabelById: action,
fetchProjectLabels: action,
createLabel: action,
updateLabel: action,
updateLabelPosition: action,
deleteLabel: action,
});
@ -48,7 +73,51 @@ export class ProjectLabelStore implements IProjectLabelStore {
this.issueLabelService = new IssueLabelService();
}
createLabel = async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => {
get projectLabels() {
if (!this.rootStore.project.projectId) return null;
return this.labels?.[this.rootStore.project.projectId]?.sort((a, b) => a.name.localeCompare(b.name)) || null;
}
get projectLabelsTree() {
if (!this.rootStore.project.projectId) return null;
const currentProjectLabels = this.labels?.[this.rootStore.project.projectId];
if (!currentProjectLabels) return null;
currentProjectLabels.sort((labelA: IIssueLabel, labelB: IIssueLabel) => labelB.sort_order - labelA.sort_order);
return buildTree(currentProjectLabels);
}
getProjectLabelById = (labelId: string) => {
if (!this.rootStore.project.projectId) return null;
const labels = this.projectLabels;
if (!labels) return null;
const labelInfo: IIssueLabel | null = labels.find((label) => label.id === labelId) || null;
return labelInfo;
};
fetchProjectLabels = async (workspaceSlug: string, projectId: string) => {
try {
this.loader = true;
this.error = null;
const labelResponse = await this.issueLabelService.getProjectIssueLabels(workspaceSlug, projectId);
runInAction(() => {
this.labels = {
...this.labels,
[projectId]: labelResponse,
};
this.loader = false;
this.error = null;
});
} catch (error) {
console.error(error);
this.loader = false;
this.error = error;
}
};
createLabel = async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => {
try {
const response = await this.issueLabelService.createIssueLabel(
workspaceSlug,
@ -58,9 +127,9 @@ export class ProjectLabelStore implements IProjectLabelStore {
);
runInAction(() => {
this.rootStore.project.labels = {
...this.rootStore.project.labels,
[projectId]: [response, ...(this.rootStore.project.labels?.[projectId] || [])],
this.labels = {
...this.labels,
[projectId]: [response, ...(this.labels?.[projectId] || [])],
};
});
@ -71,16 +140,70 @@ export class ProjectLabelStore implements IProjectLabelStore {
}
};
updateLabel = async (workspaceSlug: string, projectId: string, labelId: string, data: Partial<IIssueLabels>) => {
const originalLabel = this.rootStore.project.getProjectLabelById(labelId);
updateLabelPosition = async (
workspaceSlug: string,
projectId: string,
labelId: string,
parentId: string | null | undefined,
index: number,
isSameParent: boolean,
prevIndex: number | undefined
) => {
const labels = this.labels;
const currLabel = labels?.[projectId]?.find((label) => label.id === labelId);
const labelTree = this.projectLabelsTree;
let currentArray: IIssueLabel[];
if (!currLabel || !labelTree) return;
const data: Partial<IIssueLabel> = { parent: parentId };
//find array in which the label is to be added
if (!parentId) currentArray = labelTree;
else currentArray = labelTree?.find((label) => label.id === parentId)?.children || [];
//Add the array at the destination
if (isSameParent && prevIndex !== undefined) currentArray.splice(prevIndex, 1);
currentArray.splice(index, 0, currLabel);
//if currently adding to a new array, then let backend assign a sort order
if (currentArray.length > 1) {
let prevSortOrder: number | undefined, nextSortOrder: number | undefined;
if (typeof currentArray[index - 1] !== "undefined") {
prevSortOrder = currentArray[index - 1].sort_order;
}
if (typeof currentArray[index + 1] !== "undefined") {
nextSortOrder = currentArray[index + 1].sort_order;
}
let sortOrder: number;
//based on the next and previous labels calculate current sort order
if (prevSortOrder && nextSortOrder) {
sortOrder = (prevSortOrder + nextSortOrder) / 2;
} else if (nextSortOrder) {
sortOrder = nextSortOrder + 10000;
} else {
sortOrder = prevSortOrder! / 2;
}
data.sort_order = sortOrder;
}
return this.updateLabel(workspaceSlug, projectId, labelId, data);
};
updateLabel = async (workspaceSlug: string, projectId: string, labelId: string, data: Partial<IIssueLabel>) => {
const originalLabel = this.getProjectLabelById(labelId);
runInAction(() => {
this.rootStore.project.labels = {
...this.rootStore.project.labels,
this.labels = {
...this.labels,
[projectId]:
this.rootStore.project.labels?.[projectId]?.map((label) =>
label.id === labelId ? { ...label, ...data } : label
) || [],
this.labels?.[projectId]?.map((label) => (label.id === labelId ? { ...label, ...data } : label)) || [],
};
});
@ -97,9 +220,9 @@ export class ProjectLabelStore implements IProjectLabelStore {
} catch (error) {
console.log("Failed to update label from project store");
runInAction(() => {
this.rootStore.project.labels = {
...this.rootStore.project.labels,
[projectId]: (this.rootStore.project.labels?.[projectId] || [])?.map((label) =>
this.labels = {
...this.labels,
[projectId]: (this.labels?.[projectId] || [])?.map((label) =>
label.id === labelId ? { ...label, ...originalLabel } : label
),
};
@ -109,12 +232,12 @@ export class ProjectLabelStore implements IProjectLabelStore {
};
deleteLabel = async (workspaceSlug: string, projectId: string, labelId: string) => {
const originalLabelList = this.rootStore.project.projectLabels;
const originalLabelList = this.projectLabels;
runInAction(() => {
this.rootStore.project.labels = {
...this.rootStore.project.labels,
[projectId]: (this.rootStore.project.labels?.[projectId] || [])?.filter((label) => label.id !== labelId),
this.labels = {
...this.labels,
[projectId]: (this.labels?.[projectId] || [])?.filter((label) => label.id !== labelId),
};
});
@ -130,8 +253,8 @@ export class ProjectLabelStore implements IProjectLabelStore {
console.log("Failed to delete label from project store");
// reverting back to original label list
runInAction(() => {
this.rootStore.project.labels = {
...this.rootStore.project.labels,
this.labels = {
...this.labels,
[projectId]: originalLabelList || [],
};
});

56
web/store/project/project.store.ts
View File

@ -1,7 +1,7 @@
import { observable, action, computed, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "../root";
import { IProject, IIssueLabels, IEstimate } from "types";
import { IProject, IEstimate } from "types";
// services
import { ProjectService, ProjectStateService, ProjectEstimateService } from "services/project";
import { IssueService, IssueLabelService } from "services/issue";
@ -16,9 +16,6 @@ export interface IProjectStore {
project_details: {
[projectId: string]: IProject; // projectId: project Info
};
labels: {
[projectId: string]: IIssueLabels[] | null; // project_id: labels
} | null;
estimates: {
[projectId: string]: IEstimate[] | null; // project_id: members
} | null;
@ -26,12 +23,9 @@ export interface IProjectStore {
// computed
searchedProjects: IProject[];
workspaceProjects: IProject[] | null;
projectLabels: IIssueLabels[] | null;
projectEstimates: IEstimate[] | null;
joinedProjects: IProject[];
favoriteProjects: IProject[];
currentProjectDetails: IProject | undefined;
// actions
@ -39,12 +33,10 @@ export interface IProjectStore {
setSearchQuery: (query: string) => void;
getProjectById: (workspaceSlug: string, projectId: string) => IProject | null;
getProjectLabelById: (labelId: string) => IIssueLabels | null;
getProjectEstimateById: (estimateId: string) => IEstimate | null;
getProjectEstimateById: (estimateId: string) => IEstimate | null;
fetchProjects: (workspaceSlug: string) => Promise<void>;
fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<any>;
addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
@ -70,9 +62,6 @@ export class ProjectStore implements IProjectStore {
project_details: {
[projectId: string]: IProject; // projectId: project
} = {};
labels: {
[projectId: string]: IIssueLabels[]; // projectId: labels
} | null = {};
estimates: {
[projectId: string]: IEstimate[]; // projectId: estimates
} | null = {};
@ -96,13 +85,13 @@ export class ProjectStore implements IProjectStore {
projectId: observable.ref,
projects: observable.ref,
project_details: observable.ref,
labels: observable.ref,
estimates: observable.ref,
// computed
searchedProjects: computed,
workspaceProjects: computed,
projectLabels: computed,
projectEstimates: computed,
currentProjectDetails: computed,
@ -117,10 +106,8 @@ export class ProjectStore implements IProjectStore {
fetchProjectDetails: action,
getProjectById: action,
getProjectLabelById: action,
getProjectEstimateById: action,
fetchProjectLabels: action,
fetchProjectEstimates: action,
addProjectToFavorites: action,
@ -177,11 +164,6 @@ export class ProjectStore implements IProjectStore {
return this.projects?.[this.rootStore.workspace.workspaceSlug]?.filter((p) => p.is_favorite);
}
get projectLabels() {
if (!this.projectId) return null;
return this.labels?.[this.projectId] || null;
}
get projectEstimates() {
if (!this.projectId) return null;
return this.estimates?.[this.projectId] || null;
@ -241,14 +223,6 @@ export class ProjectStore implements IProjectStore {
return projectInfo;
};
getProjectLabelById = (labelId: string) => {
if (!this.projectId) return null;
const labels = this.projectLabels;
if (!labels) return null;
const labelInfo: IIssueLabels | null = labels.find((label) => label.id === labelId) || null;
return labelInfo;
};
getProjectEstimateById = (estimateId: string) => {
if (!this.projectId) return null;
const estimates = this.projectEstimates;
@ -257,28 +231,6 @@ export class ProjectStore implements IProjectStore {
return estimateInfo;
};
fetchProjectLabels = async (workspaceSlug: string, projectId: string) => {
try {
this.loader = true;
this.error = null;
const labelResponse = await this.issueLabelService.getProjectIssueLabels(workspaceSlug, projectId);
runInAction(() => {
this.labels = {
...this.labels,
[projectId]: labelResponse,
};
this.loader = false;
this.error = null;
});
} catch (error) {
console.error(error);
this.loader = false;
this.error = error;
}
};
fetchProjectEstimates = async (workspaceSlug: string, projectId: string) => {
try {
this.loader = true;

10
web/store/workspace/workspace.store.ts
View File

@ -1,7 +1,7 @@
import { action, computed, observable, makeObservable, runInAction } from "mobx";
import { RootStore } from "../root";
// types
import { IIssueLabels, IProject, IWorkspace, IWorkspaceMember } from "types";
import { IIssueLabel, IProject, IWorkspace, IWorkspaceMember } from "types";
// services
import { WorkspaceService } from "services/workspace.service";
import { ProjectService } from "services/project";
@ -15,12 +15,12 @@ export interface IWorkspaceStore {
// observables
workspaceSlug: string | null;
workspaces: IWorkspace[] | undefined;
labels: { [workspaceSlug: string]: IIssueLabels[] }; // workspaceSlug: labels[]
labels: { [workspaceSlug: string]: IIssueLabel[] }; // workspaceSlug: labels[]
// actions
setWorkspaceSlug: (workspaceSlug: string) => void;
getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabels | null;
getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabel | null;
fetchWorkspaces: () => Promise<IWorkspace[]>;
fetchWorkspaceLabels: (workspaceSlug: string) => Promise<void>;
@ -32,7 +32,7 @@ export interface IWorkspaceStore {
// computed
currentWorkspace: IWorkspace | null;
workspacesCreateByCurrentUser: IWorkspace[] | null;
workspaceLabels: IIssueLabels[] | null;
workspaceLabels: IIssueLabel[] | null;
}
export class WorkspaceStore implements IWorkspaceStore {
@ -44,7 +44,7 @@ export class WorkspaceStore implements IWorkspaceStore {
workspaceSlug: string | null = null;
workspaces: IWorkspace[] | undefined = [];
projects: { [workspaceSlug: string]: IProject[] } = {}; // workspaceSlug: project[]
labels: { [workspaceSlug: string]: IIssueLabels[] } = {};
labels: { [workspaceSlug: string]: IIssueLabel[] } = {};
members: { [workspaceSlug: string]: IWorkspaceMember[] } = {};
// services

7
web/types/issues.d.ts vendored
View File

@ -159,7 +159,7 @@ export type IssuePriorities = {
user: string;
};
export interface IIssueLabels {
export interface IIssueLabel {
id: string;
created_at: Date;
updated_at: Date;
@ -173,6 +173,11 @@ export interface IIssueLabels {
workspace: string;
workspace_detail: IWorkspaceLite;
parent: string | null;
sort_order: number;
}
export interface IIssueLabelTree extends IIssueLabel {
children: IIssueLabel[] | undefined;
}
export interface IIssueActivity {

4
web/types/pages.d.ts vendored
View File

@ -1,5 +1,5 @@
// types
import { IIssue, IIssueLabels, IWorkspaceLite, IProjectLite } from "types";
import { IIssue, IIssueLabel, IWorkspaceLite, IProjectLite } from "types";
export interface IPage {
access: number;
@ -12,7 +12,7 @@ export interface IPage {
description_stripped: string | null;
id: string;
is_favorite: boolean;
label_details: IIssueLabels[];
label_details: IIssueLabel[];
labels: string[];
name: string;
owned_by: string;