From 59be79b5f4f20cf12791d0080399f48edbff40e4 Mon Sep 17 00:00:00 2001
From: Eric Leijonmarck <eric.leijonmarck@gmail.com>
Date: Thu, 29 Jun 2023 15:42:52 +0100
Subject: [PATCH] SAML UI: metric for provider card clicked (#70894)

provider card clicked
---
 public/app/features/auth-config/AuthConfigPage.tsx         | 7 +++++++
 .../app/features/auth-config/components/ProviderCard.tsx   | 4 +++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/app/features/auth-config/AuthConfigPage.tsx b/public/app/features/auth-config/AuthConfigPage.tsx
index 388181e2aa3..62b9b4ddfd1 100644
--- a/public/app/features/auth-config/AuthConfigPage.tsx
+++ b/public/app/features/auth-config/AuthConfigPage.tsx
@@ -12,6 +12,7 @@ import { StoreState } from 'app/types';
 import ConfigureAuthCTA from './components/ConfigureAuthCTA';
 import { ProviderCard } from './components/ProviderCard';
 import { loadSettings } from './state/actions';
+import { AuthProviderInfo } from './types';
 import { getProviderUrl } from './utils';
 
 import { getRegisteredAuthProviders } from '.';
@@ -70,6 +71,9 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
   const onCTAClick = () => {
     reportInteraction('authentication_ui_created', { provider: firstAvailableProvider?.type });
   };
+  const onProviderCardClick = (provider: AuthProviderInfo) => {
+    reportInteraction('authentication_ui_provider_clicked', { provider: provider.type });
+  };
 
   return (
     <Page navId="authentication" subTitle={subTitle}>
@@ -86,6 +90,9 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
                 enabled={providerStatuses[provider.id]?.enabled}
                 configFoundInIniFile={providerStatuses[provider.id]?.configFoundInIniFile}
                 configPath={provider.configPath}
+                onClick={() => {
+                  onProviderCardClick(provider);
+                }}
               />
             ))}
           </div>
diff --git a/public/app/features/auth-config/components/ProviderCard.tsx b/public/app/features/auth-config/components/ProviderCard.tsx
index 850c77bb241..f15df0783a0 100644
--- a/public/app/features/auth-config/components/ProviderCard.tsx
+++ b/public/app/features/auth-config/components/ProviderCard.tsx
@@ -16,6 +16,7 @@ type Props = {
   configPath?: string;
   authType?: string;
   badges?: JSX.Element[];
+  onClick?: () => void;
 };
 
 export function ProviderCard({
@@ -26,12 +27,13 @@ export function ProviderCard({
   configPath,
   authType,
   badges,
+  onClick,
 }: Props) {
   const styles = useStyles2(getStyles);
   configPath = BASE_PATH + (configPath || providerId);
 
   return (
-    <Card href={configPath} className={styles.container}>
+    <Card href={configPath} className={styles.container} onClick={() => onClick && onClick()}>
       <Card.Heading className={styles.name}>{displayName}</Card.Heading>
       {configFoundInIniFile && (
         <>