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

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: {

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 || {}

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")
     }

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")

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

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}