Dashboards Versions: Add event to dashboards restore version (#98855)

* Add event to dashboards restore version

* moved changes to scenes instead

* remove last non-scene change

* Move events to centralised file

* remove ? from properties copy pasta

* Add tests

public/app/features/dashboard-scene/settings/version-history/RevertDashboardModal.tsx

@@ -1,5 +1,6 @@
 import { ConfirmModal } from '@grafana/ui';
 import { useAppNotification } from 'app/core/copy/appNotification';
+import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
 import { DecoratedRevisionModel } from '../VersionsEditView';
 
@@ -17,6 +18,7 @@ export const RevertDashboardModal = ({ hideModal, onRestore, version }: RevertDa
 
     if (success) {
       notifyApp.success('Dashboard restored', `Restored from version ${version.version}`);
+      DashboardInteractions.versionRestoreClicked({ version: version.version, confirm: true });
     } else {
       notifyApp.error('Dashboard restore failed', `Failed to restore from version ${version.version}`);
     }

public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { DashboardInteractions } from '../../utils/interactions';
+
+import { VersionsHistoryButtons } from './VersionHistoryButtons';
+
+jest.mock('../../utils/interactions', () => ({
+  DashboardInteractions: {
+    showMoreVersionsClicked: jest.fn(),
+  },
+}));
+
+describe('VersionHistoryButtons', () => {
+  it('triggers a user event when the show more versions is clicked', async () => {
+    render(
+      <VersionsHistoryButtons
+        getVersions={jest.fn()}
+        canCompare={true}
+        hasMore={true}
+        getDiff={jest.fn()}
+        isLastPage={false}
+      />
+    );
+
+    const showMoreButton = screen.getByText('Show more versions');
+    fireEvent.click(showMoreButton);
+
+    expect(DashboardInteractions.showMoreVersionsClicked).toHaveBeenCalledWith();
+  });
+});

public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.tsx

@@ -1,4 +1,5 @@
 import { Tooltip, Button, Stack } from '@grafana/ui';
+import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
 type VersionsButtonsType = {
   hasMore: boolean;
@@ -16,7 +17,15 @@ export const VersionsHistoryButtons = ({
 }: VersionsButtonsType) => (
   <Stack>
     {hasMore && (
-      <Button type="button" onClick={() => getVersions(true)} variant="secondary" disabled={isLastPage}>
+      <Button
+        type="button"
+        onClick={() => {
+          getVersions(true);
+          DashboardInteractions.showMoreVersionsClicked();
+        }}
+        variant="secondary"
+        disabled={isLastPage}
+      >
         Show more versions
       </Button>
     )}

public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { DashboardInteractions } from '../../utils/interactions';
+import { DecoratedRevisionModel } from '../VersionsEditView';
+
+import { VersionHistoryTable } from './VersionHistoryTable';
+
+jest.mock('../../utils/interactions', () => ({
+  DashboardInteractions: {
+    versionRestoreClicked: jest.fn(),
+    showMoreVersionsClicked: jest.fn(),
+  },
+}));
+
+const mockVersions: DecoratedRevisionModel[] = [
+  {
+    id: 1,
+    version: 1,
+    createdDateString: '2023-01-01',
+    createdBy: 'User1',
+    message: 'Initial version',
+    checked: false,
+    uid: '0',
+    parentVersion: 0,
+    created: new Date(),
+    data: { schemaVersion: 1, uid: '0', title: 'Dashboard', panels: [] },
+    ageString: '1 day ago',
+  },
+  {
+    id: 2,
+    version: 2,
+    createdDateString: '2023-02-01',
+    createdBy: 'User2',
+    message: 'Second version',
+    checked: false,
+    uid: '0',
+    parentVersion: 0,
+    created: new Date(),
+    data: { schemaVersion: 1, uid: '0', title: 'Dashboard', panels: [] },
+    ageString: '10 days ago',
+  },
+];
+
+describe('VersionHistoryTable', () => {
+  it('triggers a user event when the restore button is clicked', async () => {
+    render(<VersionHistoryTable versions={mockVersions} canCompare={true} onCheck={jest.fn()} onRestore={jest.fn()} />);
+
+    const restoreButtons = screen.getAllByText('Restore');
+    fireEvent.click(restoreButtons[0]);
+
+    expect(DashboardInteractions.versionRestoreClicked).toHaveBeenCalledWith({
+      version: mockVersions[1].version,
+      index: 1,
+      confirm: false,
+    });
+  });
+});

public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Checkbox, Button, Tag, ModalsController, useStyles2 } from '@grafana/ui';
+import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
 import { DecoratedRevisionModel } from '../VersionsEditView';
 
@@ -65,6 +66,11 @@ export const VersionHistoryTable = ({ versions, canCompare, onCheck, onRestore }
                             hideModal,
                             onRestore,
                           });
+                          DashboardInteractions.versionRestoreClicked({
+                            version: version.version,
+                            index: idx,
+                            confirm: false,
+                          });
                         }}
                       >
                         Restore

public/app/features/dashboard-scene/utils/interactions.ts

@@ -116,6 +116,14 @@ export const DashboardInteractions = {
       isScenesContextSet = false;
     };
   },
+
+  // Dashboards versions interactions
+  versionRestoreClicked: (properties: { version: number; index?: number; confirm: boolean }) => {
+    reportDashboardInteraction('version_restore_clicked', properties);
+  },
+  showMoreVersionsClicked: () => {
+    reportDashboardInteraction('show_more_versions_clicked');
+  },
 };
 
 const reportDashboardInteraction: typeof reportInteraction = (name, properties) => {