fix: improve SSO default role resolution (#5916)

This improves the role resolution in the value of the default root role,
preventing a bug where settings saved
pre-https://github.com/Unleash/unleash/pull/5887 would show an empty
default root role in the dropdown.

Also makes the role update more robust.

frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx

@@ -22,11 +22,13 @@ interface IAutoCreateFormProps {
         name: string,
         value: string | boolean | number | undefined,
     ) => void;
+    onUpdateRole: (role: IRole | null) => void;
 }
 
 export const AutoCreateForm = ({
     data = { enabled: false, autoCreate: false },
     setValue,
+    onUpdateRole,
 }: IAutoCreateFormProps) => {
     const { roles } = useRoles();
 
@@ -34,16 +36,21 @@ export const AutoCreateForm = ({
         setValue('autoCreate', !data.autoCreate);
     };
 
-    const updateDefaultRootRoleId = (role: IRole | null) => {
-        setValue('defaultRootRoleId', role?.id);
-    };
-
     const updateField = (e: ChangeEvent<HTMLInputElement>) => {
         setValue(e.target.name, e.target.value);
     };
 
-    const roleIdToRole = (rootRoleId: number | undefined): IRole | null => {
-        return roles.find((role: IRole) => role.id === rootRoleId) || null;
+    const resolveRole = ({
+        defaultRootRole,
+        defaultRootRoleId,
+    }: {
+        defaultRootRole?: string;
+        defaultRootRoleId?: number;
+    }): IRole | null => {
+        if (defaultRootRoleId) {
+            return roles.find(({ id }) => id === defaultRootRoleId) || null;
+        }
+        return roles.find(({ name }) => name === defaultRootRole) || null;
     };
 
     return (
@@ -81,8 +88,8 @@ export const AutoCreateForm = ({
                     <FormControl style={{ width: '400px' }}>
                         <RoleSelect
                             roles={roles}
-                            value={roleIdToRole(data.defaultRootRoleId)}
-                            setValue={updateDefaultRootRoleId}
+                            value={resolveRole(data)}
+                            setValue={onUpdateRole}
                             disabled={!data.autoCreate || !data.enabled}
                             required
                             hideDescription

frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx

@@ -19,6 +19,7 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 import { SsoGroupSettings } from '../SsoGroupSettings';
+import { IRole } from 'interfaces/role';
 
 const initialState = {
     enabled: false,
@@ -35,10 +36,15 @@ const initialState = {
     idTokenSigningAlgorithm: 'RS256',
 };
 
+type State = typeof initialState & {
+    defaultRootRole?: string;
+    defaultRootRoleId?: number;
+};
+
 export const OidcAuth = () => {
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
-    const [data, setData] = useState(initialState);
+    const [data, setData] = useState<State>(initialState);
     const { config } = useAuthSettings('oidc');
     const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
 
@@ -70,6 +76,14 @@ export const OidcAuth = () => {
         });
     };
 
+    const onUpdateRole = (role: IRole | null) => {
+        setData({
+            ...data,
+            defaultRootRole: undefined,
+            defaultRootRoleId: role?.id,
+        });
+    };
+
     const onSubmit = async (event: React.SyntheticEvent) => {
         event.preventDefault();
 
@@ -240,7 +254,11 @@ export const OidcAuth = () => {
                     data={data}
                     setValue={setValue}
                 />
-                <AutoCreateForm data={data} setValue={setValue} />
+                <AutoCreateForm
+                    data={data}
+                    setValue={setValue}
+                    onUpdateRole={onUpdateRole}
+                />
                 <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>ID Signing algorithm</strong>

frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx

@@ -15,6 +15,7 @@ import useAuthSettingsApi from 'hooks/api/actions/useAuthSettingsApi/useAuthSett
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 import { SsoGroupSettings } from '../SsoGroupSettings';
+import { IRole } from 'interfaces/role';
 
 const initialState = {
     enabled: false,
@@ -30,10 +31,15 @@ const initialState = {
     groupJsonPath: '',
 };
 
+type State = typeof initialState & {
+    defaultRootRole?: string;
+    defaultRootRoleId?: number;
+};
+
 export const SamlAuth = () => {
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
-    const [data, setData] = useState(initialState);
+    const [data, setData] = useState<State>(initialState);
     const { config } = useAuthSettings('saml');
     const { updateSettings, errors, loading } = useAuthSettingsApi('saml');
 
@@ -61,6 +67,14 @@ export const SamlAuth = () => {
         });
     };
 
+    const onUpdateRole = (role: IRole | null) => {
+        setData({
+            ...data,
+            defaultRootRole: undefined,
+            defaultRootRoleId: role?.id,
+        });
+    };
+
     const onSubmit = async (event: React.SyntheticEvent) => {
         event.preventDefault();
 
@@ -248,7 +262,11 @@ export const SamlAuth = () => {
                     setValue={setValue}
                 />
 
-                <AutoCreateForm data={data} setValue={setValue} />
+                <AutoCreateForm
+                    data={data}
+                    setValue={setValue}
+                    onUpdateRole={onUpdateRole}
+                />
                 <Grid container spacing={3}>
                     <Grid item md={5}>
                         <Button