plane/web/components/pages/pages-list/list-view.tsx
Aaryan Khandelwal d204cc7d6c
chore: added authorization to pages (#3006)
* chore: updated pages authorization

* chore: updated pages empty state image
2023-12-06 19:13:42 +05:30

86 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { FC } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { PagesListItem } from "./list-item";
import { NewEmptyState } from "components/common/new-empty-state";
// ui
import { Loader } from "@plane/ui";
// images
import emptyPage from "public/empty-state/empty_page.png";
// types
import { IPage } from "types";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
type IPagesListView = {
pages: IPage[];
};
export const PagesListView: FC<IPagesListView> = observer(({ pages }) => {
// store
const {
user: { currentProjectRole },
commandPalette: { toggleCreatePageModal },
} = useMobxStore();
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const canUserCreatePage =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
const emptyStatePrimaryButton = canUserCreatePage
? {
primaryButton: {
icon: <Plus className="h-4 w-4" />,
text: "Create your first page",
onClick: () => toggleCreatePageModal(true),
},
}
: {};
return (
<>
{pages && workspaceSlug && projectId ? (
<div className="space-y-4 h-full overflow-y-auto">
{pages.length > 0 ? (
<ul role="list" className="divide-y divide-custom-border-200">
{pages.map((page) => (
<PagesListItem
key={page.id}
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
page={page}
/>
))}
</ul>
) : (
<NewEmptyState
title="Write a note, a doc, or a full knowledge base. Get Galileo, Planes AI assistant, to help you get started."
description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your projects context. To make short work of any doc, invoke Galileo, Planes AI, with a shortcut or the click of a button."
image={emptyPage}
comicBox={{
title: "A page can be a doc or a doc of docs.",
description:
"We wrote Parth and Meeras love story. You could write your projects mission, goals, and eventual vision.",
direction: "right",
}}
{...emptyStatePrimaryButton}
/>
)}
</div>
) : (
<Loader className="space-y-4">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</>
);
});