SAML: UI update of providercards (#71838)

* UI update of providercards

* fixed the naming of the providercard and margin to top

* fix: add settings to the AuthConfigPage for the provider card to get the displayname

* removes the ldap name check

* refactor to account for the configured/enabled sitation and removed the LDAP name check

* added type to authstatus instead

* remove the settings from initiation of the component

* added name to the type

* removed the configAuth

* do not export all types

* add back types

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

@@ -85,8 +85,8 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
               <ProviderCard
                 key={provider.id}
                 providerId={provider.id}
-                displayName={provider.displayName}
+                displayName={providerStatuses[provider.id]?.name || provider.displayName}
-                authType={provider.type}
+                authType={provider.protocol}
                 enabled={providerStatuses[provider.id]?.enabled}
                 configPath={provider.configPath}
                 onClick={() => {
@@ -111,7 +111,7 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
               <ProviderCard
                 key={provider.id}
                 providerId={provider.id}
-                displayName={provider.displayName}
+                displayName={providerStatuses[provider.id]?.name || provider.displayName}
                 authType={provider.protocol}
                 enabled={providerStatuses[provider.id]?.enabled}
                 configPath={provider.configPath}

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Badge, Card, useStyles2 } from '@grafana/ui';
+import { Badge, Card, useStyles2, Icon } from '@grafana/ui';
 
 import { BASE_PATH } from '../constants';
 
@@ -24,10 +24,18 @@ export function ProviderCard({ providerId, displayName, enabled, configPath, aut
 
   return (
     <Card href={configPath} className={styles.container} onClick={() => onClick && onClick()}>
-      <Card.Heading className={styles.name}>{displayName}</Card.Heading>
+      <div className={styles.header}>
+        <span className={styles.smallText}>{authType}</span>
+        <span className={styles.name}>{displayName}</span>
+      </div>
       <div className={styles.footer}>
-        {authType && <Badge text={authType} color="blue" icon="info-circle" />}
+        <div className={styles.badgeContainer}>
-        {enabled ? <Badge text="Enabled" color="green" icon="check" /> : <Badge text="Not enabled" color="red" />}
+          {enabled ? <Badge text="Enabled" color="green" icon="check" /> : <Badge text="Not enabled" color="blue" />}
+        </div>
+        <span className={styles.edit}>
+          Edit
+          <Icon color="blue" name={'arrow-right'} size="sm" />
+        </span>
       </div>
     </Card>
   );
@@ -36,27 +44,49 @@ export function ProviderCard({ providerId, displayName, enabled, configPath, aut
 export const getStyles = (theme: GrafanaTheme2) => {
   return {
     container: css`
-      min-height: ${theme.spacing(16)};
+      min-height: ${theme.spacing(18)};
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
+      justify-content: space-around;
-      padding: ${theme.spacing(2)};
+      border-radius: ${theme.spacing(0.5)};
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     `,
     header: css`
+      margin-top: -${theme.spacing(2)};
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
+      justify-content: start;
       align-items: flex-start;
       margin-bottom: ${theme.spacing(2)};
     `,
     footer: css`
+      margin-top: ${theme.spacing(2)};
       display: flex;
       justify-content: space-between;
+      align-items: center;
     `,
     name: css`
       align-self: flex-start;
       font-size: ${theme.typography.h4.fontSize};
       color: ${theme.colors.text.primary};
       margin: 0;
+      margin-top: ${theme.spacing(-1)};
+    `,
+    smallText: css`
+      font-size: ${theme.typography.bodySmall.fontSize};
+      color: ${theme.colors.text.secondary};
+      padding: ${theme.spacing(1)} 0; // Add some padding
+      max-width: 90%; // Add a max-width to prevent text from stretching too wide
+    `,
+    badgeContainer: css`
+      display: flex;
+      gap: ${theme.spacing(1)};
+    `,
+    edit: css`
+      display: flex;
+      align-items: center;
+      color: ${theme.colors.text.link};
+      gap: ${theme.spacing(0.5)};
     `,
   };
 };

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

@@ -21,8 +21,9 @@ export interface AuthConfigState {
 export interface AuthProviderStatus {
   enabled: boolean;
   configured: boolean;
-  configFoundInIniFile?: boolean;
+  name?: string;
   hide?: boolean;
+  configFoundInIniFile?: boolean;
 }
 
 export interface SettingsError {