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)

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,7 +29,11 @@ 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
@@ -36,8 +41,9 @@ export const UsersActionsCell: VFC<IUsersActionsCellProps> = ({
                 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>

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,

frontend/src/interfaces/user.ts

@@ -17,6 +17,7 @@ export interface IUser {
     paid?: boolean;
     addedAt?: string;
     accountType?: AccountType;
+    scimId?: string;
 }
 
 export interface IPermission {