Refactored the approach to builder focus. Extending the behaviour beyond form fields

packages/bbui/src/Form/Core/Combobox.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"
 
   export let value = null
   export let id = null
@@ -21,11 +21,7 @@
   let focus = false
   let comboInput
 
-  let builderFocus = getContext("field_focus")
+  $: focus = autofocus && comboInput
-
-  $: if (autofocus && comboInput) {
-    comboInput.focus()
-  }
 
   const selectOption = value => {
     dispatch("change", value)
@@ -61,12 +57,7 @@
       {id}
       type="text"
       on:focus={() => (focus = true)}
-      on:blur={() => {
+      on:blur={() => (focus = false)}
-        if (builderFocus) {
-          builderFocus.clear()
-        }
-        focus = false
-      }}
       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

@@ -26,9 +26,14 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let searchTerm = null
+  let focus = false
+  let pickerButton
+
+  $: focus = autofocus && pickerButton
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -80,7 +85,15 @@
     class:is-invalid={!!error}
     class:is-open={open}
     aria-haspopup="listbox"
+    class:is-focused={focus}
+    bind:this={pickerButton}
     on:mousedown={onClick}
+    on:focus={() => {
+      focus = true
+    }}
+    on:blur={() => {
+      focus = false
+    }}
   >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">
@@ -199,6 +212,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/src/builderStore/store/frontend.js

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

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,14 +172,7 @@
     try {
       if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
-        //Clear focus
+        resolveFocus(data)
-        if(data.id !== $store.builderFocus?.target){
-          store.update(state => {
-            delete state.builderFocus
-            return state
-          })
-        }
-        //check if the builder-focus matches?
       } else if (type === "update-prop") {
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
@@ -202,7 +210,7 @@
         store.update(state => ({
           ...state,
           builderFocus : 
-          { ...data }
+          [{...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 ?? []
@@ -88,11 +75,10 @@
   }
 
   const isFocused = setting => {
-    return (
+    if (!$store.builderFocus) {
-      componentInstance._id === $store.builderFocus?.target &&
+      return false
-      setting.key === $store.builderFocus?.key &&
+    }
-      "component_settings" === $store.builderFocus?.location
+    return setting.required === true
-    )
   }
 </script>
 

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/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

@@ -4,19 +4,8 @@
     getDatasourceForProvider,
     getSchemaForDatasource,
   } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/componentUtils"
-  import { setContext } from "svelte"
-
-  setContext("field_focus", {
-    clear: () => {
-      store.update(state => {
-        delete state.builderFocus
-        return state
-      })
-    },
-    test: $store.builderFocus?.target,
-  })
 
   export let componentInstance
   export let value

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/pages/builder/app/[application]/design/[assetType]/_layout.svelte

@@ -20,6 +20,7 @@
   import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte"
   import Logo from "assets/bb-space-man.svg"
   import ScreenWizard from "components/design/NavigationPanel/ScreenWizard.svelte"
+  import { clickOutside } from "@budibase/bbui"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType
@@ -196,7 +197,28 @@
   </div>
 
   {#if $selectedComponent != null}
-    <div class="components-pane">
+    <div
+      class="components-pane"
+      use:clickOutside={() => {
+        if ($store?.builderFocus) {
+          console.log($store?.builderFocus)
+          const otherSettings = $store?.builderFocus?.filter(field => {
+            return field.location !== "component_settings"
+          })
+          if (otherSettings.length) {
+            store.update(state => {
+              state.builderFocus = otherSettings
+              return state
+            })
+          } else {
+            store.update(state => {
+              delete state.builderFocus
+              return state
+            })
+          }
+        }
+      }}
+    >
       <PropertiesPanel />
     </div>
   {/if}

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

@@ -28,7 +28,23 @@
     class="placeholder"
     use:styleable={{ ...$component.styles, empty: true }}
   >
-    <Placeholder />
+    <Placeholder>
+      <div slot="content">
+        Add the <mark>URL</mark> and start updating your background image&nbsp;
+        <span
+          class="showMe spectrum-Link"
+          on:click={() => {
+            builderStore.actions.setFocus({
+              location: "component_settings",
+              key: "url",
+              target: $component.id,
+            })
+          }}
+        >
+          Show me
+        </span>
+      </div>
+    </Placeholder>
   </div>
 {/if}
 

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

@@ -15,7 +15,23 @@
     class="placeholder"
     use:styleable={{ ...$component.styles, empty: true }}
   >
-    <Placeholder />
+    <Placeholder>
+      <div slot="content">
+        Add the <mark>URL</mark> and start updating your image&nbsp;
+        <span
+          class="showMe spectrum-Link"
+          on:click={() => {
+            builderStore.actions.setFocus({
+              location: "component_settings",
+              key: "url",
+              target: $component.id,
+            })
+          }}
+        >
+          Show me
+        </span>
+      </div>
+    </Placeholder>
   </div>
 {/if}
 

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,35 @@
     {componentText}
   </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if externalLink || openInNewTab}
+  {#if !url && !text}
+    <div use:styleable={{ ...$component.styles, empty: true }}>
+      <Placeholder>
+        <div slot="content">
+          Add the <mark>URL</mark> and <mark>Text</mark> settings and start
+          using your link&nbsp;
+          <span
+            class="showMe spectrum-Link"
+            on:click={() => {
+              builderStore.actions.setFocus([
+                {
+                  location: "component_settings",
+                  key: "url",
+                  target: $component.id,
+                },
+                {
+                  location: "component_settings",
+                  key: "text",
+                  target: $component.id,
+                },
+              ])
+            }}
+          >
+            Show me
+          </span>
+        </div>
+      </Placeholder>
+    </div>
+  {:else if externalLink || openInNewTab}
     <a
       {target}
       href={sanitizedUrl}

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

@@ -14,6 +14,23 @@
   {#if value}
     <MarkdownViewer {value} {height} />
   {:else if $builderStore.inBuilder}
-    <Placeholder />
+    <Placeholder>
+      <div slot="content">
+        Add some <mark>Markdown</mark> in the field setting to start using your
+        component&nbsp;
+        <span
+          class="showMe spectrum-Link"
+          on:click={() => {
+            builderStore.actions.setFocus({
+              location: "component_settings",
+              key: "value",
+              target: $component.id,
+            })
+          }}
+        >
+          Show me
+        </span>
+      </div>
+    </Placeholder>
   {/if}
 </div>

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

@@ -8,7 +8,7 @@
 </script>
 
 {#if $builderStore.inBuilder}
-  <div>
+  <div class="placeholder_wrap">
     {#if !$$slots.content}
       {text || $component.name || "Placeholder"}
     {/if}
@@ -20,5 +20,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/charts/ApexChart.svelte

@@ -13,7 +13,24 @@
   <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 slot="content">
+        Use the settings panel to select a <mark>Provider</mark> and start
+        building your chart&nbsp;
+        <span
+          class="showMe spectrum-Link"
+          on:click={() => {
+            builderStore.actions.setFocus({
+              location: "component_settings",
+              key: "dataProvider",
+              target: $component.id,
+            })
+          }}
+        >
+          Show me
+        </span>
+      </div>
+    </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

@@ -3,10 +3,6 @@
   import FieldGroupFallback from "./FieldGroupFallback.svelte"
   import { getContext, onDestroy } from "svelte"
 
-  const dispatchEvent = (type, data = {}) => {
-    window.parent.postMessage({ type, data })
-  }
-
   export let label
   export let field
   export let fieldState
@@ -81,26 +77,24 @@
         <Placeholder text="Form components need to be wrapped in a form" />
       {:else if !fieldState}
         {#if $builderStore.inBuilder}
-          <div class="placeholder_wrap">
+          <Placeholder>
-            <Placeholder>
+            <div slot="content">
-              <div slot="content">
+              Add the <mark>Field</mark> setting to start using your
-                Add the <mark>Field</mark> setting to start using your
+              component&nbsp;
-                component&nbsp;
+              <span
-                <span
+                class="showMe spectrum-Link"
-                  class="showMe"
+                on:click={() => {
-                  on:click={() => {
+                  builderStore.actions.setFocus({
-                    dispatchEvent("builder-focus", {
+                    location: "component_settings",
-                      location: "component_settings",
+                    key: "field",
-                      key: "field",
+                    target: $component.id,
-                      target: $component.id,
+                  })
-                    })
+                }}
-                  }}
+              >
-                >
+                Show me
-                  Show me
+              </span>
-                </span>
+            </div>
-              </div>
+          </Placeholder>
-            </Placeholder>
-          </div>
         {/if}
       {:else if schemaType && schemaType !== type && type !== "options"}
         <Placeholder
@@ -117,30 +111,16 @@
 </FieldGroupFallback>
 
 <style>
-  .placeholder_wrap mark {
-    background-color: var(--spectrum-global-color-gray-400);
-    padding: 0px 2px;
-    border-radius: 2px;
-  }
-  div.spectrum-Form-item .placeholder_wrap .showMe {
-    color: black;
-    cursor: pointer;
-  }
-  .showMe:hover {
-    text-decoration: underline;
-  }
   label {
     white-space: nowrap;
   }
   label.hidden {
     padding: 0;
   }
-
   .spectrum-Form-itemField {
     position: relative;
     width: 100%;
   }
-
   .error {
     color: var(
       --spectrum-semantic-negative-color-default,
@@ -149,7 +129,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,