Merge remote-tracking branch 'origin/master' into feat/automation-ux

lerna.json

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

packages/builder/src/builderStore/store/frontend.js

@@ -85,7 +85,6 @@ const INITIAL_FRONTEND_STATE = {
   selectedScreenId: null,
   selectedComponentId: null,
   selectedLayoutId: null,
-  hoverComponentId: null,
 
   // Client state
   selectedComponentInstance: null,
@@ -93,6 +92,9 @@ const INITIAL_FRONTEND_STATE = {
   // Onboarding
   onboarding: false,
   tourNodes: null,
+
+  // UI state
+  hoveredComponentId: null,
 }
 
 export const getFrontendStore = () => {
@@ -1413,6 +1415,18 @@ export const getFrontendStore = () => {
           return state
         })
       },
+      hover: (componentId, notifyClient = true) => {
+        if (componentId === get(store).hoveredComponentId) {
+          return
+        }
+        store.update(state => {
+          state.hoveredComponentId = componentId
+          return state
+        })
+        if (notifyClient) {
+          store.actions.preview.sendEvent("hover-component", componentId)
+        }
+      },
     },
     links: {
       save: async (url, title) => {

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

@@ -6,7 +6,7 @@
   import { Helpers } from "@budibase/bbui"
   import { derived, writable } from "svelte/store"
   import { Utils } from "@budibase/frontend-core"
-  import { cloneDeep } from "lodash"
+  import { cloneDeep, isEqual } from "lodash"
 
   export let componentInstance
   export let componentBindings
@@ -21,21 +21,32 @@
   const currentStep = derived(multiStepStore, state => state.currentStep)
   const componentType = "@budibase/standard-components/multistepformblockstep"
 
+  let cachedValue
+  let cachedInstance = {}
+
+  $: if (!isEqual(cachedValue, value)) {
+    cachedValue = value
+  }
+
+  $: if (!isEqual(componentInstance, cachedInstance)) {
+    cachedInstance = componentInstance
+  }
+
   setContext("multi-step-form-block", multiStepStore)
 
-  $: stepCount = value?.length || 0
+  $: stepCount = cachedValue?.length || 0
   $: updateStore(stepCount)
-  $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: dataSource = getDatasourceForProvider($currentAsset, cachedInstance)
   $: emitCurrentStep($currentStep)
   $: stepLabel = getStepLabel($multiStepStore)
   $: stepDef = getDefinition(stepLabel)
-  $: stepSettings = value?.[$currentStep] || {}
+  $: stepSettings = cachedValue?.[$currentStep] || {}
   $: defaults = Utils.buildMultiStepFormBlockDefaultProps({
-    _id: componentInstance._id,
+    _id: cachedInstance._id,
     stepCount: $multiStepStore.stepCount,
     currentStep: $multiStepStore.currentStep,
-    actionType: componentInstance.actionType,
+    actionType: cachedInstance.actionType,
-    dataSource: componentInstance.dataSource,
+    dataSource: cachedInstance.dataSource,
   })
   $: stepInstance = {
     _id: Helpers.uuid(),

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -108,6 +108,8 @@
           {componentInstance}
           {componentDefinition}
           {bindings}
+          iconTooltip={componentName}
+          componentTitle={title}
         />
       {/if}
       {#if section == "conditions"}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte

@@ -5,6 +5,9 @@
     Drawer,
     Button,
     notifications,
+    AbsTooltip,
+    Icon,
+    Body,
   } from "@budibase/bbui"
   import { selectedScreen, store } from "builderStore"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
@@ -15,6 +18,9 @@
   } from "builderStore/dataBinding"
 
   export let componentInstance
+  export let componentDefinition
+  export let iconTooltip
+  export let componentTitle
 
   let tempValue
   let drawer
@@ -24,6 +30,8 @@
     $store.selectedComponentId
   )
 
+  $: icon = componentDefinition?.icon
+
   const openDrawer = () => {
     tempValue = runtimeToReadableBinding(
       bindings,
@@ -54,7 +62,19 @@
 {#key componentInstance?._id}
   <Drawer bind:this={drawer} title="Custom CSS">
     <svelte:fragment slot="description">
-      Custom CSS overrides all other component styles.
+      <div class="header">
+        Your CSS will overwrite styles for:
+        {#if icon}
+          <AbsTooltip type="info" text={iconTooltip}>
+            <Icon
+              color={`var(--spectrum-global-color-gray-600)`}
+              size="S"
+              name={icon}
+            />
+          </AbsTooltip>
+          <Body size="S"><b>{componentTitle || ""}</b></Body>
+        {/if}
+      </div>
     </svelte:fragment>
     <Button cta slot="buttons" on:click={save}>Save</Button>
     <svelte:component
@@ -68,3 +88,13 @@
     />
   </Drawer>
 {/key}
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -36,14 +36,12 @@
 
   // Determine selected component ID
   $: selectedComponentId = $store.selectedComponentId
-  $: hoverComponentId = $store.hoverComponentId
 
   $: previewData = {
     appId: $store.appId,
     layout,
     screen,
     selectedComponentId,
-    hoverComponentId,
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
@@ -119,8 +117,8 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       $store.selectedComponentId = data.id
-    } else if (type === "hover-component" && data.id) {
+    } else if (type === "hover-component") {
-      $store.hoverComponentId = data.id
+      store.actions.components.hover(data.id, false)
     } else if (type === "update-prop") {
       await store.actions.components.updateSetting(data.prop, data.value)
     } else if (type === "update-styles") {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte

@@ -7,6 +7,7 @@
   $: definition = store.actions.components.getDefinition(component?._component)
   $: noPaste = !$store.componentToPaste
   $: isBlock = definition?.block === true
+  $: canEject = !(definition?.ejectable === false)
 
   const keyboardEvent = (key, ctrlKey = false) => {
     document.dispatchEvent(
@@ -32,7 +33,7 @@
   >
     Delete
   </MenuItem>
-  {#if isBlock}
+  {#if isBlock && canEject}
     <MenuItem
       icon="Export"
       keyBind="Ctrl+E"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte

@@ -32,8 +32,15 @@
       await store.actions.components.paste(component, "below")
     },
     ["Ctrl+e"]: component => {
-      componentToEject = component
+      const definition = store.actions.components.getDefinition(
-      confirmEjectDialog.show()
+        component._component
+      )
+      const isBlock = definition?.block === true
+      const canEject = !(definition?.ejectable === false)
+      if (isBlock && canEject) {
+        componentToEject = component
+        confirmEjectDialog.show()
+      }
     },
     ["Ctrl+Enter"]: () => {
       $goto(`./:componentId/new`)

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -90,16 +90,7 @@
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
 
-  const handleMouseover = componentId => {
+  const hover = store.actions.components.hover
-    if ($store.hoverComponentId !== componentId) {
-      $store.hoverComponentId = componentId
-    }
-  }
-  const handleMouseout = componentId => {
-    if ($store.hoverComponentId === componentId) {
-      $store.hoverComponentId = null
-    }
-  }
 </script>
 
 <ul>
@@ -120,9 +111,9 @@
         on:dragover={dragover(component, index)}
         on:iconClick={() => toggleNodeOpen(component._id)}
         on:drop={onDrop}
-        hovering={$store.hoverComponentId === component._id}
+        hovering={$store.hoveredComponentId === component._id}
-        on:mouseenter={() => handleMouseover(component._id)}
+        on:mouseenter={() => hover(component._id)}
-        on:mouseleave={() => handleMouseout(component._id)}
+        on:mouseleave={() => hover(null)}
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
         iconTooltip={getComponentName(component)}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte

@@ -12,6 +12,9 @@
 
   let scrolling = false
 
+  $: screenComponentId = `${$store.selectedScreenId}-screen`
+  $: navComponentId = `${$store.selectedScreenId}-navigation`
+
   const toNewComponentRoute = () => {
     if ($isActive(`./:componentId/new`)) {
       $goto(`./:componentId`)
@@ -33,16 +36,7 @@
     scrolling = e.target.scrollTop !== 0
   }
 
-  const handleMouseover = componentId => {
+  const hover = store.actions.components.hover
-    if ($store.hoverComponentId !== componentId) {
-      $store.hoverComponentId = componentId
-    }
-  }
-  const handleMouseout = componentId => {
-    if ($store.hoverComponentId === componentId) {
-      $store.hoverComponentId = null
-    }
-  }
 </script>
 
 <div class="components">
@@ -65,46 +59,31 @@
             scrollable
             icon="WebPage"
             on:drop={onDrop}
-            on:click={() => {
+            on:click={() => ($store.selectedComponentId = screenComponentId)}
-              $store.selectedComponentId = `${$store.selectedScreenId}-screen`
+            hovering={$store.hoveredComponentId === screenComponentId}
-            }}
+            on:mouseenter={() => hover(screenComponentId)}
-            hovering={$store.hoverComponentId ===
+            on:mouseleave={() => hover(null)}
-              `${$store.selectedScreenId}-screen`}
+            id="component-screen"
-            on:mouseenter={() =>
+            selectedBy={$userSelectedResourceMap[screenComponentId]}
-              handleMouseover(`${$store.selectedScreenId}-screen`)}
-            on:mouseleave={() =>
-              handleMouseout(`${$store.selectedScreenId}-screen`)}
-            id={`component-screen`}
-            selectedBy={$userSelectedResourceMap[
-              `${$store.selectedScreenId}-screen`
-            ]}
           >
             <ScreenslotDropdownMenu component={$selectedScreen?.props} />
           </NavItem>
           <NavItem
             text="Navigation"
             indentLevel={0}
-            selected={$store.selectedComponentId ===
+            selected={$store.selectedComponentId === navComponentId}
-              `${$store.selectedScreenId}-navigation`}
             opened
             scrollable
             icon={$selectedScreen.showNavigation
               ? "Visibility"
               : "VisibilityOff"}
             on:drop={onDrop}
-            on:click={() => {
+            on:click={() => ($store.selectedComponentId = navComponentId)}
-              $store.selectedComponentId = `${$store.selectedScreenId}-navigation`
+            hovering={$store.hoveredComponentId === navComponentId}
-            }}
+            on:mouseenter={() => hover(navComponentId)}
-            hovering={$store.hoverComponentId ===
+            on:mouseleave={() => hover(null)}
-              `${$store.selectedScreenId}-navigation`}
+            id="component-nav"
-            on:mouseenter={() =>
+            selectedBy={$userSelectedResourceMap[navComponentId]}
-              handleMouseover(`${$store.selectedScreenId}-navigation`)}
-            on:mouseleave={() =>
-              handleMouseout(`${$store.selectedScreenId}-navigation`)}
-            id={`component-nav`}
-            selectedBy={$userSelectedResourceMap[
-              `${$store.selectedScreenId}-navigation`
-            ]}
           />
           <ComponentTree
             level={0}

packages/client/src/components/preview/HoverIndicator.svelte

@@ -1,9 +1,9 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore, dndIsDragging } from "stores"
+  import { builderStore, dndIsDragging, hoverStore } from "stores"
 
-  $: componentId = $builderStore.hoverComponentId
+  $: componentId = $hoverStore.hoveredComponentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
 
   const onMouseOver = e => {
@@ -23,12 +23,12 @@
     }
 
     if (newId !== componentId) {
-      builderStore.actions.hoverComponent(newId)
+      hoverStore.actions.hoverComponent(newId)
     }
   }
 
   const onMouseLeave = () => {
-    builderStore.actions.hoverComponent(null)
+    hoverStore.actions.hoverComponent(null)
   }
 
   onMount(() => {

packages/client/src/index.js

@@ -8,6 +8,7 @@ import {
   environmentStore,
   dndStore,
   eventStore,
+  hoverStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 import { get } from "svelte/store"
@@ -33,7 +34,6 @@ const loadBudibase = async () => {
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
-    hoverComponentId: window["##BUDIBASE_HOVER_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
@@ -84,6 +84,8 @@ const loadBudibase = async () => {
       } else {
         dndStore.actions.reset()
       }
+    } else if (type === "hover-component") {
+      hoverStore.actions.hoverComponent(data)
     } else if (type === "builder-meta") {
       builderStore.actions.setMetadata(data)
     }

packages/client/src/stores/builder.js

@@ -8,7 +8,6 @@ const createBuilderStore = () => {
     inBuilder: false,
     screen: null,
     selectedComponentId: null,
-    hoverComponentId: null,
     editMode: false,
     previewId: null,
     theme: null,
@@ -25,16 +24,6 @@ const createBuilderStore = () => {
   }
   const store = writable(initialState)
   const actions = {
-    hoverComponent: id => {
-      if (id === get(store).hoverComponentId) {
-        return
-      }
-      store.update(state => ({
-        ...state,
-        hoverComponentId: id,
-      }))
-      eventStore.actions.dispatchEvent("hover-component", { id })
-    },
     selectComponent: id => {
       if (id === get(store).selectedComponentId) {
         return

packages/client/src/stores/hover.js

@@ -0,0 +1,25 @@
+import { get, writable } from "svelte/store"
+import { eventStore } from "./events.js"
+
+const createHoverStore = () => {
+  const store = writable({
+    hoveredComponentId: null,
+  })
+
+  const hoverComponent = id => {
+    if (id === get(store).hoveredComponentId) {
+      return
+    }
+    store.set({ hoveredComponentId: id })
+    eventStore.actions.dispatchEvent("hover-component", { id })
+  }
+
+  return {
+    ...store,
+    actions: {
+      hoverComponent,
+    },
+  }
+}
+
+export const hoverStore = createHoverStore()

packages/client/src/stores/index.js

@@ -27,6 +27,7 @@ export {
   dndIsDragging,
 } from "./dnd"
 export { sidePanelStore } from "./sidePanel"
+export { hoverStore } from "./hover"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"

packages/pro

@@ -1 +1 @@
-Subproject commit b1c10c2daf808d103724c324256cbff67f33fb46
+Subproject commit 8c466d6ef2a0c09b843ef63276793ab5af2e96f7

packages/server/src/api/controllers/static/templates/preview.hbs

@@ -63,7 +63,6 @@
       // Extract data from message
       const {
         selectedComponentId,
-        hoverComponentId,
         layout,
         screen,
         appId,
@@ -82,7 +81,6 @@
       window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
       window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
       window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
-      window["##BUDIBASE_HOVER_COMPONENT_ID##"] = hoverComponentId
       window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
       window["##BUDIBASE_PREVIEW_THEME##"] = theme
       window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme

packages/server/src/integrations/postgres.ts

@@ -149,8 +149,6 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
   private index: number = 1
   private open: boolean
 
-  COLUMNS_SQL!: string
-
   PRIMARY_KEYS_SQL = () => `
   SELECT pg_namespace.nspname table_schema
      , pg_class.relname table_name
@@ -171,6 +169,11 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
   JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace;
   `
 
+  COLUMNS_SQL = () => `
+    select * from information_schema.columns where table_schema = ANY(current_schemas(false)) 
+      AND pg_table_is_visible(to_regclass(format('%I.%I', table_schema, table_name)));
+  `
+
   constructor(config: PostgresConfig) {
     super(SqlClient.POSTGRES)
     this.config = config
@@ -224,8 +227,6 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
       .split(",")
       .map(item => `"${item.trim()}"`)
     await this.client.query(`SET search_path TO ${search_path.join(",")};`)
-    this.COLUMNS_SQL = `select * from information_schema.columns where table_schema = ANY(current_schemas(false))
-    AND pg_table_is_visible(to_regclass(table_schema || '.' || table_name));`
     this.open = true
   }
 
@@ -312,7 +313,7 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
 
     try {
       const columnsResponse: { rows: PostgresColumn[] } =
-        await this.client.query(this.COLUMNS_SQL)
+        await this.client.query(this.COLUMNS_SQL())
 
       const tables: { [key: string]: Table } = {}
 
@@ -382,7 +383,7 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
     try {
       await this.openConnection()
       const columnsResponse: { rows: PostgresColumn[] } =
-        await this.client.query(this.COLUMNS_SQL)
+        await this.client.query(this.COLUMNS_SQL())
       const names = columnsResponse.rows.map(row => row.table_name)
       return [...new Set(names)]
     } finally {

packages/server/src/jsRunner.ts

@@ -12,51 +12,49 @@ export function init() {
       const perRequestLimit = env.JS_PER_REQUEST_TIME_LIMIT_MS
       let track: TrackerFn = f => f()
       if (perRequestLimit) {
-        tracer.trace<any>("runJS.setupTracker", {}, span => {
+        const bbCtx = tracer.trace("runJS.getCurrentContext", {}, span =>
-          const bbCtx = context.getCurrentContext()
+          context.getCurrentContext()
-          if (bbCtx) {
+        )
-            if (!bbCtx.jsExecutionTracker) {
+        if (bbCtx) {
-              span?.addTags({
+          if (!bbCtx.jsExecutionTracker) {
-                createdExecutionTracker: true,
-              })
-              bbCtx.jsExecutionTracker =
-                timers.ExecutionTimeTracker.withLimit(perRequestLimit)
-            }
             span?.addTags({
-              js: {
+              createdExecutionTracker: true,
-                limitMS: bbCtx.jsExecutionTracker.limitMs,
-                elapsedMS: bbCtx.jsExecutionTracker.elapsedMS,
-              },
             })
-            // We call checkLimit() here to prevent paying the cost of creating
+            bbCtx.jsExecutionTracker = tracer.trace(
-            // a new VM context below when we don't need to.
+              "runJS.createExecutionTimeTracker",
-            bbCtx.jsExecutionTracker.checkLimit()
+              {},
-            track = bbCtx.jsExecutionTracker.track.bind(
+              span => timers.ExecutionTimeTracker.withLimit(perRequestLimit)
-              bbCtx.jsExecutionTracker
             )
           }
-        })
+          span?.addTags({
+            js: {
+              limitMS: bbCtx.jsExecutionTracker.limitMs,
+              elapsedMS: bbCtx.jsExecutionTracker.elapsedMS,
+            },
+          })
+          // We call checkLimit() here to prevent paying the cost of creating
+          // a new VM context below when we don't need to.
+          tracer.trace("runJS.checkLimitAndBind", {}, span => {
+            bbCtx.jsExecutionTracker!.checkLimit()
+            track = bbCtx.jsExecutionTracker!.track.bind(
+              bbCtx.jsExecutionTracker
+            )
+          })
+        }
       }
 
-      ctx = tracer.trace("runJS.ctxClone", {}, span => {
+      ctx = {
-        return {
+        ...ctx,
-          ...ctx,
+        alert: undefined,
-          alert: undefined,
+        setInterval: undefined,
-          setInterval: undefined,
+        setTimeout: undefined,
-          setTimeout: undefined,
+      }
-        }
-      })
-
-      tracer.trace("runJS.vm.createContext", {}, span => {
-        vm.createContext(ctx)
-      })
 
+      vm.createContext(ctx)
       return track(() =>
-        tracer.trace("runJS.vm.runInNewContext", {}, span =>
+        vm.runInNewContext(js, ctx, {
-          vm.runInNewContext(js, ctx, {
+          timeout: env.JS_PER_EXECUTION_TIME_LIMIT_MS,
-            timeout: env.JS_PER_EXECUTION_TIME_LIMIT_MS,
+        })
-          })
-        )
       )
     })
   })

qa-core/src/account-api/tests/licensing/license.manage.spec.ts

@@ -39,10 +39,10 @@ describe("license management", () => {
     let premiumPriceId = null
     let businessPriceId = ""
     for (const plan of planBody) {
-      if (plan.type === PlanType.PREMIUM) {
+      if (plan.type === PlanType.PREMIUM_PLUS) {
         premiumPriceId = plan.prices[0].priceId
       }
-      if (plan.type === PlanType.BUSINESS) {
+      if (plan.type === PlanType.ENTERPRISE_BASIC) {
         businessPriceId = plan.prices[0].priceId
       }
     }
@@ -97,7 +97,7 @@ describe("license management", () => {
       await config.loginAsAccount(createAccountRequest)
       await config.api.stripe.linkStripeCustomer(account.accountId, customer.id)
       const [_, selfBodyPremium] = await config.api.accounts.self()
-      expect(selfBodyPremium.license.plan.type).toBe(PlanType.PREMIUM)
+      expect(selfBodyPremium.license.plan.type).toBe(PlanType.PREMIUM_PLUS)
 
       // Create portal session - Check URL
       const [portalRes, portalSessionBody] =
@@ -109,7 +109,7 @@ describe("license management", () => {
 
       // License updated to Business
       const [selfRes, selfBodyBusiness] = await config.api.accounts.self()
-      expect(selfBodyBusiness.license.plan.type).toBe(PlanType.BUSINESS)
+      expect(selfBodyBusiness.license.plan.type).toBe(PlanType.ENTERPRISE_BASIC)
     })
   })
 })