Login: Allow custom name and icon for social providers (#63297)

conf/defaults.ini

@@ -521,6 +521,8 @@ hide_version = false
 
 #################################### GitHub Auth #########################
 [auth.github]
+name = GitHub
+icon = github
 enabled = false
 allow_sign_up = true
 auto_login = false
@@ -539,6 +541,8 @@ allow_assign_grafana_admin = false
 
 #################################### GitLab Auth #########################
 [auth.gitlab]
+name = GitLab
+icon = gitlab
 enabled = false
 allow_sign_up = true
 auto_login = false
@@ -557,6 +561,8 @@ skip_org_role_sync = false
 
 #################################### Google Auth #########################
 [auth.google]
+name = Google
+icon = google
 enabled = false
 allow_sign_up = true
 auto_login = false
@@ -581,6 +587,8 @@ scopes = user:email
 allowed_organizations =
 
 [auth.grafana_com]
+name = Grafana.com
+icon = grafana
 enabled = false
 allow_sign_up = true
 auto_login = false
@@ -592,7 +600,8 @@ skip_org_role_sync = false
 
 #################################### Azure AD OAuth #######################
 [auth.azuread]
-name = Azure AD
+name = Microsoft
+icon = microsoft
 enabled = false
 allow_sign_up = true
 auto_login = false

conf/sample.ini

@@ -525,6 +525,8 @@
 
 #################################### GitHub Auth ##########################
 [auth.github]
+;name = GitHub
+;icon = github
 ;enabled = false
 ;allow_sign_up = true
 ;auto_login = false
@@ -543,6 +545,8 @@
 
 #################################### GitLab Auth #########################
 [auth.gitlab]
+;name = GitLab
+;icon = gitlab
 ;enabled = false
 ;allow_sign_up = true
 ;auto_login = false
@@ -561,6 +565,8 @@
 
 #################################### Google Auth ##########################
 [auth.google]
+;name = Google
+;icon = google
 ;enabled = false
 ;allow_sign_up = true
 ;auto_login = false
@@ -576,6 +582,8 @@
 
 #################################### Grafana.com Auth ####################
 [auth.grafana_com]
+;name = Grafana.com
+;icon = grafana
 ;enabled = false
 ;allow_sign_up = true
 ;auto_login = false
@@ -587,7 +595,8 @@
 
 #################################### Azure AD OAuth #######################
 [auth.azuread]
-;name = Azure AD
+;name = Microsoft
+;icon = microsoft
 ;enabled = false
 ;allow_sign_up = true
 ;auto_login = false

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

@@ -31,32 +31,32 @@ const loginServices: () => LoginServices = () => {
     google: {
       bgColor: '#e84d3c',
       enabled: oauthEnabled && Boolean(config.oauth.google),
-      name: 'Google',
+      name: config.oauth?.google?.name || 'Google',
-      icon: 'google',
+      icon: config.oauth?.google?.icon ?? ('google' as const),
     },
     azuread: {
       bgColor: '#2f2f2f',
       enabled: oauthEnabled && Boolean(config.oauth.azuread),
-      name: 'Microsoft',
+      name: config.oauth?.azuread?.name || 'Microsoft',
-      icon: 'microsoft',
+      icon: config.oauth?.azuread?.icon ?? ('microsoft' as const),
     },
     github: {
       bgColor: '#464646',
       enabled: oauthEnabled && Boolean(config.oauth.github),
-      name: 'GitHub',
+      name: config.oauth?.github?.name || 'GitHub',
-      icon: 'github',
+      icon: config.oauth?.github?.icon ?? ('github' as const),
     },
     gitlab: {
       bgColor: '#fc6d26',
       enabled: oauthEnabled && Boolean(config.oauth.gitlab),
-      name: 'GitLab',
+      name: config.oauth?.gitlab?.name || 'GitLab',
-      icon: 'gitlab',
+      icon: config.oauth?.gitlab?.icon ?? ('gitlab' as const),
     },
     grafanacom: {
       bgColor: '#262628',
       enabled: oauthEnabled && Boolean(config.oauth.grafana_com),
-      name: 'Grafana.com',
+      name: config.oauth?.grafana_com?.name || 'Grafana.com',
-      icon: 'grafana',
+      icon: config.oauth?.grafana_com?.icon ?? ('grafana' as const),
       hrefName: 'grafana_com',
     },
     okta: {