refactor

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

@@ -2,6 +2,7 @@
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { warnings, errors } from "../../fieldValidator";
   import { Column, Support, NotRequired, StringNumber } from "./lines"
+  import subjects from './subjects';
 
   export let support = {}
 
@@ -16,7 +17,7 @@
 
   let root = null;
 
-  let explanationModalSubject = null
+  let explanationModalSubject = subjects.none
 
   const setExplanationSubject = (option) => {
     explanationModalSubject = option;

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte

@@ -1,27 +1,28 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
   import { Column, Support, NotRequired, StringsAsNumbers } from './subjects'
+  import subjects from '../subjects'
 
   export let anchor
   export let schema
-  export let subject = null
+  export let subject = subjects.none
 </script>
 
 
 <ContextTooltip
   noAnimation
-  visible={subject !== null}
+  visible={subject !== subjects.none}
   {anchor}
   offset={20}
 >
   <div class="explanationModalContent">
-    {#if subject === "column"}
+    {#if subject === subjects.column}
       <Column {schema} />
-    {:else if subject === "support"}
+    {:else if subject === subjects.support}
       <Support />
-    {:else if subject === "stringsAndNumbers"}
+    {:else if subject === subjects.stringsAsNumbers}
       <StringsAsNumbers />
-    {:else if subject === "required"}
+    {:else if subject === subjects.notRequired}
       <NotRequired />
     {/if}
   </div>

packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
 
   export let columnName
   export let columnIcon
@@ -36,8 +37,8 @@
 
 <Line>
   <InfoWord
-    on:mouseenter={() => setExplanationSubject("column")}
+    on:mouseenter={() => setExplanationSubject(subjects.column)}
-    on:mouseleave={() => setExplanationSubject(null)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />

packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+  import subjects from '../subjects'
 
   export let setExplanationSubject
 </script>
@@ -9,8 +10,8 @@
   <Text>No</Text>
   <Space />
   <InfoWord
-  on:mouseenter={() => setExplanationSubject("required")}
+  on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
-  on:mouseleave={() => setExplanationSubject(null)}
+  on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="required"
   />
   <Space />

packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte

@@ -1,5 +1,7 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
+
   export let setExplanationSubject
 </script>
 
@@ -7,8 +9,8 @@
   <Text>Any</Text>
   <Space />
 <InfoWord
-    on:mouseenter={() => setExplanationSubject("stringsAndNumbers")}
+    on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
-    on:mouseleave={() => setExplanationSubject(null)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
   text="non-number values"
 />
   <Space />

packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
 
   export let setExplanationSubject
   export let support
@@ -7,8 +8,8 @@
 
 <Line>
   <InfoWord
-    on:mouseenter={() => setExplanationSubject("support")}
+    on:mouseenter={() => setExplanationSubject(subjects.support)}
-    on:mouseleave={() => setExplanationSubject(null)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     icon={support.icon}
     color={support.iconColor}
     text={support.text}

packages/builder/src/components/design/settings/controls/FieldContext/subjects.js

@@ -0,0 +1,9 @@
+const subjects = {
+  column: Symbol("explanation-modal-column"),
+  support: Symbol("explanation-modal-support"),
+  stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
+  notRequired: Symbol("explanation-modal-not-required"),
+  none: Symbol("explanation-modal-none")
+}
+
+export default subjects;