From bb19e48a6d90f7230504ea3609c47d73afe36a1d Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Tue, 31 Oct 2023 14:22:15 +0000
Subject: [PATCH] Added new DataSourceSelect component.

---
 .../settings/controls/DataSourceSelect.svelte | 287 ++++--------------
 .../DataSourceSelectItem/SelectItem.svelte    |  60 ++++
 2 files changed, 123 insertions(+), 224 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 545165a25c..a56614e4e5 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -32,6 +32,7 @@
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import DataSourceSelect from "components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte"
   import { API } from "api"
 
   export let value = {}
@@ -279,243 +280,81 @@
 </div>
 <Popover bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
-    <div class="title">
-      <Heading size="XS">Tables</Heading>
-    </div>
-    <ul class="spectrum-Menu" role="listbox">
-      {#each tables as table}
-        <li
-          class="spectrum-Menu-item"
-          class:is-selected={value?.label === table.label &&
-            value?.type === table.type}
-          role="option"
-          aria-selected="true"
-          tabindex="0"
-          on:click={() => handleSelected(table)}
-        >
-          <span class="spectrum-Menu-itemLabel">
-            {table.label}
-          </span>
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-css-icon-Checkmark100" />
-          </svg>
-        </li>
-      {/each}
-    </ul>
+    <DataSourceSelect
+      heading="Tables"
+      dataSet={tables}
+      {value}
+      onSelect={handleSelected}
+    />
     {#if views?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Views</Heading>
-      </div>
-      <ul class="spectrum-Menu" role="listbox">
-        {#each views as view}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={value?.label === view.label &&
-              value?.type === view.type}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => handleSelected(view)}
-          >
-            <span class="spectrum-Menu-itemLabel">
-              {view.label}
-            </span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
+      <DataSourceSelect
+        dividerState={true}
+        heading="Views"
+        dataSet={views}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
     {#if queries?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Queries</Heading>
-      </div>
-      <ul class="spectrum-Menu" role="listbox">
-        {#each queries as query}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={value?.label === query.label &&
-              value?.type === query.type}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => handleSelected(query)}
-          >
-            <span class="spectrum-Menu-itemLabel">
-              {query.label}
-            </span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
+      <DataSourceSelect
+        dividerState={true}
+        heading="Queries"
+        dataSet={queries}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
     {#if links?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Relationships</Heading>
-      </div>
-      <ul class="spectrum-Menu" role="listbox">
-        {#each links as link}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={value?.label === link.label &&
-              value?.type === link.type}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => handleSelected(link)}
-          >
-            <span class="spectrum-Menu-itemLabel">
-              {link.label}
-            </span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
+      <DataSourceSelect
+        dividerState={true}
+        heading="Links"
+        dataSet={links}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
     {#if fields?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Fields</Heading>
-      </div>
-      <ul class="spectrum-Menu" role="listbox">
-        {#each fields as field}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={value?.label === field.label &&
-              value?.type === field.type}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => handleSelected(field)}
-          >
-            <span class="spectrum-Menu-itemLabel">
-              {field.label}
-            </span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
+      <DataSourceSelect
+        dividerState={true}
+        heading="Fields"
+        dataSet={fields}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
     {#if jsonArrays?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">JSON Arrays</Heading>
-      </div>
-      <ul class="spectrum-Menu" role="listbox">
-        {#each jsonArrays as field}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={value?.label === field.label &&
-              value?.type === field.type}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => handleSelected(field)}
-          >
-            <span class="spectrum-Menu-itemLabel">
-              {field.label}
-            </span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
+      <DataSourceSelect
+        dividerState={true}
+        heading="JSON Arrays"
+        dataSet={jsonArrays}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
     {#if showDataProviders && dataProviders?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Data Providers</Heading>
-      </div>
-      <ul class="spectrum-Menu" role="listbox">
-        {#each dataProviders as provider}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={value?.label === provider.label &&
-              value?.type === provider.type}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => handleSelected(provider)}
-          >
-            <span class="spectrum-Menu-itemLabel">
-              {provider.label}
-            </span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
+      <DataSourceSelect
+        dividerState={true}
+        heading="Data Providers"
+        dataSet={dataProviders}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
-    <Divider />
-    <div class="title">
-      <Heading size="XS">Other</Heading>
-    </div>
-    <ul class="spectrum-Menu" role="listbox">
-      <li
-        class="spectrum-Menu-item"
-        class:is-selected={value?.label === custom.label &&
-          value?.type === custom.type}
-        role="option"
-        aria-selected="true"
-        tabindex="0"
-        on:click={() => handleSelected(custom)}
-      >
-        <span class="spectrum-Menu-itemLabel">
-          {custom.label}
-        </span>
-        <svg
-          class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-          focusable="false"
-          aria-hidden="true"
-        >
-          <use xlink:href="#spectrum-css-icon-Checkmark100" />
-        </svg>
-      </li>
-    </ul>
+    <DataSourceSelect
+      dividerState={true}
+      heading="Other"
+      dataSet={[custom]}
+      {value}
+      onSelect={handleSelected}
+    />
     {#if otherSources?.length}
-      {#each otherSources as source}
-        <li on:click={() => handleSelected(source)}>{source.label}</li>
-      {/each}
+      <DataSourceSelect
+        dividerState={false}
+        heading=""
+        dataSet={otherSources}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
   </div>
 </Popover>
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte
new file mode 100644
index 0000000000..1fda2da634
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte
@@ -0,0 +1,60 @@
+<script>
+  import { Divider, Heading } from "@budibase/bbui"
+
+  export let dividerState
+  export let heading
+  export let dataSet
+  export let value
+  export let onSelect
+</script>
+
+{#if dividerState}
+  <Divider />
+{/if}
+{#if heading.length > 0}
+  <div class="title">
+    <Heading size="XS">{heading}</Heading>
+  </div>
+{/if}
+<ul class="spectrum-Menu" role="listbox">
+  {#each dataSet as data}
+    <li
+      class="spectrum-Menu-item"
+      class:is-selected={value?.label === data.label &&
+        value?.type === data.type}
+      role="option"
+      aria-selected="true"
+      tabindex="0"
+      on:click={() => onSelect(data)}
+      on:keydown={e => {
+        if (e.key === "Enter" || e.key === "Space") {
+          onSelect(data)
+        }
+      }}
+    >
+      <span class="spectrum-Menu-itemLabel">
+        {data.label}
+      </span>
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Checkmark100" />
+      </svg>
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .title {
+    padding: 0 var(--spacing-m) var(--spacing-s) var(--spacing-m);
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+    width: 100%;
+  }
+</style>