Auth: Add interaction tracking to SSO settings UI (#81497)

Add interaction tracking

public/app/features/auth-config/ProviderConfigForm.test.tsx

@@ -2,14 +2,19 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { JSX } from 'react';
 
+import { reportInteraction } from '@grafana/runtime';
+
 import { ProviderConfigForm } from './ProviderConfigForm';
 import { SSOProvider } from './types';
 import { emptySettings } from './utils/data';
 
 const putMock = jest.fn(() => Promise.resolve({}));
+const deleteMock = jest.fn(() => Promise.resolve({}));
+
 jest.mock('@grafana/runtime', () => ({
   getBackendSrv: () => ({
     put: putMock,
+    delete: deleteMock,
   }),
   config: {
     panels: {
@@ -26,8 +31,11 @@ jest.mock('@grafana/runtime', () => ({
   locationService: {
     push: jest.fn(),
   },
+  reportInteraction: jest.fn(),
 }));
 
+const reportInteractionMock = jest.mocked(reportInteraction);
+
 // Mock the FormPrompt component as it requires Router setup to work
 jest.mock('app/core/components/FormPrompt/FormPrompt', () => ({
   FormPrompt: () => <></>,
@@ -104,6 +112,11 @@ describe('ProviderConfigForm', () => {
         },
         { showErrorAlert: false }
       );
+
+      expect(reportInteractionMock).toHaveBeenCalledWith('grafana_authentication_ssosettings_updated', {
+        provider: 'github',
+        enabled: true,
+      });
     });
   });
 
@@ -114,4 +127,21 @@ describe('ProviderConfigForm', () => {
     // Should show an alert for empty client ID
     expect(await screen.findAllByRole('alert')).toHaveLength(1);
   });
+
+  it('should delete the current config', async () => {
+    const { user } = setup(<ProviderConfigForm config={emptyConfig} provider={emptyConfig.provider} />);
+    await user.click(screen.getByRole('button', { name: /Reset/i }));
+
+    expect(screen.getByRole('dialog', { name: /Reset/i })).toBeInTheDocument();
+
+    await user.click(screen.getByTestId('data-testid Confirm Modal Danger Button'));
+
+    await waitFor(() => {
+      expect(deleteMock).toHaveBeenCalledWith('/api/v1/sso-settings/github', undefined, { showSuccessAlert: false });
+
+      expect(reportInteractionMock).toHaveBeenCalledWith('grafana_authentication_ssosettings_removed', {
+        provider: 'github',
+      });
+    });
+  });
 });

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { AppEvents } from '@grafana/data';
-import { getAppEvents, getBackendSrv, isFetchError, locationService } from '@grafana/runtime';
+import { getAppEvents, getBackendSrv, isFetchError, locationService, reportInteraction } from '@grafana/runtime';
 import { Box, Button, CollapsableSection, ConfirmModal, Field, LinkButton, Stack, Switch } from '@grafana/ui';
 
 import { FormPrompt } from '../../core/components/FormPrompt/FormPrompt';
@@ -56,6 +56,11 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
         }
       );
 
+      reportInteraction('grafana_authentication_ssosettings_updated', {
+        provider,
+        enabled: requestData.enabled,
+      });
+
       appEvents.publish({
         type: AppEvents.alertSuccess.name,
         payload: ['Settings saved'],
@@ -84,7 +89,11 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
 
   const onResetConfig = async () => {
     try {
-      await getBackendSrv().delete(`/api/v1/sso-settings/${provider}`);
+      await getBackendSrv().delete(`/api/v1/sso-settings/${provider}`, undefined, { showSuccessAlert: false });
+      reportInteraction('grafana_authentication_ssosettings_removed', {
+        provider,
+      });
+
       appEvents.publish({
         type: AppEvents.alertSuccess.name,
         payload: ['Settings reset to defaults'],
@@ -113,6 +122,9 @@ export const ProviderConfigForm = ({ config, provider, isLoading }: ProviderConf
           <FormPrompt
             confirmRedirect={!!Object.keys(dirtyFields).length && !dataSubmitted}
             onDiscard={() => {
+              reportInteraction('grafana_authentication_ssosettings_abandoned', {
+                provider,
+              });
               reset();
             }}
           />