From 4fcd529d0ed504cad4f29044eb267904a578850a Mon Sep 17 00:00:00 2001 From: Yaelle Chaudy <42030685+yaelleC@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:37:45 +0100 Subject: [PATCH] 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 --- .../version-history/RevertDashboardModal.tsx | 2 + .../VersionHistoryButtons.test.tsx | 30 ++++++++++ .../version-history/VersionHistoryButtons.tsx | 11 +++- .../VersionHistoryTable.test.tsx | 57 +++++++++++++++++++ .../version-history/VersionHistoryTable.tsx | 6 ++ .../dashboard-scene/utils/interactions.ts | 8 +++ 6 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.test.tsx create mode 100644 public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.test.tsx diff --git a/public/app/features/dashboard-scene/settings/version-history/RevertDashboardModal.tsx b/public/app/features/dashboard-scene/settings/version-history/RevertDashboardModal.tsx index c3e44c132d1..c0b4ee0318a 100644 --- a/public/app/features/dashboard-scene/settings/version-history/RevertDashboardModal.tsx +++ b/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}`); } diff --git a/public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.test.tsx b/public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.test.tsx new file mode 100644 index 00000000000..24299a93e0b --- /dev/null +++ b/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( + + ); + + const showMoreButton = screen.getByText('Show more versions'); + fireEvent.click(showMoreButton); + + expect(DashboardInteractions.showMoreVersionsClicked).toHaveBeenCalledWith(); + }); +}); diff --git a/public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.tsx b/public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.tsx index 1287b059982..d1a3308ab67 100644 --- a/public/app/features/dashboard-scene/settings/version-history/VersionHistoryButtons.tsx +++ b/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) => ( {hasMore && ( - )} diff --git a/public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.test.tsx b/public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.test.tsx new file mode 100644 index 00000000000..63339065a30 --- /dev/null +++ b/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(); + + const restoreButtons = screen.getAllByText('Restore'); + fireEvent.click(restoreButtons[0]); + + expect(DashboardInteractions.versionRestoreClicked).toHaveBeenCalledWith({ + version: mockVersions[1].version, + index: 1, + confirm: false, + }); + }); +}); diff --git a/public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.tsx b/public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.tsx index 5ae97bc63e7..3713f235106 100644 --- a/public/app/features/dashboard-scene/settings/version-history/VersionHistoryTable.tsx +++ b/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 diff --git a/public/app/features/dashboard-scene/utils/interactions.ts b/public/app/features/dashboard-scene/utils/interactions.ts index 988d05c9e12..ad1b3fbea0f 100644 --- a/public/app/features/dashboard-scene/utils/interactions.ts +++ b/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) => {