Merge pull request #13593 from Budibase/bug-crusher-9000

Teal bug fixes

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "es6": true,

.prettierignore

@@ -12,4 +12,5 @@ packages/pro/coverage
 packages/account-portal/packages/ui/build
 packages/account-portal/packages/ui/.routify
 packages/account-portal/packages/server/build
+packages/account-portal/packages/server/coverage
 **/*.ivm.bundle.js

packages/bbui/src/Actions/click_outside.js

@@ -1,22 +1,25 @@
+// These class names will never trigger a callback if clicked, no matter what
 const ignoredClasses = [
   ".download-js-link",
   ".spectrum-Menu",
   ".date-time-popover",
 ]
+
+// These class names will only trigger a callback when clicked if the registered
+// component is not nested inside them. For example, clicking inside a modal
+// will not close the modal, or clicking inside a popover will not close the
+// popover.
 const conditionallyIgnoredClasses = [
   ".spectrum-Underlay",
   ".drawer-wrapper",
   ".spectrum-Popover",
 ]
 let clickHandlers = []
+let candidateTarget
 
-/**
+// Processes a "click outside" event and invokes callbacks if our source element
- * Handle a body click event
+// is valid
- */
 const handleClick = event => {
-  // Treat right clicks (context menu events) as normal clicks
-  const eventType = event.type === "contextmenu" ? "click" : event.type
-
   // Ignore click if this is an ignored class
   if (event.target.closest('[data-ignore-click-outside="true"]')) {
     return
@@ -29,11 +32,6 @@ const handleClick = event => {
 
   // Process handlers
   clickHandlers.forEach(handler => {
-    // Check that we're the right kind of click event
-    if (handler.allowedType && eventType !== handler.allowedType) {
-      return
-    }
-
     // Check that the click isn't inside the target
     if (handler.element.contains(event.target)) {
       return
@@ -51,17 +49,43 @@ const handleClick = event => {
     handler.callback?.(event)
   })
 }
-document.documentElement.addEventListener("click", handleClick, true)
+
-document.documentElement.addEventListener("mousedown", handleClick, true)
+// On mouse up we only trigger a "click outside" callback if we targetted the
-document.documentElement.addEventListener("contextmenu", handleClick, true)
+// same element that we did on mouse down. This fixes all sorts of issues where
+// we get annoying callbacks firing when we drag to select text.
+const handleMouseUp = e => {
+  if (candidateTarget === e.target) {
+    handleClick(e)
+  }
+  candidateTarget = null
+}
+
+// On mouse down we store which element was targetted for comparison later
+const handleMouseDown = e => {
+  // Only handle the primary mouse button here.
+  // We handle context menu (right click) events in another handler.
+  if (e.button !== 0) {
+    return
+  }
+  candidateTarget = e.target
+
+  // Clear any previous listeners in case of multiple down events, and register
+  // a single mouse up listener
+  document.removeEventListener("mouseup", handleMouseUp)
+  document.addEventListener("mouseup", handleMouseUp, true)
+}
+
+// Global singleton listeners for our events
+document.addEventListener("mousedown", handleMouseDown)
+document.addEventListener("contextmenu", handleClick)
 
 /**
  * Adds or updates a click handler
  */
-const updateHandler = (id, element, anchor, callback, allowedType) => {
+const updateHandler = (id, element, anchor, callback) => {
   let existingHandler = clickHandlers.find(x => x.id === id)
   if (!existingHandler) {
-    clickHandlers.push({ id, element, anchor, callback, allowedType })
+    clickHandlers.push({ id, element, anchor, callback })
   } else {
     existingHandler.callback = callback
   }
@@ -88,8 +112,7 @@ export default (element, opts) => {
     const callback =
       newOpts?.callback || (typeof newOpts === "function" ? newOpts : null)
     const anchor = newOpts?.anchor || element
-    const allowedType = newOpts?.allowedType || "click"
+    updateHandler(id, element, anchor, callback)
-    updateHandler(id, element, anchor, callback, allowedType)
   }
   update(opts)
   return {

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte

@@ -1,8 +1,10 @@
 <script>
-  import { Body, Label, Input } from "@budibase/bbui"
+  import { Body, Label } from "@budibase/bbui"
   import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
+  export let bindings
 
   onMount(() => {
     if (!parameters.confirm) {
@@ -15,11 +17,18 @@
   <Body size="S">Enter the message you wish to display to the user.</Body>
   <div class="params">
     <Label small>Title</Label>
-    <Input placeholder="Prompt User" bind:value={parameters.customTitleText} />
+    <DrawerBindableInput
+      placeholder="Title"
+      value={parameters.customTitleText}
+      on:change={e => (parameters.customTitleText = e.detail)}
+      {bindings}
+    />
     <Label small>Message</Label>
-    <Input
+    <DrawerBindableInput
       placeholder="Are you sure you want to continue?"
-      bind:value={parameters.confirmText}
+      value={parameters.confirmText}
+      on:change={e => (parameters.confirmText = e.detail)}
+      {bindings}
     />
   </div>
 </div>

packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte

@@ -21,26 +21,24 @@
   const currentStep = derived(multiStepStore, state => state.currentStep)
   const componentType = "@budibase/standard-components/multistepformblockstep"
 
+  setContext("multi-step-form-block", multiStepStore)
+
   let cachedValue
   let cachedInstance = {}
 
   $: if (!isEqual(cachedValue, value)) {
     cachedValue = value
   }
-
   $: if (!isEqual(componentInstance, cachedInstance)) {
     cachedInstance = componentInstance
   }
-
-  setContext("multi-step-form-block", multiStepStore)
-
   $: stepCount = cachedValue?.length || 0
   $: updateStore(stepCount)
   $: dataSource = getDatasourceForProvider($selectedScreen, cachedInstance)
   $: emitCurrentStep($currentStep)
   $: stepLabel = getStepLabel($multiStepStore)
   $: stepDef = getDefinition(stepLabel)
-  $: stepSettings = cachedValue?.[$currentStep] || {}
+  $: savedInstance = cachedValue?.[$currentStep] || {}
   $: defaults = Utils.buildMultiStepFormBlockDefaultProps({
     _id: cachedInstance._id,
     stepCount: $multiStepStore.stepCount,
@@ -48,14 +46,16 @@
     actionType: cachedInstance.actionType,
     dataSource: cachedInstance.dataSource,
   })
+  // For backwards compatibility we need to sometimes manually set base
+  // properties like _id and _component as we didn't used to save these
   $: stepInstance = {
-    _id: Helpers.uuid(),
+    _id: savedInstance._id || Helpers.uuid(),
-    _component: componentType,
+    _component: savedInstance._component || componentType,
     _instanceName: `Step ${currentStep + 1}`,
-    title: stepSettings.title ?? defaults?.title,
+    title: savedInstance.title ?? defaults?.title,
-    buttons: stepSettings.buttons || defaults?.buttons,
+    buttons: savedInstance.buttons || defaults?.buttons,
-    fields: stepSettings.fields,
+    fields: savedInstance.fields,
-    desc: stepSettings.desc,
+    desc: savedInstance.desc,
 
     // Needed for field configuration
     dataSource,
@@ -92,7 +92,8 @@
   }
 
   const addStep = () => {
-    value = value.toSpliced($currentStep + 1, 0, {})
+    const newInstance = componentStore.createInstance(componentType)
+    value = value.toSpliced($currentStep + 1, 0, newInstance)
     dispatch("change", value)
     multiStepStore.update(state => ({
       ...state,

packages/builder/src/components/design/settings/controls/FormStepControls.svelte

@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher, getContext } from "svelte"
-  import { ActionButton } from "@budibase/bbui"
+  import { ActionButton, AbsTooltip } from "@budibase/bbui"
 
   const multiStepStore = getContext("multi-step-form-block")
   const dispatch = createEventDispatcher()
@@ -28,45 +28,49 @@
   </div>
 {:else}
   <div class="step-actions">
-    <ActionButton
+    <AbsTooltip text="Previous step" noWrap>
-      size="S"
+      <ActionButton
-      secondary
+        size="S"
-      icon="ChevronLeft"
+        secondary
-      disabled={currentStep === 0}
+        icon="ChevronLeft"
-      on:click={() => {
+        disabled={currentStep === 0}
-        stepAction("previousStep")
+        on:click={() => {
-      }}
+          stepAction("previousStep")
-      tooltip={"Previous step"}
+        }}
-    />
+      />
-    <ActionButton
+    </AbsTooltip>
-      size="S"
+    <AbsTooltip text="Next step" noWrap>
-      secondary
+      <ActionButton
-      disabled={currentStep === stepCount - 1}
+        size="S"
-      icon="ChevronRight"
+        secondary
-      on:click={() => {
+        disabled={currentStep === stepCount - 1}
-        stepAction("nextStep")
+        icon="ChevronRight"
-      }}
+        on:click={() => {
-      tooltip={"Next step"}
+          stepAction("nextStep")
-    />
+        }}
-    <ActionButton
+      />
-      size="S"
+    </AbsTooltip>
-      secondary
+    <AbsTooltip text="Remove step" noWrap>
-      icon="Close"
+      <ActionButton
-      disabled={stepCount === 1}
+        size="S"
-      on:click={() => {
+        secondary
-        stepAction("removeStep")
+        icon="Close"
-      }}
+        disabled={stepCount === 1}
-      tooltip={"Remove step"}
+        on:click={() => {
-    />
+          stepAction("removeStep")
-    <ActionButton
+        }}
-      size="S"
+      />
-      secondary
+    </AbsTooltip>
-      icon="MultipleAdd"
+    <AbsTooltip text="Add step" noWrap>
-      on:click={() => {
+      <ActionButton
-        stepAction("addStep")
+        size="S"
-      }}
+        secondary
-      tooltip={"Add step"}
+        icon="MultipleAdd"
-    />
+        on:click={() => {
+          stepAction("addStep")
+        }}
+      />
+    </AbsTooltip>
   </div>
 {/if}
 

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js

@@ -75,6 +75,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
     return createComponent(
       "@budibase/standard-components/labelfield",
       {
+        _id: column.field,
         _instanceName: column.field,
         active: column.active,
         field: column.field,

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js

@@ -65,6 +65,7 @@ describe("getColumns", () => {
     it("returns the selected and unselected fields in the modern format, respecting the original order", ctx => {
       expect(ctx.columns.sortable).toEqual([
         {
+          _id: "three",
           _instanceName: "three",
           active: true,
           columnType: "foo",
@@ -73,6 +74,7 @@ describe("getColumns", () => {
           label: "three label",
         },
         {
+          _id: "two",
           _instanceName: "two",
           active: true,
           columnType: "foo",
@@ -81,6 +83,7 @@ describe("getColumns", () => {
           label: "two label",
         },
         {
+          _id: "one",
           _instanceName: "one",
           active: false,
           columnType: "foo",
@@ -91,6 +94,7 @@ describe("getColumns", () => {
       ])
 
       expect(ctx.columns.primary).toEqual({
+        _id: "four",
         _instanceName: "four",
         active: true,
         columnType: "foo",
@@ -115,6 +119,7 @@ describe("getColumns", () => {
     it("returns all columns, with non-hidden columns automatically selected", ctx => {
       expect(ctx.columns.sortable).toEqual([
         {
+          _id: "two",
           _instanceName: "two",
           active: true,
           columnType: "foo",
@@ -123,6 +128,7 @@ describe("getColumns", () => {
           label: "two",
         },
         {
+          _id: "three",
           _instanceName: "three",
           active: true,
           columnType: "foo",
@@ -131,6 +137,7 @@ describe("getColumns", () => {
           label: "three",
         },
         {
+          _id: "one",
           _instanceName: "one",
           active: false,
           columnType: "foo",
@@ -141,6 +148,7 @@ describe("getColumns", () => {
       ])
 
       expect(ctx.columns.primary).toEqual({
+        _id: "four",
         _instanceName: "four",
         active: true,
         columnType: "foo",
@@ -173,6 +181,7 @@ describe("getColumns", () => {
     it("returns all columns, including those missing from the initial data", ctx => {
       expect(ctx.columns.sortable).toEqual([
         {
+          _id: "three",
           _instanceName: "three",
           active: true,
           columnType: "foo",
@@ -181,6 +190,7 @@ describe("getColumns", () => {
           label: "three label",
         },
         {
+          _id: "two",
           _instanceName: "two",
           active: false,
           columnType: "foo",
@@ -189,6 +199,7 @@ describe("getColumns", () => {
           label: "two",
         },
         {
+          _id: "one",
           _instanceName: "one",
           active: false,
           columnType: "foo",
@@ -199,6 +210,7 @@ describe("getColumns", () => {
       ])
 
       expect(ctx.columns.primary).toEqual({
+        _id: "four",
         _instanceName: "four",
         active: true,
         columnType: "foo",
@@ -228,6 +240,7 @@ describe("getColumns", () => {
     it("returns all valid columns, excluding those that aren't valid for the schema", ctx => {
       expect(ctx.columns.sortable).toEqual([
         {
+          _id: "three",
           _instanceName: "three",
           active: true,
           columnType: "foo",
@@ -236,6 +249,7 @@ describe("getColumns", () => {
           label: "three label",
         },
         {
+          _id: "two",
           _instanceName: "two",
           active: false,
           columnType: "foo",
@@ -244,6 +258,7 @@ describe("getColumns", () => {
           label: "two",
         },
         {
+          _id: "one",
           _instanceName: "one",
           active: false,
           columnType: "foo",
@@ -254,6 +269,7 @@ describe("getColumns", () => {
       ])
 
       expect(ctx.columns.primary).toEqual({
+        _id: "four",
         _instanceName: "four",
         active: true,
         columnType: "foo",
@@ -318,6 +334,7 @@ describe("getColumns", () => {
       beforeEach(ctx => {
         ctx.updateSortable([
           {
+            _id: "three",
             _instanceName: "three",
             active: true,
             columnType: "foo",
@@ -326,6 +343,7 @@ describe("getColumns", () => {
             label: "three",
           },
           {
+            _id: "one",
             _instanceName: "one",
             active: true,
             columnType: "foo",
@@ -334,6 +352,7 @@ describe("getColumns", () => {
             label: "one",
           },
           {
+            _id: "two",
             _instanceName: "two",
             active: false,
             columnType: "foo",

packages/builder/src/dataBinding.js

@@ -1106,50 +1106,51 @@ export const getAllStateVariables = () => {
   getAllAssets().forEach(asset => {
     findAllMatchingComponents(asset.props, component => {
       const settings = componentStore.getComponentSettings(component._component)
+      const nestedTypes = [
+        "buttonConfiguration",
+        "fieldConfiguration",
+        "stepConfiguration",
+      ]
 
+      // Extracts all event settings from a component instance.
+      // Recurses into nested types to find all event-like settings at any
+      // depth.
       const parseEventSettings = (settings, comp) => {
+        if (!settings?.length) {
+          return
+        }
+
+        // Extract top level event settings
         settings
           .filter(setting => setting.type === "event")
           .forEach(setting => {
             eventSettings.push(comp[setting.key])
           })
-      }
 
-      const parseComponentSettings = (settings, component) => {
+        // Recurse into any nested instance types
-        // Parse the nested button configurations
         settings
-          .filter(setting => setting.type === "buttonConfiguration")
+          .filter(setting => nestedTypes.includes(setting.type))
           .forEach(setting => {
-            const buttonConfig = component[setting.key]
+            const instances = comp[setting.key]
+            if (Array.isArray(instances) && instances.length) {
+              instances.forEach(instance => {
+                let type = instance?._component
 
-            if (Array.isArray(buttonConfig)) {
+                // Backwards compatibility for multi-step from blocks which
-              buttonConfig.forEach(button => {
+                // didn't set a proper component type previously.
-                const nestedSettings = componentStore.getComponentSettings(
+                if (setting.type === "stepConfiguration" && !type) {
-                  button._component
+                  type = "@budibase/standard-components/multistepformblockstep"
-                )
+                }
-                parseEventSettings(nestedSettings, button)
+
+                // Parsed nested component instances inside this setting
+                const nestedSettings = componentStore.getComponentSettings(type)
+                parseEventSettings(nestedSettings, instance)
               })
             }
           })
-
-        parseEventSettings(settings, component)
       }
 
-      // Parse the base component settings
+      parseEventSettings(settings, component)
-      parseComponentSettings(settings, component)
-
-      // Parse step configuration
-      const stepSetting = settings.find(
-        setting => setting.type === "stepConfiguration"
-      )
-      const steps = stepSetting ? component[stepSetting.key] : []
-      const stepDefinition = componentStore.getComponentSettings(
-        "@budibase/standard-components/multistepformblockstep"
-      )
-
-      steps?.forEach(step => {
-        parseComponentSettings(stepDefinition, step)
-      })
     })
   })
 

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

@@ -324,10 +324,7 @@
   <div
     id="side-panel-container"
     class:open={$sidePanelStore.open}
-    use:clickOutside={{
+    use:clickOutside={autoCloseSidePanel ? sidePanelStore.actions.close : null}
-      callback: autoCloseSidePanel ? sidePanelStore.actions.close : null,
-      allowedType: "mousedown",
-    }}
     class:builder={$builderStore.inBuilder}
   >
     <div class="side-panel-header">

packages/client/src/utils/buttonActions.js

@@ -542,16 +542,22 @@ export const enrichButtonActions = (actions, context) => {
                 // then execute the rest of the actions in the chain
                 const result = await callback()
                 if (result !== false) {
-                  // Generate a new total context to pass into the next enrichment
+                  // Generate a new total context for the next enrichment
                   buttonContext.push(result)
                   const newContext = { ...context, actions: buttonContext }
 
-                  // Enrich and call the next button action if there is more than one action remaining
+                  // Enrich and call the next button action if there is more
+                  // than one action remaining
                   const next = enrichButtonActions(
                     actions.slice(i + 1),
                     newContext
                   )
-                  resolve(typeof next === "function" ? await next() : true)
+                  if (typeof next === "function") {
+                    // Pass the event context back into the new action chain
+                    resolve(await next(eventContext))
+                  } else {
+                    resolve(true)
+                  }
                 } else {
                   resolve(false)
                 }

packages/frontend-core/src/components/FilterBuilder.svelte

@@ -124,6 +124,7 @@
     const fieldSchema = schemaFields.find(x => x.name === filter.field)
     filter.type = fieldSchema?.type
     filter.subtype = fieldSchema?.subtype
+    filter.formulaType = fieldSchema?.formulaType
 
     // Update external type based on field
     filter.externalType = getSchema(filter)?.externalType

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -121,8 +121,14 @@
 
   const onContextMenu = e => {
     e.preventDefault()
-    ui.actions.blur()
+
-    open = !open
+    // The timeout allows time for clickoutside to close other open popvers
+    // before we show this one. Without the timeout, this popover closes again
+    // before it's even visible as clickoutside closes it.
+    setTimeout(() => {
+      ui.actions.blur()
+      open = !open
+    }, 10)
   }
 
   const sortAscending = () => {

packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte

@@ -18,7 +18,7 @@
     focusedCellAPI,
     focusedRowId,
     notifications,
-    isDatasourcePlus,
+    hasBudibaseIdentifiers,
   } = getContext("grid")
 
   let anchor
@@ -82,7 +82,7 @@
         </MenuItem>
         <MenuItem
           icon="Copy"
-          disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
+          disabled={isNewRow || !$focusedRow?._id || !$hasBudibaseIdentifiers}
           on:click={() => copyToClipboard($focusedRow?._id)}
           on:click={menu.actions.close}
         >
@@ -90,7 +90,7 @@
         </MenuItem>
         <MenuItem
           icon="Copy"
-          disabled={isNewRow || !$focusedRow?._rev}
+          disabled={isNewRow || !$focusedRow?._rev || !$hasBudibaseIdentifiers}
           on:click={() => copyToClipboard($focusedRow?._rev)}
           on:click={menu.actions.close}
         >

packages/frontend-core/src/components/grid/stores/datasource.js

@@ -75,14 +75,18 @@ export const deriveStores = context => {
     }
   )
 
-  const isDatasourcePlus = derived(datasource, $datasource => {
+  const hasBudibaseIdentifiers = derived(datasource, $datasource => {
-    return ["table", "viewV2"].includes($datasource?.type)
+    let type = $datasource?.type
+    if (type === "provider") {
+      type = $datasource.value?.datasource?.type
+    }
+    return ["table", "viewV2", "link"].includes(type)
   })
 
   return {
     schema,
     enrichedSchema,
-    isDatasourcePlus,
+    hasBudibaseIdentifiers,
   }
 }
 

packages/frontend-core/src/components/grid/stores/menu.js

@@ -17,6 +17,7 @@ export const createActions = context => {
 
   const open = (cellId, e) => {
     e.preventDefault()
+    e.stopPropagation()
 
     // Get DOM node for grid data wrapper to compute relative position to
     const gridNode = document.getElementById(gridID)

packages/frontend-core/src/components/grid/stores/rows.js

@@ -83,7 +83,7 @@ export const createActions = context => {
     error,
     notifications,
     fetch,
-    isDatasourcePlus,
+    hasBudibaseIdentifiers,
     refreshing,
   } = context
   const instanceLoaded = writable(false)
@@ -196,9 +196,16 @@ export const createActions = context => {
   // Handles validation errors from the rows API and updates local validation
   // state, storing error messages against relevant cells
   const handleValidationError = (rowId, error) => {
+    let errorString
+    if (typeof error === "string") {
+      errorString = error
+    } else if (typeof error?.message === "string") {
+      errorString = error.message
+    }
+
     // If the server doesn't reply with a valid error, assume that the source
     // of the error is the focused cell's column
-    if (!error?.json?.validationErrors && error?.message) {
+    if (!error?.json?.validationErrors && errorString) {
       const focusedColumn = get(focusedCellId)?.split("-")[1]
       if (focusedColumn) {
         error = {
@@ -261,7 +268,7 @@ export const createActions = context => {
         focusedCellId.set(`${rowId}-${erroredColumns[0]}`)
       }
     } else {
-      get(notifications).error(error?.message || "An unknown error occurred")
+      get(notifications).error(errorString || "An unknown error occurred")
     }
   }
 
@@ -458,14 +465,14 @@ export const createActions = context => {
     }
     let rowsToAppend = []
     let newRow
-    const $isDatasourcePlus = get(isDatasourcePlus)
+    const $hasBudibaseIdentifiers = get(hasBudibaseIdentifiers)
     for (let i = 0; i < newRows.length; i++) {
       newRow = newRows[i]
 
       // Ensure we have a unique _id.
       // This means generating one for non DS+, overwriting any that may already
       // exist as we cannot allow duplicates.
-      if (!$isDatasourcePlus) {
+      if (!$hasBudibaseIdentifiers) {
         newRow._id = Helpers.uuid()
       }
 
@@ -510,7 +517,7 @@ export const createActions = context => {
   const cleanRow = row => {
     let clone = { ...row }
     delete clone.__idx
-    if (!get(isDatasourcePlus)) {
+    if (!get(hasBudibaseIdentifiers)) {
       delete clone._id
     }
     return clone