From 10efd8d1d92f02470fa3cb5a3834fccebe18e74c Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 8 May 2024 13:43:08 +0530
Subject: [PATCH] [WEB-1236] chore: add `Create page` button to public/ private
 page empty state. (#4401)

---
 .../pages/pages-list-main-content.tsx         | 23 ++++++++++++++++---
 web/constants/empty-state.ts                  | 10 ++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/components/pages/pages-list-main-content.tsx b/web/components/pages/pages-list-main-content.tsx
index 60e11dd8c..ae01085d6 100644
--- a/web/components/pages/pages-list-main-content.tsx
+++ b/web/components/pages/pages-list-main-content.tsx
@@ -8,7 +8,7 @@ import { PageLoader } from "@/components/pages";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 // hooks
-import { useProjectPages } from "@/hooks/store";
+import { useApplication, useProjectPages } from "@/hooks/store";
 // assets
 import AllFiltersImage from "public/empty-state/pages/all-filters.svg";
 import NameFilterImage from "public/empty-state/pages/name-filter.svg";
@@ -23,6 +23,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
   const { children, pageType, projectId } = props;
   // store hooks
   const { loader, getCurrentProjectFilteredPageIds, getCurrentProjectPageIds, filters } = useProjectPages(projectId);
+  const { commandPalette: commandPaletteStore } = useApplication();
   // derived values
   const pageIds = getCurrentProjectPageIds(pageType);
   const filteredPageIds = getCurrentProjectFilteredPageIds(pageType);
@@ -30,8 +31,24 @@ 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 (pageType === "public") return <EmptyState type={EmptyStateType.PROJECT_PAGE_PUBLIC} />;
-    if (pageType === "private") return <EmptyState type={EmptyStateType.PROJECT_PAGE_PRIVATE} />;
+    if (pageType === "public")
+      return (
+        <EmptyState
+          type={EmptyStateType.PROJECT_PAGE_PUBLIC}
+          primaryButtonOnClick={() => {
+            commandPaletteStore.toggleCreatePageModal(true);
+          }}
+        />
+      );
+    if (pageType === "private")
+      return (
+        <EmptyState
+          type={EmptyStateType.PROJECT_PAGE_PRIVATE}
+          primaryButtonOnClick={() => {
+            commandPaletteStore.toggleCreatePageModal(true);
+          }}
+        />
+      );
     if (pageType === "archived") return <EmptyState type={EmptyStateType.PROJECT_PAGE_ARCHIVED} />;
   }
   // if no pages match the filter criteria
diff --git a/web/constants/empty-state.ts b/web/constants/empty-state.ts
index d62c8808e..9ca6f4edb 100644
--- a/web/constants/empty-state.ts
+++ b/web/constants/empty-state.ts
@@ -500,12 +500,22 @@ const emptyStateDetails = {
     title: "No private pages yet",
     description: "Keep your private thoughts here. When you're ready to share, the team's just a click away.",
     path: "/empty-state/pages/private",
+    primaryButton: {
+      text: "Create your first page",
+    },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
   [EmptyStateType.PROJECT_PAGE_PUBLIC]: {
     key: EmptyStateType.PROJECT_PAGE_PUBLIC,
     title: "No public pages yet",
     description: "See pages shared with everyone in your project right here.",
     path: "/empty-state/pages/public",
+    primaryButton: {
+      text: "Create your first page",
+    },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
   [EmptyStateType.PROJECT_PAGE_ARCHIVED]: {
     key: EmptyStateType.PROJECT_PAGE_ARCHIVED,