Add initial layout

2025-03-13 16:37:29 +01:00 · 2025-03-13 16:37:29 +01:00 · e617cdb3da
parent c98cfd519b
commit e617cdb3da
1 changed files with 46 additions and 2 deletions
--- a/packages/builder/src/components/integration/rest/AuthPicker.svelte
+++ b/packages/builder/src/components/integration/rest/AuthPicker.svelte
@ -1,13 +1,30 @@
 <script lang="ts">
-  import { ActionButton, ActionMenu, MenuSection } from "@budibase/bbui"
+  import {
+    ActionButton,
+    ActionMenu,
+    Body,
+    Divider,
+    Layout,
+  } from "@budibase/bbui"
+  import { onMount } from "svelte"

  export let authConfigId: string
  export let authConfigs: { label: string; value: string }[]

+  let menu: ActionMenu
+
  $: authConfig = authConfigs.find(c => c.value === authConfigId)
+
+  function closeMenu() {
+    menu.hide()
+  }
+
+  onMount(() => {
+    menu.show()
+  })
 </script>

-<ActionMenu align="right">
+<ActionMenu align="right" bind:this={menu}>
  <div slot="control">
    <ActionButton icon="LockClosed" quiet selected>
      {#if !authConfig}
@ -17,4 +34,31 @@
      {/if}
    </ActionButton>
  </div>
+
+  <Layout>
+    <div class="header-container">
+      <Body size="M">Authentication</Body>
+      <ActionButton
+        quiet
+        noPadding
+        size="S"
+        icon="Close"
+        on:click={closeMenu}
+      />
+    </div>
+  </Layout>
+  <Divider />
+  <Layout>
+    <Body size="S" color="var(--spectrum-global-color-gray-700)">
+      Basic (Username & Password Authentication)
+    </Body>
+  </Layout>
 </ActionMenu>
+
+<style>
+  .header-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+</style>