From 5c5c9f57ef95943ba280df874a63f744008619e1 Mon Sep 17 00:00:00 2001 From: gakshita Date: Thu, 22 May 2025 19:57:50 +0530 Subject: [PATCH 1/5] fix: hooks and store splitting for issue-details --- .../(projects)/browse/[workItem]/page.tsx | 3 +++ web/ce/hooks/use-issue-properties.tsx | 1 + web/ce/store/issue/issue-details/root.store.ts | 14 ++++++++++++++ web/core/components/issues/peek-overview/root.tsx | 2 ++ web/core/hooks/store/use-issue-detail.ts | 2 +- web/core/store/issue/root.store.ts | 2 +- web/ee/hooks/use-issue-properties.tsx | 1 + web/ee/store/issue/issue-details/root.store.ts | 1 + 8 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 web/ce/hooks/use-issue-properties.tsx create mode 100644 web/ce/store/issue/issue-details/root.store.ts create mode 100644 web/ee/hooks/use-issue-properties.tsx create mode 100644 web/ee/store/issue/issue-details/root.store.ts diff --git a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx index e117d0ab21c..1da566a4ddb 100644 --- a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx @@ -16,6 +16,7 @@ import { IssueDetailRoot } from "@/components/issues"; import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store"; // assets import { useAppRouter } from "@/hooks/use-app-router"; +import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties"; import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper"; import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp"; import emptyIssueLight from "@/public/empty-state/search/issues-light.webp"; @@ -53,6 +54,8 @@ const IssueDetailsPage = observer(() => { const issueLoader = !issue || isLoading; const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined; + useWorkItemProperties(projectId ?? "", workspaceSlug.toString(), issueId ?? ""); + useEffect(() => { const handleToggleIssueDetailSidebar = () => { if (window && window.innerWidth < 768) { diff --git a/web/ce/hooks/use-issue-properties.tsx b/web/ce/hooks/use-issue-properties.tsx new file mode 100644 index 00000000000..d3f91f4b3b9 --- /dev/null +++ b/web/ce/hooks/use-issue-properties.tsx @@ -0,0 +1 @@ +export const useWorkItemProperties = (projectId: string, workspaceSlug: string, workItemId: string) => {}; diff --git a/web/ce/store/issue/issue-details/root.store.ts b/web/ce/store/issue/issue-details/root.store.ts new file mode 100644 index 00000000000..d1693873eaf --- /dev/null +++ b/web/ce/store/issue/issue-details/root.store.ts @@ -0,0 +1,14 @@ +import { makeObservable } from "mobx"; +import { TIssueServiceType } from "@plane/types"; +import { IssueDetail as IssueDetailCore, IIssueDetail } from "@/store/issue/issue-details/root.store"; +import { IIssueRootStore } from "@/store/issue/root.store"; + +export type { IIssueDetail }; +export class IssueDetail extends IssueDetailCore { + constructor(rootStore: IIssueRootStore, serviceType: TIssueServiceType) { + super(rootStore, serviceType); + makeObservable(this, { + // observables + }); + } +} diff --git a/web/core/components/issues/peek-overview/root.tsx b/web/core/components/issues/peek-overview/root.tsx index 5ed6403bcb9..58342ade101 100644 --- a/web/core/components/issues/peek-overview/root.tsx +++ b/web/core/components/issues/peek-overview/root.tsx @@ -23,6 +23,7 @@ import { IssueView, TIssueOperations } from "@/components/issues"; // hooks import { useEventTracker, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store"; import { useIssueStoreType } from "@/hooks/use-issue-layout-store"; +import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties"; interface IIssuePeekOverview { embedIssue?: boolean; @@ -57,6 +58,7 @@ export const IssuePeekOverview: FC = observer((props) => { const storeType = issueStoreFromProps ?? issueStoreType; const { issues } = useIssues(storeType); const { captureIssueEvent } = useEventTracker(); + useWorkItemProperties(peekIssue?.projectId ?? "", peekIssue?.workspaceSlug ?? "", peekIssue?.issueId ?? ""); // state const [error, setError] = useState(false); diff --git a/web/core/hooks/store/use-issue-detail.ts b/web/core/hooks/store/use-issue-detail.ts index 309bfedbaaf..dd96ddf0568 100644 --- a/web/core/hooks/store/use-issue-detail.ts +++ b/web/core/hooks/store/use-issue-detail.ts @@ -4,7 +4,7 @@ import { TIssueServiceType } from "@plane/types"; // mobx store import { StoreContext } from "@/lib/store-context"; // types -import { IIssueDetail } from "@/store/issue/issue-details/root.store"; +import { IIssueDetail } from "@/plane-web/store/issue/issue-details/root.store"; export const useIssueDetail = (serviceType: TIssueServiceType = EIssueServiceType.ISSUES): IIssueDetail => { const context = useContext(StoreContext); diff --git a/web/core/store/issue/root.store.ts b/web/core/store/issue/root.store.ts index 3c9cb656df9..31e1db54e05 100644 --- a/web/core/store/issue/root.store.ts +++ b/web/core/store/issue/root.store.ts @@ -5,6 +5,7 @@ import { EIssueServiceType } from "@plane/constants"; import { ICycle, IIssueLabel, IModule, IProject, IState, IUserLite, TIssueServiceType } from "@plane/types"; // plane web store import { IProjectEpics, IProjectEpicsFilter, ProjectEpics, ProjectEpicsFilter } from "@/plane-web/store/issue/epic"; +import { IIssueDetail, IssueDetail } from "@/plane-web/store/issue/issue-details/root.store"; import { ITeamIssuesFilter, ITeamIssues, TeamIssues, TeamIssuesFilter } from "@/plane-web/store/issue/team"; import { ITeamViewIssues, @@ -19,7 +20,6 @@ import { IWorkspaceMembership } from "@/store/member/workspace-member.store"; import { IArchivedIssuesFilter, ArchivedIssuesFilter, IArchivedIssues, ArchivedIssues } from "./archived"; import { ICycleIssuesFilter, CycleIssuesFilter, ICycleIssues, CycleIssues } from "./cycle"; import { IDraftIssuesFilter, DraftIssuesFilter, IDraftIssues, DraftIssues } from "./draft"; -import { IIssueDetail, IssueDetail } from "./issue-details/root.store"; import { IIssueStore, IssueStore } from "./issue.store"; import { ICalendarStore, CalendarStore } from "./issue_calendar_view.store"; import { IIssueKanBanViewStore, IssueKanBanViewStore } from "./issue_kanban_view.store"; diff --git a/web/ee/hooks/use-issue-properties.tsx b/web/ee/hooks/use-issue-properties.tsx new file mode 100644 index 00000000000..05a59ba5603 --- /dev/null +++ b/web/ee/hooks/use-issue-properties.tsx @@ -0,0 +1 @@ +export * from "ce/hooks/use-issue-properties"; diff --git a/web/ee/store/issue/issue-details/root.store.ts b/web/ee/store/issue/issue-details/root.store.ts new file mode 100644 index 00000000000..f80b9384d43 --- /dev/null +++ b/web/ee/store/issue/issue-details/root.store.ts @@ -0,0 +1 @@ +export * from "ce/store/issue/issue-details/root.store"; From e7d3a8ab7a94cad3b36bb8adb756c9795fe6975a Mon Sep 17 00:00:00 2001 From: gakshita Date: Tue, 27 May 2025 13:35:16 +0530 Subject: [PATCH 2/5] fix: refactoring --- .../[workspaceSlug]/(projects)/browse/[workItem]/page.tsx | 2 +- web/ce/hooks/use-issue-properties.tsx | 8 +++++++- web/core/components/issues/peek-overview/root.tsx | 2 +- web/core/store/issue/issue-details/root.store.ts | 2 +- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx index 1da566a4ddb..605829654e6 100644 --- a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx @@ -54,7 +54,7 @@ const IssueDetailsPage = observer(() => { const issueLoader = !issue || isLoading; const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined; - useWorkItemProperties(projectId ?? "", workspaceSlug.toString(), issueId ?? ""); + useWorkItemProperties(projectId, workspaceSlug.toString(), issueId); useEffect(() => { const handleToggleIssueDetailSidebar = () => { diff --git a/web/ce/hooks/use-issue-properties.tsx b/web/ce/hooks/use-issue-properties.tsx index d3f91f4b3b9..cc58208da9f 100644 --- a/web/ce/hooks/use-issue-properties.tsx +++ b/web/ce/hooks/use-issue-properties.tsx @@ -1 +1,7 @@ -export const useWorkItemProperties = (projectId: string, workspaceSlug: string, workItemId: string) => {}; +export const useWorkItemProperties = ( + projectId: string | null | undefined, + workspaceSlug: string | null | undefined, + workItemId: string | null | undefined +) => { + if (!projectId || !workspaceSlug || !workItemId) return; +}; diff --git a/web/core/components/issues/peek-overview/root.tsx b/web/core/components/issues/peek-overview/root.tsx index 58342ade101..429e092dab5 100644 --- a/web/core/components/issues/peek-overview/root.tsx +++ b/web/core/components/issues/peek-overview/root.tsx @@ -58,7 +58,7 @@ export const IssuePeekOverview: FC = observer((props) => { const storeType = issueStoreFromProps ?? issueStoreType; const { issues } = useIssues(storeType); const { captureIssueEvent } = useEventTracker(); - useWorkItemProperties(peekIssue?.projectId ?? "", peekIssue?.workspaceSlug ?? "", peekIssue?.issueId ?? ""); + useWorkItemProperties(peekIssue?.projectId, peekIssue?.workspaceSlug, peekIssue?.issueId); // state const [error, setError] = useState(false); diff --git a/web/core/store/issue/issue-details/root.store.ts b/web/core/store/issue/issue-details/root.store.ts index 5a3b394b04d..1046f8564e5 100644 --- a/web/core/store/issue/issue-details/root.store.ts +++ b/web/core/store/issue/issue-details/root.store.ts @@ -114,7 +114,7 @@ export interface IIssueDetail relation: IIssueRelationStore; } -export class IssueDetail implements IIssueDetail { +export abstract class IssueDetail implements IIssueDetail { // observables peekIssue: TPeekIssue | undefined = undefined; relationKey: TIssueRelationTypes | null = null; From 57209e83988c923510f8f4bc5a91ba6ea1b0ebe7 Mon Sep 17 00:00:00 2001 From: gakshita Date: Wed, 4 Jun 2025 18:01:59 +0530 Subject: [PATCH 3/5] fix: refactoring --- web/ce/hooks/use-issue-properties.tsx | 5 ++++- web/core/components/issues/peek-overview/root.tsx | 9 ++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/web/ce/hooks/use-issue-properties.tsx b/web/ce/hooks/use-issue-properties.tsx index cc58208da9f..c4d35d6add2 100644 --- a/web/ce/hooks/use-issue-properties.tsx +++ b/web/ce/hooks/use-issue-properties.tsx @@ -1,7 +1,10 @@ +import { TIssueServiceType } from "@plane/types"; + export const useWorkItemProperties = ( projectId: string | null | undefined, workspaceSlug: string | null | undefined, - workItemId: string | null | undefined + workItemId: string | null | undefined, + issueServiceType: TIssueServiceType ) => { if (!projectId || !workspaceSlug || !workItemId) return; }; diff --git a/web/core/components/issues/peek-overview/root.tsx b/web/core/components/issues/peek-overview/root.tsx index 429e092dab5..92ce2a4ef2b 100644 --- a/web/core/components/issues/peek-overview/root.tsx +++ b/web/core/components/issues/peek-overview/root.tsx @@ -12,6 +12,7 @@ import { ISSUE_RESTORED, EUserPermissions, EUserPermissionsLevel, + EIssueServiceType, } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { TIssue } from "@plane/types"; @@ -58,7 +59,13 @@ export const IssuePeekOverview: FC = observer((props) => { const storeType = issueStoreFromProps ?? issueStoreType; const { issues } = useIssues(storeType); const { captureIssueEvent } = useEventTracker(); - useWorkItemProperties(peekIssue?.projectId, peekIssue?.workspaceSlug, peekIssue?.issueId); + + useWorkItemProperties( + peekIssue?.projectId, + peekIssue?.workspaceSlug, + peekIssue?.issueId, + storeType === EIssuesStoreType.EPIC ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES + ); // state const [error, setError] = useState(false); From cf73a04bd6b7b48b1d6169b8565e9576c46d6b16 Mon Sep 17 00:00:00 2001 From: gakshita Date: Wed, 4 Jun 2025 18:08:02 +0530 Subject: [PATCH 4/5] fix: refactor --- .../[workspaceSlug]/(projects)/browse/[workItem]/page.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx index 605829654e6..735474cd4d2 100644 --- a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx @@ -6,6 +6,7 @@ import { useParams } from "next/navigation"; import { useTheme } from "next-themes"; import useSWR from "swr"; // plane imports +import { EIssueServiceType } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { Loader } from "@plane/ui"; // components @@ -54,7 +55,12 @@ const IssueDetailsPage = observer(() => { const issueLoader = !issue || isLoading; const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined; - useWorkItemProperties(projectId, workspaceSlug.toString(), issueId); + useWorkItemProperties( + projectId, + workspaceSlug.toString(), + issueId, + issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES + ); useEffect(() => { const handleToggleIssueDetailSidebar = () => { From 5bdf8ecb6bb6b1b1fe966f72e9913576b3a49419 Mon Sep 17 00:00:00 2001 From: gakshita Date: Fri, 13 Jun 2025 18:14:29 +0530 Subject: [PATCH 5/5] fix: css --- web/core/components/settings/content-wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/core/components/settings/content-wrapper.tsx b/web/core/components/settings/content-wrapper.tsx index c65418d28b5..87a695416e7 100644 --- a/web/core/components/settings/content-wrapper.tsx +++ b/web/core/components/settings/content-wrapper.tsx @@ -12,7 +12,7 @@ export const SettingsContentWrapper = observer((props: TProps) => { return (