Fix labels and add colours to access level selctor for queries

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}
 />

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}

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>