Auth: Add name to be configurable from the UI (#82144)

* Add name to be configurable from the UI

* Update public/app/features/auth-config/ProviderConfigPage.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Align test

---------

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

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

@@ -103,6 +103,7 @@ describe('ProviderConfigForm', () => {
         {
           ...testConfig,
           settings: {
+            name: 'GitHub',
             allowedOrganizations: 'test-org1,test-org2',
             clientId: 'test-client-id',
             clientSecret: 'test-client-secret',

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

@@ -8,6 +8,7 @@ import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { StoreState } from '../../types';
 
 import { ProviderConfigForm } from './ProviderConfigForm';
+import { UIMap } from './constants';
 import { loadProviders } from './state/actions';
 import { SSOProvider } from './types';
 
@@ -21,9 +22,11 @@ const getPageNav = (config?: SSOProvider): NavModelItem => {
     };
   }
 
+  const providerDisplayName = UIMap[config.provider][1] || config.provider.toUpperCase();
+
   return {
-    text: config.settings.name || '',
-    subTitle: `To configure ${config.settings.name} OAuth2 you must register your application with ${config.settings.name}. ${config.settings.name} will generate a Client ID and Client Secret for you to use.`,
+    text: providerDisplayName || '',
+    subTitle: `To configure ${providerDisplayName} OAuth2 you must register your application with ${providerDisplayName}. The provider will generate a Client ID and Client Secret for you to use.`,
     icon: config.settings.icon || 'shield',
     id: config.provider,
   };

public/app/features/auth-config/components/ProviderCard.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { IconName, isIconName } from '@grafana/data';
+import { isIconName } from '@grafana/data';
 import { Badge, Card, Icon } from '@grafana/ui';
 
+import { UIMap } from '../constants';
 import { getProviderUrl } from '../utils/url';
 
 type Props = {
@@ -13,17 +14,6 @@ type Props = {
   onClick?: () => void;
 };
 
-// TODO Remove when this is available from API
-const UIMap: Record<string, [IconName, string]> = {
-  github: ['github', 'GitHub'],
-  gitlab: ['gitlab', 'GitLab'],
-  google: ['google', 'Google'],
-  generic_oauth: ['lock', 'Generic OAuth'],
-  grafana_com: ['grafana', 'Grafana.com'],
-  azuread: ['microsoft', 'Azure AD'],
-  okta: ['okta', 'Okta'],
-};
-
 export function ProviderCard({ providerId, enabled, configPath, authType, onClick }: Props) {
   //@ts-expect-error
   const url = getProviderUrl({ configPath, id: providerId });

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

@@ -1 +1,14 @@
+import { IconName } from '@grafana/data';
+
 export const BASE_PATH = 'admin/authentication/';
+
+// TODO Remove when this is available from API
+export const UIMap: Record<string, [IconName, string]> = {
+  github: ['github', 'GitHub'],
+  gitlab: ['gitlab', 'GitLab'],
+  google: ['google', 'Google'],
+  generic_oauth: ['lock', 'Generic OAuth'],
+  grafana_com: ['grafana', 'Grafana.com'],
+  azuread: ['microsoft', 'Azure AD'],
+  okta: ['okta', 'Okta'],
+};

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

@@ -8,11 +8,12 @@ import { isSelectableValue } from './utils/guards';
 
 /** Map providers to their settings */
 export const fields: Record<SSOProvider['provider'], Array<keyof SSOProvider['settings']>> = {
-  github: ['clientId', 'clientSecret', 'teamIds', 'allowedOrganizations'],
-  google: ['clientId', 'clientSecret', 'allowedDomains'],
-  gitlab: ['clientId', 'clientSecret', 'allowedOrganizations', 'teamIds'],
-  azuread: ['clientId', 'clientSecret', 'authUrl', 'tokenUrl', 'scopes', 'allowedGroups', 'allowedDomains'],
+  github: ['name', 'clientId', 'clientSecret', 'teamIds', 'allowedOrganizations'],
+  google: ['name', 'clientId', 'clientSecret', 'allowedDomains'],
+  gitlab: ['name', 'clientId', 'clientSecret', 'allowedOrganizations', 'teamIds'],
+  azuread: ['name', 'clientId', 'clientSecret', 'authUrl', 'tokenUrl', 'scopes', 'allowedGroups', 'allowedDomains'],
   okta: [
+    'name',
     'clientId',
     'clientSecret',
     'authUrl',
@@ -221,7 +222,8 @@ export function fieldMap(provider: string): Record<string, FieldData> {
     },
     name: {
       label: 'Display name',
-      description: 'Helpful if you use more than one identity providers or SSO protocols.',
+      description:
+        'Will be displayed on the login page as "Sign in with ...". Helpful if you use more than one identity providers or SSO protocols.',
       type: 'text',
     },
     allowSignUp: {
@@ -313,17 +315,17 @@ export function fieldMap(provider: string): Record<string, FieldData> {
     },
     tlsClientCa: {
       label: 'TLS client ca',
-      description: 'The path to the trusted certificate authority list. Is not applicable on Grafana Cloud.',
+      description: 'The file path to the trusted certificate authority list. Is not applicable on Grafana Cloud.',
       type: 'text',
     },
     tlsClientCert: {
       label: 'TLS client cert',
-      description: 'The path to the certificate. Is not applicable on Grafana Cloud.',
+      description: 'The file path to the certificate. Is not applicable on Grafana Cloud.',
       type: 'text',
     },
     tlsClientKey: {
       label: 'TLS client key',
-      description: 'The path to the key. Is not applicable on Grafana Cloud.',
+      description: 'The file path to the key. Is not applicable on Grafana Cloud.',
       type: 'text',
     },
     tlsSkipVerifyInsecure: {