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

Builder focus behaviour
2024-07-02 13:01:09 +12:00 · 2022-06-13 09:04:04 +01:00 · 2022-06-13 09:04:04 +01:00 · 1678674c2f
parent b0b69222d1 f89d63e664
commit 1678674c2f
32 changed files with 1087 additions and 233 deletions
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/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>
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/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}
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/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) => {
-    // 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 (!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
+  $: focus = autofocus && comboInput !== undefined
+  $: if (focus) {
+    comboInput.focus()
  }

  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:focus={() => {
+        focus = true
+      }}
+      on:blur={() => {
+        focus = false
+        context.clear()
+      }}
      on:change={onType}
      value={value || ""}
      placeholder={placeholder || ""}
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/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}
 />
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/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;
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/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}
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/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>
--- a/packages/bbui/src/Form/Select.svelte
+++ b/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}
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/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(interact.SETTINGS_INPUT)
+      cy.get("[data-cy=setting-text] 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.contains("Typography").click()
-      cy.get(interact.FONT_SIZE_PROP_CONTROL).click()
-      cy.contains("60px").click()
-      cy.getComponent(headlineId).should("have.css", "font-size", "60px")
+      cy.get("[data-cy=setting-size]").scrollIntoView().click()
+      cy.get("[data-cy=setting-size]").within(() => {
+        cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
+      })
+      
+      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(interact.DATA_CY_DATASOURCE)
-          .contains("Choose option")
+        cy.get("[data-cy=setting-dataSource]")
+          .contains("Custom")
          .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.get(".modal")
-            .get("button.primary")
+          cy.contains("Update form fields").click()
+          cy.get(".spectrum-Modal")
+            .get(".confirm-wrap .spectrum-Button")
            .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()
+      })
+    })
  })
 })
--- a/packages/builder/cypress/support/commands.js
+++ b/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) => {
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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
 }
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/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
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/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}`)
      }
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/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}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/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}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/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>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/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}
+/>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/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} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/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">
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/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}
+/>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/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>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
+++ b/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}
 />
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@ -154,6 +154,7 @@
    selected,
    name,
    editing,
+    type: instance._component,
  })

  const initialise = instance => {
--- a/packages/client/src/components/app/Icon.svelte
+++ b/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;
--- a/packages/client/src/components/app/Link.svelte
+++ b/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}
--- a/packages/client/src/components/app/Placeholder.svelte
+++ b/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>
-    {text || $component.name || "Placeholder"}
+  <div class="placeholder_wrap">
+    {#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>
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
@ -39,7 +39,7 @@
      }}
    >
      {#if $component.empty}
-        <Placeholder text={$component.name} />
+        <Placeholder />
      {:else}
        <BlockComponent
          type="repeater"
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/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}

--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/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 ||
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/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
-          text="Add the Field setting to start using your component"
-        />
+        {#if $builderStore.inBuilder}
+          <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);
--- a/packages/client/src/stores/builder.js
+++ b/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,