Merge pull request #6309 from Budibase/builder-focus-updates

Builder focus updates
2022-06-15 11:07:46 +01:00 · 2022-06-15 11:07:46 +01:00 · eb3a7b44b6
parent 2dc10f611c 2bef536e9a
commit eb3a7b44b6
28 changed files with 152 additions and 307 deletions
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@ -1,8 +1,7 @@
 <script>
  import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
  const dispatch = createEventDispatcher()
-  const context = getContext("builderFocus")

  export let quiet = false
  export let emphasized = false
@ -14,14 +13,6 @@
  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
@ -46,7 +37,6 @@

 <button
  data-cy={dataCy}
-  bind:this={actionButton}
  use:longPress
  class:spectrum-ActionButton--quiet={quiet}
  class:spectrum-ActionButton--emphasized={emphasized}
@ -54,17 +44,9 @@
  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
@ -98,10 +80,4 @@
  .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,7 +13,6 @@
  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 => {
@ -36,7 +35,6 @@
    {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,29 +3,21 @@
  import "@spectrum-css/popover/dist/index-vars.css"
  import "@spectrum-css/menu/dist/index-vars.css"
  import { fly } from "svelte/transition"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } 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
-  let comboInput
-
-  $: focus = autofocus && comboInput !== undefined
-  $: if (focus) {
-    comboInput.focus()
-  }

  const selectOption = value => {
    dispatch("change", value)
@ -57,16 +49,10 @@
    class:is-focused={open || focus}
  >
    <input
-      bind:this={comboInput}
      {id}
      type="text"
-      on:focus={() => {
-        focus = true
-      }}
-      on:blur={() => {
-        focus = false
-        context.clear()
-      }}
+      on:focus={() => (focus = true)}
+      on:blur={() => (focus = false)}
      on:change={onType}
      value={value || ""}
      placeholder={placeholder || ""}
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@ -13,7 +13,6 @@
  export let readonly = false
  export let autocomplete = false
  export let sort = false
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  $: selectedLookupMap = getSelectedLookupMap(value)
@ -86,5 +85,4 @@
  {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, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
  import clickOutside from "../../Actions/click_outside"
  import Search from "./Search.svelte"

@ -26,18 +26,9 @@
  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(
@ -89,24 +80,7 @@
    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">
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@ -16,7 +16,6 @@
  export let autoWidth = false
  export let autocomplete = false
  export let sort = false
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  let open = false
@ -75,7 +74,6 @@
  {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,7 +14,6 @@
  export let getOptionLabel = option => option
  export let getOptionValue = option => option
  export let sort = false
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -36,6 +35,5 @@
    {getOptionValue}
    on:change={onChange}
    on:click
-    {autofocus}
  />
 </Field>
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@ -18,7 +18,6 @@
  export let autoWidth = false
  export let sort = false
  export let tooltip = ""
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -45,7 +44,6 @@
    {placeholder}
    {autoWidth}
    {sort}
-    {autofocus}
    {getOptionLabel}
    {getOptionValue}
    {getOptionIcon}
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -20,7 +20,6 @@ import analytics, { Events } from "analytics"
 import {
  findComponentType,
  findComponentParent,
-  findComponentPath,
  findClosestMatchingComponent,
  findAllMatchingComponents,
  findComponent,
@ -61,6 +60,7 @@ const INITIAL_FRONTEND_STATE = {
  theme: "",
  customTheme: {},
  previewDevice: "desktop",
+  highlightedSettingKey: null,
 }

 export const getFrontendStore = () => {
@ -423,21 +423,6 @@ 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
        })

@ -678,33 +663,14 @@ 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]
+    settings: {
+      highlight: key => {
+        store.update(state => ({
+          ...state,
+          highlightedSettingKey: key,
+        }))
+      },
+    },
  }

  return store
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@ -18,7 +18,6 @@
  export let options
  export let allowJS = true
  export let appendBindingsAsOptions = true
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  let bindingDrawer
@ -62,7 +61,6 @@
    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
@ -68,7 +68,7 @@
    customTheme: $store.customTheme,
    previewDevice: $store.previewDevice,
    messagePassing: $store.clientFeatures.messagePassing,
-    isBudibaseEvent: true
+    isBudibaseEvent: true,
  }
  $: json = JSON.stringify(previewData)

@ -148,21 +148,6 @@
    }
  })

-  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) {
@ -172,7 +157,6 @@
    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) {
@ -206,12 +190,18 @@
          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 if (type === "highlight-setting") {
+        store.actions.settings.highlight(data.setting)
+
+        // Also scroll setting into view
+        const selector = `[data-cy="${data.setting}-prop-control"`
+        const element = document.querySelector(selector)?.parentElement
+        if (element) {
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          })
+        }
      } 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
@ -73,15 +73,6 @@

    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)}
@ -102,10 +93,11 @@
          control={getComponentForSettingType(setting.type)}
          label={setting.label}
          key={setting.key}
-          value={componentInstance[setting.key] ??
-            componentInstance[setting.key]?.defaultValue}
+          value={componentInstance[setting.key]}
+          defaultValue={setting.defaultValue}
          nested={setting.nested}
          onChange={val => updateProp(setting.key, val)}
+          highlighted={$store.highlightedSettingKey === setting.key}
          props={{
            options: setting.options || [],
            placeholder: setting.placeholder || null,
@ -116,7 +108,6 @@
          {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,7 +6,6 @@
  import { createEventDispatcher, onMount } from "svelte"

  export let value
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
@ -25,7 +24,6 @@

 <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,7 +25,6 @@
  export let otherSources
  export let showAllQueries
  export let bindings = []
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const arrayTypes = ["attachment", "array"]
@ -159,7 +158,6 @@
    value={text}
    options={[text]}
    on:click={dropdownRight.show}
-    {autofocus}
  />
  {#if value?.type === "query"}
    <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@ -10,7 +10,6 @@
  export let componentInstance = {}
  export let value = ""
  export let placeholder
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@ -38,10 +37,4 @@
  }
 </script>

-<Select
-  {placeholder}
-  value={boundValue}
-  on:change={onChange}
-  {options}
-  {autofocus}
-/>
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@ -10,7 +10,6 @@
  export let componentInstance
  export let value
  export let type
-  export let autofocus = false

  $: form = findClosestMatchingComponent(
    $currentAsset?.props,
@ -41,4 +40,4 @@
  }
 </script>

-<Combobox on:change {value} {options} {autofocus} />
+<Combobox on:change {value} {options} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@ -15,7 +15,6 @@

  export let value = ""
  export let maxIconsPerPage = 30
-  export let autofocus = false

  let searchTerm = ""
  let selectedLetter = "A"
@ -118,7 +117,7 @@
 </script>

 <div bind:this={buttonAnchor}>
-  <ActionButton on:click={dropdown.show} {autofocus}>
+  <ActionButton on:click={dropdown.show}>
    {displayValue}
  </ActionButton>
 </div>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@ -10,7 +10,6 @@
  export let componentInstance = {}
  export let value = ""
  export let placeholder
-  export let autofocus

  const dispatch = createEventDispatcher()
  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@ -32,10 +31,4 @@
  }
 </script>

-<Multiselect
-  {placeholder}
-  value={boundValue}
-  on:change={setValue}
-  {options}
-  {autofocus}
-/>
+<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -4,8 +4,8 @@
    readableToRuntimeBinding,
    runtimeToReadableBinding,
  } from "builderStore/dataBinding"
-  import { setContext } from "svelte"
  import { store } from "builderStore"
+  import { onDestroy } from "svelte"

  export let label = ""
  export let componentInstance = {}
@ -13,15 +13,17 @@
  export let key = ""
  export let type = ""
  export let value = null
+  export let defaultValue = null
  export let props = {}
  export let onChange = () => {}
  export let bindings = []
  export let componentBindings = []
  export let nested = false
-  export let autofocus = false
+  export let highlighted = false

+  $: nullishValue = value == null || value === ""
  $: allBindings = getAllBindings(bindings, componentBindings, nested)
-  $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
+  $: safeValue = getSafeValue(value, defaultValue, allBindings)
  $: tempValue = safeValue
  $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)

@ -64,30 +66,18 @@
      : enriched
  }

-  setContext("builderFocus", {
-    clear: () => {
-      if (!$store?.builderFocus) {
-        return
+  onDestroy(() => {
+    if (highlighted) {
+      store.actions.settings.highlight(null)
    }
-      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}`}>
+<div
+  class="property-control"
+  class:highlighted={highlighted && nullishValue}
+  data-cy={`setting-${key}`}
+>
  {#if type !== "boolean" && label}
    <div class="label">
      <Label>{label}</Label>
@ -107,7 +97,6 @@
      {key}
      {type}
      {...props}
-      {autofocus}
    />
  </div>
 </div>
@ -119,6 +108,14 @@
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    border-left: 4px solid transparent;
+    margin: -6px calc(-1 * var(--spacing-xl));
+    padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
+  }
+  .property-control.highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-blue-400);
  }
  .label {
    padding-bottom: var(--spectrum-global-dimension-size-65);
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
@ -4,7 +4,6 @@

  export let value
  export let bindings
-  export let autofocus

  $: urlOptions = $store.screens
    .map(screen => screen.routing?.route)
@ -17,5 +16,4 @@
  on:change
  options={urlOptions}
  appendBindingsAsOptions={false}
-  {autofocus}
 />
--- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@ -115,7 +115,6 @@
        control={def.control}
        label={def.label}
        key={def.key}
-        error="asdasds"
        value={deepGet($currentAsset, def.key)}
        onChange={val => setAssetProps(def.key, val, def.parser, def.validate)}
        {bindings}
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -274,7 +274,8 @@
      {
        "type": "text",
        "label": "Text",
-        "key": "text"
+        "key": "text",
+        "defaultValue": "New Button"
      },
      {
        "type": "select",
@ -1154,15 +1155,13 @@
      {
        "type": "text",
        "label": "Text",
-        "key": "text",
-        "required": true
+        "key": "text"
      },
      {
        "type": "url",
        "label": "URL",
        "key": "url",
-        "placeholder": "/screen",
-        "required": true
+        "placeholder": "/screen"
      },
      {
        "type": "boolean",
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@ -23,6 +23,7 @@
  import Manifest from "manifest.json"
  import { getActiveConditions, reduceConditionActions } from "utils/conditions"
  import Placeholder from "components/app/Placeholder.svelte"
+  import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"

  export let instance = {}
  export let isLayout = false
@ -81,6 +82,7 @@
  let definition
  let settingsDefinition
  let settingsDefinitionMap
+  let missingRequiredSettings = false

  // Set up initial state for each new component instance
  $: initialise(instance)
@ -99,9 +101,10 @@

  // Derive definition properties which can all be optional, so need to be
  // coerced to booleans
-  $: editable = !!definition?.editable
  $: hasChildren = !!definition?.hasChildren
  $: showEmptyState = definition?.showEmptyState !== false
+  $: hasMissingRequiredSettings = missingRequiredSettings?.length > 0
+  $: editable = !!definition?.editable && !hasMissingRequiredSettings

  // Interactive components can be selected, dragged and highlighted inside
  // the builder preview
@ -155,6 +158,7 @@
    name,
    editing,
    type: instance._component,
+    missingRequiredSettings,
  })

  const initialise = instance => {
@ -201,6 +205,27 @@
    staticSettings = instanceSettings.staticSettings
    dynamicSettings = instanceSettings.dynamicSettings

+    // Check if we have any missing required settings
+    missingRequiredSettings = settingsDefinition.filter(setting => {
+      let empty = instance[setting.key] == null || instance[setting.key] === ""
+      let missing = setting.required && empty
+
+      // Check if this setting depends on another, as it may not be required
+      if (setting.dependsOn) {
+        const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
+        const dependsOnValue = setting.dependsOn.value
+        const realDependentValue = instance[dependsOnKey]
+        if (dependsOnValue == null && realDependentValue == null) {
+          return false
+        }
+        if (dependsOnValue !== realDependentValue) {
+          return false
+        }
+      }
+
+      return missing
+    })
+
    // Force an initial enrichment of the new settings
    enrichComponentSettings(get(context), settingsDefinitionMap, {
      force: true,
@ -414,6 +439,9 @@
    data-id={id}
    data-name={name}
  >
+    {#if hasMissingRequiredSettings}
+      <ComponentPlaceholder />
+    {:else}
      <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
        {#if children.length}
          {#each children as child (child._id)}
@ -425,6 +453,7 @@
          <slot />
        {/if}
      </svelte:component>
+    {/if}
  </div>
 {/if}

--- a/packages/client/src/components/app/ComponentPlaceholder.svelte
+++ b/packages/client/src/components/app/ComponentPlaceholder.svelte
@ -0,0 +1,44 @@
+<script>
+  import { getContext } from "svelte"
+  import { builderStore } from "stores"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  $: requiredSetting = $component.missingRequiredSettings?.[0]
+</script>
+
+{#if $builderStore.inBuilder && requiredSetting}
+  <div use:styleable={$component.styles}>
+    <div class="component-placeholder">
+      <span>
+        Add the <mark>{requiredSetting.label}</mark> setting to start using your
+        component -
+      </span>
+      <span
+        class="spectrum-Link"
+        on:click={() => {
+          builderStore.actions.highlightSetting(requiredSetting.key)
+        }}
+      >
+        Show me
+      </span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .component-placeholder {
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-xs);
+  }
+  .component-placeholder mark {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0 2px;
+    border-radius: 2px;
+  }
+  .component-placeholder .spectrum-Link {
+    cursor: pointer;
+  }
+</style>
--- a/packages/client/src/components/app/Link.svelte
+++ b/packages/client/src/components/app/Link.svelte
@ -1,6 +1,5 @@
 <script>
  import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"

  const { linkable, styleable, builderStore } = getContext("sdk")
  const component = getContext("component")
@ -80,11 +79,7 @@
    {componentText}
  </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if !url && !text}
-    <div use:styleable={{ ...$component.styles, empty: true }}>
-      <Placeholder />
-    </div>
-  {:else if externalLink || openInNewTab}
+  {#if externalLink || openInNewTab}
    <a
      {target}
      href={sanitizedUrl}
--- a/packages/client/src/components/app/Placeholder.svelte
+++ b/packages/client/src/components/app/Placeholder.svelte
@ -1,67 +1,15 @@
 <script>
  import { getContext } from "svelte"
-  import Manifest from "manifest.json"
-  import { builderStore } from "stores"

-  const { componentStore } = getContext("sdk")
+  const { builderStore } = 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 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}

@ -69,18 +17,5 @@
  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/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@ -76,9 +76,7 @@
      {#if !formContext}
        <Placeholder text="Form components need to be wrapped in a form" />
      {:else if !fieldState}
-        {#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"
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@ -68,8 +68,8 @@ const createBuilderStore = () => {
      }
      store.update(state => ({ ...state, editMode: enabled }))
    },
-    setFocus: data => {
-      window.parent.postMessage({ type: "builder-focus", data })
+    highlightSetting: setting => {
+      dispatchEvent("highlight-setting", { setting })
    },
  }
  return {