From 6e9c3b7b5d9fe6a3a972ea421713c62f0441458d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Apr 2021 11:06:21 +0100
Subject: [PATCH] Fix schema in when creating columns and use new spectrum form
 components in design section

---
 .../DataTable/modals/CreateEditColumn.svelte  |  1 +
 .../design/PropertiesPanel/DesignView.svelte  |  1 +
 .../DataProviderSelect.svelte                 | 16 ++---
 .../PropertyControls/PropertyControl.svelte   |  1 -
 .../PropertiesPanel/SettingsView.svelte       |  7 +-
 .../design/PropertiesPanel/componentStyles.js | 69 +++++++++----------
 .../design/[assetType]/_layout.svelte         |  1 +
 7 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 11335eb4a6..0ecd667d5a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -173,6 +173,7 @@
     disabled={originalName}
     label="Type"
     bind:value={field.type}
+    on:change={handleTypeChange}
     options={[...Object.values(fieldDefinitions), { name: 'Auto Column', type: AUTO_COL }]}
     getOptionLabel={field => field.name}
     getOptionValue={field => field.type} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index cf1816dc62..88c8eb6d8a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -105,6 +105,7 @@
     position: relative;
     display: flex;
     min-height: 0;
+    flex: 1 1 auto;
   }
 
   .property-groups {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
index e773ba5e5d..3581658b0d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@@ -13,13 +13,9 @@
   )
 </script>
 
-<Select thin secondary {value} on:change>
-  <option value="">Choose option</option>
-  {#if providers}
-    {#each providers as component}
-      <option value={`{{ literal ${makePropSafe(component._id)} }}`}>
-        {component._instanceName}
-      </option>
-    {/each}
-  {/if}
-</Select>
+<Select
+  {value}
+  on:change
+  options={providers}
+  getOptionLabel={component => component._instanceName}
+  getOptionValue={component => `{{ literal ${makePropSafe(component._id)} }}`} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 6b56910eed..0f4d729790 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -134,7 +134,6 @@
     flex: 1;
     display: inline-block;
     padding-left: 2px;
-    overflow: hidden;
   }
 
   .icon {
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 9e2eb22b55..62072d17f7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -1,17 +1,14 @@
 <script>
   import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
-  import { Button } from "@budibase/bbui"
+  import { Button, Checkbox, Input, Select } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { currentAsset } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
   import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
-  import Input from "./PropertyControls/Input.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
-  import OptionSelect from "./PropertyControls/OptionSelect.svelte"
-  import Checkbox from "./PropertyControls/Checkbox.svelte"
   import TableSelect from "./PropertyControls/TableSelect.svelte"
   import DataSourceSelect from "./PropertyControls/DataSourceSelect.svelte"
   import DataProviderSelect from "./PropertyControls/DataProviderSelect.svelte"
@@ -61,7 +58,7 @@
 
   const controlMap = {
     text: Input,
-    select: OptionSelect,
+    select: Select,
     dataSource: DataSourceSelect,
     dataProvider: DataProviderSelect,
     detailScreen: DetailScreenSelect,
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 867ff23c3f..ba46738549 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -1,5 +1,4 @@
-import Input from "./PropertyControls/Input.svelte"
-import OptionSelect from "./PropertyControls/OptionSelect.svelte"
+import { Input, Select } from "@budibase/bbui"
 import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
 import Colorpicker from "./PropertyControls/ColorPicker.svelte"
 
@@ -7,7 +6,7 @@ export const layout = [
   {
     label: "Display",
     key: "display",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Block", value: "block" },
       { label: "Inline Block", value: "inline-block" },
@@ -34,7 +33,7 @@ export const layout = [
   {
     label: "Justify",
     key: "justify-content",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
@@ -47,7 +46,7 @@ export const layout = [
   {
     label: "Align",
     key: "align-items",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
@@ -59,7 +58,7 @@ export const layout = [
   {
     label: "Wrap",
     key: "flex-wrap",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Wrap", value: "wrap" },
       { label: "No wrap", value: "nowrap" },
@@ -68,7 +67,7 @@ export const layout = [
   {
     label: "Gap",
     key: "gap",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -86,7 +85,7 @@ export const margin = [
   {
     label: "All sides",
     key: "margin",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -105,7 +104,7 @@ export const margin = [
   {
     label: "Top",
     key: "margin-top",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -124,7 +123,7 @@ export const margin = [
   {
     label: "Right",
     key: "margin-right",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -143,7 +142,7 @@ export const margin = [
   {
     label: "Bottom",
     key: "margin-bottom",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -162,7 +161,7 @@ export const margin = [
   {
     label: "Left",
     key: "margin-left",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -184,7 +183,7 @@ export const padding = [
   {
     label: "All sides",
     key: "padding",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -201,7 +200,7 @@ export const padding = [
   {
     label: "Top",
     key: "padding-top",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -218,7 +217,7 @@ export const padding = [
   {
     label: "Right",
     key: "padding-right",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -235,7 +234,7 @@ export const padding = [
   {
     label: "Bottom",
     key: "padding-bottom",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -252,7 +251,7 @@ export const padding = [
   {
     label: "Left",
     key: "padding-left",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -272,7 +271,7 @@ export const size = [
   {
     label: "Flex",
     key: "flex",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Shrink", value: "0 1 auto" },
       { label: "Grow", value: "1 1 auto" },
@@ -320,7 +319,7 @@ export const position = [
   {
     label: "Position",
     key: "position",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Static", value: "static" },
       { label: "Relative", value: "relative" },
@@ -356,7 +355,7 @@ export const position = [
   {
     label: "Z-index",
     key: "z-index",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "-9999", value: "-9999" },
       { label: "-3", value: "-3" },
@@ -375,7 +374,7 @@ export const typography = [
   {
     label: "Font",
     key: "font-family",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Arial", value: "Arial" },
       { label: "Arial Black", value: "Arial Black" },
@@ -397,7 +396,7 @@ export const typography = [
   {
     label: "Weight",
     key: "font-weight",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "200", value: "200" },
       { label: "300", value: "300" },
@@ -412,7 +411,7 @@ export const typography = [
   {
     label: "size",
     key: "font-size",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "8px", value: "8px" },
       { label: "10px", value: "10px" },
@@ -431,7 +430,7 @@ export const typography = [
   {
     label: "Line H",
     key: "line-height",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "1", value: "1" },
       { label: "1.25", value: "1.25" },
@@ -472,7 +471,7 @@ export const typography = [
   {
     label: "Decoration",
     key: "text-decoration-line",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
@@ -491,7 +490,7 @@ export const background = [
   {
     label: "Gradient",
     key: "background-image",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       {
@@ -577,7 +576,7 @@ export const border = [
   {
     label: "Radius",
     key: "border-radius",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0" },
       { label: "X Small", value: "0.125rem" },
@@ -592,7 +591,7 @@ export const border = [
   {
     label: "Width",
     key: "border-width",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0" },
       { label: "X Small", value: "0.5px" },
@@ -610,7 +609,7 @@ export const border = [
   {
     label: "Style",
     key: "border-style",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       { label: "Hidden", value: "hidden" },
@@ -630,7 +629,7 @@ export const effects = [
   {
     label: "Opacity",
     key: "opacity",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "0", value: "0" },
       { label: "0.2", value: "0.2" },
@@ -643,7 +642,7 @@ export const effects = [
   {
     label: "Rotate",
     key: "transform",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0" },
       { label: "45 deg", value: "rotate(45deg)" },
@@ -659,7 +658,7 @@ export const effects = [
   {
     label: "Shadow",
     key: "box-shadow",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
@@ -691,7 +690,7 @@ export const transitions = [
   {
     label: "Property",
     key: "transition-property",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       { label: "All", value: "all" },
@@ -711,7 +710,7 @@ export const transitions = [
   {
     label: "Duration",
     key: "transition-duration",
-    control: OptionSelect,
+    control: Select,
     placeholder: "sec",
     options: [
       { label: "0.4s", value: "0.4s" },
@@ -725,7 +724,7 @@ export const transitions = [
   {
     label: "Ease",
     key: "transition-timing-function",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Linear", value: "linear" },
       { label: "Ease", value: "ease" },
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index b58c694e25..75163f8628 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -209,5 +209,6 @@
     gap: var(--spacing-l);
     padding: var(--spacing-l) var(--spacing-xl);
     border-left: var(--border-light);
+    overflow-x: hidden;
   }
 </style>