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

[WIKI-589] fix: update project page creation flow (#7685)

Browse source 
* fix : update project page creation flow

* chore: update translations

* chore: remove unused changes
This commit is contained in:
Vipin Chaudhary 2025-09-01 16:43:07 +05:30 • committed by GitHub
parent ee471c772a
commit 0358e9b965
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 66 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

81
apps/web/core/components/pages/pages-list-main-content.tsx
View file

@ -1,14 +1,23 @@
"use client";
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// plane imports
import { EUserPermissionsLevel, EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
import { useParams, useRouter } from "next/navigation";
import {
EUserPermissionsLevel,
EPageAccess,
PROJECT_PAGE_TRACKER_ELEMENTS,
PROJECT_PAGE_TRACKER_EVENTS,
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { EUserProjectRoles, TPageNavigationTabs } from "@plane/types";
import { EUserProjectRoles, TPage, TPageNavigationTabs } from "@plane/types";
// components
import { setToast, TOAST_TYPE } from "@plane/ui";
import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
import { PageLoader } from "@/components/pages/loaders/page-loader";
import { captureClick } from "@/helpers/event-tracker.helper";
import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
import { useProject } from "@/hooks/store/use-project";
import { useUserPermissions } from "@/hooks/store/user";
import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
// plane web hooks
@ -25,10 +34,16 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
// plane hooks
const { t } = useTranslation();
// store hooks
const { loader, isAnyPageAvailable, getCurrentProjectFilteredPageIdsByTab, getCurrentProjectPageIdsByTab, filters } =
const { currentProjectDetails, loader } = useProject();
const { isAnyPageAvailable, getCurrentProjectFilteredPageIdsByTab, getCurrentProjectPageIdsByTab, filters } =
usePageStore(storeType);
const { toggleCreatePageModal } = useCommandPalette();
const { allowPermissions } = useUserPermissions();
const { createPage } = usePageStore(EPageStoreType.PROJECT);
// states
const [isCreatingPage, setIsCreatingPage] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = useParams();
// derived values
const pageIds = getCurrentProjectPageIdsByTab(pageType);
const filteredPageIds = getCurrentProjectFilteredPageIdsByTab(pageType);
@ -54,6 +69,42 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
extension: "svg",
});
// handle page create
const handleCreatePage = async () => {
setIsCreatingPage(true);
const payload: Partial<TPage> = {
access: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
};
await createPage(payload)
.then((res) => {
captureSuccess({
eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
payload: {
id: res?.id,
state: "SUCCESS",
},
});
const pageId = `/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/${res?.id}`;
router.push(pageId);
})
.catch((err) => {
captureError({
eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
payload: {
state: "ERROR",
},
});
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: err?.data?.error || "Page could not be created. Please try again.",
});
})
.finally(() => setIsCreatingPage(false));
};
if (loader === "init-loader") return <PageLoader />;
// if no pages exist in the active page type
if (!isAnyPageAvailable || pageIds?.length === 0) {
@ -64,12 +115,12 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
description={t("project_page.empty_state.general.description")}
assetPath={generalPageResolvedPath}
primaryButton={{
text: t("project_page.empty_state.general.primary_button.text"),
text: isCreatingPage ? t("creating") : t("project_page.empty_state.general.primary_button.text"),
onClick: () => {
toggleCreatePageModal({ isOpen: true });
handleCreatePage();
captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
},
disabled: !canPerformEmptyStateActions,
disabled: !canPerformEmptyStateActions || isCreatingPage,
}}
/>
);
@ -81,12 +132,12 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
description={t("project_page.empty_state.public.description")}
assetPath={publicPageResolvedPath}
primaryButton={{
text: t("project_page.empty_state.public.primary_button.text"),
text: isCreatingPage ? t("creating") : t("project_page.empty_state.public.primary_button.text"),
onClick: () => {
toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PUBLIC });
handleCreatePage();
captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
},
disabled: !canPerformEmptyStateActions,
disabled: !canPerformEmptyStateActions || isCreatingPage,
}}
/>
);
@ -97,12 +148,12 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
description={t("project_page.empty_state.private.description")}
assetPath={privatePageResolvedPath}
primaryButton={{
text: t("project_page.empty_state.private.primary_button.text"),
text: isCreatingPage ? t("creating") : t("project_page.empty_state.private.primary_button.text"),
onClick: () => {
toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PRIVATE });
handleCreatePage();
captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
},
disabled: !canPerformEmptyStateActions,
disabled: !canPerformEmptyStateActions || isCreatingPage,
}}
/>
);