Builder focus behaviour added to guide users when adding form elements. Refactored the component tests

packages/bbui/src/Form/Combobox.svelte

@@ -13,6 +13,7 @@
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -35,6 +36,7 @@
     {options}
     {placeholder}
     {readonly}
+    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

packages/bbui/src/Form/Core/Combobox.svelte

@@ -3,13 +3,14 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
 
   export let value = null
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
+  export let autofocus = false
   export let error = null
   export let options = []
   export let getOptionLabel = option => option
@@ -18,22 +19,12 @@
   const dispatch = createEventDispatcher()
   let open = false
   let focus = false
-  $: fieldText = getFieldText(value, options, placeholder)
+  let comboInput
 
-  const getFieldText = (value, options, placeholder) => {
+  let builderFocus = getContext("field_focus")
-    // Always use placeholder if no value
-    if (value == null || value === "") {
-      return placeholder || "Choose an option or type"
-    }
 
-    // Wait for options to load if there is a value but no options
+  $: if (autofocus && comboInput) {
-    if (!options?.length) {
+    comboInput.focus()
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find(option => getOptionValue(option) === value)
-    return selected ? getOptionLabel(selected) : value
   }
 
   const selectOption = value => {
@@ -66,10 +57,16 @@
     class:is-focused={open || focus}
   >
     <input
+      bind:this={comboInput}
       {id}
       type="text"
       on:focus={() => (focus = true)}
-      on:blur={() => (focus = false)}
+      on:blur={() => {
+        if (builderFocus) {
+          builderFocus.clear()
+        }
+        focus = false
+      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

packages/builder/cypress/integration/createComponents.spec.js

@@ -1,9 +1,7 @@
-// TODO for now components are skipped, might not be good to keep doing this
-
 import filterTests from "../support/filterTests"
 
 filterTests(['all'], () => {
-  xcontext("Create Components", () => {
+  context("Create Components", () => {
     let headlineId
 
     before(() => {
@@ -12,12 +10,13 @@ filterTests(['all'], () => {
       cy.createTable("dog")
       cy.addColumn("dog", "name", "Text")
       cy.addColumn("dog", "age", "Number")
-      cy.addColumn("dog", "type", "Options")
+      cy.addColumn("dog", "breed", "Options")
       cy.navigateToFrontend()
+      cy.wait(1000) //allow the iframe some wiggle room
     })
 
     it("should add a container", () => {
-      cy.addComponent(null, "Container").then(componentId => {
+      cy.addComponent("Layout", "Container").then(componentId => {
         cy.getComponent(componentId).should("exist")
       })
     })
@@ -31,7 +30,6 @@ filterTests(['all'], () => {
 
     it("should change the text of the headline", () => {
       const text = "Lorem ipsum dolor sit amet."
-      cy.get("[data-cy=Settings]").click()
       cy.get("[data-cy=setting-text] input")
         .type(text)
         .blur()
@@ -39,32 +37,34 @@ filterTests(['all'], () => {
     })
 
     it("should change the size of the headline", () => {
-      cy.get("[data-cy=Design]").click()
+      cy.get("[data-cy=setting-size]").scrollIntoView().click()
-      cy.contains("Typography").click()
+      cy.get("[data-cy=setting-size]").within(() => {
-      cy.get("[data-cy=font-size-prop-control]").click()
+        cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
-      cy.contains("60px").click()
+      })
-      cy.getComponent(headlineId).should("have.css", "font-size", "60px")
+      
+      cy.getComponent(headlineId).within(() => {
+        cy.get(".spectrum-Heading").should("have.css", "font-size", "60px")
+      })
     })
 
     it("should create a form and reset to match schema", () => {
       cy.addComponent("Form", "Form").then(() => {
-        cy.get("[data-cy=Settings]").click()
         cy.get("[data-cy=setting-dataSource]")
-          .contains("Choose option")
+          .contains("Custom")
           .click()
         cy.get(".dropdown")
           .contains("dog")
           .click()
         cy.addComponent("Form", "Field Group").then(fieldGroupId => {
-          cy.get("[data-cy=Settings]").click()
+          cy.contains("Update form fields").click()
-          cy.contains("Update Form Fields").click()
+          cy.get(".spectrum-Modal")
-          cy.get(".modal")
+            .get(".confirm-wrap .spectrum-Button")
-            .get("button.primary")
             .click()
+          cy.wait(500)
           cy.getComponent(fieldGroupId).within(() => {
             cy.contains("name").should("exist")
             cy.contains("age").should("exist")
-            cy.contains("type").should("exist")
+            cy.contains("breed").should("exist")
           })
           cy.getComponent(fieldGroupId)
             .find("input")
@@ -81,17 +81,78 @@ filterTests(['all'], () => {
         cy.get("[data-cy=setting-_instanceName] input")
           .type(componentId)
           .blur()
-        cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({
+        cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
           force: true,
         })
-        cy.get(".dropdown-container")
+        cy.get(".spectrum-Popover.is-open li")
           .contains("Delete")
           .click()
-        cy.get(".modal")
+        cy.get(".spectrum-Modal button")
           .contains("Delete Component")
-          .click()
+          .click({
+            force: true,
+          })
         cy.getComponent(componentId).should("not.exist")
       })
     })
+
+    it("should set focus to the field setting when fields are added to a form", () => {
+      cy.addComponent("Form", "Form").then(() => {
+        cy.get("[data-cy=setting-dataSource]")
+          .contains("Custom")
+          .click()
+        cy.get(".dropdown")
+          .contains("dog")
+          .click()
+        
+        const componentTypeLabels = ["Text Field", "Number Field", "Password Field", 
+          "Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment", 
+          "JSON Field", "Multi-select Picker", "Relationship Picker"]
+
+        const refocusTest = (componentId) => {
+          let inputClasses
+
+          cy.getComponent(componentId)
+          .find(".showMe").should("exist").click({ force: true })
+          
+          cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+          .should("have.class", "is-focused").within(() => {
+            cy.get("input").should(($input) => {
+              expect($input).to.have.length(1)
+              inputClasses = Cypress.$($input).attr('class')
+            })
+          })
+
+          cy.focused().then(($focused) => {
+            const focusedClasses = Cypress.$($focused).attr('class')
+            expect(inputClasses).to.equal(focusedClasses)
+          })
+        }
+
+        const testFieldFocusOnCreate = (componentLabel) => {
+          let inputClasses
+
+          cy.addComponent("Form", componentLabel).then((componentId) => {
+           
+            refocusTest(componentId)
+
+            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+            .should("have.class", "is-focused").within(() => {
+              cy.get("input").should(($input) => {
+                expect($input).to.have.length(1)
+                inputClasses = Cypress.$($input).attr('class')
+              })
+            })
+          })
+          cy.focused().then(($focused) => {
+            const focusedClasses = Cypress.$($focused).attr('class')
+            expect(inputClasses).to.equal(focusedClasses)
+          })
+        }
+
+        componentTypeLabels.forEach( testFieldFocusOnCreate )
+
+      })
+    })
   })
 })

packages/builder/cypress/support/commands.js

@@ -334,9 +334,9 @@ Cypress.Commands.add("getComponent", componentId => {
     .its("0.contentDocument")
     .should("exist")
     .its("body")
-    .should("not.be.null")
+    .should("not.be.undefined")
     .then(cy.wrap)
-    .find(`[data-id=${componentId}]`)
+    .find(`[data-id='${componentId}']`)
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {

packages/builder/src/builderStore/store/frontend.js

@@ -380,6 +380,21 @@ export const getFrontendStore = () => {
         const selected = get(selectedComponent)
         const asset = get(currentAsset)
 
+        const formComponents = [
+          "stringfield",
+          "optionsfield",
+          "numberfield",
+          "datetimefield",
+          "booleanfield",
+          "passwordfield",
+          "longformfield",
+          "attachmentfield",
+          "jsonfield",
+          "relationshipfield",
+          "multifieldselect",
+          "s3upload",
+        ]
+
         // Create new component
         const componentInstance = store.actions.components.createInstance(
           componentName,
@@ -417,11 +432,31 @@ export const getFrontendStore = () => {
         }
         parentComponent._children.push(componentInstance)
 
+        let isFormComponent = false
+        let componentPrefix = "@budibase/standard-components/"
+        if (parentComponent._component === componentPrefix + "form") {
+          const mappedComponentTypes = formComponents.map(cmp => {
+            return componentPrefix + cmp
+          })
+          if (mappedComponentTypes.indexOf(componentInstance._component) > -1) {
+            isFormComponent = true
+          }
+        }
+
         // Save components and update UI
         await store.actions.preview.saveSelected()
         store.update(state => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
+
+          if (isFormComponent) {
+            //A field component added to a form.
+            state.builderFocus = {
+              key: "field",
+              target: state.selectedComponentId,
+              location: "component_settings",
+            }
+          }
           return state
         })
 

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -157,6 +157,14 @@
     try {
       if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
+        //Clear focus
+        if(data.id !== $store.builderFocus?.target){
+          store.update(state => {
+            delete state.builderFocus
+            return state
+          })
+        }
+        //check if the builder-focus matches?
       } else if (type === "update-prop") {
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
@@ -190,6 +198,12 @@
           store.actions.components.copy(source, true)
           await store.actions.components.paste(destination, data.mode)
         }
+      } else if(type == "builder-focus")  {
+        store.update(state => ({
+          ...state,
+          builderFocus : 
+          { ...data }
+        }))
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -86,6 +86,14 @@
 
     return true
   }
+
+  const isFocused = setting => {
+    return (
+      componentInstance._id === $store.builderFocus?.target &&
+      setting.key === $store.builderFocus?.key &&
+      "component_settings" === $store.builderFocus?.location
+    )
+  }
 </script>
 
 {#each sections as section, idx (section.name)}
@@ -120,6 +128,7 @@
           {componentBindings}
           {componentInstance}
           {componentDefinition}
+          autofocus={isFocused(setting)}
         />
       {/if}
     {/each}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte

@@ -4,12 +4,24 @@
     getDatasourceForProvider,
     getSchemaForDatasource,
   } from "builderStore/dataBinding"
-  import { currentAsset } from "builderStore"
+  import { currentAsset, store } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/componentUtils"
+  import { setContext } from "svelte"
+
+  setContext("field_focus", {
+    clear: () => {
+      store.update(state => {
+        delete state.builderFocus
+        return state
+      })
+    },
+    test: $store.builderFocus?.target,
+  })
 
   export let componentInstance
   export let value
   export let type
+  export let autofocus = false
 
   $: form = findClosestMatchingComponent(
     $currentAsset?.props,
@@ -40,4 +52,4 @@
   }
 </script>
 
-<Combobox on:change {value} {options} />
+<Combobox on:change {value} {options} {autofocus} />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -16,6 +16,7 @@
   export let bindings = []
   export let componentBindings = []
   export let nested = false
+  export let autofocus = false
 
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
@@ -82,6 +83,7 @@
       {key}
       {type}
       {...props}
+      {autofocus}
     />
   </div>
 </div>

packages/client/src/components/app/Placeholder.svelte

@@ -9,7 +9,10 @@
 
 {#if $builderStore.inBuilder}
   <div>
-    {text || $component.name || "Placeholder"}
+    {#if !$$slots.content}
+      {text || $component.name || "Placeholder"}
+    {/if}
+    <slot name="content" />
   </div>
 {/if}
 

packages/client/src/components/app/forms/Field.svelte

@@ -3,6 +3,10 @@
   import FieldGroupFallback from "./FieldGroupFallback.svelte"
   import { getContext, onDestroy } from "svelte"
 
+  const dispatchEvent = (type, data = {}) => {
+    window.parent.postMessage({ type, data })
+  }
+
   export let label
   export let field
   export let fieldState
@@ -76,9 +80,28 @@
       {#if !formContext}
         <Placeholder text="Form components need to be wrapped in a form" />
       {:else if !fieldState}
-        <Placeholder
+        {#if $builderStore.inBuilder}
-          text="Add the Field setting to start using your component"
+          <div class="placeholder_wrap">
-        />
+            <Placeholder>
+              <div slot="content">
+                Add the <mark>Field</mark> setting to start using your
+                component&nbsp;
+                <span
+                  class="showMe"
+                  on:click={() => {
+                    dispatchEvent("builder-focus", {
+                      location: "component_settings",
+                      key: "field",
+                      target: $component.id,
+                    })
+                  }}
+                >
+                  Show me
+                </span>
+              </div>
+            </Placeholder>
+          </div>
+        {/if}
       {:else if schemaType && schemaType !== type && type !== "options"}
         <Placeholder
           text="This Field setting is the wrong data type for this component"
@@ -94,6 +117,18 @@
 </FieldGroupFallback>
 
 <style>
+  .placeholder_wrap mark {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0px 2px;
+    border-radius: 2px;
+  }
+  div.spectrum-Form-item .placeholder_wrap .showMe {
+    color: black;
+    cursor: pointer;
+  }
+  .showMe:hover {
+    text-decoration: underline;
+  }
   label {
     white-space: nowrap;
   }