From 2c77bd52d7fb254e9aa00f1bc59414c4406f1f63 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Fri, 13 Jun 2025 10:30:49 +0200
Subject: [PATCH] scaffolder: track steps

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../src/next/components/Workflow/Workflow.tsx |  5 +-
 .../next/hooks/useFilteredSchemaProperties.ts | 85 ++++++++++---------
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
index 95e2647b5a..527009037d 100644
--- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
+++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
@@ -99,9 +99,12 @@ export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {
 
       analytics.captureEvent('create', 'Task has been created', {
         value: minutesSaved,
+        attributes: {
+          templateSteps: sortedManifest?.steps?.length ?? 0,
+        },
       });
     },
-    [onCreate, analytics, minutesSaved],
+    [onCreate, analytics, minutesSaved, sortedManifest],
   );
 
   useEffect(() => {
diff --git a/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.ts b/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.ts
index be6f581f87..cac696a745 100644
--- a/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.ts
+++ b/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.ts
@@ -16,6 +16,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import { useApi, featureFlagsApiRef } from '@backstage/core-plugin-api';
 import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react';
+import { useMemo } from 'react';
 
 /**
  * Returns manifest of software templates with steps without a featureFlag tag.
@@ -28,49 +29,51 @@ export const useFilteredSchemaProperties = (
   const featureFlagKey = 'backstage:featureFlag';
   const featureFlagApi = useApi(featureFlagsApiRef);
 
-  if (!manifest) {
-    return undefined;
-  }
-
-  const filteredSteps = manifest?.steps
-    .filter(step => {
-      const featureFlag = step.schema[featureFlagKey];
-      return (
-        typeof featureFlag !== 'string' || featureFlagApi.isActive(featureFlag)
-      );
-    })
-    .map(step => {
-      const filteredStep = cloneDeep(step);
-      const removedPropertyKeys: Array<string> = [];
-      if (filteredStep.schema.properties) {
-        filteredStep.schema.properties = Object.fromEntries(
-          Object.entries(filteredStep.schema.properties).filter(
-            ([key, value]) => {
-              if (value[featureFlagKey]) {
-                if (featureFlagApi.isActive(value[featureFlagKey])) {
-                  return true;
-                }
-
-                removedPropertyKeys.push(key);
-                return false;
-              }
-              return true;
-            },
-          ),
+  return useMemo(() => {
+    if (!manifest) {
+      return undefined;
+    }
+    const filteredSteps = manifest?.steps
+      .filter(step => {
+        const featureFlag = step.schema[featureFlagKey];
+        return (
+          typeof featureFlag !== 'string' ||
+          featureFlagApi.isActive(featureFlag)
         );
+      })
+      .map(step => {
+        const filteredStep = cloneDeep(step);
+        const removedPropertyKeys: Array<string> = [];
+        if (filteredStep.schema.properties) {
+          filteredStep.schema.properties = Object.fromEntries(
+            Object.entries(filteredStep.schema.properties).filter(
+              ([key, value]) => {
+                if (value[featureFlagKey]) {
+                  if (featureFlagApi.isActive(value[featureFlagKey])) {
+                    return true;
+                  }
 
-        // remove the feature flag property key from required if they are not active
-        filteredStep.schema.required = Array.isArray(
-          filteredStep.schema.required,
-        )
-          ? filteredStep.schema.required?.filter(
-              r => !removedPropertyKeys.includes(r as string),
-            )
-          : filteredStep.schema.required;
-      }
+                  removedPropertyKeys.push(key);
+                  return false;
+                }
+                return true;
+              },
+            ),
+          );
 
-      return filteredStep;
-    });
+          // remove the feature flag property key from required if they are not active
+          filteredStep.schema.required = Array.isArray(
+            filteredStep.schema.required,
+          )
+            ? filteredStep.schema.required?.filter(
+                r => !removedPropertyKeys.includes(r as string),
+              )
+            : filteredStep.schema.required;
+        }
 
-  return { ...manifest, steps: filteredSteps };
+        return filteredStep;
+      });
+
+    return { ...manifest, steps: filteredSteps };
+  }, [manifest, featureFlagApi]);
 };