[WEB-2126] chore: guest and viewer role permission (#5347)

* chore: user store code refactor

* chore: general unauthorized screen asset added

* chore: workspace setting sidebar options updated for guest and viewer

* chore: NotAuthorizedView component code updated

* chore: project setting layout code refactor

* chore: workspace setting members and exports page permission validation added

* chore: workspace members and exports settings page improvement

* chore: project invite modal updated

* chore: workspace setting unauthorized access empty state

* chore: workspace setting unauthorized access empty state

* chore: project settings sidebar permission updated

* fix: project settings user role permission updated

* chore: app sidebar role permission validation updated

* chore: app sidebar role permission validation

* chore: disabled page empty state validation

* chore: app sidebar add project improvement

* chore: guest role changes

* fix: user favorite

* chore: changed pages permission

* chore: guest role changes

* fix: app sidebar project item permission

* fix: project setting empty state flicker

* fix: workspace setting empty state flicker

* chore: granted notification permission to viewer

* chore: project invite and edit validation updated

* chore: favorite validation added for guest and viewer role

* chore: create view validation updated

* chore: views permission changes

* chore: create view empty state validation updated

* chore: created ENUM for permissions

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx

@@ -6,7 +6,10 @@ import { useParams, useSearchParams } from "next/navigation";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
 import { PagesListRoot, PagesListView } from "@/components/pages";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import { useProject } from "@/hooks/store";
 
@@ -16,7 +19,7 @@ const ProjectPagesPage = observer(() => {
   const type = searchParams.get("type");
   const { workspaceSlug, projectId } = useParams();
   // store hooks
-  const { getProjectById } = useProject();
+  const { getProjectById, currentProjectDetails } = useProject();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Pages` : undefined;
@@ -29,6 +32,17 @@ const ProjectPagesPage = observer(() => {
   };
 
   if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to cycle
+  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>
+    );
   return (
     <>
       <PageHead title={pageTitle} />

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx

@@ -7,10 +7,9 @@ import { IProject } from "@plane/types";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { NotAuthorizedView } from "@/components/auth-screens";
 import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
 import { PageHead } from "@/components/core";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useProject, useUser } from "@/hooks/store";
 
@@ -19,6 +18,7 @@ const AutomationSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const {
+    canPerformProjectAdminActions,
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails: projectDetails, updateProject } = useProject();
@@ -36,13 +36,16 @@ const AutomationSettingsPage = observer(() => {
   };
 
   // derived values
-  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
   const pageTitle = projectDetails?.name ? `${projectDetails?.name} - Automations` : undefined;
 
+  if (currentProjectRole && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView />;
+  }
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
+      <section className={`w-full overflow-y-auto py-8 pr-9 ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
         <div className="flex items-center border-b border-custom-border-100 py-3.5">
           <h3 className="text-xl font-medium">Automations</h3>
         </div>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx

@@ -3,30 +3,40 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { EstimateRoot } from "@/components/estimates";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useUser, useProject } from "@/hooks/store";
 
 const EstimatesSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   const {
+    canPerformProjectAdminActions,
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
 
   // derived values
-  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Estimates` : undefined;
 
   if (!workspaceSlug || !projectId) return <></>;
+
+  if (currentProjectRole && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView />;
+  }
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "pointer-events-none opacity-60"}`}>
-        <EstimateRoot workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} isAdmin={isAdmin} />
+      <div
+        className={`w-full overflow-y-auto py-8 pr-9 ${canPerformProjectAdminActions ? "" : "pointer-events-none opacity-60"}`}
+      >
+        <EstimateRoot
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          isAdmin={canPerformProjectAdminActions}
+        />
       </div>
     </>
   );

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx

@@ -2,12 +2,10 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import useSWR from "swr";
 // components
+import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectFeaturesList } from "@/components/project";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useProject, useUser } from "@/hooks/store";
 
@@ -15,28 +13,27 @@ const FeaturesSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store
   const {
-    membership: { fetchUserProjectInfo },
+    canPerformProjectAdminActions,
+    membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
-  // fetch the project details
-  const { data: memberDetails } = useSWR(
-    workspaceSlug && projectId ? `PROJECT_MEMBERS_ME_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
-  );
   // derived values
-  const isAdmin = memberDetails?.role === EUserProjectRoles.ADMIN;
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Features` : undefined;
 
   if (!workspaceSlug || !projectId) return null;
 
+  if (currentProjectRole && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView />;
+  }
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
+      <section className={`w-full overflow-y-auto py-8 pr-9 ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
         <ProjectFeaturesList
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}
-          isAdmin={isAdmin}
+          isAdmin={canPerformProjectAdminActions}
         />
       </section>
     </>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx

@@ -24,7 +24,7 @@ export const ProjectSettingHeader: FC = observer(() => {
   } = useUser();
   const { currentProjectDetails, loader } = useProject();
 
-  if (currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER) return null;
+  const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -70,14 +70,17 @@ export const ProjectSettingHeader: FC = observer(() => {
           placement="bottom-start"
           closeOnSelect
         >
-          {PROJECT_SETTINGS_LINKS.map((item) => (
-            <CustomMenu.MenuItem
-              key={item.key}
-              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}
-            >
-              {item.label}
-            </CustomMenu.MenuItem>
-          ))}
+          {PROJECT_SETTINGS_LINKS.map(
+            (item) =>
+              projectMemberInfo >= item.access && (
+                <CustomMenu.MenuItem
+                  key={item.key}
+                  onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}
+                >
+                  {item.label}
+                </CustomMenu.MenuItem>
+              )
+          )}
         </CustomMenu>
       </div>
     </div>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx

@@ -5,13 +5,19 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 // components
+import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectSettingsLabelList } from "@/components/labels";
 // hooks
-import { useProject } from "@/hooks/store";
+import { useProject, useUser } from "@/hooks/store";
 
 const LabelsSettingsPage = observer(() => {
+  // store hooks
   const { currentProjectDetails } = useProject();
+  const {
+    canPerformProjectMemberActions,
+    membership: { currentProjectRole },
+  } = useUser();
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Labels` : undefined;
 
   const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
@@ -29,6 +35,10 @@ const LabelsSettingsPage = observer(() => {
     );
   }, [scrollableContainerRef?.current]);
 
+  if (currentProjectRole && !canPerformProjectMemberActions) {
+    return <NotAuthorizedView section="settings" isProjectView />;
+  }
+
   return (
     <>
       <PageHead title={pageTitle} />

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx

@@ -1,18 +1,8 @@
 "use client";
 
 import { FC, ReactNode } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-// ui
-import { Button, LayersIcon } from "@plane/ui";
 // components
-import { NotAuthorizedView } from "@/components/auth-screens";
 import { AppHeader, ContentWrapper } from "@/components/core";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
-// hooks
-import { useUser } from "@/hooks/store";
 // local components
 import { ProjectSettingHeader } from "./header";
 import { ProjectSettingsSidebar } from "./sidebar";
@@ -21,33 +11,8 @@ export interface IProjectSettingLayout {
   children: ReactNode;
 }
 
-const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
+const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
   const { children } = props;
-  // router
-  const { workspaceSlug, projectId } = useParams();
-  // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-
-  const restrictViewSettings = currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER;
-
-  if (restrictViewSettings) {
-    return (
-      <NotAuthorizedView
-        type="project"
-        actionButton={
-          //TODO: Create a new component called Button Link to handle such scenarios
-          <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
-            <Button variant="primary" size="md" prependIcon={<LayersIcon />}>
-              Go to issues
-            </Button>
-          </Link>
-        }
-      />
-    );
-  }
-
   return (
     <>
       <AppHeader header={<ProjectSettingHeader />} />
@@ -63,6 +28,6 @@ const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
       </ContentWrapper>
     </>
   );
-});
+};
 
 export default ProjectSettingLayout;

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx

@@ -2,17 +2,26 @@
 
 import { observer } from "mobx-react";
 // components
+import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectMemberList, ProjectSettingsMemberDefaults } from "@/components/project";
 // hooks
-import { useProject } from "@/hooks/store";
+import { useProject, useUser } from "@/hooks/store";
 
 const MembersSettingsPage = observer(() => {
   // store
   const { currentProjectDetails } = useProject();
+  const {
+    canPerformProjectViewerActions,
+    membership: { currentProjectRole },
+  } = useUser();
   // derived values
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Members` : undefined;
 
+  if (currentProjectRole && !canPerformProjectViewerActions) {
+    return <NotAuthorizedView section="settings" isProjectView />;
+  }
+
   return (
     <>
       <PageHead title={pageTitle} />

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 // ui
@@ -12,7 +13,7 @@ import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
 // hooks
 import { useUser } from "@/hooks/store";
 
-export const ProjectSettingsSidebar = () => {
+export const ProjectSettingsSidebar = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
   // mobx store
@@ -60,4 +61,4 @@ export const ProjectSettingsSidebar = () => {
       </div>
     </div>
   );
-};
+});

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx

@@ -3,18 +3,27 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectStateRoot } from "@/components/project-states";
 // hook
-import { useProject } from "@/hooks/store";
+import { useProject, useUser } from "@/hooks/store";
 
 const StatesSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store
   const { currentProjectDetails } = useProject();
+  const {
+    canPerformProjectMemberActions,
+    membership: { currentProjectRole },
+  } = useUser();
   // derived values
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
 
+  if (currentProjectRole && !canPerformProjectMemberActions) {
+    return <NotAuthorizedView section="settings" isProjectView />;
+  }
+
   return (
     <>
       <PageHead title={pageTitle} />

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx

@@ -12,21 +12,17 @@ import { BreadcrumbLink, Logo } from "@/components/common";
 import { ViewListHeader } from "@/components/views";
 import { ViewAppliedFiltersList } from "@/components/views/applied-filters";
 // constants
-import { EUserProjectRoles } from "@/constants/project";
 import { EViewAccess } from "@/constants/views";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useCommandPalette, useProject, useProjectView, useUser } from "@/hooks/store";
+import { useCommandPalette, useProject, useProjectView } from "@/hooks/store";
 
 export const ProjectViewsHeader = observer(() => {
   // router
   const { workspaceSlug } = useParams();
   // store hooks
   const { toggleCreateViewModal } = useCommandPalette();
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
   const { currentProjectDetails, loader } = useProject();
   const { filters, updateFilters, clearAllFilters } = useProjectView();
 
@@ -49,9 +45,6 @@ export const ProjectViewsHeader = observer(() => {
 
   const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
 
-  const canUserCreateView =
-    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
-
   return (
     <>
       <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -83,13 +76,11 @@ export const ProjectViewsHeader = observer(() => {
         </div>
         <div className="flex flex-shrink-0 items-center gap-2">
           <ViewListHeader />
-          {canUserCreateView && (
-            <div>
-              <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
-                Add view
-              </Button>
-            </div>
-          )}
+          <div>
+            <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
+              Add view
+            </Button>
+          </div>
         </div>
       </div>
       {isFiltersApplied && (