diff --git a/public/app/features/auth-config/AuthConfigPage.tsx b/public/app/features/auth-config/AuthConfigPage.tsx
index 2628ef2c599..388181e2aa3 100644
--- a/public/app/features/auth-config/AuthConfigPage.tsx
+++ b/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.
);
+
const subTitle = Manage your auth settings and configure single sign-on. Find out more in our {docsLink};
+
+ const onCTAClick = () => {
+ reportInteraction('authentication_ui_created', { provider: firstAvailableProvider?.type });
+ };
+
return (
@@ -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 && (
diff --git a/public/app/features/auth-config/components/ConfigureAuthCTA.tsx b/public/app/features/auth-config/components/ConfigureAuthCTA.tsx
index 78892b0d874..fca98251f28 100644
--- a/public/app/features/auth-config/components/ConfigureAuthCTA.tsx
+++ b/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 = ({
@@ -21,6 +22,7 @@ const ConfigureAuthCTA: React.FunctionComponent = ({
buttonTitle,
buttonDisabled,
description,
+ onClick,
}) => {
const styles = useStyles2(getStyles);
const footer = description ? {description} : '';
@@ -34,6 +36,7 @@ const ConfigureAuthCTA: React.FunctionComponent = ({
className={ctaElementClassName}
data-testid={selectors.components.CallToActionCard.buttonV2(buttonTitle)}
disabled={buttonDisabled}
+ onClick={() => onClick && onClick()}
>
{buttonTitle}