Configuration: Add ability to customize okta login button name and icon (#44079)

* add ability to customize okta login button name and icon

* update configs, add basic frontend test

* add icon to oauth settings type

* trigger tests

* fix typecheck

conf/defaults.ini

@@ -500,6 +500,7 @@ allowed_groups =
 #################################### Okta OAuth #######################
 [auth.okta]
 name = Okta
+icon = okta
 enabled = false
 allow_sign_up = true
 client_id = some_id
@@ -516,6 +517,7 @@ role_attribute_strict = false
 #################################### Generic OAuth #######################
 [auth.generic_oauth]
 name = OAuth
+icon = signin
 enabled = false
 allow_sign_up = true
 client_id = some_id

docs/sources/auth/generic-oauth.md

@@ -27,6 +27,8 @@ Example config:
 
 ```bash
 [auth.generic_oauth]
+name = OAuth
+icon = signin
 enabled = true
 client_id = YOUR_APP_CLIENT_ID
 client_secret = YOUR_APP_CLIENT_SECRET

docs/sources/auth/okta.md

@@ -38,6 +38,7 @@ Before you can sign a user in, you need to create an Okta application from the O
 ```ini
 [auth.okta]
 name = Okta
+icon = okta
 enabled = true
 allow_sign_up = true
 client_id = some_id

packages/grafana-data/src/types/config.ts

@@ -83,7 +83,7 @@ export type OAuth =
  *
  * @public
  */
-export type OAuthSettings = Partial<Record<OAuth, { name: string }>>;
+export type OAuthSettings = Partial<Record<OAuth, { name: string; icon?: string }>>;
 
 /**
  * Describes all the different Grafana configuration values available for an instance.

pkg/api/login.go

@@ -92,7 +92,10 @@ func (hs *HTTPServer) LoginView(c *models.ReqContext) {
 	enabledOAuths := make(map[string]interface{})
 	providers := hs.SocialService.GetOAuthInfoProviders()
 	for key, oauth := range providers {
-		enabledOAuths[key] = map[string]string{"name": oauth.Name}
+		enabledOAuths[key] = map[string]string{
+			"name": oauth.Name,
+			"icon": oauth.Icon,
+		}
 	}
 
 	viewData.Settings["oauth"] = enabledOAuths

pkg/login/social/social.go

@@ -45,6 +45,7 @@ type OAuthInfo struct {
 	TeamsUrl               string
 	AllowSignup            bool
 	Name                   string
+	Icon                   string
 	TlsClientCert          string
 	TlsClientKey           string
 	TlsClientCa            string
@@ -81,6 +82,7 @@ func ProvideService(cfg *setting.Cfg) *SocialService {
 			HostedDomain:         sec.Key("hosted_domain").String(),
 			AllowSignup:          sec.Key("allow_sign_up").MustBool(),
 			Name:                 sec.Key("name").MustString(name),
+			Icon:                 sec.Key("icon").String(),
 			TlsClientCert:        sec.Key("tls_client_cert").String(),
 			TlsClientKey:         sec.Key("tls_client_key").String(),
 			TlsClientCa:          sec.Key("tls_client_ca").String(),

public/app/core/components/Login/LoginPage.test.tsx

@@ -3,8 +3,11 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { LoginPage } from './LoginPage';
 
+import * as runtimeMock from '@grafana/runtime';
+
 const postMock = jest.fn();
 jest.mock('@grafana/runtime', () => ({
+  __esModule: true,
   getBackendSrv: () => ({
     post: postMock,
   }),
@@ -26,6 +29,10 @@ jest.mock('@grafana/runtime', () => ({
 }));
 
 describe('Login Page', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('renders correctly', () => {
     render(<LoginPage />);
 
@@ -77,4 +84,16 @@ describe('Login Page', () => {
     await waitFor(() => expect(postMock).toHaveBeenCalledWith('/login', { password: 'test', user: 'admin' }));
     expect(window.location.assign).toHaveBeenCalledWith('/');
   });
+  it('renders social logins correctly', () => {
+    (runtimeMock as any).config.oauth = {
+      okta: {
+        name: 'Okta Test',
+        icon: 'signin',
+      },
+    };
+
+    render(<LoginPage />);
+
+    expect(screen.getByRole('link', { name: 'Sign in with Okta Test' })).toBeInTheDocument();
+  });
 });

public/app/core/components/Login/LoginServiceButtons.tsx

@@ -55,20 +55,20 @@ const loginServices: () => LoginServices = () => {
       bgColor: '#262628',
       enabled: oauthEnabled && Boolean(config.oauth.grafana_com),
       name: 'Grafana.com',
-      hrefName: 'grafana_com',
       icon: 'grafana',
+      hrefName: 'grafana_com',
     },
     okta: {
       bgColor: '#2f2f2f',
       enabled: oauthEnabled && Boolean(config.oauth.okta),
-      name: 'Okta',
-      icon: 'okta',
+      name: config.oauth?.okta?.name || 'Okta',
+      icon: (config.oauth?.okta?.icon as IconName) || 'okta',
     },
     oauth: {
       bgColor: '#262628',
       enabled: oauthEnabled && Boolean(config.oauth.generic_oauth),
-      name: oauthEnabled && config.oauth.generic_oauth ? config.oauth.generic_oauth.name : 'OAuth',
-      icon: 'signin',
+      name: config.oauth?.generic_oauth?.name || 'OAuth',
+      icon: (config.oauth?.generic_oauth?.icon as IconName) || 'signin',
       hrefName: 'generic_oauth',
     },
   };