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

[WEB-1436] chore: pages improvement. (#4657)

Browse Source 
* add empty state if no pages are available.
* set access to private in create page modal when the modal is open form private tab.
This commit is contained in:
Prateek Shourya 2024-05-31 18:30:38 +05:30 committed by GitHub
parent 608e193c36
commit a2cdbd52dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 95 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/command-palette/actions/project-actions.tsx
View File

@ -71,7 +71,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
onSelect={() => {
closePalette();
setTrackElement("Command palette");
toggleCreatePageModal(true);
toggleCreatePageModal({ isOpen: true });
}}
className="focus:outline-none"
>

9
web/components/command-palette/command-palette.tsx
View File

@ -50,7 +50,7 @@ export const CommandPalette: FC = observer(() => {
toggleCreateIssueModal,
isCreateCycleModalOpen,
toggleCreateCycleModal,
isCreatePageModalOpen,
createPageModal,
toggleCreatePageModal,
isCreateProjectModalOpen,
toggleCreateProjectModal,
@ -150,7 +150,7 @@ export const CommandPalette: FC = observer(() => {
d: {
title: "Create a new page",
description: "Create a new page in the current project",
action: () => toggleCreatePageModal(true),
action: () => toggleCreatePageModal({ isOpen: true }),
},
m: {
title: "Create a new module",
@ -297,8 +297,9 @@ export const CommandPalette: FC = observer(() => {
<CreatePageModal
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
isModalOpen={isCreatePageModalOpen}
handleModalClose={() => toggleCreatePageModal(false)}
isModalOpen={createPageModal.isOpen}
pageAccess={createPageModal.pageAccess}
handleModalClose={() => toggleCreatePageModal({ isOpen: false })}
redirectionEnabled
/>
</>

13
web/components/headers/pages.tsx
View File

@ -1,20 +1,20 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { FileText } from "lucide-react";
// hooks
// ui
import { Breadcrumbs, Button } from "@plane/ui";
// helpers
import { BreadcrumbLink, Logo } from "@/components/common";
import { EUserProjectRoles } from "@/constants/project";
// constants
// components
import { EPageAccess } from "@/constants/page";
import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
export const PagesHeader = observer(() => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, type: pageType } = router.query;
// store hooks
const { toggleCreatePageModal } = useCommandPalette();
const {
@ -61,7 +61,10 @@ export const PagesHeader = observer(() => {
size="sm"
onClick={() => {
setTrackElement("Project pages page");
toggleCreatePageModal(true);
toggleCreatePageModal({
isOpen: true,
pageAccess: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
});
}}
>
Add Page

7
web/components/pages/dropdowns/quick-actions.tsx
View File

@ -85,12 +85,7 @@ export const PageQuickActions: React.FC<Props> = observer((props) => {
return (
<>
<DeletePageModal
isOpen={deletePageModal}
onClose={() => setDeletePageModal(false)}
pageId={pageId}
projectId={projectId}
/>
<DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} pageId={pageId} />
<ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
<CustomMenu placement="bottom-end" ellipsis closeOnSelect>
{MENU_ITEMS.map((item) => {

4
web/components/pages/header/root.tsx
View File

@ -25,7 +25,7 @@ type Props = {
export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
const { pageType, projectId, workspaceSlug } = props;
// store hooks
const { filters, updateFilters, clearAllFilters } = useProjectPages(projectId);
const { filters, updateFilters, clearAllFilters } = useProjectPages();
const {
workspace: { workspaceMemberIds },
} = useMember();
@ -52,7 +52,7 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
<div className="flex-shrink-0 h-[50px] w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
<PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
<div className="h-full flex items-center gap-2 self-end">
<PageSearchInput projectId={projectId} />
<PageSearchInput />
<PageOrderByDropdown
sortBy={filters.sortBy}
sortKey={filters.sortKey}

2
web/components/pages/list/root.tsx
View File

@ -18,7 +18,7 @@ type TPagesListRoot = {
export const PagesListRoot: FC<TPagesListRoot> = observer((props) => {
const { pageType, projectId, workspaceSlug } = props;
// store hooks
const { getCurrentProjectFilteredPageIds } = useProjectPages(projectId);
const { getCurrentProjectFilteredPageIds } = useProjectPages();
// derived values
const filteredPageIds = getCurrentProjectFilteredPageIds(pageType);

7
web/components/pages/list/search-input.tsx
View File

@ -5,15 +5,12 @@ import { cn } from "@/helpers/common.helper";
import { useProjectPages } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
export type TPageSearchInput = { projectId: string };
export const PageSearchInput: FC<TPageSearchInput> = observer((props) => {
const { projectId } = props;
export const PageSearchInput: FC = observer(() => {
// hooks
const {
filters: { searchQuery },
updateFilters,
} = useProjectPages(projectId);
} = useProjectPages();
// states
const [isSearchOpen, setIsSearchOpen] = useState(false);
// refs

15
web/components/pages/modals/create-page-modal.tsx
View File

@ -1,4 +1,4 @@
import { FC, useState } from "react";
import { FC, useEffect, useState } from "react";
import { useRouter } from "next/router";
// types
import { TPage } from "@plane/types";
@ -15,29 +15,34 @@ type Props = {
workspaceSlug: string;
projectId: string;
isModalOpen: boolean;
pageAccess?: EPageAccess;
handleModalClose: () => void;
redirectionEnabled?: boolean;
};
export const CreatePageModal: FC<Props> = (props) => {
const { workspaceSlug, projectId, isModalOpen, handleModalClose, redirectionEnabled = false } = props;
const { workspaceSlug, projectId, isModalOpen, pageAccess, handleModalClose, redirectionEnabled = false } = props;
// states
const [pageFormData, setPageFormData] = useState<Partial<TPage>>({
id: undefined,
name: "",
access: EPageAccess.PUBLIC,
logo_props: undefined,
});
// router
const router = useRouter();
// store hooks
const { createPage } = useProjectPages(projectId);
const { createPage } = useProjectPages();
const { capturePageEvent } = useEventTracker();
const handlePageFormData = <T extends keyof TPage>(key: T, value: TPage[T]) =>
setPageFormData((prev) => ({ ...prev, [key]: value }));
// update page access in form data when page access from the store changes
useEffect(() => {
setPageFormData((prev) => ({ ...prev, access: pageAccess }));
}, [pageAccess]);
const handleStateClear = () => {
setPageFormData({ id: undefined, name: "", access: EPageAccess.PUBLIC });
setPageFormData({ id: undefined, name: "", access: pageAccess });
handleModalClose();
};

5
web/components/pages/modals/delete-page-modal.tsx
View File

@ -13,15 +13,14 @@ type TConfirmPageDeletionProps = {
isOpen: boolean;
onClose: () => void;
pageId: string;
projectId: string;
};
export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((props) => {
const { pageId, projectId, isOpen, onClose } = props;
const { pageId, isOpen, onClose } = props;
// states
const [isDeleting, setIsDeleting] = useState(false);
// store hooks
const { removePage } = useProjectPages(projectId);
const { removePage } = useProjectPages();
const { capturePageEvent } = useEventTracker();
const page = usePage(pageId);

23
web/components/pages/pages-list-main-content.tsx
View File

@ -8,6 +8,7 @@ import { PageLoader } from "@/components/pages";
// constants
import { EmptyStateType } from "@/constants/empty-state";
// hooks
import { EPageAccess } from "@/constants/page";
import { useCommandPalette, useProjectPages } from "@/hooks/store";
// assets
import AllFiltersImage from "public/empty-state/pages/all-filters.svg";
@ -16,13 +17,13 @@ import NameFilterImage from "public/empty-state/pages/name-filter.svg";
type Props = {
children: React.ReactNode;
pageType: TPageNavigationTabs;
projectId: string;
};
export const PagesListMainContent: React.FC<Props> = observer((props) => {
const { children, pageType, projectId } = props;
const { children, pageType } = props;
// store hooks
const { loader, getCurrentProjectFilteredPageIds, getCurrentProjectPageIds, filters } = useProjectPages(projectId);
const { loader, isAnyPageAvailable, getCurrentProjectFilteredPageIds, getCurrentProjectPageIds, filters } =
useProjectPages();
const { toggleCreatePageModal } = useCommandPalette();
// derived values
const pageIds = getCurrentProjectPageIds(pageType);
@ -30,13 +31,23 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
if (loader === "init-loader") return <PageLoader />;
// if no pages exist in the active page type
if (pageIds?.length === 0) {
if (!isAnyPageAvailable || pageIds?.length === 0) {
if (!isAnyPageAvailable) {
return (
<EmptyState
type={EmptyStateType.PROJECT_PAGE}
primaryButtonOnClick={() => {
toggleCreatePageModal({ isOpen: true });
}}
/>
);
}
if (pageType === "public")
return (
<EmptyState
type={EmptyStateType.PROJECT_PAGE_PUBLIC}
primaryButtonOnClick={() => {
toggleCreatePageModal(true);
toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PUBLIC });
}}
/>
);
@ -45,7 +56,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
<EmptyState
type={EmptyStateType.PROJECT_PAGE_PRIVATE}
primaryButtonOnClick={() => {
toggleCreatePageModal(true);
toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PRIVATE });
}}
/>
);

10
web/components/pages/pages-list-view.tsx
View File

@ -16,7 +16,7 @@ type TPageView = {
export const PagesListView: React.FC<TPageView> = observer((props) => {
const { workspaceSlug, projectId, pageType, children } = props;
// store hooks
const { getAllPages } = useProjectPages(projectId);
const { isAnyPageAvailable, getAllPages } = useProjectPages();
// fetching pages list
useSWR(projectId ? `PROJECT_PAGES_${projectId}` : null, projectId ? () => getAllPages(pageType) : null);
@ -24,10 +24,10 @@ export const PagesListView: React.FC<TPageView> = observer((props) => {
return (
<div className="relative w-full h-full overflow-hidden flex flex-col">
{/* tab header */}
<PagesListHeaderRoot pageType={pageType} projectId={projectId} workspaceSlug={workspaceSlug} />
<PagesListMainContent pageType={pageType} projectId={projectId}>
{children}
</PagesListMainContent>
{isAnyPageAvailable && (
<PagesListHeaderRoot pageType={pageType} projectId={projectId} workspaceSlug={workspaceSlug} />
)}
<PagesListMainContent pageType={pageType}>{children}</PagesListMainContent>
</div>
);
});

5
web/constants/empty-state.ts
View File

@ -486,11 +486,6 @@ const emptyStateDetails = {
path: "/empty-state/onboarding/pages",
primaryButton: {
text: "Create your first page",
comicBox: {
title: "A page can be a doc or a doc of docs.",
description:
"We wrote Nikhil and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
},
},
accessType: "project",
access: EUserProjectRoles.MEMBER,

10
web/constants/page.ts
View File

@ -32,3 +32,13 @@ export const PAGE_SORT_BY_OPTIONS: {
{ key: "asc", label: "Ascending" },
{ key: "desc", label: "Descending" },
];
export type TCreatePageModal = {
isOpen: boolean;
pageAccess?: EPageAccess;
}
export const DEFAULT_CREATE_PAGE_MODAL_DATA: TCreatePageModal = {
isOpen: false,
pageAccess: EPageAccess.PUBLIC,
};

5
web/hooks/store/pages/use-project-page.ts
View File

@ -4,11 +4,8 @@ import { StoreContext } from "@/lib/store-context";
// mobx store
import { IProjectPageStore } from "@/store/pages/project-page.store";
export const useProjectPages = (projectId: string | undefined): IProjectPageStore => {
export const useProjectPages = (): IProjectPageStore => {
const context = useContext(StoreContext);
if (context === undefined) throw new Error("useProjectPage must be used within StoreProvider");
if (!projectId) throw new Error("projectId must be passed as a property");
return context.projectPages;
};

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

@ -36,7 +36,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, pageId } = router.query;
// store hooks
const { createPage, getPageById } = useProjectPages(projectId?.toString() ?? "");
const { createPage, getPageById } = useProjectPages();
const page = usePage(pageId?.toString() ?? "");
const { access, description_html, id, name } = page;
// editor markings hook

30
web/store/command-palette.store.ts
View File

@ -1,6 +1,8 @@
import { observable, action, makeObservable, computed } from "mobx";
// services
import { EIssuesStoreType, TCreateModalStoreTypes } from "@/constants/issue";
// types / constants
import { DEFAULT_CREATE_PAGE_MODAL_DATA, EPageAccess, TCreatePageModal } from "@/constants/page";
export interface ModalData {
store: EIssuesStoreType;
@ -16,7 +18,7 @@ export interface ICommandPaletteStore {
isCreateCycleModalOpen: boolean;
isCreateModuleModalOpen: boolean;
isCreateViewModalOpen: boolean;
isCreatePageModalOpen: boolean;
createPageModal: TCreatePageModal;
isCreateIssueModalOpen: boolean;
isDeleteIssueModalOpen: boolean;
isBulkDeleteIssueModalOpen: boolean;
@ -28,7 +30,7 @@ export interface ICommandPaletteStore {
toggleCreateProjectModal: (value?: boolean) => void;
toggleCreateCycleModal: (value?: boolean) => void;
toggleCreateViewModal: (value?: boolean) => void;
toggleCreatePageModal: (value?: boolean) => void;
toggleCreatePageModal: (value?: TCreatePageModal) => void;
toggleCreateIssueModal: (value?: boolean, storeType?: TCreateModalStoreTypes) => void;
toggleCreateModuleModal: (value?: boolean) => void;
toggleDeleteIssueModal: (value?: boolean) => void;
@ -45,10 +47,10 @@ export class CommandPaletteStore implements ICommandPaletteStore {
isCreateCycleModalOpen: boolean = false;
isCreateModuleModalOpen: boolean = false;
isCreateViewModalOpen: boolean = false;
isCreatePageModalOpen: boolean = false;
isCreateIssueModalOpen: boolean = false;
isDeleteIssueModalOpen: boolean = false;
isBulkDeleteIssueModalOpen: boolean = false;
createPageModal: TCreatePageModal = DEFAULT_CREATE_PAGE_MODAL_DATA;
createIssueStoreType: TCreateModalStoreTypes = EIssuesStoreType.PROJECT;
@ -61,10 +63,10 @@ export class CommandPaletteStore implements ICommandPaletteStore {
isCreateCycleModalOpen: observable.ref,
isCreateModuleModalOpen: observable.ref,
isCreateViewModalOpen: observable.ref,
isCreatePageModalOpen: observable.ref,
isCreateIssueModalOpen: observable.ref,
isDeleteIssueModalOpen: observable.ref,
isBulkDeleteIssueModalOpen: observable.ref,
createPageModal: observable,
// computed
isAnyModalOpen: computed,
// projectPages: computed,
@ -90,13 +92,13 @@ export class CommandPaletteStore implements ICommandPaletteStore {
return Boolean(
this.isCreateIssueModalOpen ||
this.isCreateCycleModalOpen ||
this.isCreatePageModalOpen ||
this.isCreateProjectModalOpen ||
this.isCreateModuleModalOpen ||
this.isCreateViewModalOpen ||
this.isShortcutModalOpen ||
this.isBulkDeleteIssueModalOpen ||
this.isDeleteIssueModalOpen
this.isDeleteIssueModalOpen ||
this.createPageModal.isOpen
);
}
@ -166,15 +168,21 @@ export class CommandPaletteStore implements ICommandPaletteStore {
};
/**
* Toggles the create page modal
* Toggles the create page modal along with the page access
* @param value
* @returns
*/
toggleCreatePageModal = (value?: boolean) => {
if (value !== undefined) {
this.isCreatePageModalOpen = value;
toggleCreatePageModal = (value?: TCreatePageModal) => {
if (value) {
this.createPageModal = {
isOpen: value.isOpen,
pageAccess: value.pageAccess || EPageAccess.PUBLIC,
};
} else {
this.isCreatePageModalOpen = !this.isCreatePageModalOpen;
this.createPageModal = {
isOpen: !this.createPageModal.isOpen,
pageAccess: EPageAccess.PUBLIC,
};
}
};

10
web/store/pages/project-page.store.ts
View File

@ -22,6 +22,8 @@ export interface IProjectPageStore {
data: Record<string, IPageStore>; // pageId => PageStore
error: TError | undefined;
filters: TPageFilters;
// computed
isAnyPageAvailable: boolean;
// helper actions
getCurrentProjectPageIds: (pageType: TPageNavigationTabs) => string[] | undefined;
getCurrentProjectFilteredPageIds: (pageType: TPageNavigationTabs) => string[] | undefined;
@ -76,6 +78,14 @@ export class ProjectPageStore implements IProjectPageStore {
);
}
/**
* @description check if any page is available
*/
get isAnyPageAvailable() {
if (this.loader) return true;
return Object.keys(this.data).length > 0;
}
/**
* @description get the current project page ids based on the pageType
* @param {TPageNavigationTabs} pageType