feat(analytics): added analytics to handle save on shortcuts

Signed-off-by: SnipsDev <snipsdev@gmail.com>

.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

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(
+      <TestApiProvider apis={[[analyticsApiRef, analyticsSpy]]}>
+        <AddShortcut {...props} />
+      </TestApiProvider>,
+    );
+
+    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');
 

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<FormValues>();
   const open = Boolean(anchorEl);
+  const analytics = useAnalytics();
 
   const handleSave: SubmitHandler<FormValues> = async ({ url, title }) => {
+    analytics.captureEvent('click', `Clicked 'Save' in AddShortcut`);
     const shortcut: Omit<Shortcut, 'id'> = { url, title };
 
     try {

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(
+      <TestApiProvider apis={[[analyticsApiRef, analyticsSpy]]}>
+        <EditShortcut {...props} />
+      </TestApiProvider>,
+    );
+
+    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');
 

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<FormValues> = async ({ url, title }) => {
+    analytics.captureEvent('click', `Clicked 'Save' in Edit Shortcut`);
     const newShortcut: Shortcut = {
       ...shortcut,
       url,