From d0ea6edad39e1d608e0c84efc5d3c4fc7658c7a5 Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Fri, 27 Oct 2023 10:55:19 +0100
Subject: [PATCH 01/10] Added selected class to data provider options.

---
 .../settings/controls/DataSourceSelect.svelte    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 29f32aa345..15ed945576 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -284,7 +284,7 @@
     </div>
     <ul>
       {#each tables as table}
-        <li on:click={() => handleSelected(table)}>{table.label}</li>
+        <li class:selected={value.label === table.label} on:click={() => handleSelected(table)}>{table.label}</li>
       {/each}
     </ul>
     {#if views?.length}
@@ -294,7 +294,7 @@
       </div>
       <ul>
         {#each views as view}
-          <li on:click={() => handleSelected(view)}>{view.label}</li>
+          <li class:selected={value.label === view.label} on:click={() => handleSelected(view)}>{view.label}</li>
         {/each}
       </ul>
     {/if}
@@ -306,7 +306,7 @@
       <ul>
         {#each queries as query}
           <li
-            class:selected={value === query}
+            class:selected={value.label === query.label}
             on:click={() => handleSelected(query)}
           >
             {query.label}
@@ -321,7 +321,7 @@
       </div>
       <ul>
         {#each links as link}
-          <li on:click={() => handleSelected(link)}>{link.label}</li>
+          <li class:selected={value.label === link.label} on:click={() => handleSelected(link)}>{link.label}</li>
         {/each}
       </ul>
     {/if}
@@ -332,7 +332,7 @@
       </div>
       <ul>
         {#each fields as field}
-          <li on:click={() => handleSelected(field)}>{field.label}</li>
+          <li class:selected={value.label === field.label} on:click={() => handleSelected(field)}>{field.label}</li>
         {/each}
       </ul>
     {/if}
@@ -343,7 +343,7 @@
       </div>
       <ul>
         {#each jsonArrays as field}
-          <li on:click={() => handleSelected(field)}>{field.label}</li>
+          <li class:selected={value.label === field.label} on:click={() => handleSelected(field)}>{field.label}</li>
         {/each}
       </ul>
     {/if}
@@ -355,7 +355,7 @@
       <ul>
         {#each dataProviders as provider}
           <li
-            class:selected={value === provider}
+            class:selected={value.label === provider.label}
             on:click={() => handleSelected(provider)}
           >
             {provider.label}
@@ -368,7 +368,7 @@
       <Heading size="XS">Other</Heading>
     </div>
     <ul>
-      <li on:click={() => handleSelected(custom)}>{custom.label}</li>
+      <li class:selected={value.label === custom.label} on:click={() => handleSelected(custom)}>{custom.label}</li>
       {#if otherSources?.length}
         {#each otherSources as source}
           <li on:click={() => handleSelected(source)}>{source.label}</li>

From 2b691c169f2c7653a4a14752a1fbff6c36c0c2e8 Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Fri, 27 Oct 2023 11:13:24 +0100
Subject: [PATCH 02/10] Ran Prettier to fix linting issue.

---
 .../settings/controls/DataSourceSelect.svelte | 42 ++++++++++++++++---
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 15ed945576..414d7b75d0 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -284,7 +284,12 @@
     </div>
     <ul>
       {#each tables as table}
-        <li class:selected={value.label === table.label} on:click={() => handleSelected(table)}>{table.label}</li>
+        <li
+          class:selected={value.label === table.label}
+          on:click={() => handleSelected(table)}
+        >
+          {table.label}
+        </li>
       {/each}
     </ul>
     {#if views?.length}
@@ -294,7 +299,12 @@
       </div>
       <ul>
         {#each views as view}
-          <li class:selected={value.label === view.label} on:click={() => handleSelected(view)}>{view.label}</li>
+          <li
+            class:selected={value.label === view.label}
+            on:click={() => handleSelected(view)}
+          >
+            {view.label}
+          </li>
         {/each}
       </ul>
     {/if}
@@ -321,7 +331,12 @@
       </div>
       <ul>
         {#each links as link}
-          <li class:selected={value.label === link.label} on:click={() => handleSelected(link)}>{link.label}</li>
+          <li
+            class:selected={value.label === link.label}
+            on:click={() => handleSelected(link)}
+          >
+            {link.label}
+          </li>
         {/each}
       </ul>
     {/if}
@@ -332,7 +347,12 @@
       </div>
       <ul>
         {#each fields as field}
-          <li class:selected={value.label === field.label} on:click={() => handleSelected(field)}>{field.label}</li>
+          <li
+            class:selected={value.label === field.label}
+            on:click={() => handleSelected(field)}
+          >
+            {field.label}
+          </li>
         {/each}
       </ul>
     {/if}
@@ -343,7 +363,12 @@
       </div>
       <ul>
         {#each jsonArrays as field}
-          <li class:selected={value.label === field.label} on:click={() => handleSelected(field)}>{field.label}</li>
+          <li
+            class:selected={value.label === field.label}
+            on:click={() => handleSelected(field)}
+          >
+            {field.label}
+          </li>
         {/each}
       </ul>
     {/if}
@@ -368,7 +393,12 @@
       <Heading size="XS">Other</Heading>
     </div>
     <ul>
-      <li class:selected={value.label === custom.label} on:click={() => handleSelected(custom)}>{custom.label}</li>
+      <li
+        class:selected={value.label === custom.label}
+        on:click={() => handleSelected(custom)}
+      >
+        {custom.label}
+      </li>
       {#if otherSources?.length}
         {#each otherSources as source}
           <li on:click={() => handleSelected(source)}>{source.label}</li>

From 0461d8654564060b868c23eb412937fa58ed3478 Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Mon, 30 Oct 2023 09:57:08 +0000
Subject: [PATCH 03/10] Refactored select to match designs used elsewhere.

---
 .../settings/controls/DataSourceSelect.svelte | 163 ++++++++++++++----
 1 file changed, 134 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 414d7b75d0..10b79b986e 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -282,13 +282,26 @@
     <div class="title">
       <Heading size="XS">Tables</Heading>
     </div>
-    <ul>
+    <ul class="spectrum-Menu" role="listbox">
       {#each tables as table}
         <li
-          class:selected={value.label === table.label}
+          class="spectrum-Menu-item"
+          class:is-selected={value.label === table.label}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
           on:click={() => handleSelected(table)}
         >
-          {table.label}
+          <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>
@@ -297,13 +310,26 @@
       <div class="title">
         <Heading size="XS">Views</Heading>
       </div>
-      <ul>
+      <ul class="spectrum-Menu" role="listbox">
         {#each views as view}
           <li
-            class:selected={value.label === view.label}
+            class="spectrum-Menu-item"
+            class:is-selected={value.label === view.label}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
             on:click={() => handleSelected(view)}
           >
-            {view.label}
+            <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>
@@ -313,13 +339,26 @@
       <div class="title">
         <Heading size="XS">Queries</Heading>
       </div>
-      <ul>
+      <ul class="spectrum-Menu" role="listbox">
         {#each queries as query}
           <li
-            class:selected={value.label === query.label}
+            class="spectrum-Menu-item"
+            class:is-selected={value.label === query.label}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
             on:click={() => handleSelected(query)}
           >
-            {query.label}
+            <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>
@@ -329,13 +368,26 @@
       <div class="title">
         <Heading size="XS">Relationships</Heading>
       </div>
-      <ul>
+      <ul class="spectrum-Menu" role="listbox">
         {#each links as link}
           <li
-            class:selected={value.label === link.label}
+            class="spectrum-Menu-item"
+            class:is-selected={value.label === link.label}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
             on:click={() => handleSelected(link)}
           >
-            {link.label}
+            <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>
@@ -345,13 +397,26 @@
       <div class="title">
         <Heading size="XS">Fields</Heading>
       </div>
-      <ul>
+      <ul class="spectrum-Menu" role="listbox">
         {#each fields as field}
           <li
-            class:selected={value.label === field.label}
+            class="spectrum-Menu-item"
+            class:is-selected={value.label === field.label}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
             on:click={() => handleSelected(field)}
           >
-            {field.label}
+            <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>
@@ -361,13 +426,26 @@
       <div class="title">
         <Heading size="XS">JSON Arrays</Heading>
       </div>
-      <ul>
+      <ul class="spectrum-Menu" role="listbox">
         {#each jsonArrays as field}
           <li
-            class:selected={value.label === field.label}
+            class="spectrum-Menu-item"
+            class:is-selected={value.label === field.label}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
             on:click={() => handleSelected(field)}
           >
-            {field.label}
+            <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>
@@ -377,13 +455,26 @@
       <div class="title">
         <Heading size="XS">Data Providers</Heading>
       </div>
-      <ul>
+      <ul class="spectrum-Menu" role="listbox">
         {#each dataProviders as provider}
           <li
-            class:selected={value.label === provider.label}
+            class="spectrum-Menu-item"
+            class:is-selected={value.label === provider.label}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
             on:click={() => handleSelected(provider)}
           >
-            {provider.label}
+            <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>
@@ -392,19 +483,32 @@
     <div class="title">
       <Heading size="XS">Other</Heading>
     </div>
-    <ul>
+    <ul class="spectrum-Menu" role="listbox">
       <li
-        class:selected={value.label === custom.label}
+        class="spectrum-Menu-item"
+        class:is-selected={value.label === custom.label}
+        role="option"
+        aria-selected="true"
+        tabindex="0"
         on:click={() => handleSelected(custom)}
       >
-        {custom.label}
+        <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>
-      {#if otherSources?.length}
-        {#each otherSources as source}
-          <li on:click={() => handleSelected(source)}>{source.label}</li>
-        {/each}
-      {/if}
     </ul>
+    {#if otherSources?.length}
+      {#each otherSources as source}
+        <li on:click={() => handleSelected(source)}>{source.label}</li>
+      {/each}
+    {/if}
   </div>
 </Popover>
 
@@ -438,6 +542,7 @@
     list-style: none;
     padding-left: 0px;
     margin: 0px;
+    width: 100%;
   }
 
   li {

From 8f5646a1ed4cfabff4253a6524057131bec021bc Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Mon, 30 Oct 2023 10:15:53 +0000
Subject: [PATCH 04/10] Fixed linting issue.

---
 .../design/settings/controls/DataSourceSelect.svelte          | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 10b79b986e..e7f12fd042 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -552,10 +552,6 @@
     font-size: var(--font-size-m);
   }
 
-  .selected {
-    color: var(--spectrum-global-color-blue-600);
-  }
-
   li:hover {
     background-color: var(--spectrum-global-color-gray-200);
   }

From e9f0baa12f61c6d934acd54cadad1833f8f79400 Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Mon, 30 Oct 2023 12:17:36 +0000
Subject: [PATCH 05/10] Added conditional logic to prevent checkmark from
 appearing on other selects outside of types.

---
 .../settings/controls/DataSourceSelect.svelte | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index e7f12fd042..545165a25c 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -286,7 +286,8 @@
       {#each tables as table}
         <li
           class="spectrum-Menu-item"
-          class:is-selected={value.label === table.label}
+          class:is-selected={value?.label === table.label &&
+            value?.type === table.type}
           role="option"
           aria-selected="true"
           tabindex="0"
@@ -314,7 +315,8 @@
         {#each views as view}
           <li
             class="spectrum-Menu-item"
-            class:is-selected={value.label === view.label}
+            class:is-selected={value?.label === view.label &&
+              value?.type === view.type}
             role="option"
             aria-selected="true"
             tabindex="0"
@@ -343,7 +345,8 @@
         {#each queries as query}
           <li
             class="spectrum-Menu-item"
-            class:is-selected={value.label === query.label}
+            class:is-selected={value?.label === query.label &&
+              value?.type === query.type}
             role="option"
             aria-selected="true"
             tabindex="0"
@@ -372,7 +375,8 @@
         {#each links as link}
           <li
             class="spectrum-Menu-item"
-            class:is-selected={value.label === link.label}
+            class:is-selected={value?.label === link.label &&
+              value?.type === link.type}
             role="option"
             aria-selected="true"
             tabindex="0"
@@ -401,7 +405,8 @@
         {#each fields as field}
           <li
             class="spectrum-Menu-item"
-            class:is-selected={value.label === field.label}
+            class:is-selected={value?.label === field.label &&
+              value?.type === field.type}
             role="option"
             aria-selected="true"
             tabindex="0"
@@ -430,7 +435,8 @@
         {#each jsonArrays as field}
           <li
             class="spectrum-Menu-item"
-            class:is-selected={value.label === field.label}
+            class:is-selected={value?.label === field.label &&
+              value?.type === field.type}
             role="option"
             aria-selected="true"
             tabindex="0"
@@ -459,7 +465,8 @@
         {#each dataProviders as provider}
           <li
             class="spectrum-Menu-item"
-            class:is-selected={value.label === provider.label}
+            class:is-selected={value?.label === provider.label &&
+              value?.type === provider.type}
             role="option"
             aria-selected="true"
             tabindex="0"
@@ -486,7 +493,8 @@
     <ul class="spectrum-Menu" role="listbox">
       <li
         class="spectrum-Menu-item"
-        class:is-selected={value.label === custom.label}
+        class:is-selected={value?.label === custom.label &&
+          value?.type === custom.type}
         role="option"
         aria-selected="true"
         tabindex="0"

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 06/10] 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>

From df688b059669dc29d5cc5e374077e033012c084f Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Tue, 31 Oct 2023 14:36:50 +0000
Subject: [PATCH 07/10] Fixed linting issues.

---
 .../settings/controls/DataSourceSelect.svelte | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index a56614e4e5..0d8e728403 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -7,10 +7,8 @@
   import {
     Button,
     Popover,
-    Divider,
     Select,
     Layout,
-    Heading,
     Drawer,
     DrawerContent,
     Icon,
@@ -381,27 +379,6 @@
     z-index: 99999999;
     overflow-y: scroll;
   }
-  .title {
-    padding: 0 var(--spacing-m) var(--spacing-s) var(--spacing-m);
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0px;
-    margin: 0px;
-    width: 100%;
-  }
-
-  li {
-    cursor: pointer;
-    margin: 0px;
-    padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-m);
-  }
-
-  li:hover {
-    background-color: var(--spectrum-global-color-gray-200);
-  }
 
   .icon {
     margin-left: 8px;

From 6cf1b13a0c7383b7f7576b25f242378e3da40827 Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Wed, 1 Nov 2023 09:30:54 +0000
Subject: [PATCH 08/10] Feedback related amends.

---
 .../design/settings/controls/DataSourceSelect.svelte       | 1 -
 .../controls/DataSourceSelectItem/SelectItem.svelte        | 7 +------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 0d8e728403..af4da10466 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -348,7 +348,6 @@
     {#if otherSources?.length}
       <DataSourceSelect
         dividerState={false}
-        heading=""
         dataSet={otherSources}
         {value}
         onSelect={handleSelected}
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte
index 1fda2da634..f7c79b3862 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte
@@ -11,7 +11,7 @@
 {#if dividerState}
   <Divider />
 {/if}
-{#if heading.length > 0}
+{#if heading}
   <div class="title">
     <Heading size="XS">{heading}</Heading>
   </div>
@@ -26,11 +26,6 @@
       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}

From 9c71ccd2c48876618819066cc5946ca2f3128b5e Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Wed, 1 Nov 2023 09:34:10 +0000
Subject: [PATCH 09/10] Moved DataSourceSelect into related folder. Changed
 SelectedItem name. Updated DataSourceSelect imports.

---
 .../design/settings/componentSettings.js      |  2 +-
 ...tItem.svelte => DataSourceCategory.svelte} |  0
 .../DataSourceSelect.svelte                   | 20 +++++++++----------
 .../settings/controls/SchemaSelect.svelte     |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)
 rename packages/builder/src/components/design/settings/controls/DataSourceSelectItem/{SelectItem.svelte => DataSourceCategory.svelte} (100%)
 rename packages/builder/src/components/design/settings/controls/{ => DataSourceSelectItem}/DataSourceSelect.svelte (96%)

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 232b4bef31..b81361dfa5 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -1,5 +1,5 @@
 import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
-import DataSourceSelect from "./controls/DataSourceSelect.svelte"
+import DataSourceSelect from "./controls/DataSourceSelectItem/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
 import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte
rename to packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte
similarity index 96%
rename from packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
rename to packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte
index af4da10466..1f059ee972 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte
@@ -30,7 +30,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 DataSourceCategory from "components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte"
   import { API } from "api"
 
   export let value = {}
@@ -278,14 +278,14 @@
 </div>
 <Popover bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
-    <DataSourceSelect
+    <DataSourceCategory
       heading="Tables"
       dataSet={tables}
       {value}
       onSelect={handleSelected}
     />
     {#if views?.length}
-      <DataSourceSelect
+      <DataSourceCategory
         dividerState={true}
         heading="Views"
         dataSet={views}
@@ -294,7 +294,7 @@
       />
     {/if}
     {#if queries?.length}
-      <DataSourceSelect
+      <DataSourceCategory
         dividerState={true}
         heading="Queries"
         dataSet={queries}
@@ -303,7 +303,7 @@
       />
     {/if}
     {#if links?.length}
-      <DataSourceSelect
+      <DataSourceCategory
         dividerState={true}
         heading="Links"
         dataSet={links}
@@ -312,7 +312,7 @@
       />
     {/if}
     {#if fields?.length}
-      <DataSourceSelect
+      <DataSourceCategory
         dividerState={true}
         heading="Fields"
         dataSet={fields}
@@ -321,7 +321,7 @@
       />
     {/if}
     {#if jsonArrays?.length}
-      <DataSourceSelect
+      <DataSourceCategory
         dividerState={true}
         heading="JSON Arrays"
         dataSet={jsonArrays}
@@ -330,7 +330,7 @@
       />
     {/if}
     {#if showDataProviders && dataProviders?.length}
-      <DataSourceSelect
+      <DataSourceCategory
         dividerState={true}
         heading="Data Providers"
         dataSet={dataProviders}
@@ -338,7 +338,7 @@
         onSelect={handleSelected}
       />
     {/if}
-    <DataSourceSelect
+    <DataSourceCategory
       dividerState={true}
       heading="Other"
       dataSet={[custom]}
@@ -346,7 +346,7 @@
       onSelect={handleSelected}
     />
     {#if otherSources?.length}
-      <DataSourceSelect
+      <DataSourceCategory
         dividerState={false}
         dataSet={otherSources}
         {value}
diff --git a/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte b/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
index 80e36328f1..745b623e72 100644
--- a/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import DataSourceSelect from "./DataSourceSelect.svelte"
+  import DataSourceSelect from "./DataSourceSelectItem/DataSourceSelect.svelte"
 
   const otherSources = [{ name: "Custom", label: "Custom" }]
 </script>

From c4ff4eb8bb1255d8e268d9e0c31f03f50379bf96 Mon Sep 17 00:00:00 2001
From: Conor Webb <conorwebb59@gmail.com>
Date: Thu, 2 Nov 2023 10:00:40 +0000
Subject: [PATCH 10/10] Updated folder name, fixed ui bug.

---
 .../src/components/design/settings/componentSettings.js        | 2 +-
 .../DataSourceCategory.svelte                                  | 0
 .../DataSourceSelect.svelte                                    | 3 +--
 .../components/design/settings/controls/SchemaSelect.svelte    | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)
 rename packages/builder/src/components/design/settings/controls/{DataSourceSelectItem => DataSourceSelect}/DataSourceCategory.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{DataSourceSelectItem => DataSourceSelect}/DataSourceSelect.svelte (99%)

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index b81361dfa5..c2bd08760a 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -1,5 +1,5 @@
 import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
-import DataSourceSelect from "./controls/DataSourceSelectItem/DataSourceSelect.svelte"
+import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
 import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte
rename to packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
similarity index 99%
rename from packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte
rename to packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index 1f059ee972..5cda0ebcca 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
@@ -30,7 +30,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 DataSourceCategory from "components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte"
+  import DataSourceCategory from "components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
   import { API } from "api"
 
   export let value = {}
@@ -376,7 +376,6 @@
   .dropdown {
     padding: var(--spacing-m) 0;
     z-index: 99999999;
-    overflow-y: scroll;
   }
 
   .icon {
diff --git a/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte b/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
index 745b623e72..dbeeec53ef 100644
--- a/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import DataSourceSelect from "./DataSourceSelectItem/DataSourceSelect.svelte"
+  import DataSourceSelect from "./DataSourceSelect/DataSourceSelect.svelte"
 
   const otherSources = [{ name: "Custom", label: "Custom" }]
 </script>