From e849378726cbd8d6ccdfb57d03937b02e81dbe7e Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 6 Feb 2025 11:27:56 +0100
Subject: [PATCH] Add role edit page container (#10037)

## Context

This PR adds a new SettingsRoleEdit page, the existing roles page now
redirects to the role edition page when clicking on it.
For now, we can't edit anything. Next step is to allow role assignment
in the corresponding tab.

<img width="941" alt="Screenshot 2025-02-05 at 17 16 14"
src="https://github.com/user-attachments/assets/ca46de15-6237-4de6-88e1-2384a09d4a27"
/>
---
 .../modules/app/components/SettingsRoutes.tsx |   7 +
 .../src/modules/types/SettingsPath.ts         |   1 +
 .../pages/settings/roles/SettingsRoleEdit.tsx | 123 ++++++++++++++++++
 .../pages/settings/roles/SettingsRoles.tsx    |  11 +-
 .../roles/components/RoleAssignment.tsx       |  19 +++
 .../roles/components/RolePermissions.tsx      |  19 +++
 6 files changed, 179 insertions(+), 1 deletion(-)
 create mode 100644 packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx
 create mode 100644 packages/twenty-front/src/pages/settings/roles/components/RoleAssignment.tsx
 create mode 100644 packages/twenty-front/src/pages/settings/roles/components/RolePermissions.tsx

diff --git a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
index 0b06ed6bd..31f7dc2b9 100644
--- a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
+++ b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
@@ -265,6 +265,12 @@ const SettingsRoles = lazy(() =>
   })),
 );
 
+const SettingsRoleEdit = lazy(() =>
+  import('~/pages/settings/roles/SettingsRoleEdit').then((module) => ({
+    default: module.SettingsRoleEdit,
+  })),
+);
+
 type SettingsRoutesProps = {
   isBillingEnabled?: boolean;
   isFunctionSettingsEnabled?: boolean;
@@ -311,6 +317,7 @@ export const SettingsRoutes = ({
       />
       <Route path={SettingsPath.NewObject} element={<SettingsNewObject />} />
       <Route path={SettingsPath.Roles} element={<SettingsRoles />} />
+      <Route path={SettingsPath.RoleDetail} element={<SettingsRoleEdit />} />
       <Route path={SettingsPath.Developers} element={<SettingsDevelopers />} />
       <Route
         path={SettingsPath.DevelopersNewApiKey}
diff --git a/packages/twenty-front/src/modules/types/SettingsPath.ts b/packages/twenty-front/src/modules/types/SettingsPath.ts
index 97aff59e7..9d152805e 100644
--- a/packages/twenty-front/src/modules/types/SettingsPath.ts
+++ b/packages/twenty-front/src/modules/types/SettingsPath.ts
@@ -37,4 +37,5 @@ export enum SettingsPath {
   FeatureFlags = 'admin-panel/feature-flags',
   Lab = 'lab',
   Roles = 'roles',
+  RoleDetail = 'roles/:roleId',
 }
diff --git a/packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx b/packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx
new file mode 100644
index 000000000..de75427ab
--- /dev/null
+++ b/packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx
@@ -0,0 +1,123 @@
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { H3Title, IconLockOpen, IconUser, IconUserPlus } from 'twenty-ui';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsPath } from '@/types/SettingsPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { TabList } from '@/ui/layout/tab/components/TabList';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { useGetRolesQuery } from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { RolePermissions } from '~/pages/settings/roles/components/RolePermissions';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { RoleAssignment } from './components/RoleAssignment';
+
+const StyledContentContainer = styled.div`
+  flex: 1;
+  width: 100%;
+  padding-left: 0;
+`;
+
+const StyledTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledIconUser = styled(IconUser)`
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+
+export const SETTINGS_ROLE_DETAIL_TABS = {
+  COMPONENT_INSTANCE_ID: 'settings-role-detail-tabs',
+  TABS_IDS: {
+    ASSIGNMENT: 'assignment',
+    PERMISSIONS: 'permissions',
+  },
+} as const;
+
+export const SettingsRoleEdit = () => {
+  const { roleId = '' } = useParams();
+  const { data: rolesData, loading: rolesLoading } = useGetRolesQuery();
+  const navigateSettings = useNavigateSettings();
+
+  const role = rolesData?.getRoles.find((r) => r.id === roleId);
+
+  const { activeTabId } = useTabList(
+    SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID,
+  );
+
+  useEffect(() => {
+    if (!rolesLoading && !role) {
+      navigateSettings(SettingsPath.Roles);
+    }
+  }, [role, navigateSettings, rolesLoading]);
+
+  if (!role) return null;
+
+  const tabs = [
+    {
+      id: SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.ASSIGNMENT,
+      title: t`Assignment`,
+      Icon: IconUserPlus,
+      hide: false,
+    },
+    {
+      id: SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.PERMISSIONS,
+      title: t`Permissions`,
+      Icon: IconLockOpen,
+      hide: false,
+    },
+  ];
+
+  const renderActiveTabContent = () => {
+    switch (activeTabId) {
+      case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.ASSIGNMENT:
+        return <RoleAssignment role={role} />;
+      case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.PERMISSIONS:
+        return <RolePermissions role={role} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <SubMenuTopBarContainer
+        title={
+          <StyledTitleContainer>
+            <StyledIconUser size={16} />
+            <H3Title title={role.label} />
+          </StyledTitleContainer>
+        }
+        links={[
+          {
+            children: 'Workspace',
+            href: getSettingsPath(SettingsPath.Workspace),
+          },
+          {
+            children: 'Roles',
+            href: getSettingsPath(SettingsPath.Roles),
+          },
+          {
+            children: role.label,
+          },
+        ]}
+      >
+        <SettingsPageContainer>
+          <TabList
+            tabListInstanceId={SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID}
+            tabs={tabs}
+            className="tab-list"
+          />
+          <StyledContentContainer>
+            {renderActiveTabContent()}
+          </StyledContentContainer>
+        </SettingsPageContainer>
+      </SubMenuTopBarContainer>
+    </>
+  );
+};
diff --git a/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx b/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx
index 775c26e16..7e17ffb7b 100644
--- a/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx
+++ b/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx
@@ -23,6 +23,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useTheme } from '@emotion/react';
 import { FeatureFlagKey, useGetRolesQuery } from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledTable = styled(Table)`
@@ -89,6 +90,7 @@ export const SettingsRoles = () => {
     FeatureFlagKey.IsPermissionsEnabled,
   );
   const theme = useTheme();
+  const navigateSettings = useNavigateSettings();
 
   const { data: rolesData, loading: isRolesLoading } = useGetRolesQuery();
 
@@ -96,6 +98,10 @@ export const SettingsRoles = () => {
     return null;
   }
 
+  const handleRoleClick = (roleId: string) => {
+    navigateSettings(SettingsPath.RoleDetail, { roleId });
+  };
+
   return (
     <SubMenuTopBarContainer
       title={t`Roles`}
@@ -127,7 +133,10 @@ export const SettingsRoles = () => {
             </StyledTableHeaderRow>
             {!isRolesLoading &&
               rolesData?.getRoles.map((role) => (
-                <StyledTableRow key={role.id}>
+                <StyledTableRow
+                  key={role.id}
+                  onClick={() => handleRoleClick(role.id)}
+                >
                   <TableCell>
                     <StyledNameCell>
                       <IconUser size={theme.icon.size.md} />
diff --git a/packages/twenty-front/src/pages/settings/roles/components/RoleAssignment.tsx b/packages/twenty-front/src/pages/settings/roles/components/RoleAssignment.tsx
new file mode 100644
index 000000000..5e625565c
--- /dev/null
+++ b/packages/twenty-front/src/pages/settings/roles/components/RoleAssignment.tsx
@@ -0,0 +1,19 @@
+import { t } from '@lingui/core/macro';
+import { H2Title, Section } from 'twenty-ui';
+import { Role } from '~/generated-metadata/graphql';
+
+type RoleAssignmentProps = {
+  role: Pick<Role, 'id' | 'label' | 'canUpdateAllSettings'>;
+};
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+export const RoleAssignment = ({ role }: RoleAssignmentProps) => {
+  return (
+    <Section>
+      <H2Title
+        title={t`Assigned members`}
+        description={t`This Role is assigned to these workspace member.`}
+      />
+    </Section>
+  );
+};
diff --git a/packages/twenty-front/src/pages/settings/roles/components/RolePermissions.tsx b/packages/twenty-front/src/pages/settings/roles/components/RolePermissions.tsx
new file mode 100644
index 000000000..e9d7f1c36
--- /dev/null
+++ b/packages/twenty-front/src/pages/settings/roles/components/RolePermissions.tsx
@@ -0,0 +1,19 @@
+import { t } from '@lingui/core/macro';
+import { H2Title, Section } from 'twenty-ui';
+import { Role } from '~/generated-metadata/graphql';
+
+type RolePermissionsProps = {
+  role: Pick<Role, 'id' | 'label' | 'canUpdateAllSettings'>;
+};
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+export const RolePermissions = ({ role }: RolePermissionsProps) => {
+  return (
+    <Section>
+      <H2Title
+        title={t`Permissions`}
+        description={t`This Role has the following permissions.`}
+      />
+    </Section>
+  );
+};