diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 9fdc0270e7..9b475870d2 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -37,8 +37,9 @@ import { type FormValidation, } from './createAsyncValidators'; import { ReviewState, type ReviewStateProps } from '../ReviewState'; -import { useTemplateSchema, useFormDataFromQuery } from '../../hooks'; +import { useTemplateSchema } from '../../hooks/useTemplateSchema'; import validator from '@rjsf/validator-ajv8'; +import { useFormDataFromQuery } from '../../hooks'; import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps'; import { hasErrors } from './utils'; import * as FieldOverrides from './FieldOverrides'; @@ -111,18 +112,6 @@ export const Stepper = (stepperProps: StepperProps) => { const [errors, setErrors] = useState(); const styles = useStyles(); - const templateName = - typeof formState.name === 'string' - ? formState.name - : props.templateName ?? 'unknown'; - - 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]), @@ -158,8 +147,10 @@ export const Stepper = (stepperProps: StepperProps) => { const handleCreate = useCallback(() => { props.onCreate(formState); - analytics.captureEvent('click', `[${templateName}]: ${createLabel}`); - }, [props, formState, analytics, templateName, createLabel]); + const name = + typeof formState.name === 'string' ? formState.name : undefined; + analytics.captureEvent('create', name ?? props.templateName ?? 'unknown'); + }, [props, formState, analytics]); const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts }); @@ -183,16 +174,20 @@ export const Stepper = (stepperProps: StepperProps) => { setErrors(undefined); setActiveStep(prevActiveStep => { const stepNum = prevActiveStep + 1; - analytics.captureEvent( - 'click', - `[${templateName}]: Next Step (${stepNum})`, - ); + analytics.captureEvent('click', `Next Step (${stepNum})`); return stepNum; }); } setFormState(current => ({ ...current, ...formData })); }; + const backLabel = + presentation?.buttonLabels?.backButtonText ?? backButtonText; + const createLabel = + presentation?.buttonLabels?.createButtonText ?? createButtonText; + const reviewLabel = + presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText; + return ( <> {isValidating && } @@ -219,7 +214,7 @@ export const Stepper = (stepperProps: StepperProps) => { ); })} - ${reviewLabel} + Review
@@ -279,7 +274,7 @@ export const Stepper = (stepperProps: StepperProps) => { className={styles.backButton} disabled={activeStep < 1} > - {backLabel} + Back