Working after breakout

packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte

@@ -0,0 +1,124 @@
+<script>
+  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+  import { selectedScreen } from "stores/builder"
+  import { createEventDispatcher } from "svelte"
+
+  export let supportLevelClass = ''
+  export let supportLevelIcon = ""
+  export let supportLevelIconTooltip = ""
+  export let supportLevelText = ""
+
+  export let columnIcon
+  export let columnName
+
+  export let errors = []
+  export let warnings = []
+
+</script>
+
+<div
+  class={`tooltipContents ${supportLevelClass}`}
+>
+  <div class={`supportLevel ${supportLevelClass}`}>
+    <Icon tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
+    <p>{supportLevelText}</p>
+  </div>
+  <div class="contextTooltipContent">
+    <div class="contextTooltipHeader">
+      <Icon name={columnIcon} />
+      <span>{columnName}</span>
+    </div>
+
+    {#if errors.length > 0}
+      {#each errors as datum}
+        <p>{datum}</p>
+      {/each}
+    {:else if warnings.length > 0}
+      {#each warnings as datum}
+        <p>{datum}</p>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .tooltipContents {
+    max-width: 400px;
+    background-color: var(--spectrum-global-color-gray-200);
+    display: block;
+    padding: 0 0 12px 0 ;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+
+  .tooltipContents.supportLevelUnsupported {
+    background-color: var(--red);
+    color: var(--ink)
+  }
+
+  .tooltipContents.supportLevelPartialSupport {
+    background-color: var(--yellow);
+    color: var(--ink)
+  }
+
+  .tooltipContents.supportLevelSupported {
+    background-color: var(--green);
+    color: var(--ink)
+  }
+
+  .contextTooltipHeader {
+    background-color: var(--background-alt);
+    color: var(--ink);
+    display: flex;
+    align-items: center;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+  }
+
+  .contextTooltipContent {
+    padding: 0px 12px;
+    color: black;
+  }
+
+  .contextTooltipHeader :global(svg) {
+    margin-right: 5px;
+  }
+
+  .contextTooltipHeader :global(span) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .supportLevel {
+    display: flex;
+    align-items: center;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    margin-bottom: 12px;
+    color: black;
+  }
+  .supportLevel :global(svg) {
+    margin-right: 5px;
+  }
+
+  .supportLevel.supportLevelUnsupported {
+    background-color: var(--red-light)
+  }
+
+  .supportLevel.supportLevelPartialSupport {
+    background-color: var(--yellow-light)
+  }
+
+  .supportLevel.supportLevelSupported {
+    background-color: var(--green-light)
+  }
+</style>

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -4,6 +4,7 @@
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import { validators, constants as validatorConstants } from "../fieldValidator";
+  import ChartFieldContext from './FieldContext/Chart.svelte'
 
   export let componentInstance = {}
   export let value = ""
@@ -197,54 +198,27 @@
   anchor={contextTooltipAnchor}
   offset={20}
 >
-  <div
+  <ChartFieldContext
-    class={`tooltipContents ${currentOptionSupport.class}`}
+    supportLevelClass={currentOptionSupport.class}
-  >
+    supportLevelIcon={currentOptionSupport.icon}
-    <div class={`supportLevel ${currentOptionSupport.class}`}>
+    supportLevelIconTooltip={currentOptionSupport.iconTooltip}
-      <Icon tooltip={currentOptionSupport.iconTooltip} name={currentOptionSupport.icon} />
+    supportLevelText={currentOptionSupport.text}
-      <p>{currentOptionSupport.text}</p>
+    columnIcon={getOptionIcon(currentOption)}
-    </div>
+    columnName={getOptionIconTooltip(currentOption)}
-    <div class="contextTooltipContent">
+    errors={fieldSupport[currentOption]?.errors}
-      <div class="contextTooltipHeader">
+    warnings={fieldSupport[currentOption]?.warnings}
-        <Icon name={getOptionIcon(currentOption)} />
+  />
-        <span>{getOptionIconTooltip(currentOption)}</span>
+  <ChartFieldContext
-      </div>
+    slot="previous"
-
+    supportLevelClass={previousOptionSupport.class}
-      {#if fieldSupport[currentOption]?.errors?.length > 0}
+    supportLevelIcon={previousOptionSupport.icon}
-        {#each (fieldSupport[currentOption].errors) as datum}
+    supportLevelIconTooltip={previousOptionSupport.iconTooltip}
-          <p>{datum}</p>
+    supportLevelText={previousOptionSupport.text}
-        {/each}
+    columnIcon={getOptionIcon(previousOption)}
-      {:else if fieldSupport[currentOption]?.warnings?.length > 0}
+    columnName={getOptionIconTooltip(previousOption)}
-        {#each (fieldSupport[currentOption].warnings) as datum}
+    errors={fieldSupport[previousOption]?.errors}
-          <p>{datum}</p>
+    warnings={fieldSupport[previousOption]?.warnings}
-        {/each}
+  />
-      {/if}
-    </div>
-  </div>
-  <div slot="previous"
-    class={`tooltipContents ${previousOptionSupport.class}`}
-  >
-    <div class={`supportLevel ${previousOptionSupport.class}`}>
-      <Icon tooltip={previousOptionSupport.iconTooltip} name={previousOptionSupport.icon} />
-      <p>{previousOptionSupport.text}</p>
-    </div>
-    <div class="contextTooltipContent">
-      <div class="contextTooltipHeader">
-        <Icon name={getOptionIcon(previousOption)} />
-        <span>{getOptionIconTooltip(previousOption)}</span>
-      </div>
-
-      {#if fieldSupport[previousOption]?.errors?.length > 0}
-        {#each (fieldSupport[previousOption].errors) as datum}
-          <p>{datum}</p>
-        {/each}
-      {:else if fieldSupport[previousOption]?.warnings?.length > 0}
-        {#each (fieldSupport[previousOption].warnings) as datum}
-          <p>{datum}</p>
-        {/each}
-      {/if}
-    </div>
-  </div>
 </ContextTooltip>
 
 <style>