Avoid leaking analytics details to external consumers

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

plugins/scaffolder-react/api-report-alpha.md

@@ -157,7 +157,6 @@ export type StepperProps = {
   manifest: TemplateParameterSchema;
   extensions: FieldExtensionOptions<any, any>[];
   templateName?: string;
-  minutesSaved?: number;
   formProps?: FormProps;
   initialState?: Record<string, JsonValue>;
   onCreate: (values: Record<string, JsonValue>) => Promise<void>;

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

@@ -75,8 +75,12 @@ const useStyles = makeStyles(theme => ({
 export type StepperProps = {
   manifest: TemplateParameterSchema;
   extensions: FieldExtensionOptions<any, any>[];
+  /**
+   * @deprecated This was only ever used for analytics tracking purposes, which
+   * is now handled in the `<Workflow />` component. Passing it in will have no
+   * effect.
+   */
   templateName?: string;
-  minutesSaved?: number;
   formProps?: FormProps;
   initialState?: Record<string, JsonValue>;
   onCreate: (values: Record<string, JsonValue>) => Promise<void>;
@@ -148,12 +152,7 @@ export const Stepper = (stepperProps: StepperProps) => {
 
   const handleCreate = useCallback(() => {
     props.onCreate(formState);
-    const name =
-      typeof formState.name === 'string' ? formState.name : undefined;
-    analytics.captureEvent('create', name ?? props.templateName ?? 'unknown', {
-      value: props.minutesSaved,
-    });
-  }, [props, formState, analytics]);
+  }, [props, formState]);
 
   const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });
 

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import {
   Content,
   InfoCard,
@@ -23,13 +23,14 @@ import {
 } from '@backstage/core-components';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { makeStyles } from '@material-ui/core';
-import { errorApiRef, useApi } from '@backstage/core-plugin-api';
+import { errorApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';
 import { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema';
 import { Stepper, type StepperProps } from '../Stepper/Stepper';
 import { SecretsContextProvider } from '../../../secrets/SecretsContext';
 import { useFilteredSchemaProperties } from '../../hooks/useFilteredSchemaProperties';
 import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
 import { useTemplateTimeSavedMinutes } from '../../hooks/useTemplateTimeSaved';
+import { JsonValue } from '@backstage/types';
 
 const useStyles = makeStyles({
   markdown: {
@@ -69,9 +70,10 @@ export type WorkflowProps = {
  * @alpha
  */
 export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {
-  const { title, description, namespace, templateName, ...props } =
+  const { title, description, namespace, templateName, onCreate, ...props } =
     workflowProps;
 
+  const analytics = useAnalytics();
   const styles = useStyles();
   const templateRef = stringifyEntityRef({
     kind: 'Template',
@@ -87,6 +89,19 @@ export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {
 
   const minutesSaved = useTemplateTimeSavedMinutes(templateRef);
 
+  const workflowOnCreate = useCallback(
+    async (formState: Record<string, JsonValue>) => {
+      onCreate(formState);
+
+      const name =
+        typeof formState.name === 'string' ? formState.name : undefined;
+      analytics.captureEvent('create', name ?? templateName ?? 'unknown', {
+        value: minutesSaved,
+      });
+    },
+    [onCreate, analytics, templateName, minutesSaved],
+  );
+
   useEffect(() => {
     if (error) {
       errorApi.post(new Error(`Failed to load template, ${error}`));
@@ -116,8 +131,7 @@ export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {
         >
           <Stepper
             manifest={sortedManifest}
-            templateName={templateName}
-            minutesSaved={minutesSaved}
+            onCreate={workflowOnCreate}
             {...props}
           />
         </InfoCard>