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

2022-05-23 16:12:56 +01:00 · 2022-05-23 16:12:56 +01:00 · 253642ad1f
parent 81bb960491
commit 253642ad1f
25 changed files with 672 additions and 273 deletions
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/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")
-
-  $: if (autofocus && comboInput) {
-    comboInput.focus()
-  }
+  $: focus = autofocus && comboInput

  const selectOption = value => {
    dispatch("change", value)
@ -61,12 +57,7 @@
      {id}
      type="text"
      on:focus={() => (focus = true)}
-      on:blur={() => {
-        if (builderFocus) {
-          builderFocus.clear()
-        }
-        focus = false
-      }}
+      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,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
@ -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;
--- 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/src/builderStore/store/frontend.js
+++ b/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
-        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
-          }
-        }
+        const definition = store.actions.components.getDefinition(componentName)

        // 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) {
-            //A field component added to a form.
-            state.builderFocus = {
-              key: "field",
+          const focusSetting = definition.settings.filter((setting) => { return setting.required })
+          const mappedSettings = focusSetting.map((setting) => {
+            return {
+              key: setting.key,
              target: state.selectedComponentId,
              location: "component_settings",
            }
+          })
+
+          if(focusSetting.length){
+            state.builderFocus = mappedSettings
          }
          return state
        })
--- 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,14 +172,7 @@
    try {
      if (type === "select-component" && data.id) {
        store.actions.components.select({ _id: data.id })
-        //Clear focus
-        if(data.id !== $store.builderFocus?.target){
-          store.update(state => {
-            delete state.builderFocus
-            return state
-          })
-        }
-        //check if the builder-focus matches?
+        resolveFocus(data)
      } 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}`)
--- 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 ?? []
@ -88,11 +75,10 @@
  }

  const isFocused = setting => {
-    return (
-      componentInstance._id === $store.builderFocus?.target &&
-      setting.key === $store.builderFocus?.key &&
-      "component_settings" === $store.builderFocus?.location
-    )
+    if (!$store.builderFocus) {
+      return false
+    }
+    return setting.required === true
  }
 </script>

--- 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/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
@ -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
--- 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/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/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}
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
--- a/packages/client/src/components/app/BackgroundImage.svelte
+++ b/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}

--- a/packages/client/src/components/app/Image.svelte
+++ b/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}

--- 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,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}
--- a/packages/client/src/components/app/MarkdownViewer.svelte
+++ b/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>
--- a/packages/client/src/components/app/Placeholder.svelte
+++ b/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>
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/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}

--- 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
@ -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>
-              <div slot="content">
-                Add the <mark>Field</mark> setting to start using your
-                component&nbsp;
-                <span
-                  class="showMe"
-                  on:click={() => {
-                    dispatchEvent("builder-focus", {
-                      location: "component_settings",
-                      key: "field",
-                      target: $component.id,
-                    })
-                  }}
-                >
-                  Show me
-                </span>
-              </div>
-            </Placeholder>
-          </div>
+          <Placeholder>
+            <div slot="content">
+              Add the <mark>Field</mark> setting to start using your
+              component&nbsp;
+              <span
+                class="showMe spectrum-Link"
+                on:click={() => {
+                  builderStore.actions.setFocus({
+                    location: "component_settings",
+                    key: "field",
+                    target: $component.id,
+                  })
+                }}
+              >
+                Show me
+              </span>
+            </div>
+          </Placeholder>
        {/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);
--- 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,