[WEB-3964] refactor: permission layer

apiserver/plane/app/serializers/project.py

@@ -148,11 +148,13 @@ class Meta:
         fields = "__all__"
 
 
-class ProjectMemberRoleSerializer(DynamicBaseSerializer):
+class ProjectMemberRoleSerializer(DynamicBaseSerializer): 
+    original_role = serializers.IntegerField(source='role', read_only=True)
+
     class Meta:
         model = ProjectMember
-        fields = ("id", "role", "member", "project", "created_at")
-        read_only_fields = ["created_at"]
+        fields = ("id", "role", "member", "project", "original_role", "created_at")
+        read_only_fields = ["original_role", "created_at"]
 
 
 class ProjectMemberInviteSerializer(BaseSerializer):

packages/i18n/src/locales/cs/translations.json

@@ -848,6 +848,7 @@
     "live": "Živě",
     "change_history": "Historie změn",
     "coming_soon": "Již brzy",
+    "member": "Člen",
     "members": "Členové",
     "you": "Vy",
     "upgrade_cta": {

packages/i18n/src/locales/de/translations.json

@@ -848,6 +848,7 @@
     "live": "Live",
     "change_history": "Änderungsverlauf",
     "coming_soon": "Demnächst verfügbar",
+    "member": "Mitglied",
     "members": "Mitglieder",
     "you": "Sie",
     "upgrade_cta": {
@@ -2459,4 +2460,4 @@
     "previously_edited_by": "Zuvor bearbeitet von",
     "edited_by": "Bearbeitet von"
   }
-}
+}

packages/i18n/src/locales/en/translations.json

@@ -690,6 +690,7 @@
     "live": "Live",
     "change_history": "Change History",
     "coming_soon": "Coming soon",
+    "member": "Member",
     "members": "Members",
     "you": "You",
     "upgrade_cta": {

packages/i18n/src/locales/es/translations.json

@@ -851,6 +851,7 @@
     "live": "En vivo",
     "change_history": "Historial de cambios",
     "coming_soon": "Próximamente",
+    "member": "Miembro",
     "members": "Miembros",
     "you": "Tú",
     "upgrade_cta": {

packages/i18n/src/locales/fr/translations.json

@@ -849,6 +849,7 @@
     "live": "En direct",
     "change_history": "Historique des modifications",
     "coming_soon": "À venir",
+    "member": "Membre",
     "members": "Membres",
     "you": "Vous",
     "upgrade_cta": {

packages/i18n/src/locales/id/translations.json

@@ -848,6 +848,7 @@
     "live": "Langsung",
     "change_history": "Riwayat Perubahan",
     "coming_soon": "Segera hadir",
+    "member": "Anggota",
     "members": "Anggota",
     "you": "Anda",
     "upgrade_cta": {

packages/i18n/src/locales/it/translations.json

@@ -847,6 +847,7 @@
     "live": "Live",
     "change_history": "Cronologia modifiche",
     "coming_soon": "Prossimamente",
+    "member": "Membro",
     "members": "Membri",
     "you": "Tu",
     "upgrade_cta": {

packages/i18n/src/locales/ja/translations.json

@@ -849,6 +849,7 @@
     "live": "ライブ",
     "change_history": "変更履歴",
     "coming_soon": "近日公開",
+    "member": "メンバー",
     "members": "メンバー",
     "you": "あなた",
     "upgrade_cta": {

packages/i18n/src/locales/ko/translations.json

@@ -850,6 +850,7 @@
     "live": "라이브",
     "change_history": "변경 기록",
     "coming_soon": "곧 출시",
+    "member": "멤버",
     "members": "멤버",
     "you": "나",
     "upgrade_cta": {

packages/i18n/src/locales/pl/translations.json

@@ -850,6 +850,7 @@
     "live": "Na żywo",
     "change_history": "Historia zmian",
     "coming_soon": "Wkrótce",
+    "member": "Członek",
     "members": "Członkowie",
     "you": "Ty",
     "upgrade_cta": {

packages/i18n/src/locales/pt-BR/translations.json

@@ -850,6 +850,7 @@
     "live": "Ao vivo",
     "change_history": "Histórico de alterações",
     "coming_soon": "Em breve",
+    "member": "Membro",
     "members": "Membros",
     "you": "Você",
     "upgrade_cta": {

packages/i18n/src/locales/ro/translations.json

@@ -848,6 +848,7 @@
     "live": "În direct",
     "change_history": "Istoric modificări",
     "coming_soon": "În curând",
+    "member": "Membru",
     "members": "Membri",
     "you": "Tu",
     "upgrade_cta": {

packages/i18n/src/locales/ru/translations.json

@@ -850,6 +850,7 @@
     "live": "В прямом эфире",
     "change_history": "История изменений",
     "coming_soon": "Скоро",
+    "member": "Участник",
     "members": "Участники",
     "you": "Вы",
     "upgrade_cta": {

packages/i18n/src/locales/sk/translations.json

@@ -850,6 +850,7 @@
     "live": "Živé",
     "change_history": "História zmien",
     "coming_soon": "Už čoskoro",
+    "member": "Člen",
     "members": "Členovia",
     "you": "Vy",
     "upgrade_cta": {

packages/i18n/src/locales/tr-TR/translations.json

@@ -851,6 +851,7 @@
     "live": "Canlı",
     "change_history": "Değişiklik Geçmişi",
     "coming_soon": "Çok Yakında",
+    "member": "Üye",
     "members": "Üyeler",
     "you": "Siz",
     "upgrade_cta": {

packages/i18n/src/locales/ua/translations.json

@@ -850,6 +850,7 @@
     "live": "Наживо",
     "change_history": "Історія змін",
     "coming_soon": "Незабаром",
+    "member": "Учасник",
     "members": "Учасники",
     "you": "Ви",
     "upgrade_cta": {

packages/i18n/src/locales/vi-VN/translations.json

@@ -849,6 +849,7 @@
     "live": "Trực tiếp",
     "change_history": "Lịch sử thay đổi",
     "coming_soon": "Sắp ra mắt",
+    "member": "Thành viên",
     "members": "Thành viên",
     "you": "Bạn",
     "upgrade_cta": {

packages/i18n/src/locales/zh-CN/translations.json

@@ -849,6 +849,7 @@
     "live": "实时",
     "change_history": "变更历史",
     "coming_soon": "即将推出",
+    "member": "成员",
     "members": "成员",
     "you": "你",
     "upgrade_cta": {

packages/i18n/src/locales/zh-TW/translations.json

@@ -850,6 +850,7 @@
     "live": "即時",
     "change_history": "變更歷史記錄",
     "coming_soon": "即將推出",
+    "member": "成員",
     "members": "成員",
     "you": "您",
     "upgrade_cta": {

packages/types/src/project/projects.d.ts

@@ -1,14 +1,5 @@
 import { EUserProjectRoles } from "@plane/constants";
-import type {
-  IProjectViewProps,
-  IUser,
-  IUserLite,
-  IUserMemberLite,
-  IWorkspace,
-  IWorkspaceLite,
-  TLogoProps,
-  TStateGroups,
-} from "..";
+import type { IUser, IUserLite, IWorkspace, TLogoProps, TStateGroups } from "..";
 import { TUserPermissions } from "../enums";
 
 export interface IPartialProject {
@@ -91,31 +82,20 @@ export interface IProjectMemberLite {
   member_id: string;
 }
 
-export interface IProjectMember {
-  id: string;
-  member: IUserMemberLite;
-  project: IProjectLite;
-  workspace: IWorkspaceLite;
-  comment: string;
-  role: TUserPermissions;
-
-  preferences: ProjectPreferences;
-
-  view_props: IProjectViewProps;
-  default_props: IProjectViewProps;
-
-  created_at: Date;
-  updated_at: Date;
-  created_by: string;
-  updated_by: string;
-}
-
-export interface IProjectMembership {
-  id: string;
+export type TProjectMembership = {
   member: string;
-  role: TUserPermissions;
+  role: TUserPermissions | EUserProjectRoles;
   created_at: string;
-}
+} & (
+  | {
+      id: string;
+      original_role: EUserProjectRoles;
+    }
+  | {
+      id: null;
+      original_role: null;
+    }
+);
 
 export interface IProjectBulkAddFormData {
   members: { role: TUserPermissions | EUserProjectRoles; member_id: string }[];

packages/types/src/workspace.d.ts

@@ -1,4 +1,4 @@
-import type { ICycle, IProjectMember, IUser, IUserLite, IWorkspaceViewProps, TPaginationInfo } from "@plane/types";
+import type { ICycle, TProjectMembership, IUser, IUserLite, IWorkspaceViewProps, TPaginationInfo } from "@plane/types";
 import { EUserWorkspaceRoles } from "@plane/constants"; // TODO: check if importing this over here causes circular dependency
 import { TUserPermissions } from "./enums";
 
@@ -93,7 +93,7 @@ export interface IWorkspaceMemberMe {
 
 export interface ILastActiveWorkspaceDetails {
   workspace_details: IWorkspace;
-  project_details?: IProjectMember[];
+  project_details?: TProjectMembership[];
 }
 
 export interface IWorkspaceDefaultSearchResult {

packages/utils/src/index.ts

@@ -8,9 +8,10 @@ export * from "./emoji";
 export * from "./file";
 export * from "./get-icon-for-link";
 export * from "./issue";
+export * from "./permission";
 export * from "./state";
 export * from "./string";
 export * from "./subscription";
 export * from "./theme";
 export * from "./work-item";
-export * from "./workspace";
+export * from "./workspace";

packages/utils/src/permission.ts

@@ -0,0 +1,13 @@
+import { EUserPermissions, EUserProjectRoles, EUserWorkspaceRoles } from "@plane/constants";
+
+type TSupportedRole = EUserPermissions | EUserProjectRoles | EUserWorkspaceRoles;
+
+/**
+ * @description Returns the highest role from an array of supported roles
+ * @param { TSupportedRole[] } roles
+ * @returns { TSupportedRole | undefined }
+ */
+export const getHighestRole = <T extends TSupportedRole>(roles: T[]): T | undefined => {
+  if (!roles || roles.length === 0) return undefined;
+  return roles.reduce((highest, current) => (current > highest ? current : highest));
+};

web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx

@@ -21,18 +21,17 @@ export interface IWorkspaceSettingLayout {
 const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) => {
   const { children } = props;
   // store hooks
-  const { workspaceUserInfo } = useUserPermissions();
+  const { workspaceUserInfo, getWorkspaceRoleByWorkspaceSlug } = useUserPermissions();
   // next hooks
   const pathname = usePathname();
   // derived values
   const { workspaceSlug, accessKey } = pathnameToAccessKey(pathname);
-  const userWorkspaceRole = workspaceUserInfo?.[workspaceSlug.toString()]?.role;
+  const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug.toString());
 
-  const isAuthorized: boolean | string =
-    pathname &&
-    workspaceSlug &&
-    userWorkspaceRole &&
-    WORKSPACE_SETTINGS_ACCESS[accessKey]?.includes(userWorkspaceRole as EUserWorkspaceRoles);
+  let isAuthorized: boolean | string = false;
+  if (pathname && workspaceSlug && userWorkspaceRole) {
+    isAuthorized = WORKSPACE_SETTINGS_ACCESS[accessKey]?.includes(userWorkspaceRole as EUserWorkspaceRoles);
+  }
 
   return (
     <>

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

@@ -1,20 +1,32 @@
 "use client";
 
 import { observer } from "mobx-react";
-// components
+import { useParams } from "next/navigation";
+// plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectMemberList, ProjectSettingsMemberDefaults } from "@/components/project";
 // hooks
 import { SettingsContentWrapper } from "@/components/settings";
 import { useProject, useUserPermissions } from "@/hooks/store";
+// plane web imports
+import { ProjectTeamspaceList } from "@/plane-web/components/projects/teamspaces";
+import { getProjectSettingsPageLabelI18nKey } from "@/plane-web/helpers/project-settings";
 
 const MembersSettingsPage = observer(() => {
-  // store
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
   const { currentProjectDetails } = useProject();
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
   // derived values
+  const projectId = routerProjectId?.toString();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Members` : undefined;
   const isProjectMemberOrAdmin = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -31,8 +43,14 @@ const MembersSettingsPage = observer(() => {
     <SettingsContentWrapper size="lg">
       <PageHead title={pageTitle} />
       <section className={`w-full`}>
-        <ProjectSettingsMemberDefaults />
-        <ProjectMemberList />
+        <div className="flex items-center border-b border-custom-border-100 pb-3.5">
+          <div className="text-lg font-semibold">
+            {t(getProjectSettingsPageLabelI18nKey("members", "common.members"))}
+          </div>
+        </div>
+        <ProjectSettingsMemberDefaults projectId={projectId} workspaceSlug={workspaceSlug} />
+        <ProjectTeamspaceList projectId={projectId} workspaceSlug={workspaceSlug} />
+        <ProjectMemberList projectId={projectId} workspaceSlug={workspaceSlug} />
       </section>
     </SettingsContentWrapper>
   );

web/app/(all)/onboarding/page.tsx

@@ -74,7 +74,6 @@ const OnboardingPage = observer(() => {
     await finishUserOnboarding()
       .then(() => {
         captureEvent(USER_ONBOARDING_COMPLETED, {
-          // user_role: user.role,
           email: user.email,
           user_id: user.id,
           status: "SUCCESS",