chore: empty state action button validation (#3094)

web/components/issues/issue-layouts/empty-states/project.tsx

@@ -4,6 +4,8 @@ import { PlusIcon } from "lucide-react";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { NewEmptyState } from "components/common/new-empty-state";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 // assets
 import emptyIssue from "public/empty-state/empty_issues.webp";
 import { EProjectStore } from "store/command-palette.store";
@@ -12,8 +14,11 @@ export const ProjectEmptyState: React.FC = observer(() => {
   const {
     commandPalette: commandPaletteStore,
     trackEvent: { setTrackElement },
+    user: { currentProjectRole },
   } = useMobxStore();
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <div className="grid h-full w-full place-items-center">
       <NewEmptyState
@@ -34,6 +39,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
             commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
           },
         }}
+        disabled={!isEditingAllowed}
       />
     </div>
   );

web/components/modules/modules-list-view.tsx

@@ -9,6 +9,8 @@ import useLocalStorage from "hooks/use-local-storage";
 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
 // ui
 import { Loader } from "@plane/ui";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 // assets
 import emptyModule from "public/empty-state/empty_modules.webp";
 import { NewEmptyState } from "components/common/new-empty-state";
@@ -17,12 +19,18 @@ export const ModulesListView: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, peekModule } = router.query;
 
-  const { module: moduleStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const {
+    module: moduleStore,
+    commandPalette: commandPaletteStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
 
   const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
 
   const modulesList = moduleStore.projectModules;
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   if (!modulesList)
     return (
       <Loader className="grid grid-cols-3 gap-4 p-8">
@@ -93,6 +101,7 @@ export const ModulesListView: React.FC = observer(() => {
             text: "Build your first module",
             onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
           }}
+          disabled={!isEditingAllowed}
         />
       )}
     </>

web/components/page-views/workspace-dashboard.tsx

@@ -8,6 +8,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { TourRoot } from "components/onboarding";
 import { UserGreetingsView } from "components/user";
 import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 // images
 import { NewEmptyState } from "components/common/new-empty-state";
 import emptyProject from "public/empty-state/dashboard_empty_project.webp";
@@ -36,6 +38,8 @@ export const WorkspaceDashboardView = observer(() => {
     workspaceSlug ? () => userStore.fetchUserDashboardInfo(workspaceSlug.toString(), month) : null
   );
 
+  const isEditingAllowed = !!userStore.currentProjectRole && userStore.currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   const handleTourCompleted = () => {
     userStore
       .updateTourCompleted()
@@ -96,6 +100,7 @@ export const WorkspaceDashboardView = observer(() => {
                   commandPaletteStore.toggleCreateProjectModal(true);
                 },
               }}
+              disabled={!isEditingAllowed}
             />
           )
         ) : null}

web/components/pages/pages-list/list-view.tsx

@@ -30,18 +30,7 @@ export const PagesListView: FC<IPagesListView> = observer(({ pages }) => {
   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),
-        },
-      }
-    : {};
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
     <>
@@ -69,7 +58,12 @@ export const PagesListView: FC<IPagesListView> = observer(({ pages }) => {
                   "We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
                 direction: "right",
               }}
-              {...emptyStatePrimaryButton}
+              primaryButton={{
+                icon: <Plus className="h-4 w-4" />,
+                text: "Create your first page",
+                onClick: () => toggleCreatePageModal(true),
+              }}
+              disabled={!isEditingAllowed}
             />
           )}
         </div>

web/components/pages/pages-list/recent-pages-list.tsx

@@ -12,16 +12,21 @@ import { Loader } from "@plane/ui";
 import emptyPage from "public/empty-state/empty_page.png";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const RecentPagesList: FC = observer(() => {
   // store
   const {
     commandPalette: commandPaletteStore,
     page: { recentProjectPages },
+    user: { currentProjectRole },
   } = useMobxStore();
 
   const isEmpty = recentProjectPages && Object.values(recentProjectPages).every((value) => value.length === 0);
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   if (!recentProjectPages) {
     return (
       <Loader className="space-y-4">
@@ -66,6 +71,7 @@ export const RecentPagesList: FC = observer(() => {
               text: "Create your first page",
               onClick: () => commandPaletteStore.toggleCreatePageModal(true),
             }}
+            disabled={!isEditingAllowed}
           />
         </>
       )}

web/components/project/card-list.tsx

@@ -9,6 +9,8 @@ import { Loader } from "@plane/ui";
 import emptyProject from "public/empty-state/empty_project.webp";
 // icons
 import { NewEmptyState } from "components/common/new-empty-state";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export interface IProjectCardList {
   workspaceSlug: string;
@@ -21,10 +23,13 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
     project: projectStore,
     commandPalette: commandPaletteStore,
     trackEvent: { setTrackElement },
+    user: { currentProjectRole },
   } = useMobxStore();
 
   const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   if (!projects) {
     return (
       <Loader className="grid grid-cols-3 gap-4">
@@ -69,6 +74,7 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
               commandPaletteStore.toggleCreateProjectModal(true);
             },
           }}
+          disabled={!isEditingAllowed}
         />
       )}
     </>

web/components/views/views-list.tsx

@@ -13,6 +13,8 @@ import { Input, Loader } from "@plane/ui";
 import emptyView from "public/empty-state/empty_view.webp";
 // icons
 import { Plus, Search } from "lucide-react";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const ProjectViewsList = observer(() => {
   const [query, setQuery] = useState("");
@@ -20,10 +22,16 @@ export const ProjectViewsList = observer(() => {
   const router = useRouter();
   const { projectId } = router.query;
 
-  const { projectViews: projectViewsStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const {
+    projectViews: projectViewsStore,
+    commandPalette: commandPaletteStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
 
   const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   if (!viewsList)
     return (
       <Loader className="space-y-4 p-4">
@@ -73,6 +81,7 @@ export const ProjectViewsList = observer(() => {
             text: "Build your first view",
             onClick: () => commandPaletteStore.toggleCreateViewModal(true),
           }}
+          disabled={!isEditingAllowed}
         />
       )}
     </>

web/pages/[workspaceSlug]/analytics.tsx

@@ -15,6 +15,7 @@ import { Plus } from "lucide-react";
 import emptyAnalytics from "public/empty-state/empty_analytics.webp";
 // constants
 import { ANALYTICS_TABS } from "constants/analytics";
+import { EUserWorkspaceRoles } from "constants/workspace";
 // type
 import { NextPageWithLayout } from "types/app";
 
@@ -24,8 +25,11 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
     project: { workspaceProjects },
     commandPalette: { toggleCreateProjectModal },
     trackEvent: { setTrackElement },
+    user: { currentProjectRole },
   } = useMobxStore();
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       {workspaceProjects && workspaceProjects.length > 0 ? (
@@ -77,6 +81,7 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
                 toggleCreateProjectModal(true);
               },
             }}
+            disabled={!isEditingAllowed}
           />
         </>
       )}

web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -19,6 +19,7 @@ import { TCycleView, TCycleLayout } from "types";
 import { NextPageWithLayout } from "types/app";
 // constants
 import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle";
+import { EUserWorkspaceRoles } from "constants/workspace";
 // lib cookie
 import { setLocalStorage, getLocalStorage } from "lib/local-storage";
 import { NewEmptyState } from "components/common/new-empty-state";
@@ -27,7 +28,10 @@ import { NewEmptyState } from "components/common/new-empty-state";
 const ProjectCyclesPage: NextPageWithLayout = observer(() => {
   const [createModal, setCreateModal] = useState(false);
   // store
-  const { cycle: cycleStore } = useMobxStore();
+  const {
+    cycle: cycleStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
   const { projectCycles } = cycleStore;
   // router
   const router = useRouter();
@@ -75,6 +79,8 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
   const cycleLayout = cycleStore?.cycleLayout;
   const totalCycles = projectCycles?.length ?? 0;
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   if (!workspaceSlug || !projectId) return null;
 
   return (
@@ -104,6 +110,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
                 setCreateModal(true);
               },
             }}
+            disabled={!isEditingAllowed}
           />
         </div>
       ) : (