Ensure that the correct form step is always visible in builder preview

packages/client/src/store/builder.js

@@ -28,6 +28,26 @@ const findComponentById = (component, componentId) => {
   return null
 }
 
+const findComponentIdPath = (component, componentId, path = []) => {
+  if (!component || !componentId) {
+    return null
+  }
+  path = [...path, component._id]
+  if (component._id === componentId) {
+    return path
+  }
+  if (!component._children?.length) {
+    return null
+  }
+  for (let child of component._children) {
+    const result = findComponentIdPath(child, componentId, path)
+    if (result) {
+      return result
+    }
+  }
+  return null
+}
+
 const createBuilderStore = () => {
   const initialState = {
     inBuilder: false,
@@ -37,6 +57,7 @@ const createBuilderStore = () => {
     selectedComponentId: null,
     previewId: null,
     previewType: null,
+    selectedPath: [],
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
@@ -47,10 +68,15 @@ const createBuilderStore = () => {
     const prefix = "@budibase/standard-components/"
     const type = component?._component?.replace(prefix, "")
     const definition = type ? Manifest[type] : null
+
+    // Derive the selected component path
+    const path = findComponentIdPath(asset.props, selectedComponentId) || []
+
     return {
       ...$state,
       selectedComponent: component,
       selectedComponentDefinition: definition,
+      selectedComponentPath: path,
     }
   })
 
@@ -67,6 +93,14 @@ const createBuilderStore = () => {
     notifyLoaded: () => {
       dispatchEvent("preview-loaded")
     },
+    setSelectedPath: path => {
+      console.log("set to ")
+      console.log(path)
+      writableStore.update(state => {
+        state.selectedPath = path
+        return state
+      })
+    },
   }
   return {
     ...writableStore,

packages/standard-components/src/forms/FormStep.svelte

@@ -4,7 +4,7 @@
 
   export let step
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
   const formContext = getContext("form")
 
@@ -13,6 +13,19 @@
 
   $: formState = formContext?.formState
   $: currentStep = $formState?.currentStep
+
+  // If in the builder preview, show this step if it is selected
+  $: {
+    if (step && formContext && $builderStore.inBuilder) {
+      console.log($builderStore.selectedPath)
+      console.log($component.id)
+
+      if ($builderStore.selectedComponentPath?.includes($component.id)) {
+        console.log("selecting " + step)
+        formContext.formApi.setStep(step)
+      }
+    }
+  }
 </script>
 
 {#if !formContext}

packages/standard-components/src/forms/InnerForm.svelte

@@ -146,6 +146,11 @@
     prevStep: () => {
       currentStep.update(step => Math.max(1, step - 1))
     },
+    setStep: step => {
+      if (step) {
+        currentStep.set(step)
+      }
+    },
   }
 
   // Creates an API for a specific field