From 10f55cf572e27149d739bd7a35013c8063bf80c1 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 19 Jan 2022 18:33:58 +0000
Subject: [PATCH] Adding in static/dynamic select, as well as the ability to
 set a tooltip on a select.

---
 packages/bbui/src/Form/Field.svelte           |  3 +-
 packages/bbui/src/Form/FieldLabel.svelte      | 17 ++++--
 packages/bbui/src/Form/Select.svelte          |  3 +-
 packages/bbui/src/Label/Label.svelte          | 59 +-----------------
 .../bbui/src/Tooltip/TooltipWrapper.svelte    | 60 +++++++++++++++++++
 .../DataTable/modals/CreateEditColumn.svelte  | 20 ++++++-
 6 files changed, 96 insertions(+), 66 deletions(-)
 create mode 100644 packages/bbui/src/Tooltip/TooltipWrapper.svelte

diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte
index a2e41072a5..5033c28f7d 100644
--- a/packages/bbui/src/Form/Field.svelte
+++ b/packages/bbui/src/Form/Field.svelte
@@ -6,11 +6,12 @@
   export let label = null
   export let labelPosition = "above"
   export let error = null
+  export let tooltip = ""
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
   {#if label}
-    <FieldLabel forId={id} {label} position={labelPosition} />
+    <FieldLabel forId={id} {label} position={labelPosition} {tooltip} />
   {/if}
   <div class="spectrum-Form-itemField">
     <slot />
diff --git a/packages/bbui/src/Form/FieldLabel.svelte b/packages/bbui/src/Form/FieldLabel.svelte
index b070df8cae..3606d77c7b 100644
--- a/packages/bbui/src/Form/FieldLabel.svelte
+++ b/packages/bbui/src/Form/FieldLabel.svelte
@@ -1,19 +1,24 @@
 <script>
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
 
   export let forId
   export let label
   export let position = "above"
+  export let tooltip = ""
 
   $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
 </script>
 
-<label
-  for={forId}
-  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
->
-  {label || ""}
-</label>
+<TooltipWrapper {tooltip} size="S">
+  <label
+    for={forId}
+    class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+  >
+    {label || ""}
+  </label>
+</TooltipWrapper>
 
 <style>
   label {
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index b6547c0a98..0df27e2ff0 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -17,6 +17,7 @@
   export let quiet = false
   export let autoWidth = false
   export let sort = false
+  export let tooltip = ""
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -32,7 +33,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {label} {labelPosition} {error} {tooltip}>
   <Select
     {quiet}
     {error}
diff --git a/packages/bbui/src/Label/Label.svelte b/packages/bbui/src/Label/Label.svelte
index 7ec378fc29..3395ab4179 100644
--- a/packages/bbui/src/Label/Label.svelte
+++ b/packages/bbui/src/Label/Label.svelte
@@ -1,73 +1,20 @@
 <script>
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
-  import Icon from "../Icon/Icon.svelte"
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
 
   export let size = "M"
   export let tooltip = ""
-  export let showTooltip = false
 </script>
 
-{#if tooltip}
-  <div class="container">
-    <label
-      for=""
-      class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
-    >
-      <slot />
-    </label>
-    <div class="icon-container">
-      <div
-        class="icon"
-        class:icon-small={size === "M" || size === "S"}
-        on:mouseover={() => (showTooltip = true)}
-        on:mouseleave={() => (showTooltip = false)}
-      >
-        <Icon name="InfoOutline" size="S" disabled={true} />
-      </div>
-      {#if showTooltip}
-        <div class="tooltip">
-          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-        </div>
-      {/if}
-    </div>
-  </div>
-{:else}
+<TooltipWrapper {tooltip} {size}>
   <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
     <slot />
   </label>
-{/if}
+</TooltipWrapper>
 
 <style>
   label {
     padding: 0;
     white-space: nowrap;
   }
-  .container {
-    display: flex;
-    align-items: center;
-  }
-  .icon-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    margin-top: 1px;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    top: 15px;
-    z-index: 1;
-    width: 160px;
-  }
-  .icon {
-    transform: scale(0.75);
-  }
-  .icon-small {
-    margin-top: -2px;
-    margin-bottom: -5px;
-  }
 </style>
diff --git a/packages/bbui/src/Tooltip/TooltipWrapper.svelte b/packages/bbui/src/Tooltip/TooltipWrapper.svelte
new file mode 100644
index 0000000000..c587dec1dc
--- /dev/null
+++ b/packages/bbui/src/Tooltip/TooltipWrapper.svelte
@@ -0,0 +1,60 @@
+<script>
+  import Tooltip from "./Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
+
+  export let tooltip = ""
+  export let size = "M"
+
+  let showTooltip = false
+</script>
+
+<div class:container={!!tooltip}>
+  <slot />
+  {#if tooltip}
+    <div class="icon-container">
+      <div
+        class="icon"
+        class:icon-small={size === "M" || size === "S"}
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+      >
+        <Icon name="InfoOutline" size="S" disabled={true} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 1px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 1;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+  .icon-small {
+    margin-top: -2px;
+    margin-bottom: -5px;
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 1fa5c6e073..370289f11f 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -150,6 +150,7 @@
     delete field.subtype
     delete field.tableId
     delete field.relationshipType
+    delete field.formulaType
 
     // Add in defaults and initial definition
     const definition = fieldDefinitions[event.detail?.toUpperCase()]
@@ -161,6 +162,9 @@
     if (field.type === LINK_TYPE) {
       field.relationshipType = RelationshipTypes.MANY_TO_MANY
     }
+    if (field.type === FORMULA_TYPE) {
+      field.formulaType = "dynamic"
+    }
   }
 
   function onChangeRequired(e) {
@@ -431,8 +435,20 @@
       error={errors.relatedName}
     />
   {:else if field.type === FORMULA_TYPE}
+    <Select
+      label="Formula type"
+      value={field.formulaType}
+      options={[
+        { label: "Dynamic", value: "dynamic" },
+        { label: "Static", value: "static" },
+      ]}
+      getOptionLabel={option => option.label}
+      getOptionValue={option => option.value}
+      tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered,
+       while static formula are calculated when the row is saved."
+    />
     <ModalBindableInput
-      title="Handlebars Formula"
+      title="Formula"
       label="Formula"
       value={field.formula}
       on:change={e => (field.formula = e.detail)}
@@ -441,7 +457,7 @@
     />
   {:else if field.type === AUTO_TYPE}
     <Select
-      label="Auto Column Type"
+      label="Auto column type"
       value={field.subtype}
       on:change={e => (field.subtype = e.detail)}
       options={Object.entries(getAutoColumnInformation())}