Auth: SSO Settings UI frontend improvements (#82264)

* Add frontend fixes

* Update labels + link

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

@@ -62,7 +62,10 @@ export const AuthConfigPageUnconnected = ({
       subTitle={
         <>
           Manage your auth settings and configure single sign-on. Find out more in our{' '}
-          <TextLink href="https://grafana.com/docs/grafana/next/setup-grafana/configure-security/configure-authentication">
+          <TextLink
+            external={true}
+            href="https://grafana.com/docs/grafana/next/setup-grafana/configure-security/configure-authentication"
+          >
             documentation
           </TextLink>
           .

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

@@ -44,6 +44,7 @@ jest.mock('app/core/components/FormPrompt/FormPrompt', () => ({
 const testConfig: SSOProvider = {
   id: '300f9b7c-0488-40db-9763-a22ce8bf6b3e',
   provider: 'github',
+  source: 'database',
   settings: {
     ...emptySettings,
     name: 'GitHub',
@@ -101,7 +102,8 @@ describe('ProviderConfigForm', () => {
       expect(putMock).toHaveBeenCalledWith(
         '/api/v1/sso-settings/github',
         {
-          ...testConfig,
+          id: '300f9b7c-0488-40db-9763-a22ce8bf6b3e',
+          provider: 'github',
           settings: {
             name: 'GitHub',
             allowedOrganizations: 'test-org1,test-org2',

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

@@ -82,7 +82,6 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
         payload: [message],
       });
       setSubmitError(true);
-    } finally {
       setIsSaving(false);
     }
   };
@@ -182,7 +181,9 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
           )}
           <Box display={'flex'} gap={2} marginTop={6}>
             <Field>
-              <Button type={'submit'}>{isSaving ? 'Saving...' : 'Save'}</Button>
+              <Button type={'submit'} disabled={isSaving}>
+                {isSaving ? 'Saving...' : 'Save'}
+              </Button>
             </Field>
             <Field>
               <LinkButton href={'/admin/authentication'} variant={'secondary'}>
@@ -192,6 +193,7 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
             <Field>
               <Button
                 variant={'secondary'}
+                hidden={config?.source === 'system'}
                 onClick={(event) => {
                   setResetConfig(true);
                 }}

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

@@ -173,10 +173,13 @@ export function fieldMap(provider: string): Record<string, FieldData> {
     allowedGroups: {
       label: 'Allowed groups',
       type: 'select',
-      description:
+      description: (
-        'List of comma- or space-separated groups. The user should be a member of \n' +
+        <>
-        'at least one group to log in. If you configure allowed_groups, you must also configure \n' +
+          List of comma- or space-separated groups. The user should be a member of at least one group to log in.{' '}
-        'groups_attribute_path.',
+          {provider === 'generic_oauth' &&
+            'If you configure allowed_groups, you must also configure groups_attribute_path.'}
+        </>
+      ),
       multi: true,
       allowCustomValue: true,
       options: [],
@@ -347,9 +350,13 @@ export function fieldMap(provider: string): Record<string, FieldData> {
     },
     teamsUrl: {
       label: 'Teams URL',
-      description:
+      description: (
-        'The URL used to query for Team Ids. If not set, the default value is /teams. \n' +
+        <>
-        'If you configure teams_url, you must also configure team_ids_attribute_path.',
+          The URL used to query for Team Ids. If not set, the default value is /teams.{' '}
+          {provider === 'generic_oauth' &&
+            'If you configure teams_url, you must also configure team_ids_attribute_path.'}
+        </>
+      ),
       type: 'text',
       validation: {
         validate: (value, formValues) => {
@@ -379,9 +386,14 @@ export function fieldMap(provider: string): Record<string, FieldData> {
     teamIds: {
       label: 'Team Ids',
       type: 'select',
-      description:
+      description: (
-        'String list of Team Ids. If set, the user must be a member of one of the given teams to log in. \n' +
+        <>
-        'If you configure team_ids, you must also configure teams_url and team_ids_attribute_path.',
+          {provider === 'github' ? 'Integer' : 'String'} list of Team Ids. If set, the user must be a member of one of
+          the given teams to log in.{' '}
+          {provider === 'generic_oauth' &&
+            'If you configure team_ids, you must also configure teams_url and team_ids_attribute_path.'}
+        </>
+      ),
       multi: true,
       allowCustomValue: true,
       options: [],

public/app/features/auth-config/types.ts

@@ -59,6 +59,7 @@ export type SSOProviderSettingsBase = {
 export type SSOProvider = {
   id: string;
   provider: string;
+  source: string;
   settings: SSOProviderSettingsBase & {
     teamIds: string;
     allowedOrganizations: string;