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,