Merge branch 'master' into feature/automation-state-block

Author: deanhannigan

.prettierignore

@@ -10,4 +10,12 @@ packages/builder/.routify
 packages/sdk/sdk
 packages/pro/coverage
 **/*.ivm.bundle.js
-!**/bson-polyfills.ivm.bundle.js
+!**/bson-polyfills.ivm.bundle.js
+charts/
+**/*.hbs
+packages/worker/src/constants/templates/tests/
+.github
+.vscode
+examples
+hosting
+i18n

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.14.1",
+  "version": "3.15.0",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {

packages/backend-core/src/sql/sql.ts

@@ -109,8 +109,8 @@ function wrap(value: string, quoteChar = '"'): string {
   return `${quoteChar}${escapeQuotes(value, quoteChar)}${quoteChar}`
 }
 
-function stringifyArray(value: any[], quoteStyle = '"'): string {
-  for (let i in value) {
+function stringifyArray(value: unknown[], quoteStyle = '"'): string {
+  for (const i in value) {
     if (typeof value[i] === "string") {
       value[i] = wrap(value[i], quoteStyle)
     }
@@ -162,6 +162,12 @@ class InternalBuilder {
 
   // states the various situations in which we need a full mapped select statement
   private readonly SPECIAL_SELECT_CASES = {
+    POSTGRES_ARRAY: (field: FieldSchema | undefined) => {
+      return (
+        this.client === SqlClient.POSTGRES &&
+        field?.externalType?.toLowerCase() === "array"
+      )
+    },
     POSTGRES_MONEY: (field: FieldSchema | undefined) => {
       return (
         this.client === SqlClient.POSTGRES &&
@@ -233,11 +239,6 @@ class InternalBuilder {
     return key.map(part => this.quote(part)).join(".")
   }
 
-  private quotedValue(value: string): string {
-    const formatter = this.knexClient.formatter(this.knexClient.queryBuilder())
-    return formatter.wrap(value, false)
-  }
-
   private castIntToString(identifier: string | Knex.Raw): Knex.Raw {
     switch (this.client) {
       case SqlClient.ORACLE: {
@@ -409,6 +410,10 @@ class InternalBuilder {
       return JSON.stringify(input)
     }
 
+    if (this.SPECIAL_SELECT_CASES.POSTGRES_ARRAY(schema)) {
+      return `{${input}}`
+    }
+
     if (
       this.client === SqlClient.ORACLE &&
       schema.type === FieldType.DATETIME &&
@@ -766,15 +771,33 @@ class InternalBuilder {
       if (this.client === SqlClient.POSTGRES) {
         iterate(mode, ArrayOperator.CONTAINS, (q, key, value) => {
           q = addModifiers(q)
+          const schema = this.getFieldSchema(key)
+          let cast = "::jsonb"
+          if (this.SPECIAL_SELECT_CASES.POSTGRES_ARRAY(schema)) {
+            cast = ""
+            const values = (value as string[]).map(value =>
+              value.substring(1, value.length - 1)
+            )
+            value = `{${values}}`
+          }
           if (any) {
-            return q.whereRaw(`COALESCE(??::jsonb \\?| array??, FALSE)`, [
-              this.rawQuotedIdentifier(key),
-              this.knex.raw(stringifyArray(value, "'")),
-            ])
+            return q.whereRaw(
+              cast
+                ? `COALESCE(??::jsonb \\?| array??, FALSE)`
+                : `COALESCE(?? && '??', FALSE)`,
+              [
+                this.rawQuotedIdentifier(key),
+                cast
+                  ? this.knex.raw(stringifyArray(value, "'"))
+                  : this.knex.raw(value),
+              ]
+            )
           } else {
-            return q.whereRaw(`COALESCE(??::jsonb @> '??', FALSE)`, [
+            return q.whereRaw(`COALESCE(??${cast} @> '??', FALSE)`, [
               this.rawQuotedIdentifier(key),
-              this.knex.raw(stringifyArray(value)),
+              cast
+                ? this.knex.raw(stringifyArray(value))
+                : this.knex.raw(value),
             ])
           }
         })

packages/bbui/src/Icon/Icon.svelte

@@ -3,7 +3,7 @@
   import { TooltipPosition, TooltipType } from "../constants"
   import InnerIcon from "./InnerIcon.svelte"
 
-  export let size: "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL" = "M"
+  export let size: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL" = "M"
   export let name: string = "plus"
   export let hidden: boolean = false
   export let hoverable: boolean = false

packages/bbui/src/Icon/InnerIcon.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getPhosphorIcon } from "../helpers"
 
-  export let size: "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL" = "M"
+  export let size: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL" = "M"
   export let name: string = "plus"
   export let hidden: boolean = false
   export let hoverable: boolean = false
@@ -12,6 +12,7 @@
   export let weight: "regular" | "bold" | "fill" = "regular"
 
   const sizeMap = {
+    XXS: "12px",
     XS: "14px",
     S: "16px",
     M: "18px",

packages/bbui/src/Table/Table.svelte

@@ -562,6 +562,12 @@
     border-left: 1px solid transparent;
     padding-left: var(--cell-padding);
   }
+
+  .spectrum-Table-head > .spectrum-Table-headCell--edit:first-child {
+    padding-left: calc(var(--cell-padding) / 1.33);
+    /* adding 1px to compensate for lack of right border in header */
+    padding-right: calc(var(--cell-padding) / 1.33 + 1px);
+  }
   .spectrum-Table-head > :last-child {
     border-right: 1px solid transparent;
     padding-right: var(--cell-padding);
@@ -611,6 +617,9 @@
     position: sticky;
     left: 0;
     z-index: 3;
+    justify-content: center;
+    padding-left: calc(var(--cell-padding) / 1.33);
+    padding-right: calc(var(--cell-padding) / 1.33);
   }
   .spectrum-Table-headCell .title {
     overflow: visible;
@@ -644,6 +653,9 @@
     border-left: var(--table-border);
     padding-left: var(--cell-padding);
   }
+  .spectrum-Table-row > .spectrum-Table-cell--edit:first-child {
+    padding-left: calc(var(--cell-padding) / 1.33);
+  }
   .spectrum-Table-row > :last-child {
     border-right: var(--table-border);
     padding-right: var(--cell-padding);
@@ -673,6 +685,9 @@
     position: sticky;
     left: 0;
     z-index: 2;
+    justify-content: center;
+    padding-left: calc(var(--cell-padding) / 1.33);
+    padding-right: calc(var(--cell-padding) / 1.33);
   }
 
   /* Placeholder  */

packages/builder/src/components/automation/AutomationBuilder/StepPanel.svelte

@@ -283,6 +283,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
+    min-height: 0;
     overflow: auto;
     overflow-x: hidden;
   }

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

@@ -337,8 +337,9 @@
     padding: var(--spacing-l);
   }
   .viewer {
-    overflow-y: scroll;
-    flex: 1;
+    overflow: auto;
+    flex: 1 1 0px;
+    min-height: 0;
     padding-right: 0px;
   }
   .viewer .content {

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

@@ -126,7 +126,7 @@
             color="var(--spectrum-global-color-gray-600)"
             hoverColor="var(--spectrum-global-color-gray-900)"
             on:click={() => (expanded = !expanded)}
-            size="XS"
+            size="XXS"
             weight="fill"
           />
         {/if}
@@ -154,7 +154,7 @@
         <div class="copy-value-icon">
           <Icon
             name="copy"
-            size="S"
+            size="XS"
             hoverable
             color="var(--spectrum-global-color-gray-600)"
             hoverColor="var(--spectrum-global-color-gray-900)"
@@ -189,18 +189,24 @@
     flex-direction: column;
     gap: 8px;
     overflow: hidden;
+    min-height: 0;
   }
 
   /* Expand arrow */
   .binding-arrow {
-    margin: 3px 6px 0 4px;
+    margin: 0 6px 0 4px;
     flex: 0 0 10px;
-    transition: transform 130ms ease-out;
+    display: flex;
+    align-items: center;
+    line-height: 0;
   }
   .binding-arrow :global(i) {
-    width: 10px;
+    display: inline-block;
+    transform-origin: 50% 50%;
+    transition: transform 130ms ease-out;
   }
-  .binding-arrow.expanded {
+
+  .binding-arrow.expanded :global(i) {
     transform: rotate(90deg);
   }
 
@@ -210,7 +216,7 @@
     flex-direction: row;
     font-family: monospace;
     font-size: 12px;
-    align-items: flex-start;
+    align-items: center;
     width: 100%;
   }
 

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

@@ -43,15 +43,17 @@
   let inactive = true
 
   const buildDraggable = items => {
+    const seenIds = new Set()
     return items
       .map(item => {
+        let id = listItemKey ? item[listItemKey] : generate()
         return {
-          id: listItemKey ? item[listItemKey] : generate(),
+          id,
           item,
           type: zoneType,
         }
       })
-      .filter(item => item.id)
+      .filter(({ id }) => id && !seenIds.has(id) && seenIds.add(id))
   }
 
   $: if (items) {