From a3e555c85e991860502ddb9e8957e0e6ffb58feb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 19 Jan 2023 09:47:10 +0000
Subject: [PATCH] Misc fixes (#9383)

* Shrink cloud upgrade button to proper size

* Add brackets to fix operator precedence when ejecting blocks to prevent undefined custom CSS

* Prevent relationship fields in forms from being used as datasources

* Remove extraneous navigation when adding a component which caused next navigation to fail

* Improve form logic concerning when to fully remount itself to fix issues with stale schema being passed in
---
 .../builder/src/builderStore/dataBinding.js   |  1 +
 .../settings/controls/DataSourceSelect.svelte |  3 +++
 .../new/_components/NewComponentPanel.svelte  |  1 -
 .../portal/_components/UpgradeButton.svelte   |  1 +
 packages/client/src/components/Block.svelte   |  2 +-
 .../src/components/app/forms/Form.svelte      | 23 +++++++++++++------
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index d188073b95..6de73d487c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -378,6 +378,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
           providerId,
           // Table ID is used by JSON fields to know what table the field is in
           tableId: table?._id,
+          component: component._component,
           category: component._instanceName,
           icon: def.icon,
           display: {
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 6269599f40..49151a09b0 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -70,7 +70,10 @@
       type: "provider",
     }))
   $: links = bindings
+    // Get only link bindings
     .filter(x => x.fieldSchema?.type === "link")
+    // Filter out bindings provided by forms
+    .filter(x => !x.component?.endsWith("/form"))
     .map(binding => {
       const { providerId, readableBinding, fieldSchema } = binding || {}
       const { name, tableId } = fieldSchema || {}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 98e04a262a..6b3f302264 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -176,7 +176,6 @@
   const addComponent = async component => {
     try {
       await store.actions.components.create(component)
-      $goto("../")
     } catch (error) {
       notifications.error(error || "Error creating component")
     }
diff --git a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
index 3e095dce21..7de6205a31 100644
--- a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
@@ -7,6 +7,7 @@
 {#if $admin.cloud && $auth?.user?.accountPortalAccess}
   <Button
     cta
+    size="S"
     on:click
     on:click={() => {
       $goto($admin.accountPortalUrl + "/portal/upgrade")
diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 8258912e52..b72ff81b49 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -38,7 +38,7 @@
         ...$component.styles?.normal,
       },
       custom:
-        definition._styles?.custom || "" + $component.styles?.custom || "",
+        (definition._styles?.custom || "") + ($component.styles?.custom || ""),
     }
 
     // Create component tree
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index 977b940d1f..0b4502b962 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -24,6 +24,11 @@
   let table
 
   $: fetchSchema(dataSource)
+  $: schemaKey = generateSchemaKey(schema)
+  $: initialValues = getInitialValues(actionType, dataSource, $context)
+  $: resetKey = Helpers.hashString(
+    schemaKey + JSON.stringify(initialValues) + disabled
+  )
 
   // Returns the closes data context which isn't a built in context
   const getInitialValues = (type, dataSource, context) => {
@@ -57,13 +62,17 @@
     schema = res || {}
   }
 
-  $: initialValues = getInitialValues(actionType, dataSource, $context)
-  $: resetKey = Helpers.hashString(
-    !!schema +
-      JSON.stringify(initialValues) +
-      JSON.stringify(dataSource) +
-      disabled
-  )
+  // Generates a predictable string that uniquely identifies a schema. We can't
+  // simply stringify the whole schema as there are array fields which have
+  // random order.
+  const generateSchemaKey = schema => {
+    if (!schema) {
+      return null
+    }
+    const fields = Object.keys(schema)
+    fields.sort()
+    return fields.map(field => `${field}:${schema[field].type}`).join("-")
+  }
 </script>
 
 {#key resetKey}