From 1e4f105901d7897651639f25e10c922fe2a1ef8d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Oct 2024 15:25:15 +0100
Subject: [PATCH] Fix labels and add colours to access level selctor for
 queries

---
 .../design/settings/controls/RoleSelect.svelte     |  2 ++
 .../integration/AccessLevelSelect.svelte           | 14 ++++----------
 .../components/integration/RestQueryViewer.svelte  |  2 +-
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
index ad466cbce7..b99e58f205 100644
--- a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
@@ -5,6 +5,7 @@
   export let value
   export let error
   export let placeholder = null
+  export let autoWidth = false
 </script>
 
 <Select
@@ -16,4 +17,5 @@
   getOptionColour={role => role.uiMetadata.color}
   {placeholder}
   {error}
+  {autoWidth}
 />
diff --git a/packages/builder/src/components/integration/AccessLevelSelect.svelte b/packages/builder/src/components/integration/AccessLevelSelect.svelte
index 05b336c3b3..02ea50e780 100644
--- a/packages/builder/src/components/integration/AccessLevelSelect.svelte
+++ b/packages/builder/src/components/integration/AccessLevelSelect.svelte
@@ -1,7 +1,8 @@
 <script>
-  import { Label, notifications, Select } from "@budibase/bbui"
-  import { permissions, roles } from "stores/builder"
+  import { Label, notifications } from "@budibase/bbui"
+  import { permissions } from "stores/builder"
   import { Constants } from "@budibase/frontend-core"
+  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
 
   export let query
   export let label
@@ -52,12 +53,5 @@
   {#if label}
     <Label>{label}</Label>
   {/if}
-  <Select
-    value={roleId}
-    on:change={e => updateRole(e.detail)}
-    options={$roles}
-    getOptionLabel={x => x.name}
-    getOptionValue={x => x._id}
-    autoWidth
-  />
+  <RoleSelect value={roleId} on:change={e => updateRole(e.detail)} autoWidth />
 {/if}
diff --git a/packages/builder/src/components/integration/RestQueryViewer.svelte b/packages/builder/src/components/integration/RestQueryViewer.svelte
index 0489167823..3b1356efe2 100644
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@@ -503,7 +503,7 @@
             on:save={saveQuery}
           />
           <div class="access">
-            <Label>Access level</Label>
+            <Label>Access</Label>
             <AccessLevelSelect {query} {saveId} />
           </div>
         </div>