Authentication UI: Add metric for the first usage (#69779)

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

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { StoreState } from 'app/types';
@@ -63,7 +64,13 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
       documentation.
     </a>
   );
+
   const subTitle = <span>Manage your auth settings and configure single sign-on. Find out more in our {docsLink}</span>;
+
+  const onCTAClick = () => {
+    reportInteraction('authentication_ui_created', { provider: firstAvailableProvider?.type });
+  };
+
   return (
     <Page navId="authentication" subTitle={subTitle}>
       <Page.Contents isLoading={isLoading}>
@@ -92,6 +99,7 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
             description={`Important: if you have ${firstAvailableProvider.type} configuration enabled via the .ini file Grafana is using it.
               Configuring ${firstAvailableProvider.type} via UI will take precedence over any configuration in the .ini file.
               No changes will be written into .ini file.`}
+            onClick={onCTAClick}
           />
         )}
         {!!configuresProviders?.length && (

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

@@ -12,6 +12,7 @@ export interface Props {
   buttonTitle: string;
   buttonDisabled?: boolean;
   description?: string;
+  onClick?: () => void;
 }
 
 const ConfigureAuthCTA: React.FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const ConfigureAuthCTA: React.FunctionComponent<Props> = ({
   buttonTitle,
   buttonDisabled,
   description,
+  onClick,
 }) => {
   const styles = useStyles2(getStyles);
   const footer = description ? <span key="proTipFooter">{description}</span> : '';
@@ -34,6 +36,7 @@ const ConfigureAuthCTA: React.FunctionComponent<Props> = ({
       className={ctaElementClassName}
       data-testid={selectors.components.CallToActionCard.buttonV2(buttonTitle)}
       disabled={buttonDisabled}
+      onClick={() => onClick && onClick()}
     >
       {buttonTitle}
     </LinkButton>