Merge branch 'master' into feat/budi-8123-single-user

.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

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.24.0",
+  "version": "2.24.1",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

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
 
-/**
- * Handle a body click event
- */
+// Processes a "click outside" event and invokes callbacks if our source element
+// 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)
-document.documentElement.addEventListener("contextmenu", handleClick, true)
+
+// On mouse up we only trigger a "click outside" callback if we targetted the
+// 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, allowedType)
+    updateHandler(id, element, anchor, callback)
   }
   update(opts)
   return {

packages/bbui/src/Form/Core/DatePicker/Calendar.svelte

@@ -4,6 +4,9 @@
   import dayjs from "dayjs"
   import NumberInput from "./NumberInput.svelte"
   import { createEventDispatcher } from "svelte"
+  import isoWeek from "dayjs/plugin/isoWeek"
+
+  dayjs.extend(isoWeek)
 
   export let value
 
@@ -43,7 +46,7 @@
       return []
     }
     let monthEnd = monthStart.endOf("month")
-    let calendarStart = monthStart.startOf("week")
+    let calendarStart = monthStart.startOf("isoWeek")
     const numWeeks = Math.ceil((monthEnd.diff(calendarStart, "day") + 1) / 7)
 
     let mondays = []

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,41 +21,41 @@
   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,
     currentStep: $multiStepStore.currentStep,
     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(),
-    _component: componentType,
+    _id: savedInstance._id || Helpers.uuid(),
+    _component: savedInstance._component || componentType,
     _instanceName: `Step ${currentStep + 1}`,
-    title: stepSettings.title ?? defaults?.title,
-    buttons: stepSettings.buttons || defaults?.buttons,
-    fields: stepSettings.fields,
-    desc: stepSettings.desc,
+    title: savedInstance.title ?? defaults?.title,
+    buttons: savedInstance.buttons || defaults?.buttons,
+    fields: savedInstance.fields,
+    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
-      size="S"
-      secondary
-      icon="ChevronLeft"
-      disabled={currentStep === 0}
-      on:click={() => {
-        stepAction("previousStep")
-      }}
-      tooltip={"Previous step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      disabled={currentStep === stepCount - 1}
-      icon="ChevronRight"
-      on:click={() => {
-        stepAction("nextStep")
-      }}
-      tooltip={"Next step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      icon="Close"
-      disabled={stepCount === 1}
-      on:click={() => {
-        stepAction("removeStep")
-      }}
-      tooltip={"Remove step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      icon="MultipleAdd"
-      on:click={() => {
-        stepAction("addStep")
-      }}
-      tooltip={"Add step"}
-    />
+    <AbsTooltip text="Previous step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="ChevronLeft"
+        disabled={currentStep === 0}
+        on:click={() => {
+          stepAction("previousStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Next step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        disabled={currentStep === stepCount - 1}
+        icon="ChevronRight"
+        on:click={() => {
+          stepAction("nextStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Remove step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="Close"
+        disabled={stepCount === 1}
+        on:click={() => {
+          stepAction("removeStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Add step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        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,