Merge branch 'master' into fix-single-image-env

hosting/single/Dockerfile.v2

@@ -120,7 +120,7 @@ VOLUME /data
 ARG BUDIBASE_VERSION
 # Ensuring the version argument is sent
 RUN test -n "$BUDIBASE_VERSION"
-ENV BUDIBASE_VERSION=$BUDIBASE_VERSION
+ENV BUDIBASE_VERSION $BUDIBASE_VERSION
 
 HEALTHCHECK --interval=15s --timeout=15s --start-period=45s CMD "/healthcheck.sh"
 

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.12.4",
+  "version": "2.12.5",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

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/DataSourceSelect/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
 import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte"

packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte

@@ -0,0 +1,55 @@
+<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}
+  <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)}
+    >
+      <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>

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

@@ -7,10 +7,8 @@
   import {
     Button,
     Popover,
-    Divider,
     Select,
     Layout,
-    Heading,
     Drawer,
     DrawerContent,
     Icon,
@@ -32,6 +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/DataSourceSelect/DataSourceCategory.svelte"
   import { API } from "api"
 
   export let value = {}
@@ -279,102 +278,81 @@
 </div>
 <Popover bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
-    <div class="title">
+    <DataSourceCategory
-      <Heading size="XS">Tables</Heading>
+      heading="Tables"
-    </div>
+      dataSet={tables}
-    <ul>
+      {value}
-      {#each tables as table}
+      onSelect={handleSelected}
-        <li on:click={() => handleSelected(table)}>{table.label}</li>
+    />
-      {/each}
-    </ul>
     {#if views?.length}
-      <Divider />
+      <DataSourceCategory
-      <div class="title">
+        dividerState={true}
-        <Heading size="XS">Views</Heading>
+        heading="Views"
-      </div>
+        dataSet={views}
-      <ul>
+        {value}
-        {#each views as view}
+        onSelect={handleSelected}
-          <li on:click={() => handleSelected(view)}>{view.label}</li>
+      />
-        {/each}
-      </ul>
     {/if}
     {#if queries?.length}
-      <Divider />
+      <DataSourceCategory
-      <div class="title">
+        dividerState={true}
-        <Heading size="XS">Queries</Heading>
+        heading="Queries"
-      </div>
+        dataSet={queries}
-      <ul>
+        {value}
-        {#each queries as query}
+        onSelect={handleSelected}
-          <li
+      />
-            class:selected={value === query}
-            on:click={() => handleSelected(query)}
-          >
-            {query.label}
-          </li>
-        {/each}
-      </ul>
     {/if}
     {#if links?.length}
-      <Divider />
+      <DataSourceCategory
-      <div class="title">
+        dividerState={true}
-        <Heading size="XS">Relationships</Heading>
+        heading="Links"
-      </div>
+        dataSet={links}
-      <ul>
+        {value}
-        {#each links as link}
+        onSelect={handleSelected}
-          <li on:click={() => handleSelected(link)}>{link.label}</li>
+      />
-        {/each}
-      </ul>
     {/if}
     {#if fields?.length}
-      <Divider />
+      <DataSourceCategory
-      <div class="title">
+        dividerState={true}
-        <Heading size="XS">Fields</Heading>
+        heading="Fields"
-      </div>
+        dataSet={fields}
-      <ul>
+        {value}
-        {#each fields as field}
+        onSelect={handleSelected}
-          <li on:click={() => handleSelected(field)}>{field.label}</li>
+      />
-        {/each}
-      </ul>
     {/if}
     {#if jsonArrays?.length}
-      <Divider />
+      <DataSourceCategory
-      <div class="title">
+        dividerState={true}
-        <Heading size="XS">JSON Arrays</Heading>
+        heading="JSON Arrays"
-      </div>
+        dataSet={jsonArrays}
-      <ul>
+        {value}
-        {#each jsonArrays as field}
+        onSelect={handleSelected}
-          <li on:click={() => handleSelected(field)}>{field.label}</li>
+      />
-        {/each}
-      </ul>
     {/if}
     {#if showDataProviders && dataProviders?.length}
-      <Divider />
+      <DataSourceCategory
-      <div class="title">
+        dividerState={true}
-        <Heading size="XS">Data Providers</Heading>
+        heading="Data Providers"
-      </div>
+        dataSet={dataProviders}
-      <ul>
+        {value}
-        {#each dataProviders as provider}
+        onSelect={handleSelected}
-          <li
+      />
-            class:selected={value === provider}
+    {/if}
-            on:click={() => handleSelected(provider)}
+    <DataSourceCategory
-          >
+      dividerState={true}
-            {provider.label}
+      heading="Other"
-          </li>
+      dataSet={[custom]}
-        {/each}
+      {value}
-      </ul>
+      onSelect={handleSelected}
+    />
+    {#if otherSources?.length}
+      <DataSourceCategory
+        dividerState={false}
+        dataSet={otherSources}
+        {value}
+        onSelect={handleSelected}
+      />
     {/if}
-    <Divider />
-    <div class="title">
-      <Heading size="XS">Other</Heading>
-    </div>
-    <ul>
-      <li on:click={() => handleSelected(custom)}>{custom.label}</li>
-      {#if otherSources?.length}
-        {#each otherSources as source}
-          <li on:click={() => handleSelected(source)}>{source.label}</li>
-        {/each}
-      {/if}
-    </ul>
   </div>
 </Popover>
 
@@ -398,31 +376,6 @@
   .dropdown {
     padding: var(--spacing-m) 0;
     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;
-  }
-
-  li {
-    cursor: pointer;
-    margin: 0px;
-    padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-m);
-  }
-
-  .selected {
-    color: var(--spectrum-global-color-blue-600);
-  }
-
-  li:hover {
-    background-color: var(--spectrum-global-color-gray-200);
   }
 
   .icon {

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

@@ -1,5 +1,5 @@
 <script>
-  import DataSourceSelect from "./DataSourceSelect.svelte"
+  import DataSourceSelect from "./DataSourceSelect/DataSourceSelect.svelte"
 
   const otherSources = [{ name: "Custom", label: "Custom" }]
 </script>

pull_request_template.md

@@ -1,18 +1,16 @@
 ## Description
+
 _Describe the problem or feature in addition to a link to the relevant github issues._
 
-Addresses: 
+Addresses:
+
 - `<Enter the Link to the issue(s) this PR addresses>`
 - ...more if required
 
 ## App Export
+
 - If possible, attach an app export file along with your request template to make QA testing easier, with minimal setup.
 
 ## Screenshots
+
 _If a UI facing feature, a short video of the happy path, and some screenshots of the new functionality._
-
-## Documentation
-- [ ] I have reviewed the budibase documentatation to verify if this feature requires any changes. If changes or new docs are required I have written them.
-
-
-