[WEB-2357] fix: update and redefine user roles across the platform (#5466)

* chore: removed viewer role

* chore: indentation

* chore: remove viewer role

* chore: handled user permissions in store

* chore: updated the migration file

* chore: updated user permissions store

* chore: removed the owner key

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

* fix: build error

* chore: updated user permissions store and handled the permissions fetch in workspace and project wrappers

* chore: package user enum updated

* chore: user permission updated

* chore: user permission updated

* chore: resolved build errors

* chore: resolved build error

* chore: resolved build errors

* chore: computedFn deep map issue resolved

* chore: added back migration

* chore: added new field in project table

* chore: removed member store in users

* chore: private project for admins

* chore: workspace notification access validation updated

* fix: workspace member edit option

* fix: project intake permission validation updated

* chore: workspace export settings permission updated

* chore: guest_view_all_issues added

* chore: guest_view_all_issues added

* chore: key changed for guest access

* chore: added validation for individual issues

* chore: changed the dashboard issues count

* chore: added new yarn file

* chore: modified yarn file

* chore: project page permission updated

* chore: project page permission updated

* chore: member setting ux updated

* chore: build error

* fix: yarn lock

* fix: build error

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>

web/ce/components/projects/settings/useProjectColumns.tsx

@@ -1,14 +1,13 @@
 import { useState } from "react";
 import { useParams } from "next/navigation";
 import { IWorkspaceMember } from "@plane/types";
-import { EUserProjectRoles } from "@plane/types/src/enums";
 import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
-import { EUserWorkspaceRoles } from "@/constants/workspace";
-import { useUser } from "@/hooks/store";
+import { useUser, useUserPermissions } from "@/hooks/store";
+import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export interface RowData {
   member: IWorkspaceMember;
-  role: EUserWorkspaceRoles;
+  role: EUserPermissions;
 }
 
 export const useProjectColumns = () => {
@@ -17,10 +16,12 @@ export const useProjectColumns = () => {
 
   const { workspaceSlug, projectId } = useParams();
 
-  const {
-    membership: { currentProjectRole },
-    data: currentUser,
-  } = useUser();
+  const { data: currentUser } = useUser();
+  const { allowPermissions, projectUserInfo } = useUserPermissions();
+
+  const currentProjectRole =
+    (projectUserInfo?.[workspaceSlug.toString()]?.[projectId.toString()]?.role as unknown as EUserPermissions) ??
+    EUserPermissions.GUEST;
 
   const getFormattedDate = (dateStr: string) => {
     const date = new Date(dateStr);
@@ -29,7 +30,13 @@ export const useProjectColumns = () => {
     return date.toLocaleDateString("en-US", options);
   };
   // derived values
-  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    projectId.toString()
+  );
+
   const columns = [
     {
       key: "Full Name",

web/ce/components/workspace/settings/useMemberColumns.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { useParams } from "next/navigation";
 import { AccountTypeColumn, NameColumn, RowData } from "@/components/workspace/settings/member-columns";
-import { EUserWorkspaceRoles } from "@/constants/workspace";
-import { useUser } from "@/hooks/store";
+import { useUser, useUserPermissions } from "@/hooks/store";
+import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const useMemberColumns = () => {
   // states
@@ -10,10 +10,8 @@ export const useMemberColumns = () => {
 
   const { workspaceSlug } = useParams();
 
-  const {
-    membership: { currentWorkspaceRole },
-    data: currentUser,
-  } = useUser();
+  const { data: currentUser } = useUser();
+  const { allowPermissions } = useUserPermissions();
 
   const getFormattedDate = (dateStr: string) => {
     const date = new Date(dateStr);
@@ -22,7 +20,8 @@ export const useMemberColumns = () => {
     return date.toLocaleDateString("en-US", options);
   };
 
-  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+  // derived values
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
   const columns = [
     {
@@ -48,13 +47,7 @@ export const useMemberColumns = () => {
     {
       key: "Account Type",
       content: "Account Type",
-      tdRender: (rowData: RowData) => (
-        <AccountTypeColumn
-          rowData={rowData}
-          currentWorkspaceRole={currentWorkspaceRole}
-          workspaceSlug={workspaceSlug as string}
-        />
-      ),
+      tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug as string} />,
     },
 
     {

web/ce/constants/project/settings/tabs.ts

@@ -3,14 +3,14 @@ import { SettingIcon } from "@/components/icons/attachment";
 // types
 import { Props } from "@/components/icons/types";
 // constants
-import { EUserProjectRoles } from "@/constants/project";
+import { EUserPermissions } from "../../user-permissions";
 
 export const PROJECT_SETTINGS = {
   general: {
     key: "general",
     label: "General",
     href: `/settings`,
-    access: EUserProjectRoles.GUEST,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
     Icon: SettingIcon,
   },
@@ -18,7 +18,7 @@ export const PROJECT_SETTINGS = {
     key: "members",
     label: "Members",
     href: `/settings/members`,
-    access: EUserProjectRoles.VIEWER,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
     Icon: SettingIcon,
   },
@@ -26,7 +26,7 @@ export const PROJECT_SETTINGS = {
     key: "features",
     label: "Features",
     href: `/settings/features`,
-    access: EUserProjectRoles.ADMIN,
+    access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features/`,
     Icon: SettingIcon,
   },
@@ -34,7 +34,7 @@ export const PROJECT_SETTINGS = {
     key: "states",
     label: "States",
     href: `/settings/states`,
-    access: EUserProjectRoles.MEMBER,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states/`,
     Icon: SettingIcon,
   },
@@ -42,7 +42,7 @@ export const PROJECT_SETTINGS = {
     key: "labels",
     label: "Labels",
     href: `/settings/labels`,
-    access: EUserProjectRoles.MEMBER,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels/`,
     Icon: SettingIcon,
   },
@@ -50,7 +50,7 @@ export const PROJECT_SETTINGS = {
     key: "estimates",
     label: "Estimates",
     href: `/settings/estimates`,
-    access: EUserProjectRoles.ADMIN,
+    access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates/`,
     Icon: SettingIcon,
   },
@@ -58,7 +58,7 @@ export const PROJECT_SETTINGS = {
     key: "automations",
     label: "Automations",
     href: `/settings/automations`,
-    access: EUserProjectRoles.ADMIN,
+    access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations/`,
     Icon: SettingIcon,
   },
@@ -68,7 +68,7 @@ export const PROJECT_SETTINGS_LINKS: {
   key: string;
   label: string;
   href: string;
-  access: EUserProjectRoles;
+  access: EUserPermissions[];
   highlight: (pathname: string, baseUrl: string) => boolean;
   Icon: React.FC<Props>;
 }[] = [

web/ce/constants/user-permissions/index.ts

@@ -0,0 +1,36 @@
+export enum EUserPermissionsLevel {
+  WORKSPACE = "WORKSPACE",
+  PROJECT = "PROJECT",
+}
+export type TUserPermissionsLevel = EUserPermissionsLevel;
+
+export enum EUserPermissions {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+export type TUserPermissions = EUserPermissions;
+
+export type TUserAllowedPermissionsObject = {
+  create: TUserPermissions[];
+  update: TUserPermissions[];
+  delete: TUserPermissions[];
+  read: TUserPermissions[];
+};
+export type TUserAllowedPermissions = {
+  workspace: {
+    [key: string]: Partial<TUserAllowedPermissionsObject>;
+  };
+  project: {
+    [key: string]: Partial<TUserAllowedPermissionsObject>;
+  };
+};
+
+export const USER_ALLOWED_PERMISSIONS: TUserAllowedPermissions = {
+  workspace: {
+    dashboard: {
+      read: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    },
+  },
+  project: {},
+};

web/ce/constants/workspace.ts

@@ -1,15 +1,15 @@
 // icons
 import { SettingIcon } from "@/components/icons/attachment";
 import { Props } from "@/components/icons/types";
+import { EUserPermissions } from "./user-permissions";
 // constants
-import { EUserWorkspaceRoles } from "@/constants/workspace";
 
 export const WORKSPACE_SETTINGS = {
   general: {
     key: "general",
     label: "General",
     href: `/settings`,
-    access: EUserWorkspaceRoles.GUEST,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
     Icon: SettingIcon,
   },
@@ -17,7 +17,7 @@ export const WORKSPACE_SETTINGS = {
     key: "members",
     label: "Members",
     href: `/settings/members`,
-    access: EUserWorkspaceRoles.VIEWER,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
     Icon: SettingIcon,
   },
@@ -25,7 +25,7 @@ export const WORKSPACE_SETTINGS = {
     key: "billing-and-plans",
     label: "Billing and plans",
     href: `/settings/billing`,
-    access: EUserWorkspaceRoles.ADMIN,
+    access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
     Icon: SettingIcon,
   },
@@ -33,7 +33,7 @@ export const WORKSPACE_SETTINGS = {
     key: "export",
     label: "Exports",
     href: `/settings/exports`,
-    access: EUserWorkspaceRoles.VIEWER,
+    access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
     Icon: SettingIcon,
   },
@@ -41,7 +41,7 @@ export const WORKSPACE_SETTINGS = {
     key: "webhooks",
     label: "Webhooks",
     href: `/settings/webhooks`,
-    access: EUserWorkspaceRoles.ADMIN,
+    access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
     Icon: SettingIcon,
   },
@@ -49,7 +49,7 @@ export const WORKSPACE_SETTINGS = {
     key: "api-tokens",
     label: "API tokens",
     href: `/settings/api-tokens`,
-    access: EUserWorkspaceRoles.ADMIN,
+    access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens/`,
     Icon: SettingIcon,
   },
@@ -59,7 +59,7 @@ export const WORKSPACE_SETTINGS_LINKS: {
   key: string;
   label: string;
   href: string;
-  access: EUserWorkspaceRoles;
+  access: EUserPermissions[];
   highlight: (pathname: string, baseUrl: string) => boolean;
   Icon: React.FC<Props>;
 }[] = [