chore: UI SCIM guard for users (#6859)

https://linear.app/unleash/issue/2-2092/ui-should-not-allow-manual-management-of-scim-managed-users-in-unleash Adds a UI SCIM guard when trying to manage users. The condition for the guard is: - Enterprise - SCIM flag enabled - SCIM setting enabled - SCIM user ![image](https://github.com/Unleash/unleash/assets/14320932/8a5451f1-0d6e-48ba-b090-bb5832c0e9ec)
Unleash · Apr 15, 2024 · 279d343 · 279d343
1 parent 3d60c2a
commit 279d343
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/frontend/src/component/admin/users/UsersList/UsersActionsCell/UsersActionsCell.tsx b/frontend/src/component/admin/users/UsersList/UsersActionsCell/UsersActionsCell.tsx
@@ -20,6 +20,7 @@ interface IUsersActionsCellProps {
     onChangePassword: (event: React.SyntheticEvent) => void;
     onResetPassword: (event: React.SyntheticEvent) => void;
     onDelete: (event: React.SyntheticEvent) => void;
+    scimEnabled?: boolean;
 }
 
 export const UsersActionsCell: VFC<IUsersActionsCellProps> = ({
@@ -28,16 +29,21 @@ export const UsersActionsCell: VFC<IUsersActionsCellProps> = ({
     onChangePassword,
     onResetPassword,
     onDelete,
+    scimEnabled,
 }) => {
+    const scimTooltip =
+        'This user is managed by your SCIM provider and cannot be changed manually';
+
     return (
         <StyledBox>
             <PermissionIconButton
                 data-loading
                 onClick={onEdit}
                 permission={ADMIN}
                 tooltipProps={{
-                    title: 'Edit user',
+                    title: scimEnabled ? scimTooltip : 'Edit user',
                 }}
+                disabled={scimEnabled}
             >
                 <Edit />
             </PermissionIconButton>
@@ -63,8 +69,9 @@ export const UsersActionsCell: VFC<IUsersActionsCellProps> = ({
                 onClick={onChangePassword}
                 permission={ADMIN}
                 tooltipProps={{
-                    title: 'Change password',
+                    title: scimEnabled ? scimTooltip : 'Change password',
                 }}
+                disabled={scimEnabled}
             >
                 <Lock />
             </PermissionIconButton>
@@ -73,8 +80,9 @@ export const UsersActionsCell: VFC<IUsersActionsCellProps> = ({
                 onClick={onResetPassword}
                 permission={ADMIN}
                 tooltipProps={{
-                    title: 'Reset password',
+                    title: scimEnabled ? scimTooltip : 'Reset password',
                 }}
+                disabled={scimEnabled}
             >
                 <LockReset />
             </PermissionIconButton>
@@ -83,8 +91,9 @@ export const UsersActionsCell: VFC<IUsersActionsCellProps> = ({
                 onClick={onDelete}
                 permission={ADMIN}
                 tooltipProps={{
-                    title: 'Remove user',
+                    title: scimEnabled ? scimTooltip : 'Remove user',
                 }}
+                disabled={scimEnabled}
             >
                 <Delete />
             </PermissionIconButton>

diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -38,6 +38,7 @@ import Download from '@mui/icons-material/Download';
 import { StyledUsersLinkDiv } from '../Users.styles';
 import { useUiFlag } from 'hooks/useUiFlag';
 import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
+import { useScimSettings } from 'hooks/api/getters/useScimSettings/useScimSettings';
 
 const UsersList = () => {
     const navigate = useNavigate();
@@ -56,6 +57,11 @@ const UsersList = () => {
         open: false,
     });
     const userAccessUIEnabled = useUiFlag('userAccessUIEnabled');
+    const {
+        settings: { enabled: scimSettingEnabled },
+    } = useScimSettings();
+    const scimFlagEnabled = useUiFlag('scimApi');
+    const scimEnabled = isEnterprise() && scimSettingEnabled && scimFlagEnabled;
     const [delDialog, setDelDialog] = useState(false);
     const [showConfirm, setShowConfirm] = useState(false);
     const [emailSent, setEmailSent] = useState(false);
@@ -193,7 +199,9 @@ const UsersList = () => {
                 Header: 'Actions',
                 id: 'Actions',
                 align: 'center',
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: ({
+                    row: { original: user },
+                }: { row: { original: IUser } }) => (
                     <UsersActionsCell
                         onEdit={() => {
                             navigate(`/admin/users/${user.id}/edit`);
@@ -210,6 +218,7 @@ const UsersList = () => {
                         onChangePassword={openPwDialog(user)}
                         onResetPassword={openResetPwDialog(user)}
                         onDelete={openDelDialog(user)}
+                        scimEnabled={scimEnabled && Boolean(user.scimId)}
                     />
                 ),
                 width: userAccessUIEnabled ? 240 : 200,

diff --git a/frontend/src/interfaces/user.ts b/frontend/src/interfaces/user.ts
@@ -17,6 +17,7 @@ export interface IUser {
     paid?: boolean;
     addedAt?: string;
     accountType?: AccountType;
+    scimId?: string;
 }
 
 export interface IPermission {