wip

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

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<undefined | FormValidation>();
   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 && <LinearProgress variant="indeterminate" />}
@@ -219,7 +214,7 @@ export const Stepper = (stepperProps: StepperProps) => {
           );
         })}
         <MuiStep>
-          <MuiStepLabel>${reviewLabel}</MuiStepLabel>
+          <MuiStepLabel>Review</MuiStepLabel>
         </MuiStep>
       </MuiStepper>
       <div className={styles.formWrapper}>
@@ -279,7 +274,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 className={styles.backButton}
                 disabled={activeStep < 1}
               >
-                {backLabel}
+                Back
               </Button>
               <Button
                 variant="contained"