[WEB-904] chore: feature validation empty state (#4145)

* chore: disable feature empty state added

* chore: disable feature empty state updated

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

@@ -35,7 +35,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
   // store hooks
   const { setTrackElement } = useEventTracker();
   const { currentProjectCycleIds, loader } = useCycle();
-  const { getProjectById } = useProject();
+  const { getProjectById, currentProjectDetails } = useProject();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
@@ -60,7 +60,18 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
     updateFilters(projectId.toString(), { [key]: newValues });
   };
 
-  if (!workspaceSlug || !projectId) return null;
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to cycle
+  if (currentProjectDetails?.cycle_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <EmptyState
+          type={EmptyStateType.DISABLED_PROJECT_CYCLE}
+          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        />
+      </div>
+    );
 
   if (loader)
     return (

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

@@ -5,11 +5,13 @@ import { TModuleFilters } from "@plane/types";
 // layouts
 // components
 import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
 import { ModulesListHeader } from "@/components/headers";
 import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
 // types
 // hooks
 import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header";
+import { EmptyStateType } from "@/constants/empty-state";
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { useModuleFilter, useProject } from "@/hooks/store";
 import { AppLayout } from "@/layouts/app-layout";
@@ -17,9 +19,9 @@ import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectModulesPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
-  const { projectId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
   // store
-  const { getProjectById } = useProject();
+  const { getProjectById, currentProjectDetails } = useProject();
   const { currentProjectFilters, clearAllFilters, updateFilters } = useModuleFilter();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
@@ -38,6 +40,19 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => {
     [currentProjectFilters, projectId, updateFilters]
   );
 
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to
+  if (currentProjectDetails?.module_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <EmptyState
+          type={EmptyStateType.DISABLED_PROJECT_MODULE}
+          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        />
+      </div>
+    );
+
   return (
     <>
       <PageHead title={pageTitle} />

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

@@ -56,7 +56,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
     commandPalette: { toggleCreatePageModal },
   } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const { getProjectById } = useProject();
+  const { getProjectById, currentProjectDetails } = useProject();
   const { fetchProjectPages, fetchArchivedProjectPages, loader, archivedPageLoader, projectPageIds, archivedPageIds } =
     useProjectPages();
   // hooks
@@ -75,6 +75,19 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
     workspaceSlug && projectId ? () => fetchArchivedProjectPages(workspaceSlug.toString(), projectId.toString()) : null
   );
 
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to
+  if (currentProjectDetails?.page_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <EmptyState
+          type={EmptyStateType.DISABLED_PROJECT_PAGE}
+          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        />
+      </div>
+    );
+
   const currentTabValue = (tab: string | null) => {
     switch (tab) {
       case "Recent":

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

@@ -3,8 +3,11 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // components
 import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
 import { ProjectViewsHeader } from "@/components/headers";
 import { ProjectViewsList } from "@/components/views";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import { useProject } from "@/hooks/store";
 // layouts
@@ -15,13 +18,26 @@ import { NextPageWithLayout } from "@/lib/types";
 const ProjectViewsPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
-  const { projectId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
   // store
-  const { getProjectById } = useProject();
+  const { getProjectById, currentProjectDetails } = useProject();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Views` : undefined;
 
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to
+  if (currentProjectDetails?.issue_views_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <EmptyState
+          type={EmptyStateType.DISABLED_PROJECT_VIEW}
+          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        />
+      </div>
+    );
+
   return (
     <>
       <PageHead title={pageTitle} />