From 97ccd633cd5b2a7d0637af5d886b19ed75e924ff Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Fri, 14 Feb 2025 18:03:13 +0530 Subject: [PATCH 1/2] chore: work items parent select improvements --- web/ce/components/issues/issue-details/index.ts | 1 + .../components/issues/issue-details}/parent-select.tsx | 3 +-- web/core/components/issues/issue-detail/index.ts | 1 - web/core/components/issues/issue-detail/root.tsx | 9 ++++++++- web/core/components/issues/issue-detail/sidebar.tsx | 4 ++-- web/core/components/issues/peek-overview/properties.tsx | 3 +-- web/ee/components/issues/issue-details/index.ts | 1 + web/ee/components/issues/issue-details/parent-select.tsx | 1 + 8 files changed, 15 insertions(+), 8 deletions(-) rename web/{core/components/issues/issue-detail => ce/components/issues/issue-details}/parent-select.tsx (98%) create mode 100644 web/ee/components/issues/issue-details/parent-select.tsx diff --git a/web/ce/components/issues/issue-details/index.ts b/web/ce/components/issues/issue-details/index.ts index 3979faf9488..74ff1b49e04 100644 --- a/web/ce/components/issues/issue-details/index.ts +++ b/web/ce/components/issues/issue-details/index.ts @@ -2,3 +2,4 @@ export * from "./issue-identifier"; export * from "./issue-properties-activity"; export * from "./issue-type-switcher"; export * from "./issue-type-activity"; +export * from "./parent-select"; diff --git a/web/core/components/issues/issue-detail/parent-select.tsx b/web/ce/components/issues/issue-details/parent-select.tsx similarity index 98% rename from web/core/components/issues/issue-detail/parent-select.tsx rename to web/ce/components/issues/issue-details/parent-select.tsx index 72c0de41287..e6f692bb181 100644 --- a/web/core/components/issues/issue-detail/parent-select.tsx +++ b/web/ce/components/issues/issue-details/parent-select.tsx @@ -8,7 +8,7 @@ import { useTranslation } from "@plane/i18n"; // ui import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; // components -import { ParentIssuesListModal } from "@/components/issues"; +import { ParentIssuesListModal, TIssueOperations } from "@/components/issues"; // helpers import { cn } from "@/helpers/common.helper"; // hooks @@ -17,7 +17,6 @@ import { usePlatformOS } from "@/hooks/use-platform-os"; // plane web components import { IssueIdentifier } from "@/plane-web/components/issues"; // types -import { TIssueOperations } from "./root"; type TIssueParentSelect = { className?: string; diff --git a/web/core/components/issues/issue-detail/index.ts b/web/core/components/issues/issue-detail/index.ts index 7b85900437b..9820b179e7e 100644 --- a/web/core/components/issues/issue-detail/index.ts +++ b/web/core/components/issues/issue-detail/index.ts @@ -6,7 +6,6 @@ export * from "./reactions"; export * from "./cycle-select"; export * from "./main-content"; export * from "./module-select"; -export * from "./parent-select"; export * from "./relation-select"; export * from "./root"; export * from "./sidebar"; diff --git a/web/core/components/issues/issue-detail/root.tsx b/web/core/components/issues/issue-detail/root.tsx index 0da0168628b..4849bfe3a5c 100644 --- a/web/core/components/issues/issue-detail/root.tsx +++ b/web/core/components/issues/issue-detail/root.tsx @@ -4,7 +4,14 @@ import { FC, useMemo } from "react"; import { observer } from "mobx-react"; import { usePathname } from "next/navigation"; // types -import { EIssuesStoreType, ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED,EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; +import { + EIssuesStoreType, + ISSUE_UPDATED, + ISSUE_DELETED, + ISSUE_ARCHIVED, + EUserPermissions, + EUserPermissionsLevel, +} from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { TIssue } from "@plane/types"; // ui diff --git a/web/core/components/issues/issue-detail/sidebar.tsx b/web/core/components/issues/issue-detail/sidebar.tsx index b91c6fb3f2c..5c6271d435a 100644 --- a/web/core/components/issues/issue-detail/sidebar.tsx +++ b/web/core/components/issues/issue-detail/sidebar.tsx @@ -16,7 +16,7 @@ import { StateDropdown, } from "@/components/dropdowns"; import { ButtonAvatars } from "@/components/dropdowns/member/avatar"; -import { IssueCycleSelect, IssueLabel, IssueModuleSelect, IssueParentSelect } from "@/components/issues"; +import { IssueCycleSelect, IssueLabel, IssueModuleSelect } from "@/components/issues"; // helpers import { cn } from "@/helpers/common.helper"; import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"; @@ -25,7 +25,7 @@ import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper"; import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useMember } from "@/hooks/store"; // plane web components import { IssueAdditionalPropertyValuesUpdate } from "@/plane-web/components/issue-types/values"; -import { IssueWorklogProperty } from "@/plane-web/components/issues"; +import { IssueParentSelect, IssueWorklogProperty } from "@/plane-web/components/issues"; // components import type { TIssueOperations } from "./root"; diff --git a/web/core/components/issues/peek-overview/properties.tsx b/web/core/components/issues/peek-overview/properties.tsx index 7d80f5a2312..3f31b8c1a36 100644 --- a/web/core/components/issues/peek-overview/properties.tsx +++ b/web/core/components/issues/peek-overview/properties.tsx @@ -19,7 +19,6 @@ import { ButtonAvatars } from "@/components/dropdowns/member/avatar"; import { IssueCycleSelect, IssueModuleSelect, - IssueParentSelect, IssueLabel, TIssueOperations, } from "@/components/issues"; @@ -30,7 +29,7 @@ import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper"; import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store"; // plane web components import { IssueAdditionalPropertyValuesUpdate } from "@/plane-web/components/issue-types/values"; -import { IssueWorklogProperty } from "@/plane-web/components/issues"; +import { IssueParentSelect, IssueWorklogProperty } from "@/plane-web/components/issues"; interface IPeekOverviewProperties { workspaceSlug: string; diff --git a/web/ee/components/issues/issue-details/index.ts b/web/ee/components/issues/issue-details/index.ts index 3979faf9488..74ff1b49e04 100644 --- a/web/ee/components/issues/issue-details/index.ts +++ b/web/ee/components/issues/issue-details/index.ts @@ -2,3 +2,4 @@ export * from "./issue-identifier"; export * from "./issue-properties-activity"; export * from "./issue-type-switcher"; export * from "./issue-type-activity"; +export * from "./parent-select"; diff --git a/web/ee/components/issues/issue-details/parent-select.tsx b/web/ee/components/issues/issue-details/parent-select.tsx new file mode 100644 index 00000000000..c979f4be882 --- /dev/null +++ b/web/ee/components/issues/issue-details/parent-select.tsx @@ -0,0 +1 @@ +export * from "ce/components/issues/issue-details/parent-select"; From e2e2f19851f773cd2c550aef1cea2391bad11f22 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Fri, 14 Feb 2025 18:54:12 +0530 Subject: [PATCH 2/2] chore: code refactor --- .../components/issues/issue-details/index.ts | 2 +- .../issue-details/parent-select-root.tsx | 82 +++++++++++++++++++ .../components/issues/issue-detail/index.ts | 1 + .../issues/issue-detail}/parent-select.tsx | 68 +++++---------- .../issues/issue-detail/sidebar.tsx | 4 +- .../issues/peek-overview/properties.tsx | 11 +-- .../components/issues/issue-details/index.ts | 2 +- .../issue-details/parent-select-root.tsx | 1 + .../issues/issue-details/parent-select.tsx | 1 - 9 files changed, 113 insertions(+), 59 deletions(-) create mode 100644 web/ce/components/issues/issue-details/parent-select-root.tsx rename web/{ce/components/issues/issue-details => core/components/issues/issue-detail}/parent-select.tsx (69%) create mode 100644 web/ee/components/issues/issue-details/parent-select-root.tsx delete mode 100644 web/ee/components/issues/issue-details/parent-select.tsx diff --git a/web/ce/components/issues/issue-details/index.ts b/web/ce/components/issues/issue-details/index.ts index 74ff1b49e04..e23fbe531e2 100644 --- a/web/ce/components/issues/issue-details/index.ts +++ b/web/ce/components/issues/issue-details/index.ts @@ -2,4 +2,4 @@ export * from "./issue-identifier"; export * from "./issue-properties-activity"; export * from "./issue-type-switcher"; export * from "./issue-type-activity"; -export * from "./parent-select"; +export * from "./parent-select-root"; diff --git a/web/ce/components/issues/issue-details/parent-select-root.tsx b/web/ce/components/issues/issue-details/parent-select-root.tsx new file mode 100644 index 00000000000..820a578e170 --- /dev/null +++ b/web/ce/components/issues/issue-details/parent-select-root.tsx @@ -0,0 +1,82 @@ +"use client"; + +import React from "react"; +import { observer } from "mobx-react"; +import { useTranslation } from "@plane/i18n"; +// ui +import { TOAST_TYPE, setToast } from "@plane/ui"; +// components +import { IssueParentSelect, TIssueOperations } from "@/components/issues"; +// hooks +import { useIssueDetail } from "@/hooks/store"; + +type TIssueParentSelect = { + className?: string; + disabled?: boolean; + issueId: string; + issueOperations: TIssueOperations; + projectId: string; + workspaceSlug: string; +}; + +export const IssueParentSelectRoot: React.FC = observer((props) => { + const { issueId, issueOperations, projectId, workspaceSlug } = props; + const { t } = useTranslation(); + // store hooks + const { + issue: { getIssueById }, + } = useIssueDetail(); + const { + toggleParentIssueModal, + removeSubIssue, + subIssues: { setSubIssueHelpers, fetchSubIssues }, + } = useIssueDetail(); + + // derived values + const issue = getIssueById(issueId); + const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined; + + const handleParentIssue = async (_issueId: string | null = null) => { + try { + await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId }); + await issueOperations.fetch(workspaceSlug, projectId, issueId, false); + if (_issueId) await fetchSubIssues(workspaceSlug, projectId, _issueId); + toggleParentIssueModal(null); + } catch (error) { + console.error("something went wrong while fetching the issue"); + } + }; + + const handleRemoveSubIssue = async ( + workspaceSlug: string, + projectId: string, + parentIssueId: string, + issueId: string + ) => { + try { + setSubIssueHelpers(parentIssueId, "issue_loader", issueId); + await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId); + await fetchSubIssues(workspaceSlug, projectId, parentIssueId); + setSubIssueHelpers(parentIssueId, "issue_loader", issueId); + } catch (error) { + setToast({ + type: TOAST_TYPE.ERROR, + title: t("common.error.label"), + message: t("common.something_went_wrong"), + }); + } + }; + + const workItemLink = `/${workspaceSlug}/projects/${parentIssue?.project_id}/issues/${parentIssue?.id}`; + + if (!issue) return <>; + + return ( + + ); +}); diff --git a/web/core/components/issues/issue-detail/index.ts b/web/core/components/issues/issue-detail/index.ts index 9820b179e7e..7b85900437b 100644 --- a/web/core/components/issues/issue-detail/index.ts +++ b/web/core/components/issues/issue-detail/index.ts @@ -6,6 +6,7 @@ export * from "./reactions"; export * from "./cycle-select"; export * from "./main-content"; export * from "./module-select"; +export * from "./parent-select"; export * from "./relation-select"; export * from "./root"; export * from "./sidebar"; diff --git a/web/ce/components/issues/issue-details/parent-select.tsx b/web/core/components/issues/issue-detail/parent-select.tsx similarity index 69% rename from web/ce/components/issues/issue-details/parent-select.tsx rename to web/core/components/issues/issue-detail/parent-select.tsx index e6f692bb181..59cb3808a5c 100644 --- a/web/ce/components/issues/issue-details/parent-select.tsx +++ b/web/core/components/issues/issue-detail/parent-select.tsx @@ -6,9 +6,9 @@ import Link from "next/link"; import { Pencil, X } from "lucide-react"; import { useTranslation } from "@plane/i18n"; // ui -import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; +import { Tooltip } from "@plane/ui"; // components -import { ParentIssuesListModal, TIssueOperations } from "@/components/issues"; +import { ParentIssuesListModal } from "@/components/issues"; // helpers import { cn } from "@/helpers/common.helper"; // hooks @@ -22,25 +22,36 @@ type TIssueParentSelect = { className?: string; disabled?: boolean; issueId: string; - issueOperations: TIssueOperations; projectId: string; workspaceSlug: string; + handleParentIssue: (_issueId?: string | null) => Promise; + handleRemoveSubIssue: ( + workspaceSlug: string, + projectId: string, + parentIssueId: string, + issueId: string + ) => Promise; + workItemLink: string; }; export const IssueParentSelect: React.FC = observer((props) => { - const { className = "", disabled = false, issueId, issueOperations, projectId, workspaceSlug } = props; + const { + className = "", + disabled = false, + issueId, + projectId, + workspaceSlug, + handleParentIssue, + handleRemoveSubIssue, + workItemLink, + } = props; const { t } = useTranslation(); // store hooks const { getProjectById } = useProject(); const { issue: { getIssueById }, } = useIssueDetail(); - const { - isParentIssueModalOpen, - toggleParentIssueModal, - removeSubIssue, - subIssues: { setSubIssueHelpers, fetchSubIssues }, - } = useIssueDetail(); + const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail(); // derived values const issue = getIssueById(issueId); @@ -48,36 +59,6 @@ export const IssueParentSelect: React.FC = observer((props) const parentIssueProjectDetails = parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined; const { isMobile } = usePlatformOS(); - const handleParentIssue = async (_issueId: string | null = null) => { - try { - await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId }); - await issueOperations.fetch(workspaceSlug, projectId, issueId, false); - _issueId && (await fetchSubIssues(workspaceSlug, projectId, _issueId)); - toggleParentIssueModal(null); - } catch (error) { - console.error("something went wrong while fetching the issue"); - } - }; - - const handleRemoveSubIssue = async ( - workspaceSlug: string, - projectId: string, - parentIssueId: string, - issueId: string - ) => { - try { - setSubIssueHelpers(parentIssueId, "issue_loader", issueId); - await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId); - await fetchSubIssues(workspaceSlug, projectId, parentIssueId); - setSubIssueHelpers(parentIssueId, "issue_loader", issueId); - } catch (error) { - setToast({ - type: TOAST_TYPE.ERROR, - title: t("common.error.label"), - message: t("common.something_went_wrong"), - }); - } - }; if (!issue) return <>; @@ -108,12 +89,7 @@ export const IssueParentSelect: React.FC = observer((props) {issue.parent_id && parentIssue ? (
- e.stopPropagation()} - > + e.stopPropagation()}> {parentIssue?.project_id && parentIssueProjectDetails && ( = observer((props) => { {t("common.parent")}
- = observer((pro

{t("common.parent")}

-