SAML UI: configuration file tooltip info (#67861)

* adds icon and text to the card if enabled in inifile

* make use of verbose settings

* add state to enabledInIniFile

* rename to configFound and removal of default values

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

@@ -63,6 +63,7 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
                 displayName={provider.displayName}
                 authType={provider.type}
                 enabled={providerStatuses[provider.id]?.enabled}
+                configFoundInIniFile={providerStatuses[provider.id]?.configFoundInIniFile}
                 configPath={provider.configPath}
               />
             ))}
@@ -88,6 +89,7 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
                 displayName={provider.displayName}
                 authType={provider.protocol}
                 enabled={providerStatuses[provider.id]?.enabled}
+                configFoundInIniFile={providerStatuses[provider.id]?.configFoundInIniFile}
                 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, Tooltip } from '@grafana/ui';
 
 import { BASE_PATH } from '../constants';
 
@@ -12,18 +12,41 @@ type Props = {
   providerId: string;
   displayName: string;
   enabled: boolean;
+  configFoundInIniFile?: boolean;
   configPath?: string;
   authType?: string;
   badges?: JSX.Element[];
 };
 
-export function ProviderCard({ providerId, displayName, enabled, configPath, authType, badges }: Props) {
+export function ProviderCard({
+  providerId,
+  displayName,
+  enabled,
+  configFoundInIniFile,
+  configPath,
+  authType,
+  badges,
+}: Props) {
   const styles = useStyles2(getStyles);
   configPath = BASE_PATH + (configPath || providerId);
 
   return (
     <Card href={configPath} className={styles.container}>
       <Card.Heading className={styles.name}>{displayName}</Card.Heading>
+      {configFoundInIniFile && (
+        <>
+          <span className={styles.initext}>
+            <Tooltip
+              content={`Note: Settings enabled in the .ini configuration file will overwritten by the current settings.`}
+            >
+              <>
+                <Icon name="adjust-circle" />
+                Configuration found in .ini file
+              </>
+            </Tooltip>
+          </span>
+        </>
+      )}
       <div className={styles.footer}>
         {authType && <Badge text={authType} color="blue" icon="info-circle" />}
         {enabled ? <Badge text="Enabled" color="green" icon="check" /> : <Badge text="Not enabled" color="red" />}
@@ -57,5 +80,11 @@ export const getStyles = (theme: GrafanaTheme2) => {
       color: ${theme.colors.text.primary};
       margin: 0;
     `,
+    initext: 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
+    `,
   };
 };

public/app/types/configAuth.ts

@@ -11,6 +11,7 @@ export interface AuthConfigState {
 export interface AuthProviderStatus {
   enabled: boolean;
   configured: boolean;
+  configFoundInIniFile?: boolean;
 }
 
 export interface SettingsError {