SAML UI: metric for provider card clicked (#70894)

provider card clicked
This commit is contained in:
Eric Leijonmarck 2023-06-29 15:42:52 +01:00 committed by GitHub
parent f274484727
commit 59be79b5f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 1 deletions

View File

@ -12,6 +12,7 @@ import { StoreState } from 'app/types';
import ConfigureAuthCTA from './components/ConfigureAuthCTA'; import ConfigureAuthCTA from './components/ConfigureAuthCTA';
import { ProviderCard } from './components/ProviderCard'; import { ProviderCard } from './components/ProviderCard';
import { loadSettings } from './state/actions'; import { loadSettings } from './state/actions';
import { AuthProviderInfo } from './types';
import { getProviderUrl } from './utils'; import { getProviderUrl } from './utils';
import { getRegisteredAuthProviders } from '.'; import { getRegisteredAuthProviders } from '.';
@ -70,6 +71,9 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
const onCTAClick = () => { const onCTAClick = () => {
reportInteraction('authentication_ui_created', { provider: firstAvailableProvider?.type }); reportInteraction('authentication_ui_created', { provider: firstAvailableProvider?.type });
}; };
const onProviderCardClick = (provider: AuthProviderInfo) => {
reportInteraction('authentication_ui_provider_clicked', { provider: provider.type });
};
return ( return (
<Page navId="authentication" subTitle={subTitle}> <Page navId="authentication" subTitle={subTitle}>
@ -86,6 +90,9 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
enabled={providerStatuses[provider.id]?.enabled} enabled={providerStatuses[provider.id]?.enabled}
configFoundInIniFile={providerStatuses[provider.id]?.configFoundInIniFile} configFoundInIniFile={providerStatuses[provider.id]?.configFoundInIniFile}
configPath={provider.configPath} configPath={provider.configPath}
onClick={() => {
onProviderCardClick(provider);
}}
/> />
))} ))}
</div> </div>

View File

@ -16,6 +16,7 @@ type Props = {
configPath?: string; configPath?: string;
authType?: string; authType?: string;
badges?: JSX.Element[]; badges?: JSX.Element[];
onClick?: () => void;
}; };
export function ProviderCard({ export function ProviderCard({
@ -26,12 +27,13 @@ export function ProviderCard({
configPath, configPath,
authType, authType,
badges, badges,
onClick,
}: Props) { }: Props) {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
configPath = BASE_PATH + (configPath || providerId); configPath = BASE_PATH + (configPath || providerId);
return ( return (
<Card href={configPath} className={styles.container}> <Card href={configPath} className={styles.container} onClick={() => onClick && onClick()}>
<Card.Heading className={styles.name}>{displayName}</Card.Heading> <Card.Heading className={styles.name}>{displayName}</Card.Heading>
{configFoundInIniFile && ( {configFoundInIniFile && (
<> <>