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 GitHub
parent 2b6c489513
commit c9ffc9465f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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;