Merge pull request #5937 from Budibase/feature/required-field-focus

Builder focus behaviour

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -1,7 +1,8 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
   const dispatch = createEventDispatcher()
+  const context = getContext("builderFocus")
 
   export let quiet = false
   export let emphasized = false
@@ -13,6 +14,14 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
+  export let autofocus = false
+
+  let focus = false
+  let actionButton
+  $: focus = autofocus && actionButton !== undefined
+  $: if (focus) {
+    actionButton.focus()
+  }
 
   function longPress(element) {
     if (!longPressable) return
@@ -37,6 +46,7 @@
 
 <button
   data-cy={dataCy}
+  bind:this={actionButton}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
@@ -44,9 +54,17 @@
   class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
+  class:is-focused={focus}
   {disabled}
   on:longPress
   on:click|preventDefault
+  on:focus={() => {
+    focus = true
+  }}
+  on:blur={() => {
+    focus = false
+    if (context) context.clear()
+  }}
 >
   {#if longPressable}
     <svg
@@ -80,4 +98,10 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  button.is-focused {
+    border-color: var(
+      --spectrum-textfield-m-border-color-down,
+      var(--spectrum-alias-border-color-mouse-focus)
+    );
+  }
 </style>

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,37 +3,28 @@
   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
   export let getOptionValue = option => option
 
+  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let open = false
   let focus = false
-  $: fieldText = getFieldText(value, options, placeholder)
+  let comboInput
 
-  const getFieldText = (value, options, placeholder) => {
+  $: focus = autofocus && comboInput !== undefined
-    // Always use placeholder if no value
+  $: if (focus) {
-    if (value == null || value === "") {
+    comboInput.focus()
-      return placeholder || "Choose an option or type"
-    }
-
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      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:focus={() => {
-      on:blur={() => (focus = false)}
+        focus = true
+      }}
+      on:blur={() => {
+        focus = false
+        context.clear()
+      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

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

@@ -13,6 +13,7 @@
   export let readonly = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -85,4 +86,5 @@
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
+  {autofocus}
 />

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

@@ -3,7 +3,7 @@
   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"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
 
@@ -26,9 +26,18 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
+  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let searchTerm = null
+  let focus = false
+  let pickerButton
+
+  $: focus = autofocus && pickerButton !== undefined
+  $: if (focus) {
+    pickerButton.focus()
+  }
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -80,7 +89,24 @@
     class:is-invalid={!!error}
     class:is-open={open}
     aria-haspopup="listbox"
+    class:is-focused={focus}
+    bind:this={pickerButton}
     on:mousedown={onClick}
+    on:keydown={e => {
+      var keycode = e.key
+      if (focus) {
+        if (keycode === "Enter") {
+          onClick(e)
+        }
+      }
+    }}
+    on:focus={() => {
+      focus = true
+    }}
+    on:blur={() => {
+      focus = false
+      if (context) context.clear()
+    }}
   >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">
@@ -199,6 +225,7 @@
   }
   .spectrum-Picker {
     width: 100%;
+    box-shadow: none;
   }
   .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;

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

@@ -16,6 +16,7 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -74,6 +75,7 @@
   {fieldIcon}
   {autocomplete}
   {sort}
+  {autofocus}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}

packages/bbui/src/Form/Multiselect.svelte

@@ -14,6 +14,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -35,5 +36,6 @@
     {getOptionValue}
     on:change={onChange}
     on:click
+    {autofocus}
   />
 </Field>

packages/bbui/src/Form/Select.svelte

@@ -18,6 +18,7 @@
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -44,6 +45,7 @@
     {placeholder}
     {autoWidth}
     {sort}
+    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}

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

@@ -1,10 +1,8 @@
-// TODO for now components are skipped, might not be good to keep doing this
-
 import filterTests from "../support/filterTests"
 const interact = require('../support/interact')
 
 filterTests(['all'], () => {
-  xcontext("Create Components", () => {
+  context("Create Components", () => {
     let headlineId
 
     before(() => {
@@ -13,12 +11,29 @@ 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
     })
 
+    //Use the tree to delete a selected component
+    const deleteSelectedComponent = () => {
+      cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
+        force: true,
+      })
+      cy.get(".spectrum-Popover.is-open li")
+        .contains("Delete")
+        .click()
+      cy.get(".spectrum-Modal button")
+        .contains("Delete Component")
+        .click({
+          force: true,
+        })
+    }
+
     it("should add a container", () => {
-      cy.addComponent(null, "Container").then(componentId => {
+      cy.addComponent("Layout", "Container").then(componentId => {
         cy.getComponent(componentId).should("exist")
       })
     })
@@ -32,40 +47,43 @@ filterTests(['all'], () => {
 
     it("should change the text of the headline", () => {
       const text = "Lorem ipsum dolor sit amet."
-      cy.get(interact.SETTINGS).click()
+      cy.get("[data-cy=setting-text] input")
-      cy.get(interact.SETTINGS_INPUT)
         .type(text)
         .blur()
       cy.getComponent(headlineId).should("have.text", text)
     })
 
     it("should change the size of the headline", () => {
-      cy.get(interact.DESIGN).click()
+      cy.get("[data-cy=setting-size]").scrollIntoView().click()
-      cy.contains("Typography").click()
+      cy.get("[data-cy=setting-size]").within(() => {
-      cy.get(interact.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(interact.SETTINGS).click()
+        cy.get("[data-cy=setting-dataSource]")
-        cy.get(interact.DATA_CY_DATASOURCE)
+          .contains("Custom")
-          .contains("Choose option")
           .click()
         cy.get(interact.DROPDOWN)
           .contains("dog")
           .click()
+          cy.wait(500)
         cy.addComponent("Form", "Field Group").then(fieldGroupId => {
-          cy.get(interact.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.contains("image").should("exist")
           })
           cy.getComponent(fieldGroupId)
             .find("input")
@@ -82,17 +100,305 @@ 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(interact.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((formId) => {
+        
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(formId)
+          .blur()
+
+        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) => {
+          cy.getComponent(componentId)
+          .find(".showMe").should("exist").click({ force: true })
+          
+          cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+          .should("have.class", "is-focused")
+        }
+
+        const testFieldFocusOnCreate = (componentLabel) => {
+          cy.log("Adding: " + componentLabel)
+          return cy.addComponent("Form", componentLabel).then((componentId) => {
+           
+            refocusTest(componentId)
+
+            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+            .should("have.class", "is-focused")
+          })
+        }
+        
+        cy.wait(1000)
+        cy.wrap(componentTypeLabels).each((label) => {
+          return testFieldFocusOnCreate(label)
+        }).then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
+          deleteSelectedComponent()
+        })
+      })
+    })
+
+    it("should clear the iframe place holder when a form field has been set", () => {
+      cy.addComponent("Form", "Form").then((formId) => {
+        
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(formId)
+          .blur()
+
+        cy.get("[data-cy=setting-dataSource]")
+          .contains("Custom")
+          .click()
+        cy.get(".dropdown")
+          .contains("dog")
+          .click()
+
+        const fieldTypeToColumnName = {
+          "Text Field" : "name", 
+          "Number Field": "age", 
+          "Options Picker": "breed"
+        }
+
+        const componentTypeLabels = Object.keys(fieldTypeToColumnName)
+
+        const testFieldFocusOnCreate = (componentLabel) => {
+          cy.log("Adding: " + componentLabel)
+          return cy.addComponent("Form", componentLabel).then((componentId) => {
+           
+            cy.getComponent(componentId)
+              .find(".placeholder_wrap").should("exist")
+
+            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+              .should("have.class", "is-focused")
+
+            cy.get("[data-cy=setting-field] button.spectrum-Picker").click()
+
+            //Click the first appropriate field. They are filtered by type
+            cy.get("[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item")
+              .contains(fieldTypeToColumnName[componentLabel]).click()
+            cy.wait(500)
+            cy.getComponent(componentId)
+              .find(".placeholder_wrap").should("not.exist")
+          })
+        }
+        
+        cy.wait(500)
+        cy.wrap(componentTypeLabels).each((label) => {
+          return testFieldFocusOnCreate(label)
+        }).then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
+          deleteSelectedComponent()
+        })
+      })
+    })
+
+    it("should focus a charts settings on data provider if not nested in provider ", () => {
+      cy.addComponent("Layout", "Container").then((containerId) => {
+
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(containerId)
+          .blur()
+
+        const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", 
+          "Donut Chart", "Candlestick Chart"]
+
+        const refocusTest = (componentId) => {
+          cy.getComponent(componentId)
+          .find(".showMe").should("exist").click({ force: true })
+          
+          cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
+          .should("have.class", "is-focused")
+        }
+
+        const testFocusOnCreate = (chartLabel) => {
+          cy.log("Adding: " + chartLabel)
+          cy.addComponent("Chart", chartLabel).then((componentId) => {
+            refocusTest(componentId)
+
+            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
+            .should("have.class", "is-focused")
+          })
+        }
+
+        cy.wait(1000)
+        cy.wrap(chartTypeLabels).each((label) => {
+          return testFocusOnCreate(label)
+        })
+        .then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(containerId).click({ force: true })
+          deleteSelectedComponent()
+        })
+
+      })
+
+    })
+
+    it("should populate the provider for charts with a data provider in its path", () => {
+      cy.addComponent("Data", "Data Provider").then((providerId) => {
+
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(providerId)
+          .blur()
+
+          
+        cy.get("[data-cy=setting-dataSource]")
+          .contains("Choose an option")
+          .click()
+
+        cy.get(`[data-cy=dataSource-popover-${providerId}] ul li`)
+          .contains("dog")
+          .click()
+
+        const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", 
+          "Donut Chart", "Candlestick Chart"]
+
+        const testFocusOnCreate = (chartLabel) => {
+          cy.log("Adding: " + chartLabel)
+          cy.addComponent("Chart", chartLabel).then((componentId) => {
+
+            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
+              .should("not.have.class", "is-focused")
+
+            // Pre populated.
+            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker-label")
+              .contains(providerId)
+              .should("exist")
+          })
+        }
+
+        cy.wait(1000)
+        cy.wrap(chartTypeLabels).each((label) => {
+          return testFocusOnCreate(label)
+        })
+        .then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(providerId).click({ force: true })
+          deleteSelectedComponent()
+        })
+      })
+
+    })
+
+    it("should replace the placeholder when a url is set on an image", () => {
+      cy.addComponent("Elements", "Image").then((imageId) => {
+        
+        cy.get("[data-cy=url-prop-control] .spectrum-InputGroup")
+          .should("have.class", "is-focused")
+
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(imageId)
+          .blur()
+        
+        //return $("New Data Provider.Rows")[0]["Attachment"][0]["url"]
+        //No minio, so just enter something local that will not reslove
+        cy.get("[data-cy=url-prop-control] input[type=text]")
+          .type("cypress/fixtures/ghost.png")
+          .blur()
+
+        cy.getComponent(imageId)
+          .find(".placeholder_wrap").should("not.exist")
+
+        cy.getComponent(imageId)
+          .find(`img[alt=${imageId}]`).should("exist")
+        
+        cy.get(".nav-items-container .nav-item")
+          .contains(imageId)
+          .click({ force: true })
+
+        deleteSelectedComponent()
+      })
+    })
+
+    it("should add a markdown component.", () => {
+      cy.addComponent("Elements", "Markdown Viewer").then((markdownId) => {
+        
+        cy.get("[data-cy=value-prop-control] .spectrum-InputGroup")
+          .should("have.class", "is-focused")
+        
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(markdownId)
+          .blur()
+
+        cy.get("[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input")
+          .type("# Hi").blur()
+
+        cy.getComponent(markdownId)
+          .find(".placeholder_wrap").should("not.exist")
+        
+        cy.getComponent(markdownId)
+          .find(".editor-preview-full h1").contains("Hi")
+
+        cy.get(".nav-items-container .nav-item")
+          .contains(markdownId)
+          .click({ force: true })
+
+        deleteSelectedComponent()
+      })
+    })
+
+    it("should direct the user when adding an Icon component.", () => {
+      cy.addComponent("Elements", "Icon").then((iconId) => {
+        
+        cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton")
+          .should("have.class", "is-focused")
+
+        cy.getComponent(iconId)
+          .find(".placeholder_wrap").should("exist")
+        
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(iconId)
+          .blur()
+
+        cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton").click()
+
+        cy.get("[data-cy=icon-popover].spectrum-Popover.is-open").within(() => {
+          cy.get(".search-input input")
+          .type("save")
+          .blur()
+
+          cy.get(".search-input button").click({ force: true })
+
+          cy.get(".icon-area .icon-container").eq(0).click({ force: true })
+        })
+
+        cy.getComponent(iconId)
+          .find(".placeholder_wrap").should("not.exist")
+
+        cy.getComponent(iconId)
+          .find("i.ri-save-fill").should("exist")
+
+        cy.get(".nav-items-container .nav-item")
+          .contains(iconId)
+          .click({ force: true })
+
+        deleteSelectedComponent()
+      })
+    })
   })
 })

packages/builder/cypress/support/commands.js

@@ -472,7 +472,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
   if (component) {
     cy.get(`[data-cy="component-${component}"]`).click({ force: true })
   }
-  cy.wait(2000)
+  cy.wait(1000)
   cy.location().then(loc => {
     const params = loc.pathname.split("/")
     const componentId = params[params.length - 1]
@@ -487,9 +487,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("createScreen", (route, accessLevelLabel) => {

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

@@ -20,6 +20,7 @@ import analytics, { Events } from "analytics"
 import {
   findComponentType,
   findComponentParent,
+  findComponentPath,
   findClosestMatchingComponent,
   findAllMatchingComponents,
   findComponent,
@@ -422,6 +423,21 @@ export const getFrontendStore = () => {
         store.update(state => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
+
+          const focusSetting = resolveComponentFocus(
+            asset?.props,
+            componentInstance
+          )
+          if (focusSetting) {
+            state.builderFocus = [
+              {
+                key: focusSetting.key,
+                target: state.selectedComponentId,
+                location: "component_settings",
+              },
+            ]
+          }
+
           return state
         })
 
@@ -664,5 +680,32 @@ export const getFrontendStore = () => {
     },
   }
 
+  // Determine the initial focus for newly created components
+  // Take into account the fact that data providers should be
+  // skipped if they will be inherited from the path
+  const resolveComponentFocus = (asset_props, componentInstance) => {
+    const definition = store.actions.components.getDefinition(
+      componentInstance._component
+    )
+    let providerIdx = -1
+    let required = definition.settings.filter((s, idx) => {
+      if (s.type === "dataProvider") {
+        providerIdx = idx
+      }
+      return s.required
+    })
+
+    if (providerIdx > -1) {
+      const path = findComponentPath(asset_props, componentInstance._id)
+      const providers = path.filter(c =>
+        c._component?.endsWith("/dataprovider")
+      )
+      if (providers.length) {
+        required = required.splice(providerIdx, 1)
+      }
+    }
+    return required[0]
+  }
+
   return store
 }

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -18,6 +18,7 @@
   export let options
   export let allowJS = true
   export let appendBindingsAsOptions = true
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -61,6 +62,7 @@
     on:pick={e => onChange(e.detail, true)}
     {placeholder}
     options={allOptions}
+    {autofocus}
   />
   {#if !disabled}
     <div

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

@@ -148,6 +148,21 @@
     }
   })
 
+  const resolveFocus = (data) => {
+    if($store.builderFocus){
+      const comp = $store.builderFocus.reduce((acc, item)=>{
+      acc = item.target
+        return acc
+      }, "")
+      if(data.id !== comp){
+          store.update(state => {
+          delete state.builderFocus
+          return state
+        })
+      }
+    }
+  }
+
   const handleBudibaseEvent = async event => {
     const { type, data } = event.data || event.detail
     if (!type) {
@@ -157,6 +172,7 @@
     try {
       if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
+        resolveFocus(data)
       } else if (type === "update-prop") {
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
@@ -190,6 +206,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

@@ -3,29 +3,16 @@
   import { Input, DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
-  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
-  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
   import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
   import { getComponentForSettingType } from "./PropertyControls/componentSettings"
   import { Utils } from "@budibase/frontend-core"
 
   export let componentDefinition
   export let componentInstance
-  export let assetInstance
   export let bindings
   export let componentBindings
 
-  const layoutDefinition = []
-  const screenDefinition = [
-    { key: "description", label: "Description", control: Input },
-    { key: "routing.route", label: "Route", control: Input },
-    { key: "routing.roleId", label: "Access", control: RoleSelect },
-    { key: "layoutId", label: "Layout", control: LayoutSelect },
-  ]
-
   $: sections = getSections(componentDefinition)
-  $: isLayout = assetInstance && assetInstance.favicon
-  $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
 
   const getSections = definition => {
     const settings = definition?.settings ?? []
@@ -86,6 +73,15 @@
 
     return true
   }
+
+  const isFocused = setting => {
+    if (!$store.builderFocus) {
+      return false
+    }
+    return (
+      setting.required === true && $store.builderFocus[0].key === setting.key
+    )
+  }
 </script>
 
 {#each sections as section, idx (section.name)}
@@ -120,6 +116,7 @@
           {componentBindings}
           {componentInstance}
           {componentDefinition}
+          autofocus={isFocused(setting)}
         />
       {/if}
     {/each}

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

@@ -6,6 +6,7 @@
   import { createEventDispatcher, onMount } from "svelte"
 
   export let value
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
@@ -24,6 +25,7 @@
 
 <Select
   {value}
+  {autofocus}
   placeholder={null}
   on:change
   options={providers}

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

@@ -25,6 +25,7 @@
   export let otherSources
   export let showAllQueries
   export let bindings = []
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const arrayTypes = ["attachment", "array"]
@@ -158,6 +159,7 @@
     value={text}
     options={[text]}
     on:click={dropdownRight.show}
+    {autofocus}
   />
   {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
@@ -184,7 +186,11 @@
     </Drawer>
   {/if}
 </div>
-<Popover bind:this={dropdownRight} anchor={anchorRight}>
+<Popover
+  bind:this={dropdownRight}
+  anchor={anchorRight}
+  dataCy={`dataSource-popover-${$store.selectedComponentId}`}
+>
   <div class="dropdown">
     <div class="title">
       <Heading size="XS">Tables</Heading>

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

@@ -10,6 +10,7 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -37,4 +38,10 @@
   }
 </script>
 
-<Select {placeholder} value={boundValue} on:change={onChange} {options} />
+<Select
+  {placeholder}
+  value={boundValue}
+  on:change={onChange}
+  {options}
+  {autofocus}
+/>

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

@@ -10,6 +10,7 @@
   export let componentInstance
   export let value
   export let type
+  export let autofocus = false
 
   $: form = findClosestMatchingComponent(
     $currentAsset?.props,
@@ -40,4 +41,4 @@
   }
 </script>
 
-<Combobox on:change {value} {options} />
+<Combobox on:change {value} {options} {autofocus} />

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

@@ -15,6 +15,7 @@
 
   export let value = ""
   export let maxIconsPerPage = 30
+  export let autofocus = false
 
   let searchTerm = ""
   let selectedLetter = "A"
@@ -117,9 +118,16 @@
 </script>
 
 <div bind:this={buttonAnchor}>
-  <ActionButton on:click={dropdown.show}>{displayValue}</ActionButton>
+  <ActionButton on:click={dropdown.show} {autofocus}>
+    {displayValue}
+  </ActionButton>
 </div>
-<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
+<Popover
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}
+  dataCy="icon-popover"
+>
   <div class="container">
     <div class="search-area">
       <div class="alphabet-area">

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

@@ -10,6 +10,7 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let autofocus
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -31,4 +32,10 @@
   }
 </script>
 
-<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
+<Multiselect
+  {placeholder}
+  value={boundValue}
+  on:change={setValue}
+  {options}
+  {autofocus}
+/>

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

@@ -4,6 +4,8 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
+  import { setContext } from "svelte"
+  import { store } from "builderStore"
 
   export let label = ""
   export let componentInstance = {}
@@ -16,6 +18,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)
@@ -60,6 +63,28 @@
       ? defaultValue
       : enriched
   }
+
+  setContext("builderFocus", {
+    clear: () => {
+      if (!$store?.builderFocus) {
+        return
+      }
+      store.update(state => {
+        const updatedFocus = $store?.builderFocus?.filter(focus => {
+          return (
+            focus.location === "component_settings" &&
+            focus.target !== componentInstance._id
+          )
+        })
+        if (updatedFocus?.length > 0) {
+          state.builderFocus = updatedFocus
+        } else {
+          delete state.builderFocus
+        }
+        return state
+      })
+    },
+  })
 </script>
 
 <div class="property-control" data-cy={`setting-${key}`}>
@@ -82,6 +107,7 @@
       {key}
       {type}
       {...props}
+      {autofocus}
     />
   </div>
 </div>

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

@@ -4,6 +4,7 @@
 
   export let value
   export let bindings
+  export let autofocus
 
   $: urlOptions = $store.screens
     .map(screen => screen.routing?.route)
@@ -16,4 +17,5 @@
   on:change
   options={urlOptions}
   appendBindingsAsOptions={false}
+  {autofocus}
 />

packages/client/src/components/Component.svelte

@@ -154,6 +154,7 @@
     selected,
     name,
     editing,
+    type: instance._component,
   })
 
   const initialise = instance => {

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

@@ -33,9 +33,6 @@
 {/if}
 
 <style>
-  div {
-    font-style: italic;
-  }
   @media (hover: hover) {
     .hoverable:hover {
       color: var(--spectrum-alias-icon-color-selected-hover) !important;

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

@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   const { linkable, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -79,7 +80,11 @@
     {componentText}
   </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if externalLink || openInNewTab}
+  {#if !url && !text}
+    <div use:styleable={{ ...$component.styles, empty: true }}>
+      <Placeholder />
+    </div>
+  {:else if externalLink || openInNewTab}
     <a
       {target}
       href={sanitizedUrl}

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

@@ -1,15 +1,67 @@
 <script>
   import { getContext } from "svelte"
+  import Manifest from "manifest.json"
+  import { builderStore } from "stores"
 
-  const { builderStore } = getContext("sdk")
+  const { componentStore } = getContext("sdk")
   const component = getContext("component")
 
   export let text
+
+  $: componentInstance = componentStore.actions.getComponentById($component.id)
+
+  const getComponentKey = compId => {
+    if (!compId) {
+      return
+    }
+    const prefix = "@budibase/standard-components/"
+    let componentKey = compId.replace(prefix, "")
+    return componentKey
+  }
+
+  const emptyFields = (definition, options) => {
+    if (!options) {
+      return []
+    }
+    return definition?.settings
+      ? definition.settings.filter(setting => {
+          return (
+            setting.required &&
+            (!options[setting.key] || options[setting.key] == "")
+          )
+        })
+      : []
+  }
+  const definition = Manifest[getComponentKey($component.type)]
+  $: focus_setting = emptyFields(definition, componentInstance)[0]
 </script>
 
 {#if $builderStore.inBuilder}
-  <div>
+  <div class="placeholder_wrap">
-    {text || $component.name || "Placeholder"}
+    {#if componentInstance && focus_setting}
+      <div>
+        <span>
+          Add the <mark>{focus_setting?.label}</mark> setting to start using your
+          component &nbsp;
+        </span>
+        <span
+          class="showMe spectrum-Link"
+          on:click={() => {
+            builderStore.actions.setFocus([
+              {
+                location: "component_settings",
+                key: focus_setting.key,
+                target: $component.id,
+              },
+            ])
+          }}
+        >
+          Show me
+        </span>
+      </div>
+    {:else}
+      {text || $component.name || "Placeholder"}
+    {/if}
   </div>
 {/if}
 
@@ -17,5 +69,18 @@
   div {
     color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
+    padding: var(--spacing-xs);
+  }
+  :global(div.placeholder_wrap mark) {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0px 2px;
+    border-radius: 2px;
+  }
+  :global(div.placeholder_wrap .showMe) {
+    cursor: pointer;
+  }
+  :global(div.placeholder_wrap .showMe:hover) {
+    text-decoration: underline;
+    cursor: pointer;
   }
 </style>

packages/client/src/components/app/blocks/RepeaterBlock.svelte

@@ -39,7 +39,7 @@
       }}
     >
       {#if $component.empty}
-        <Placeholder text={$component.name} />
+        <Placeholder />
       {:else}
         <BlockComponent
           type="repeater"

packages/client/src/components/app/charts/ApexChart.svelte

@@ -13,7 +13,7 @@
   <div use:chart={options} use:styleable={$component.styles} />
 {:else if $builderStore.inBuilder}
   <div use:styleable={$component.styles}>
-    <Placeholder text="Use the settings panel to build your chart" />
+    <Placeholder />
   </div>
 {/if}
 

packages/client/src/components/app/charts/BarChart.svelte

@@ -53,7 +53,6 @@
     palette,
     horizontal
   ) => {
-    console.log("new chart")
     const allCols = [labelColumn, ...(valueColumns || [null])]
     if (
       !dataProvider ||

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

@@ -76,9 +76,9 @@
       {#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"
+          <Placeholder />
-        />
+        {/if}
       {:else if schemaType && schemaType !== type && type !== "options"}
         <Placeholder
           text="This Field setting is the wrong data type for this component"
@@ -100,12 +100,10 @@
   label.hidden {
     padding: 0;
   }
-
   .spectrum-Form-itemField {
     position: relative;
     width: 100%;
   }
-
   .error {
     color: var(
       --spectrum-semantic-negative-color-default,
@@ -114,7 +112,6 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
-
   .spectrum-FieldLabel--right,
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);

packages/client/src/stores/builder.js

@@ -76,6 +76,9 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
+    setFocus: data => {
+      window.parent.postMessage({ type: "builder-focus", data })
+    },
   }
   return {
     ...store,