Capturing more event clicks for scaffolder

Signed-off-by: bnechyporenko <bnechyporenko@bol.com>

plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx

@@ -28,7 +28,7 @@ import Toc from '@material-ui/icons/Toc';
 import ControlPointIcon from '@material-ui/icons/ControlPoint';
 import MoreVert from '@material-ui/icons/MoreVert';
 import React, { useState } from 'react';
-import { useApi } from '@backstage/core-plugin-api';
+import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 
 type ContextMenuProps = {
@@ -61,10 +61,12 @@ export const ContextMenu = (props: ContextMenuProps) => {
   const pageTheme = getPageTheme({ themeId: 'website' });
   const classes = useStyles({ fontColor: pageTheme.fontColor });
   const scaffolderApi = useApi(scaffolderApiRef);
+  const analytics = useAnalytics();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
 
   const [{ status: cancelStatus }, { execute: cancel }] = useAsync(async () => {
     if (taskId) {
+      analytics.captureEvent('cancelled', 'Template has been cancelled');
       await scaffolderApi.cancelTask(taskId);
     }
   });

plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx

@@ -26,7 +26,7 @@ import {
   useTaskEventStream,
 } from '@backstage/plugin-scaffolder-react';
 import { selectedTemplateRouteRef } from '../../routes';
-import { useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { useAnalytics, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import qs from 'qs';
 import { ContextMenu } from './ContextMenu';
 import {
@@ -66,6 +66,7 @@ export const OngoingTask = (props: {
   const { taskId } = useParams();
   const templateRouteRef = useRouteRef(selectedTemplateRouteRef);
   const navigate = useNavigate();
+  const analytics = useAnalytics();
   const scaffolderApi = useApi(scaffolderApiRef);
   const taskStream = useTaskEventStream(taskId!);
   const classes = useStyles();
@@ -113,6 +114,8 @@ export const OngoingTask = (props: {
       return;
     }
 
+    analytics.captureEvent('click', `Task has been started over`);
+
     navigate({
       pathname: templateRouteRef({
         namespace,
@@ -121,6 +124,7 @@ export const OngoingTask = (props: {
       search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`,
     });
   }, [
+    analytics,
     navigate,
     taskStream.task?.spec.parameters,
     taskStream.task?.spec.templateInfo?.entity?.metadata,
@@ -130,6 +134,7 @@ export const OngoingTask = (props: {
   const [{ status: cancelStatus }, { execute: triggerCancel }] = useAsync(
     async () => {
       if (taskId) {
+        analytics.captureEvent('cancelled', 'Template has been cancelled');
         await scaffolderApi.cancelTask(taskId);
       }
     },

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.test.tsx

@@ -129,19 +129,30 @@ describe('TemplateWizardPage', () => {
       fireEvent.click(await findByRole('button', { name: 'Create' }));
     });
 
-    // The "Next Step" button should have fired an event
+    // The "Next Step" button should have fired few events
     expect(analyticsMock.getEvents()[0]).toMatchObject({
       action: 'click',
       subject: 'Next Step (1)',
       context: { entityRef: 'template:default/test' },
     });
 
-    // And the "Create" button should have fired an event
     expect(analyticsMock.getEvents()[1]).toMatchObject({
+      action: 'click',
+      subject: 'Next Step (1)',
+      context: { entityRef: 'template:default/test' },
+    });
+
+    // And the "Create" button should have fired few event
+    expect(analyticsMock.getEvents()[2]).toMatchObject({
       action: 'create',
       subject: 'expected-name',
       context: { entityRef: 'template:default/test' },
-      value: 120,
+    });
+
+    expect(analyticsMock.getEvents()[3]).toMatchObject({
+      action: 'click',
+      subject: 'Create',
+      context: { entityRef: 'template:default/test' },
     });
   });
   describe('scaffolder page context menu', () => {