From 328ec5f96c63d5268948dcfa9e0416fe5632cf8a Mon Sep 17 00:00:00 2001 From: SnipsDev Date: Fri, 7 Apr 2023 16:27:33 +0200 Subject: [PATCH] feat(analytics): added analytics to handle save on shortcuts Signed-off-by: SnipsDev --- .changeset/soft-doors-count.md | 5 +++ plugins/shortcuts/src/AddShortcut.test.tsx | 38 +++++++++++++++++++- plugins/shortcuts/src/AddShortcut.tsx | 4 ++- plugins/shortcuts/src/EditShortcut.test.tsx | 39 ++++++++++++++++++++- plugins/shortcuts/src/EditShortcut.tsx | 4 ++- 5 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 .changeset/soft-doors-count.md diff --git a/.changeset/soft-doors-count.md b/.changeset/soft-doors-count.md new file mode 100644 index 0000000000..d6abd3e1d6 --- /dev/null +++ b/.changeset/soft-doors-count.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-shortcuts': patch +--- + +Added the Analytics event in the save handler of AddShortcut and EditShortcut diff --git a/plugins/shortcuts/src/AddShortcut.test.tsx b/plugins/shortcuts/src/AddShortcut.test.tsx index c6d89318b2..a697e02e99 100644 --- a/plugins/shortcuts/src/AddShortcut.test.tsx +++ b/plugins/shortcuts/src/AddShortcut.test.tsx @@ -18,8 +18,14 @@ import React from 'react'; import { screen, fireEvent, waitFor } from '@testing-library/react'; import { AddShortcut } from './AddShortcut'; import { LocalStoredShortcuts } from './api'; -import { MockStorageApi, renderInTestApp } from '@backstage/test-utils'; +import { + MockAnalyticsApi, + MockStorageApi, + renderInTestApp, +} from '@backstage/test-utils'; import { AlertDisplay } from '@backstage/core-components'; +import { TestApiProvider } from '@backstage/test-utils'; +import { analyticsApiRef } from '@backstage/core-plugin-api'; describe('AddShortcut', () => { const api = new LocalStoredShortcuts(MockStorageApi.create()); @@ -67,6 +73,36 @@ describe('AddShortcut', () => { }); }); + it('should capture analytics event', async () => { + const analyticsSpy = new MockAnalyticsApi(); + const spy = jest.spyOn(api, 'add'); + + await renderInTestApp( + + + , + ); + + const urlInput = screen.getByPlaceholderText('Enter a URL'); + const titleInput = screen.getByPlaceholderText('Enter a display name'); + fireEvent.change(urlInput, { target: { value: '/some-url' } }); + fireEvent.change(titleInput, { target: { value: 'some title' } }); + + fireEvent.click(screen.getByText('Save')); + + await waitFor(() => { + expect(spy).toHaveBeenCalledWith({ + title: 'some title', + url: '/some-url', + }); + }); + + expect(analyticsSpy.getEvents()[0]).toMatchObject({ + action: 'click', + subject: `Clicked 'Save' in AddShortcut`, + }); + }); + it('pastes the values', async () => { const spy = jest.spyOn(api, 'add'); diff --git a/plugins/shortcuts/src/AddShortcut.tsx b/plugins/shortcuts/src/AddShortcut.tsx index 1e14767531..6cca26d250 100644 --- a/plugins/shortcuts/src/AddShortcut.tsx +++ b/plugins/shortcuts/src/AddShortcut.tsx @@ -27,7 +27,7 @@ import { import { ShortcutForm } from './ShortcutForm'; import { FormValues, Shortcut } from './types'; import { ShortcutApi } from './api'; -import { alertApiRef, useApi } from '@backstage/core-plugin-api'; +import { alertApiRef, useApi, useAnalytics } from '@backstage/core-plugin-api'; const useStyles = makeStyles(theme => ({ card: { @@ -60,8 +60,10 @@ export const AddShortcut = ({ const { pathname } = useLocation(); const [formValues, setFormValues] = useState(); const open = Boolean(anchorEl); + const analytics = useAnalytics(); const handleSave: SubmitHandler = async ({ url, title }) => { + analytics.captureEvent('click', `Clicked 'Save' in AddShortcut`); const shortcut: Omit = { url, title }; try { diff --git a/plugins/shortcuts/src/EditShortcut.test.tsx b/plugins/shortcuts/src/EditShortcut.test.tsx index 4d5128b0a8..df2ed112ba 100644 --- a/plugins/shortcuts/src/EditShortcut.test.tsx +++ b/plugins/shortcuts/src/EditShortcut.test.tsx @@ -19,8 +19,14 @@ import { screen, fireEvent, waitFor } from '@testing-library/react'; import { EditShortcut } from './EditShortcut'; import { Shortcut } from './types'; import { LocalStoredShortcuts } from './api'; -import { MockStorageApi, renderInTestApp } from '@backstage/test-utils'; +import { + MockAnalyticsApi, + MockStorageApi, + TestApiProvider, + renderInTestApp, +} from '@backstage/test-utils'; import { AlertDisplay } from '@backstage/core-components'; +import { analyticsApiRef } from '@backstage/core-plugin-api'; describe('EditShortcut', () => { const shortcut: Shortcut = { @@ -75,6 +81,37 @@ describe('EditShortcut', () => { }); }); + it('should capture analytics event', async () => { + const analyticsSpy = new MockAnalyticsApi(); + const spy = jest.spyOn(api, 'update'); + + await renderInTestApp( + + + , + ); + + const urlInput = screen.getByPlaceholderText('Enter a URL'); + const titleInput = screen.getByPlaceholderText('Enter a display name'); + fireEvent.change(urlInput, { target: { value: '/some-new-url' } }); + fireEvent.change(titleInput, { target: { value: 'some new title' } }); + + fireEvent.click(screen.getByText('Save')); + await waitFor(() => { + expect(spy).toHaveBeenCalledWith({ + id: 'id', + title: 'some new title', + url: '/some-new-url', + }); + expect(props.onClose).toHaveBeenCalledTimes(1); + }); + + expect(analyticsSpy.getEvents()[0]).toMatchObject({ + action: 'click', + subject: `Clicked 'Save' in Edit Shortcut`, + }); + }); + it('removes the shortcut', async () => { const spy = jest.spyOn(api, 'remove'); diff --git a/plugins/shortcuts/src/EditShortcut.tsx b/plugins/shortcuts/src/EditShortcut.tsx index 5336841633..a5f801604f 100644 --- a/plugins/shortcuts/src/EditShortcut.tsx +++ b/plugins/shortcuts/src/EditShortcut.tsx @@ -27,7 +27,7 @@ import { ShortcutForm } from './ShortcutForm'; import { FormValues, Shortcut } from './types'; import DeleteIcon from '@material-ui/icons/Delete'; import { ShortcutApi } from './api'; -import { alertApiRef, useApi } from '@backstage/core-plugin-api'; +import { alertApiRef, useApi, useAnalytics } from '@backstage/core-plugin-api'; const useStyles = makeStyles(theme => ({ card: { @@ -59,8 +59,10 @@ export const EditShortcut = ({ const classes = useStyles(); const alertApi = useApi(alertApiRef); const open = Boolean(anchorEl); + const analytics = useAnalytics(); const handleSave: SubmitHandler = async ({ url, title }) => { + analytics.captureEvent('click', `Clicked 'Save' in Edit Shortcut`); const newShortcut: Shortcut = { ...shortcut, url,