Merge branch 'develop' into account-api-tests

.github/workflows/release-master.yml

@@ -98,7 +98,7 @@ jobs:
           git fetch
           mkdir sync
           echo "Packaging chart to sync dir"
-          helm package charts/budibase --version 0.0.0-master --app-version v"$RELEASE_VERSION" --destination sync
+          helm package charts/budibase --version 0.0.0-master --app-version "$RELEASE_VERSION" --destination sync
           echo "Packaging successful"
           git checkout gh-pages
           echo "Indexing helm repo"         

.github/workflows/release-selfhost.yml

@@ -43,7 +43,7 @@ jobs:
         run: |
           docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
 
-          release_tag=v${{ env.RELEASE_VERSION }}
+          release_tag=${{ env.RELEASE_VERSION }}
 
           # Pull apps and worker images
           docker pull budibase/apps:$release_tag
@@ -108,8 +108,8 @@ jobs:
       - name: Perform Github Release
         uses: softprops/action-gh-release@v1
         with:
-          name: v${{ env.RELEASE_VERSION }}
+          name: ${{ env.RELEASE_VERSION }}
-          tag_name: v${{ env.RELEASE_VERSION }}
+          tag_name: ${{ env.RELEASE_VERSION }}
           generate_release_notes: true
           files: |
             packages/cli/build/cli-win.exe

.github/workflows/release-singleimage.yml

@@ -71,7 +71,7 @@ jobs:
           context: .
           push: true
           platforms: linux/amd64,linux/arm64
-          tags: budibase/budibase,budibase/budibase:v${{ env.RELEASE_VERSION }}
+          tags: budibase/budibase,budibase/budibase:${{ env.RELEASE_VERSION }}
           file: ./hosting/single/Dockerfile
       - name: Tag and release Budibase Azure App Service docker image
         uses: docker/build-push-action@v2
@@ -80,5 +80,5 @@ jobs:
           push: true
           platforms: linux/amd64
           build-args: TARGETBUILD=aas
-          tags: budibase/budibase-aas,budibase/budibase-aas:v${{ env.RELEASE_VERSION }}
+          tags: budibase/budibase-aas,budibase/budibase-aas:${{ env.RELEASE_VERSION }}
           file: ./hosting/single/Dockerfile

charts/budibase/values.yaml

@@ -209,7 +209,7 @@ services:
 # Override values in couchDB subchart
 couchdb:
   ## clusterSize is the initial size of the CouchDB cluster.
-  clusterSize: 3
+  clusterSize: 1
   allowAdminParty: false
 
   # Secret Management

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.8.12-alpha.5",
+  "version": "2.8.16-alpha.0",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -15,6 +15,7 @@
     Icon,
     Checkbox,
     DatePicker,
+    Detail,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, selectedAutomation } from "builderStore"
@@ -32,7 +33,7 @@
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
   import {
     bindingsToCompletions,
-    jsAutocomplete,
+    hbAutocomplete,
     EditorModes,
   } from "components/common/CodeEditor"
   import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
@@ -55,6 +56,7 @@
   let drawer
   let fillWidth = true
   let inputData
+  let codeBindingOpen = false
 
   $: filters = lookForFilters(schemaProperties) || []
   $: tempFilters = filters
@@ -70,6 +72,13 @@
   $: queryLimit = tableId?.includes("datasource") ? "∞" : "1000"
   $: isTrigger = block?.type === "TRIGGER"
   $: isUpdateRow = stepId === ActionStepID.UPDATE_ROW
+  $: codeMode =
+    stepId === "EXECUTE_BASH" ? EditorModes.Handlebars : EditorModes.JS
+
+  $: stepCompletions =
+    codeMode === EditorModes.Handlebars
+      ? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])]
+      : []
 
   /**
    * TODO - Remove after November 2023
@@ -489,6 +498,18 @@
           />
         {:else if value.customType === "code"}
           <CodeEditorModal>
+            {#if codeMode == EditorModes.JS}
+              <ActionButton
+                on:click={() => (codeBindingOpen = !codeBindingOpen)}
+                quiet
+                icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"}
+              >
+                <Detail size="S">Bindings</Detail>
+              </ActionButton>
+              {#if codeBindingOpen}
+                <pre>{JSON.stringify(bindings, null, 2)}</pre>
+              {/if}
+            {/if}
             <CodeEditor
               value={inputData[key]}
               on:change={e => {
@@ -496,19 +517,22 @@
                 onChange({ detail: e.detail }, key)
                 inputData[key] = e.detail
               }}
-              completions={[
+              completions={stepCompletions}
-                jsAutocomplete([
+              mode={codeMode}
-                  ...bindingsToCompletions(bindings, EditorModes.JS),
+              autocompleteEnabled={codeMode != EditorModes.JS}
-                ]),
-              ]}
-              mode={EditorModes.JS}
               height={500}
             />
             <div class="messaging">
-              <Icon name="FlashOn" />
+              {#if codeMode == EditorModes.Handlebars}
-              <div class="messaging-wrap">
+                <Icon name="FlashOn" />
-                <div>Add available bindings by typing <strong>$</strong></div>
+                <div class="messaging-wrap">
-              </div>
+                  <div>
+                    Add available bindings by typing <strong>
+                      &#125;&#125;
+                    </strong>
+                  </div>
+                </div>
+              {/if}
             </div>
           </CodeEditorModal>
         {:else if value.customType === "loopOption"}

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -51,6 +51,7 @@
   export let mode = EditorModes.Handlebars
   export let value = ""
   export let placeholder = null
+  export let autocompleteEnabled = true
 
   // Export a function to expose caret position
   export const getCaretPosition = () => {
@@ -150,12 +151,6 @@
       syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }),
       highlightActiveLineGutter(),
       highlightSpecialChars(),
-      autocompletion({
-        override: [...completions],
-        closeOnBlur: true,
-        icons: false,
-        optionClass: () => "autocomplete-option",
-      }),
       EditorView.lineWrapping,
       EditorView.updateListener.of(v => {
         const docStr = v.state.doc?.toString()
@@ -178,11 +173,16 @@
 
   const buildExtensions = base => {
     const complete = [...base]
-    if (mode.name == "javascript") {
+
-      complete.push(javascript())
+    if (autocompleteEnabled) {
-      complete.push(highlightWhitespace())
+      complete.push(
-      complete.push(lineNumbers())
+        autocompletion({
-      complete.push(foldGutter())
+          override: [...completions],
+          closeOnBlur: true,
+          icons: false,
+          optionClass: () => "autocomplete-option",
+        })
+      )
       complete.push(
         EditorView.inputHandler.of((view, from, to, insert) => {
           if (insert === "$") {
@@ -212,6 +212,13 @@
       )
     }
 
+    if (mode.name == "javascript") {
+      complete.push(javascript())
+      complete.push(highlightWhitespace())
+      complete.push(lineNumbers())
+      complete.push(foldGutter())
+    }
+
     if (placeholder) {
       complete.push(placeholderFn(placeholder))
     }

packages/builder/src/components/portal/onboarding/TourPopover.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, Layout, Heading, Body, Button } from "@budibase/bbui"
+  import { Popover, Layout, Heading, Body, Button, Link } from "@budibase/bbui"
   import { store } from "builderStore"
   import { TOURS } from "./tours.js"
   import { goto, layout, isActive } from "@roxi/routify"
@@ -10,17 +10,20 @@
   let tourStep
   let tourStepIdx
   let lastStep
+  let skipping = false
 
   $: tourNodes = { ...$store.tourNodes }
   $: tourKey = $store.tourKey
   $: tourStepKey = $store.tourStepKey
+  $: tour = TOURS[tourKey]
+  $: tourOnSkip = tour?.onSkip
 
   const updateTourStep = (targetStepKey, tourKey) => {
     if (!tourKey) {
       return
     }
     if (!tourSteps?.length) {
-      tourSteps = [...TOURS[tourKey]]
+      tourSteps = [...tour.steps]
     }
     tourStepIdx = getCurrentStepIdx(tourSteps, targetStepKey)
     lastStep = tourStepIdx + 1 == tourSteps.length
@@ -71,23 +74,8 @@
         tourStep.onComplete()
       }
       popover.hide()
-      if (tourStep.endRoute) {
+      if (tour.endRoute) {
-        $goto(tourStep.endRoute)
+        $goto(tour.endRoute)
-      }
-    }
-  }
-
-  const previousStep = async () => {
-    if (tourStepIdx > 0) {
-      let target = tourSteps[tourStepIdx - 1]
-      if (target) {
-        store.update(state => ({
-          ...state,
-          tourStepKey: target.id,
-        }))
-        navigateStep(target)
-      } else {
-        console.log("Could not retrieve step")
       }
     }
   }
@@ -132,16 +120,23 @@
           </Body>
           <div class="tour-footer">
             <div class="tour-navigation">
-              {#if tourStepIdx > 0}
+              {#if typeof tourOnSkip === "function"}
-                <Button
+                <Link
                   secondary
-                  on:click={previousStep}
+                  quiet
-                  disabled={tourStepIdx == 0}
+                  on:click={() => {
+                    skipping = true
+                    tourOnSkip()
+                    if (tour.endRoute) {
+                      $goto(tour.endRoute)
+                    }
+                  }}
+                  disabled={skipping}
                 >
-                  <div>Back</div>
+                  Skip
-                </Button>
+                </Link>
               {/if}
-              <Button cta on:click={nextStep}>
+              <Button cta on:click={nextStep} disabled={skipping}>
                 <div>{lastStep ? "Finish" : "Next"}</div>
               </Button>
             </div>
@@ -157,9 +152,10 @@
     padding: var(--spacing-xl);
   }
   .tour-navigation {
-    grid-gap: var(--spectrum-alias-grid-baseline);
+    grid-gap: var(--spacing-xl);
     display: flex;
     justify-content: end;
+    align-items: center;
   }
   .tour-body :global(.feature-list) {
     margin-bottom: 0px;

packages/builder/src/components/portal/onboarding/TourWrap.svelte

@@ -13,7 +13,7 @@
 
   const registerTourNode = (tourKey, stepKey) => {
     if (ready && !registered && tourKey) {
-      currentTourStep = TOURS[tourKey].find(step => step.id === stepKey)
+      currentTourStep = TOURS[tourKey].steps.find(step => step.id === stepKey)
       if (!currentTourStep) {
         return
       }

packages/builder/src/components/portal/onboarding/tours.js

@@ -4,6 +4,7 @@ import { auth } from "stores/portal"
 import analytics from "analytics"
 import { OnboardingData, OnboardingDesign, OnboardingPublish } from "./steps"
 import { API } from "api"
+
 const ONBOARDING_EVENT_PREFIX = "onboarding"
 
 export const TOUR_STEP_KEYS = {
@@ -20,6 +21,37 @@ export const TOUR_KEYS = {
   FEATURE_ONBOARDING: "feature-onboarding",
 }
 
+const endUserOnboarding = async ({ skipped = false } = {}) => {
+  // Mark the users onboarding as complete
+  // Clear all tour related state
+  if (get(auth).user) {
+    try {
+      await API.updateSelf({
+        onboardedAt: new Date().toISOString(),
+      })
+
+      if (skipped) {
+        tourEvent("skipped")
+      }
+
+      // Update the cached user
+      await auth.getSelf()
+
+      store.update(state => ({
+        ...state,
+        tourNodes: undefined,
+        tourKey: undefined,
+        tourKeyStep: undefined,
+        onboarding: false,
+      }))
+    } catch (e) {
+      console.log("Onboarding failed", e)
+      return false
+    }
+    return true
+  }
+}
+
 const tourEvent = eventKey => {
   analytics.captureEvent(`${ONBOARDING_EVENT_PREFIX}:${eventKey}`, {
     eventSource: EventSource.PORTAL,
@@ -28,111 +60,81 @@ const tourEvent = eventKey => {
 
 const getTours = () => {
   return {
-    [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: [
+    [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: {
-      {
+      steps: [
-        id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
+        {
-        title: "Data",
+          id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
-        route: "/builder/app/:application/data",
+          title: "Data",
-        layout: OnboardingData,
+          route: "/builder/app/:application/data",
-        query: ".topleftnav .spectrum-Tabs-item#builder-data-tab",
+          layout: OnboardingData,
-        onLoad: async () => {
+          query: ".topleftnav .spectrum-Tabs-item#builder-data-tab",
-          tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
+          onLoad: async () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
+          },
+          align: "left",
         },
-        align: "left",
+        {
+          id: TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION,
+          title: "Design",
+          route: "/builder/app/:application/design",
+          layout: OnboardingDesign,
+          query: ".topleftnav .spectrum-Tabs-item#builder-design-tab",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
+          },
+          align: "left",
+        },
+        {
+          id: TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION,
+          title: "Automations",
+          route: "/builder/app/:application/automation",
+          query: ".topleftnav .spectrum-Tabs-item#builder-automation-tab",
+          body: "Once you have your app screens made, you can set up automations to fit in with your current workflow",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION)
+          },
+          align: "left",
+        },
+        {
+          id: TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT,
+          title: "Users",
+          query: ".toprightnav #builder-app-users-button",
+          body: "Add users to your app and control what level of access they have.",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT)
+          },
+        },
+        {
+          id: TOUR_STEP_KEYS.BUILDER_APP_PUBLISH,
+          title: "Publish",
+          layout: OnboardingPublish,
+          route: "/builder/app/:application/design",
+          query: ".toprightnav #builder-app-publish-button",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
+          },
+          onComplete: endUserOnboarding,
+        },
+      ],
+      onSkip: async () => {
+        await endUserOnboarding({ skipped: true })
       },
-      {
+      endRoute: "/builder/app/:application/data",
-        id: TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION,
+    },
-        title: "Design",
+    [TOUR_KEYS.FEATURE_ONBOARDING]: {
-        route: "/builder/app/:application/design",
+      steps: [
-        layout: OnboardingDesign,
+        {
-        query: ".topleftnav .spectrum-Tabs-item#builder-design-tab",
+          id: TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT,
-        onLoad: () => {
+          title: "Users",
-          tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
+          query: ".toprightnav #builder-app-users-button",
+          body: "Add users to your app and control what level of access they have.",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT)
+          },
+          onComplete: endUserOnboarding,
         },
-        align: "left",
+      ],
-      },
+    },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION,
-        title: "Automations",
-        route: "/builder/app/:application/automation",
-        query: ".topleftnav .spectrum-Tabs-item#builder-automation-tab",
-        body: "Once you have your app screens made, you can set up automations to fit in with your current workflow",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION)
-        },
-        align: "left",
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT,
-        title: "Users",
-        query: ".toprightnav #builder-app-users-button",
-        body: "Add users to your app and control what level of access they have.",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT)
-        },
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_APP_PUBLISH,
-        title: "Publish",
-        layout: OnboardingPublish,
-        route: "/builder/app/:application/design",
-        endRoute: "/builder/app/:application/data",
-        query: ".toprightnav #builder-app-publish-button",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
-        },
-        onComplete: async () => {
-          // Mark the users onboarding as complete
-          // Clear all tour related state
-          if (get(auth).user) {
-            await API.updateSelf({
-              onboardedAt: new Date().toISOString(),
-            })
-
-            // Update the cached user
-            await auth.getSelf()
-
-            store.update(state => ({
-              ...state,
-              tourNodes: undefined,
-              tourKey: undefined,
-              tourKeyStep: undefined,
-              onboarding: false,
-            }))
-          }
-        },
-      },
-    ],
-    [TOUR_KEYS.FEATURE_ONBOARDING]: [
-      {
-        id: TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT,
-        title: "Users",
-        query: ".toprightnav #builder-app-users-button",
-        body: "Add users to your app and control what level of access they have.",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT)
-        },
-        onComplete: async () => {
-          // Push the onboarding forward
-          if (get(auth).user) {
-            await API.updateSelf({
-              onboardedAt: new Date().toISOString(),
-            })
-
-            // Update the cached user
-            await auth.getSelf()
-
-            store.update(state => ({
-              ...state,
-              tourNodes: undefined,
-              tourKey: undefined,
-              tourKeyStep: undefined,
-              onboarding: false,
-            }))
-          }
-        },
-      },
-    ],
   }
 }
 

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -27,7 +27,7 @@
   import TourPopover from "components/portal/onboarding/TourPopover.svelte"
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
   import { UserAvatars } from "@budibase/frontend-core"
-  import { TOUR_KEYS, TOURS } from "components/portal/onboarding/tours.js"
+  import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
   import PreviewOverlay from "./_components/PreviewOverlay.svelte"
 
   export let application
@@ -87,17 +87,10 @@
     // Check if onboarding is enabled.
     if (isEnabled(TENANT_FEATURE_FLAGS.ONBOARDING_TOUR)) {
       if (!$auth.user?.onboardedAt) {
-        // Determine the correct step
-        const activeNav = $layout.children.find(c => $isActive(c.path))
-        const onboardingTour = TOURS[TOUR_KEYS.TOUR_BUILDER_ONBOARDING]
-        const targetStep = activeNav
-          ? onboardingTour.find(step => step.route === activeNav?.path)
-          : null
         await store.update(state => ({
           ...state,
           onboarding: true,
           tourKey: TOUR_KEYS.TOUR_BUILDER_ONBOARDING,
-          tourStepKey: targetStep?.id,
         }))
       } else {
         // Feature tour date

packages/client/src/components/Block.svelte

@@ -8,27 +8,31 @@
 
   let structureLookupMap = {}
 
-  const registerBlockComponent = (id, order, parentId, instance) => {
+  const registerBlockComponent = (id, parentId, order, instance) => {
     // Ensure child map exists
     if (!structureLookupMap[parentId]) {
       structureLookupMap[parentId] = {}
     }
     // Add this instance in this order, overwriting any existing instance in
     // this order in case of repeaters
-    structureLookupMap[parentId][order] = instance
+    structureLookupMap[parentId][id] = { order, instance }
   }
 
-  const unregisterBlockComponent = (order, parentId) => {
+  const unregisterBlockComponent = (id, parentId) => {
     // Ensure child map exists
     if (!structureLookupMap[parentId]) {
       return
     }
-    delete structureLookupMap[parentId][order]
+    delete structureLookupMap[parentId][id]
   }
 
   const eject = () => {
     // Start the new structure with the root component
-    let definition = structureLookupMap[$component.id][0]
+    const rootMap = structureLookupMap[$component.id] || {}
+    let definition = Object.values(rootMap)[0]?.instance
+    if (!definition) {
+      return
+    }
 
     // Copy styles from block to root component
     definition._styles = {
@@ -49,10 +53,7 @@
   const attachChildren = (rootComponent, map) => {
     // Transform map into children array
     let id = rootComponent._id
-    const children = Object.entries(map[id] || {}).map(([order, instance]) => ({
+    const children = Object.values(map[id] || {})
-      order,
-      instance,
-    }))
     if (!children.length) {
       return
     }

packages/client/src/components/BlockComponent.svelte

@@ -23,6 +23,8 @@
   // Create a fake component instance so that we can use the core Component
   // to render this part of the block, taking advantage of binding enrichment
   $: id = `${block.id}-${context ?? rand}`
+  $: parentId = $component?.id
+  $: inBuilder = $builderStore.inBuilder
   $: instance = {
     _component: `@budibase/standard-components/${type}`,
     _id: id,
@@ -38,14 +40,14 @@
   // Register this block component if we're inside the builder so it can be
   // ejected later
   $: {
-    if ($builderStore.inBuilder) {
+    if (inBuilder) {
-      block.registerComponent(id, order ?? 0, $component?.id, instance)
+      block.registerComponent(id, parentId, order ?? 0, instance)
     }
   }
 
   onDestroy(() => {
-    if ($builderStore.inBuilder) {
+    if (inBuilder) {
-      block.unregisterComponent(order ?? 0, $component?.id)
+      block.unregisterComponent(id, parentId)
     }
   })
 </script>

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -126,7 +126,7 @@
             order={1}
           >
             {#if enrichedSearchColumns?.length}
-              {#each enrichedSearchColumns as column, idx}
+              {#each enrichedSearchColumns as column, idx (column.name)}
                 <BlockComponent
                   type={column.componentType}
                   props={{

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -170,7 +170,7 @@
             order={1}
           >
             {#if enrichedSearchColumns?.length}
-              {#each enrichedSearchColumns as column, idx}
+              {#each enrichedSearchColumns as column, idx (column.name)}
                 <BlockComponent
                   type={column.componentType}
                   props={{

packages/client/src/utils/buttonActions.js

@@ -478,7 +478,7 @@ export const enrichButtonActions = (actions, context) => {
                     actions.slice(i + 1),
                     newContext
                   )
-                  resolve(await next())
+                  resolve(typeof next === "function" ? await next() : true)
                 } else {
                   resolve(false)
                 }

scripts/versionCommit.sh

@@ -13,6 +13,6 @@ node ./bumpVersion.js $1
 NEW_VERSION=$(node -p "require('../lerna.json').version")
 git add ../lerna.json
 git commit -m "Bump version to $NEW_VERSION"
-git tag v$NEW_VERSION
+git tag $NEW_VERSION
 git push
 git push --tags