Auth: Fix AzureAD config UI's ClientAuthentication dropdown (#100752)

* wip

* Address feedback

public/app/features/auth-config/FieldRenderer.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { useEffect, useState } from 'react';
 import { UseFormReturn, Controller } from 'react-hook-form';
 
+import { SelectableValue } from '@grafana/data';
 import { Checkbox, Field, Input, SecretInput, Select, Switch, useTheme2 } from '@grafana/ui';
 
 import { fieldMap } from './fields';
@@ -9,7 +10,10 @@ import { SSOProviderDTO, SSOSettingsField } from './types';
 import { isSelectableValue } from './utils/guards';
 
 interface FieldRendererProps
-  extends Pick<UseFormReturn<SSOProviderDTO>, 'register' | 'control' | 'watch' | 'setValue' | 'unregister'> {
+  extends Pick<
+    UseFormReturn<SSOProviderDTO>,
+    'register' | 'control' | 'watch' | 'setValue' | 'getValues' | 'unregister'
+  > {
   field: SSOSettingsField;
   errors: UseFormReturn['formState']['errors'];
   secretConfigured: boolean;
@@ -22,6 +26,7 @@ export const FieldRenderer = ({
   errors,
   watch,
   setValue,
+  getValues,
   control,
   unregister,
   secretConfigured,
@@ -42,9 +47,19 @@ export const FieldRenderer = ({
     }
   }, [unregister, name, parentValue, isDependantField]);
 
+  const isNotEmptySelectableValueArray = (
+    current: string | boolean | Record<string, string> | Array<SelectableValue<string>> | undefined
+  ): current is Array<SelectableValue<string>> => {
+    return Array.isArray(current) && current.length > 0 && 'value' in current[0];
+  };
+
   useEffect(() => {
     if (fieldData.defaultValue) {
-      setValue(name, fieldData.defaultValue.value);
+      const current = getValues(name);
+      const obj = fieldData.options?.find(
+        (option) => option.value === (isNotEmptySelectableValueArray(current) ? current[0].value : undefined)
+      );
+      setValue(name, obj?.value || fieldData.defaultValue.value);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

public/app/features/auth-config/ProviderConfigForm.tsx

@@ -41,6 +41,7 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
     reset,
     watch,
     setValue,
+    getValues,
     unregister,
     formState: { errors, dirtyFields, isSubmitted },
   } = useForm({ defaultValues: dataToDTO(config), mode: 'onSubmit', reValidateMode: 'onChange' });
@@ -181,6 +182,7 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
                           control={control}
                           errors={errors}
                           setValue={setValue}
+                          getValues={getValues}
                           register={register}
                           watch={watch}
                           unregister={unregister}