Refactor subjects

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

@@ -1,10 +1,6 @@
 <script>
-  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
+  import { ContextTooltip } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+  import { Column, Support, NotRequired, StringsAsNumbers } from './subjects'
-  import { selectedScreen } from "stores/builder"
-  import { createEventDispatcher } from "svelte"
-  import Property from './Property.svelte'
-  import { InfoWord } from '../typography'
 
   export let anchor
   export let schema
@@ -20,95 +16,13 @@
 >
   <div class="explanationModalContent">
     {#if subject === "column"}
-    <div class="heading wrapper">
+      <Column {schema} />
-    <span class="heading">Column Overview</span>
-    </div>
-    <div class="divider" />
-    <div class="section">
-      {#if schema.type === "string"}
-        <Property
-          name="Max Length"
-          value={schema?.constraints?.length?.maximum ?? "None"}
-        />
-      {:else if schema.type === "datetime"}
-        <Property
-          name="Earliest"
-          value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
-        />
-        <Property
-          name="Latest"
-          value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
-        />
-        <Property
-          name="Ignore time zones"
-          value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
-        />
-        <Property
-          name="Date only"
-          value={schema?.dateOnly === true ? "Yes" : "No"}
-        />
-      {:else if schema.type === "number"}
-        <Property
-          name="Min Value"
-          value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
-        />
-        <Property
-          name="Max Value"
-          value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
-        />
-      {:else if schema.type === "json"}
-        <Property
-          pre
-          name="Schema"
-          value={JSON.stringify(schema?.schema ?? {}, null, 2)}
-        />
-      {/if}
-      <Property
-        name="Required"
-        value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
-      />
-    </div>
     {:else if subject === "support"}
-      <span class="heading">Data/Component Compatibility</span>
+      <Support />
-      <div class="divider" />
-      <div class="section">
-        <InfoWord
-          icon="CheckmarkCircle"
-          color="var(--green)"
-          text="Compatible"
-        />
-        <span class="body">Fully compatible with the component as long as the data is present.</span>
-      </div>
-      <div class="section">
-        <InfoWord
-          icon="AlertCheck"
-          color="var(--yellow)"
-          text="Possibly compatible"
-        />
-        <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
-      </div>
-      <div class="section">
-        <InfoWord
-          icon="Alert"
-          color="var(--red)"
-          text="Not compatible"
-        />
-        <span class="body">Imcompatible with the component.</span>
-      </div>
-
-
     {:else if subject === "stringsAndNumbers"}
-    <span class="heading">Text as Numbers</span>
+      <StringsAsNumbers />
-    <div class="divider" />
-    <div class="section">
-      Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
-    </div>
     {:else if subject === "required"}
-    <span class="heading">'Required' Constraint</span>
+      <NotRequired />
-    <div class="divider" />
-    <div class="section">
-      <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.</span>
-    </div>
     {/if}
   </div>
 </ContextTooltip>
@@ -116,35 +30,6 @@
 <style>
   .explanationModalContent {
     max-width: 300px;
-    padding: 16px 12px 18px;
+    padding: 16px 12px 6px;
   }
-
-  .heading {
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .divider {
-    border-bottom: 1px solid var(--grey-4);
-    margin: 12px 0 12px;
-  }
-
-
-  .section {
-    margin-bottom: 16px;
-  }
-  .section:last-child {
-    margin-bottom: 16px;
-  }
-
-  .section .body {
-    display: block;
-    margin-top: 5px;
-  }
-
-  /* BETWEEN STUFF */
-  /* BETWEEN STUFF */
-  /* BETWEEN STUFF */
 </style>

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

@@ -0,0 +1,53 @@
+<script>
+  import { Subject, Property, Section }  from './components'
+
+  export let schema
+</script>
+
+
+<Subject heading="Column Overview">
+  <Section>
+  {#if schema.type === "string"}
+    <Property
+      name="Max Length"
+      value={schema?.constraints?.length?.maximum ?? "None"}
+    />
+  {:else if schema.type === "datetime"}
+    <Property
+      name="Earliest"
+      value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
+    />
+    <Property
+      name="Latest"
+      value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
+    />
+    <Property
+      name="Ignore time zones"
+      value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
+    />
+    <Property
+      name="Date only"
+      value={schema?.dateOnly === true ? "Yes" : "No"}
+    />
+  {:else if schema.type === "number"}
+    <Property
+      name="Min Value"
+      value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+    />
+    <Property
+      name="Max Value"
+      value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
+    />
+  {:else if schema.type === "json"}
+    <Property
+      pre
+      name="Schema"
+      value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+    />
+  {/if}
+  <Property
+    name="Required"
+    value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
+   />
+   </Section>
+</Subject>

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

@@ -0,0 +1,9 @@
+<script>
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="'Required' Constraint">
+  <Section>
+      A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
+  </Section>
+</Subject>

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

@@ -0,0 +1,9 @@
+<script>
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="Text as Numbers">
+  <Section>
+    Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
+  </Section>
+</Subject>

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

@@ -0,0 +1,38 @@
+<script>
+  import { InfoWord } from '../../typography'
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="Data/Component Compatibility">
+  <Section>
+    <InfoWord
+      icon="CheckmarkCircle"
+      color="var(--green)"
+      text="Compatible"
+    />
+    <span class="body">Fully compatible with the component as long as the data is present.</span>
+  </Section>
+  <Section>
+    <InfoWord
+      icon="AlertCheck"
+      color="var(--yellow)"
+      text="Possibly compatible"
+    />
+    <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+  </Section>
+  <Section>
+    <InfoWord
+      icon="Alert"
+      color="var(--red)"
+      text="Not compatible"
+    />
+    <span class="body">Imcompatible with the component.</span>
+  </Section>
+</Subject>
+
+<style>
+  .body {
+    display: block;
+    margin-top: 5px;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+<div class="section">
+  <slot />
+</div>
+
+<style>
+  .section {
+    margin-bottom: 16px;
+  }
+</style>

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

@@ -0,0 +1,27 @@
+<script>
+  export let heading = ""
+</script>
+
+<div class="heading">
+  <span class="heading">
+    <slot name="heading">
+      {heading}
+    </slot>
+  </span>
+</div>
+<div class="divider" />
+<slot />
+
+<style>
+  .heading {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .divider {
+    border-bottom: 1px solid var(--grey-4);
+    margin: 12px 0 12px;
+  }
+</style>

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

@@ -0,0 +1,3 @@
+export { default as Subject } from "./Subject.svelte"
+export { default as Property } from "./Property.svelte"
+export { default as Section } from "./Section.svelte"

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

@@ -0,0 +1,4 @@
+export { default as Column } from "./Column.svelte"
+export { default as NotRequired } from "./NotRequired.svelte"
+export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
+export { default as Support } from "./Support.svelte"