Merge branch 'master' into add-additional-scaffolder-permissions

Signed-off-by: Frank Kong <50030060+Zaperex@users.noreply.github.com>

plugins/scaffolder-react/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.8.5-next.1
+
+### Patch Changes
+
+- 9156654: Capturing more event clicks for scaffolder
+- Updated dependencies
+  - @backstage/plugin-scaffolder-common@1.5.2-next.1
+  - @backstage/core-components@0.14.6-next.1
+  - @backstage/plugin-catalog-react@1.11.4-next.1
+
 ## 1.8.5-next.0
 
 ### Patch Changes

plugins/scaffolder-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.8.5-next.0",
+  "version": "1.8.5-next.1",
   "description": "A frontend library that helps other Backstage plugins interact with the Scaffolder",
   "backstage": {
     "role": "web-library"

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -35,9 +35,8 @@ import {
   type FormValidation,
 } from './createAsyncValidators';
 import { ReviewState, type ReviewStateProps } from '../ReviewState';
-import { useTemplateSchema } from '../../hooks/useTemplateSchema';
+import { useTemplateSchema, useFormDataFromQuery } from '../../hooks';
 import validator from '@rjsf/validator-ajv8';
-import { useFormDataFromQuery } from '../../hooks';
 import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';
 import { hasErrors } from './utils';
 import * as FieldOverrides from './FieldOverrides';
@@ -115,6 +114,13 @@ export const Stepper = (stepperProps: StepperProps) => {
   const [errors, setErrors] = useState<undefined | FormValidation>();
   const styles = useStyles();
 
+  const backLabel =
+    presentation?.buttonLabels?.backButtonText ?? backButtonText;
+  const createLabel =
+    presentation?.buttonLabels?.createButtonText ?? createButtonText;
+  const reviewLabel =
+    presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText;
+
   const extensions = useMemo(() => {
     return Object.fromEntries(
       props.extensions.map(({ name, component }) => [name, component]),
@@ -150,7 +156,8 @@ export const Stepper = (stepperProps: StepperProps) => {
 
   const handleCreate = useCallback(() => {
     props.onCreate(formState);
-  }, [props, formState]);
+    analytics.captureEvent('click', `${createLabel}`);
+  }, [props, formState, analytics, createLabel]);
 
   const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });
 
@@ -181,13 +188,6 @@ export const Stepper = (stepperProps: StepperProps) => {
     setFormState(current => ({ ...current, ...formData }));
   };
 
-  const backLabel =
-    presentation?.buttonLabels?.backButtonText ?? backButtonText;
-  const createLabel =
-    presentation?.buttonLabels?.createButtonText ?? createButtonText;
-  const reviewLabel =
-    presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText;
-
   return (
     <>
       {isValidating && <LinearProgress variant="indeterminate" />}
@@ -214,7 +214,7 @@ export const Stepper = (stepperProps: StepperProps) => {
           );
         })}
         <MuiStep>
-          <MuiStepLabel>Review</MuiStepLabel>
+          <MuiStepLabel>${reviewLabel}</MuiStepLabel>
         </MuiStep>
       </MuiStepper>
       <div className={styles.formWrapper}>
@@ -274,7 +274,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 className={styles.backButton}
                 disabled={activeStep < 1}
               >
-                Back
+                {backLabel}
               </Button>
               <Button
                 variant="contained"

plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx

@@ -16,7 +16,11 @@
 
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { MarkdownContent, UserIcon } from '@backstage/core-components';
-import { IconComponent, useApp } from '@backstage/core-plugin-api';
+import {
+  IconComponent,
+  useAnalytics,
+  useApp,
+} from '@backstage/core-plugin-api';
 import {
   EntityRefLinks,
   getEntityRelations,
@@ -32,7 +36,7 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import LanguageIcon from '@material-ui/icons/Language';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { CardHeader } from './CardHeader';
 import { CardLink } from './CardLink';
 import { usePermission } from '@backstage/plugin-permission-react';
@@ -94,8 +98,9 @@ export interface TemplateCardProps {
  * @alpha
  */
 export const TemplateCard = (props: TemplateCardProps) => {
-  const { template } = props;
+  const { onSelected, template } = props;
   const styles = useStyles();
+  const analytics = useAnalytics();
   const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
   const app = useApp();
   const iconResolver = (key?: string): IconComponent =>
@@ -109,6 +114,10 @@ export const TemplateCard = (props: TemplateCardProps) => {
     permission: taskCreatePermission,
     resourceRef: 'task',
   });
+  const handleChoose = useCallback(() => {
+    analytics.captureEvent('click', `Template has been opened`);
+    onSelected?.(template);
+  }, [analytics, onSelected, template]);
 
   return (
     <Card>
@@ -198,7 +207,7 @@ export const TemplateCard = (props: TemplateCardProps) => {
               size="small"
               variant="outlined"
               color="primary"
-              onClick={() => props.onSelected?.(template)}
+              onClick={handleChoose}
             >
               Choose
             </Button>