Merge branch 'master' into BUDI-9127/oauth2-settings

2025-03-18 16:03:48 +01:00 · 2025-03-18 16:03:48 +01:00 · 513c37e916
parent eaef1c8765 dbf11a7ec2
commit 513c37e916
4 changed files with 82 additions and 16 deletions
--- a/packages/bbui/src/List/ListItem.svelte
+++ b/packages/bbui/src/List/ListItem.svelte
@ -89,7 +89,7 @@
  /* Selection is only meant for standalone list items (non stacked) so we just set a fixed border radius */
  .list-item.selected {
    background-color: var(--spectrum-global-color-blue-100);
-    border-color: var(--spectrum-global-color-blue-100);
+    border: none;
  }
  .list-item.selected:after {
    content: "";
@ -100,7 +100,7 @@
    pointer-events: none;
    top: 0;
    left: 0;
-    border-radius: 4px;
+    border-radius: inherit;
    box-sizing: border-box;
    z-index: 1;
    opacity: 0.5;
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@ -50,6 +50,7 @@
    toBindingsArray,
  } from "@/dataBinding"
  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
+  import AuthPicker from "./rest/AuthPicker.svelte"

  export let queryId

@ -680,15 +681,12 @@
          <div class="auth-container">
            <div />
            <!-- spacer -->
-            <div class="auth-select">
-              <Select
-                label="Auth"
-                labelPosition="left"
-                placeholder="None"
-                bind:value={query.fields.authConfigId}
-                options={authConfigs}
-              />
-            </div>
+
+            <AuthPicker
+              bind:authConfigId={query.fields.authConfigId}
+              {authConfigs}
+              datasourceId={datasource._id}
+            />
          </div>
        </Tabs>
      </Layout>
@ -891,10 +889,6 @@
    justify-content: space-between;
  }

-  .auth-select {
-    width: 200px;
-  }
-
  .pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
--- a/packages/builder/src/components/integration/rest/AuthPicker.svelte
+++ b/packages/builder/src/components/integration/rest/AuthPicker.svelte
@ -0,0 +1,71 @@
+<script lang="ts">
+  import {
+    ActionButton,
+    Body,
+    Button,
+    List,
+    ListItem,
+    PopoverAlignment,
+  } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { appStore } from "@/stores/builder"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+
+  export let authConfigId: string | undefined
+  export let authConfigs: { label: string; value: string }[]
+  export let datasourceId: string
+
+  let popover: DetailPopover
+
+  $: authConfig = authConfigs.find(c => c.value === authConfigId)
+
+  function addBasicConfiguration() {
+    $goto(
+      `/builder/app/${$appStore.appId}/data/datasource/${datasourceId}?&tab=Authentication`
+    )
+  }
+
+  function selectConfiguration(id: string) {
+    if (authConfigId === id) {
+      authConfigId = undefined
+    } else {
+      authConfigId = id
+    }
+    popover.hide()
+  }
+
+  $: title = !authConfig ? "Authentication" : `Auth: ${authConfig.label}`
+</script>
+
+<DetailPopover bind:this={popover} {title} align={PopoverAlignment.Right}>
+  <div slot="anchor">
+    <ActionButton icon="LockClosed" quiet selected>
+      {#if !authConfig}
+        Authentication
+      {:else}
+        Auth: {authConfig.label}
+      {/if}
+    </ActionButton>
+  </div>
+
+  <Body size="S" color="var(--spectrum-global-color-gray-700)">
+    Basic & Bearer Authentication
+  </Body>
+
+  {#if authConfigs.length}
+    <List>
+      {#each authConfigs as config}
+        <ListItem
+          title={config.label}
+          on:click={() => selectConfiguration(config.value)}
+          selected={config.value === authConfigId}
+        />
+      {/each}
+    </List>
+  {/if}
+  <div>
+    <Button secondary icon="Add" on:click={addBasicConfiguration}
+      >Add config</Button
+    >
+  </div>
+</DetailPopover>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
@ -1,4 +1,5 @@
 <script>
+  import { params } from "@roxi/routify"
  import { Tabs, Tab, Heading, Body, Layout } from "@budibase/bbui"
  import { datasources, integrations } from "@/stores/builder"
  import ICONS from "@/components/backend/DatasourceNavigator/icons"
@ -15,7 +16,7 @@
  import { admin } from "@/stores/portal"
  import { IntegrationTypes } from "@/constants/backend"

-  let selectedPanel = null
+  let selectedPanel = $params.tab ?? null
  let panelOptions = []

  $: datasource = $datasources.selected