From 4690f787750a88d8421108bab49c527c6e3f5334 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 13:45:01 +0100
Subject: [PATCH] add explanation modal type presets

---
 .../controls/FieldContext/FieldContext.svelte | 10 ++-
 .../controls/FieldContext/columnInfo.js       | 13 +++-
 .../settings/controls/FieldSelect.svelte      |  8 +--
 .../settings/controls/MultiFieldSelect.svelte | 12 ++--
 .../Component/ComponentSettingsSection.svelte |  3 +-
 .../builder/src/stores/builder/components.js  |  2 +
 packages/client/manifest.json                 | 61 +++++++------------
 .../server/src/api/controllers/component.ts   |  2 +-
 8 files changed, 57 insertions(+), 54 deletions(-)

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 ee558cbf95..0587ba73c6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,10 +1,13 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
+  import { messages as messageConstants, getColumnInfoMessagesAndSupport, getExplanationWithPresets } from "./columnInfo";
   import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
+  import {
+    componentStore,
+  } from "stores/builder"
 
-  export let columnInfo
+  export let explanation
   export let columnIcon
   export let columnType
   export let columnName
@@ -14,11 +17,12 @@
 
   export let schema
 
+  $: explanationWithPresets = getExplanationWithPresets(explanation, $componentStore.typeSupportPresets)
   let support
   let messages = []
 
   $: {
-    const columnInfoMessagesAndSupport = getColumnInfoMessagesAndSupport(schema, columnInfo)
+    const columnInfoMessagesAndSupport = getColumnInfoMessagesAndSupport(schema, explanationWithPresets)
     support = columnInfoMessagesAndSupport.support
     messages = columnInfoMessagesAndSupport.messages
   }
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
index 5588e44bbc..efc5b0421d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
@@ -54,7 +54,7 @@ const getSupportMessage = (type, columnInfo) => {
   return null
 }
 
-export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo) => {
+export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo, typeSupportPresets) => {
   try {
     const columnInfoMessagesAndSupport = {
       support: getSupport(fieldSchema.type, columnInfo),
@@ -74,3 +74,14 @@ export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo) => {
     }
   }
 }
+
+export const getExplanationWithPresets = (explanation, presets) => {
+  if (explanation?.typeSupport?.preset) {
+    return {
+      ...explanation,
+      typeSupport: presets[explanation?.typeSupport?.preset]
+    }
+  }
+
+  return explanation
+}
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 7dd346d701..78bbf2cb24 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -12,7 +12,7 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let columnInfo
+  export let explanation
 
   let contextTooltipAnchor = null
   let currentOption = null
@@ -103,7 +103,7 @@
   {onOptionMouseleave}
 />
 
-{#if columnInfo}
+{#if explanation}
   <ContextTooltip
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
@@ -116,7 +116,7 @@
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
-      {columnInfo}
+      {explanation}
     />
     <FieldContext
       slot="previous"
@@ -124,7 +124,7 @@
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
-      {columnInfo}
+      {explanation}
     />
   </ContextTooltip>
 {/if}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 2c043c1da2..1e8431db45 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -14,7 +14,11 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let columnInfo
+  export let explanation
+
+  $: {
+    console.log($componentStore);
+  }
 
   let contextTooltipAnchor = null
   let currentOption = null
@@ -109,7 +113,7 @@
   {onOptionMouseleave}
 />
 
-{#if columnInfo}
+{#if explanation}
   <ContextTooltip
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
@@ -122,7 +126,7 @@
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
-      {columnInfo}
+      {explanation}
     />
     <FieldContext
       slot="previous"
@@ -130,7 +134,7 @@
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
-      {columnInfo}
+      {explanation}
     />
   </ContextTooltip>
 {/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index c861249e17..54241ea1cc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -193,8 +193,7 @@
                 max: setting.max ?? null,
 
                 // Field select settings
-                columnInfo: setting.columnInfo,
-                valueTypes: setting.valueTypes
+                explanation: setting.explanation,
               }}
               {bindings}
               {componentBindings}
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index fe5f4e8a05..c88864de89 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -95,6 +95,7 @@ export class ComponentStore extends BudiStore {
     // Fetch definitions and filter out custom component definitions so we
     // can flag them
     const components = await API.fetchComponentLibDefinitions(appId)
+    console.log(components);
     const customComponents = Object.keys(components).filter(key =>
       key.startsWith("plugin/")
     )
@@ -104,6 +105,7 @@ export class ComponentStore extends BudiStore {
       ...state,
       components,
       customComponents,
+      typeSupportPresets: components?.typeSupportPresets ?? {}
     }))
 
     // Sync client features to app store
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 96cdcf4927..3253cbcc98 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -13,6 +13,22 @@
     "sidePanel": true,
     "skeletonLoader": true
   },
+  "typeSupportPresets": {
+    "chartValue": {
+      "supported": ["number", "boolean"],
+      "partialSupport": [
+        { "type": "longform", "message": "stringAsNumber" },
+        { "type": "string", "message": "stringAsNumber" },
+        { "type": "bigint", "message": "stringAsNumber" },
+        { "type": "options", "message": "stringAsNumber" },
+        { "type": "formula", "message": "stringAsNumber" },
+        { "type": "datetime", "message": "dateAsNumber"}
+      ],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
+    }
+  },
   "layout": {
     "name": "Layout",
     "description": "This component is specific only to layouts",
@@ -1634,20 +1650,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
-            "partialSupport": [
-              { "type": "longform", "message": "stringAsNumber" },
-              { "type": "string", "message": "stringAsNumber" },
-              { "type": "bigint", "message": "stringAsNumber" },
-              { "type": "options", "message": "stringAsNumber" },
-              { "type": "formula", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "dateAsNumber"}
-            ],
-            "unsupported": [
-              { "type": "json", "message": "jsonPrimitivesOnly" }
-            ]
+            "preset": "chartValue"
           }
         },
         "required": true
@@ -1809,20 +1814,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
-            "partialSupport": [
-              { "type": "longform", "message": "stringAsNumber" },
-              { "type": "string", "message": "stringAsNumber" },
-              { "type": "bigint", "message": "stringAsNumber" },
-              { "type": "options", "message": "stringAsNumber" },
-              { "type": "formula", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "dateAsNumber"}
-            ],
-            "unsupported": [
-              { "type": "json", "message": "jsonPrimitivesOnly" }
-            ]
+            "preset": "chartValue"
           }
         },
         "required": true
@@ -1979,20 +1973,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
-            "partialSupport": [
-              { "type": "longform", "message": "stringAsNumber" },
-              { "type": "string", "message": "stringAsNumber" },
-              { "type": "bigint", "message": "stringAsNumber" },
-              { "type": "options", "message": "stringAsNumber" },
-              { "type": "formula", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "dateAsNumber"}
-            ],
-            "unsupported": [
-              { "type": "json", "message": "jsonPrimitivesOnly" }
-            ]
+            "preset": "chartValue"
           }
         },
         "required": true
diff --git a/packages/server/src/api/controllers/component.ts b/packages/server/src/api/controllers/component.ts
index 12051be770..44d7255ecb 100644
--- a/packages/server/src/api/controllers/component.ts
+++ b/packages/server/src/api/controllers/component.ts
@@ -20,7 +20,7 @@ export async function fetchAppComponentDefinitions(ctx: UserCtx) {
     const definitions: { [key: string]: any } = {}
     for (let { manifest, library } of componentManifests) {
       for (let key of Object.keys(manifest)) {
-        if (key === "features") {
+        if (key === "features" || key === "typeSupportPresets") {
           definitions[key] = manifest[key]
         } else {
           const fullComponentName = `${library}/${key}`.toLowerCase()