New authpicker component

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
 
@@ -642,15 +643,11 @@
           <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}
+            />
           </div>
         </Tabs>
       </Layout>
@@ -853,10 +850,6 @@
     justify-content: space-between;
   }
 
-  .auth-select {
-    width: 200px;
-  }
-
   .pagination {
     display: grid;
     grid-template-columns: 1fr 1fr;

packages/builder/src/components/integration/rest/AuthPicker.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { ActionButton, ActionMenu, MenuSection } from "@budibase/bbui"
+
+  export let authConfigId: string
+  export let authConfigs: { label: string; value: string }[]
+
+  $: authConfig = authConfigs.find(c => c.value === authConfigId)
+</script>
+
+<ActionMenu align="right">
+  <div slot="control">
+    <ActionButton icon="LockClosed" quiet selected>
+      {#if !authConfig}
+        Authentication
+      {:else}
+        Auth: {authConfig.label}
+      {/if}
+    </ActionButton>
+  </div>
+</ActionMenu>