From 18581ba982f400609f90807b6d1f0a74e9553254 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 12 Apr 2024 14:18:41 +0100
Subject: [PATCH] wip

---
 .../ExplanationModal/index.svelte             |  5 +-
 .../subjects/DatesAsNumbers.svelte            |  2 +-
 .../subjects/ScalarJsonOnly.svelte            | 64 +++++++++++++++++++
 .../subjects/components/Block.svelte          | 26 ++++++++
 .../subjects/components/Section.svelte        |  2 +
 .../subjects/components/index.js              |  1 +
 .../ExplanationModal/subjects/index.js        |  1 +
 .../controls/FieldContext/FieldContext.svelte |  1 +
 .../lines/JSONPrimitivesOnly.svelte           |  9 +--
 .../FieldContext/lines/StringNumber.svelte    |  4 +-
 .../controls/FieldContext/subjects.js         |  1 +
 .../FieldContext/typography/Comma.svelte      |  3 +-
 .../typography/DocumentationLink.svelte       |  3 +-
 .../FieldContext/typography/InfoWord.svelte   |  7 +-
 .../FieldContext/typography/Line.svelte       |  3 +-
 .../FieldContext/typography/Period.svelte     |  3 +-
 .../FieldContext/typography/Space.svelte      |  1 -
 .../FieldContext/typography/Text.svelte       | 46 +++++--------
 18 files changed, 134 insertions(+), 48 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index 4c9e54ee31..0bb714cab6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -1,10 +1,11 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
-  import { Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
+  import { ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
   import subjects from '../subjects'
 
   export let anchor
   export let schema
+  export let columnName
   export let subject = subjects.none
 </script>
 
@@ -26,6 +27,8 @@
       <NotRequired />
     {:else if subject === subjects.datesAsNumbers}
       <DatesAsNumbers />
+    {:else if subject === subjects.scalarJsonOnly}
+      <ScalarJsonOnly {columnName} {schema} />
     {/if}
   </div>
 </ContextTooltip>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
index 683fa24356..3a51eace80 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
@@ -4,6 +4,6 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A Date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
+    A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
   </Section>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
new file mode 100644
index 0000000000..102c7718d0
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
@@ -0,0 +1,64 @@
+<script>
+  import { Body } from "@budibase/bbui"
+  import { Block, Subject, Section } from './components'
+
+  export let schema
+  export let columnName
+
+  const maxScalarDescendantsToFind = 3;
+
+  const getScalarDescendants = (schema) => {
+    const newScalarDescendants = [];
+
+    const getScalarDescendantFromSchema = (path, schema) => {
+      if (newScalarDescendants.length >= maxScalarDescendantsToFind) {
+        return;
+      }
+
+      if (["string", "number", "boolean"].includes(schema.type)) {
+        newScalarDescendants.push(path.join("."))
+      } else if (schema.type === "json") {
+        Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) => 
+        getScalarDescendantFromSchema([...path, childName], childSchema))
+      }
+    }
+
+    Object.entries(schema?.schema ?? {}).forEach(([childName, childSchema]) => 
+        getScalarDescendantFromSchema([columnName, childName], childSchema))
+
+    return newScalarDescendants;
+  }
+
+  $: scalarDescendants = getScalarDescendants(schema)
+  $: console.log(scalarDescendants);
+  $: console.log(schema);
+</script>
+
+<Subject heading="Using Scalar JSON Values">
+  <Section>
+    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the component. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
+  </Section>
+
+  {#if scalarDescendants.length > 0}
+    <Section>
+      Examples of scalar descendants of this object are:
+      {#if scalarDescendants[0]}
+        <Block>{scalarDescendants[0]}</Block>
+      {/if}
+      {#if scalarDescendants.length === 2}
+        {" and "}
+      {:else if scalarDescendants.length === 3}
+        {", "}
+      {/if}
+      {#if scalarDescendants[1]}
+        <Block>{scalarDescendants[1]}</Block>
+      {/if}
+      {#if scalarDescendants.length === 3}
+        {" and "}
+      {/if}
+      {#if scalarDescendants[2]}
+        <Block>{scalarDescendants[2]}</Block>
+      {/if}
+    </Section>
+  {/if}
+</Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
new file mode 100644
index 0000000000..95fa9309dd
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -0,0 +1,26 @@
+<script>
+  export let truncate = false
+</script>
+
+<span class:truncate class="block">
+  <slot />
+</span>
+
+<style>
+  .block {
+    font-style: italic;
+    padding: 0px 3px;
+    border-radius: 1px;
+    background-color: var(--grey-3);
+    color: var(--ink);
+    word-break: break-all;
+  }
+
+  .truncate {
+    display: inline-block;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
index 41f919fd10..f4b25bc19c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -4,6 +4,8 @@
 
 <style>
   .section {
+    line-height: 22px;
     margin-bottom: 16px;
+    overflow: hidden;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 4ea7a2ca88..57e512f5ce 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -1,3 +1,4 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
 export { default as Section } from "./Section.svelte"
+export { default as Block } from "./Block.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
index 32d04e8b0e..e77d12d2bf 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
@@ -3,3 +3,4 @@ export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"
+export { default as ScalarJsonOnly } from "./ScalarJsonOnly.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index efa8f86bd0..3cc353c3a9 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -78,6 +78,7 @@
 
 {#if explanationModal}
   <ExplanationModal
+    {columnName}
     anchor={root}
     {schema}
     subject={explanationModalSubject}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
index f4726d754b..ee4b258b80 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -7,11 +7,12 @@
 
 
 <Line>
+  <InfoWord
+  on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
+  on:mouseleave={() => setExplanationSubject(subjects.none)}
+>Scalar JSON values</InfoWord>
   <Text
-    value="JSON Objects cannot be used, but scalar"
-  />
-  <Text
-    value=" child values can be if their individual types are supported"
+    value=" can be used with this component if their individual types are supported"
   />
   <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
index da9e2ea28e..9c9f001f48 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -6,11 +6,11 @@
 </script>
 
 <Line>
-  <Text value="Any " />
+  <Text value="The component will ignore any " />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="non-number values"
   />
-  <Text value=" will be ignored." />
+  <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
index bad3c88df2..a58564d2bd 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
@@ -4,6 +4,7 @@ const subjects = {
   stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
   datesAsNumbers: Symbol("explanation-modal-dates-as-numbers"),
   notRequired: Symbol("explanation-modal-not-required"),
+  scalarJsonOnly: Symbol("explanation-scalar-json-only"),
   none: Symbol("explanation-modal-none")
 }
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
index 03a7f0d51e..f16bd16054 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
@@ -5,9 +5,10 @@
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
-    line-height: 26px;
     margin-left: 2px;
     margin-right: 2px;
     flex-shrink: 0;
+    position: relative;
+    bottom: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
index dbff157c50..982745ac07 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
@@ -32,8 +32,7 @@
   .link {
     display: inline-flex;
     box-sizing: border-box;
-    padding: 3px 0 2px;
-    vertical-align: sub;
+    padding: 1px 0;
     filter: brightness(100%);
 
     overflow: hidden;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
index 7ace69daf3..582e07f9fe 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
@@ -51,17 +51,14 @@
 
 <style>
   .infoWord {
-    vertical-align: bottom;
     display: inline-flex;
     box-sizing: border-box;
-    padding: 3px 6px;
-    border-radius: 5px;
+    padding: 1px 0;
     filter: brightness(100%);
-    background-color: var(--grey-3);
-    border: 1px solid var(--grey-3);
     overflow: hidden;
     transition: filter 300ms;
     align-items: center;
+    border-bottom: 1px solid var(--grey-6);
   }
 
   .infoWord:hover {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index 7b0c71a604..50e0c70abb 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -23,14 +23,15 @@
     font-size: 17px;
     display: inline block;
     margin-right: 10px;
-    line-height: 26px;
   }
 
   .content {
+    line-height: 17px;
     min-width: 0;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
+    row-gap: 6px;
   }
 
   .noWrap {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
index 8faf71d3ba..d1bbafe6a6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
@@ -5,8 +5,9 @@
     color: var(--grey-6);
     font-size: 20px;
     display: inline block;
-    line-height: 26px;
     margin-left: 2px;
     flex-shrink: 0;
+    position: relative;
+    bottom: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
index 1003a8c577..30aeefef16 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -3,7 +3,6 @@
 <style>
   .space {
     white-space: pre;
-    line-height: 26px;
     width: 5px;
     flex-shrink: 0;
   }
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index dcb589fad0..42983a1b0c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -40,37 +40,25 @@
   $: words = getWords(value)
 </script>
 
-{#if words.length}
-  {#each words as word}
-    {#if word === " "}
-      <Space />
-    {:else if word === ","}
-      <Comma />
-    {:else if word === "."}
-      <Period />
-    {:else}
-      <span class="text">
-        {word}
-      </span>
-    {/if}
-  {/each}
-{:else}
-  <span class="text"><slot /></span>
-{/if}
+{#each words as word}
+  {#if word === " "}
+    <Space />
+  {:else if word === ","}
+    <Comma />
+  {:else if word === "."}
+    <Period />
+  {:else}
+    <span class="text">
+      {word}
+    </span>
+  {/if}
+{/each}
 
 <style>
   .text {
-    flex-shrink: 0;
-    line-height: 26px;
-    vertical-align: middle;
-  }
-
-  .space {
-    margin-right: 5px;
-  }
-
-  .punctuation {
-    color: red;
-    font-size: 20px;
+    /* invisible properties to match other inline text elements that do have borders. If we don't match here we run into subpixel issues */
+    box-sizing: border-box;
+    border-bottom: 1px solid transparent;
+    padding: 1px 0;
   }
 </style>