From 9b10664560d374d1fbe90f97c2139017da495f46 Mon Sep 17 00:00:00 2001
From: Eric Leijonmarck <eric.leijonmarck@gmail.com>
Date: Thu, 11 May 2023 14:08:37 +0100
Subject: [PATCH] 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
---
 .../features/auth-config/AuthConfigPage.tsx   |  2 ++
 .../auth-config/components/ProviderCard.tsx   | 33 +++++++++++++++++--
 public/app/types/configAuth.ts                |  1 +
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/app/features/auth-config/AuthConfigPage.tsx b/public/app/features/auth-config/AuthConfigPage.tsx
index 09d9a3fc1b9..792074cc3cc 100644
--- a/public/app/features/auth-config/AuthConfigPage.tsx
+++ b/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}
               />
             ))}
diff --git a/public/app/features/auth-config/components/ProviderCard.tsx b/public/app/features/auth-config/components/ProviderCard.tsx
index 3be7aff28ab..850c77bb241 100644
--- a/public/app/features/auth-config/components/ProviderCard.tsx
+++ b/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
+    `,
   };
 };
diff --git a/public/app/types/configAuth.ts b/public/app/types/configAuth.ts
index b7dd994b6ea..7502d142764 100644
--- a/public/app/types/configAuth.ts
+++ b/public/app/types/configAuth.ts
@@ -11,6 +11,7 @@ export interface AuthConfigState {
 export interface AuthProviderStatus {
   enabled: boolean;
   configured: boolean;
+  configFoundInIniFile?: boolean;
 }
 
 export interface SettingsError {