Adding access controls to rest query ui.

packages/builder/src/components/integration/AccessLevelSelect.svelte

@@ -1,6 +1,8 @@
 <script>
   import { Label, Select } from "@budibase/bbui"
   import { permissions, roles } from "stores/backend"
+  import { onMount } from "svelte"
+  import { Roles } from "constants/backend"
 
   export let query
   export let saveId
@@ -8,7 +10,7 @@
 
   $: updateRole(roleId, saveId)
 
-  let roleId
+  let roleId, loaded
 
   async function updateRole(role, id) {
     roleId = role
@@ -23,15 +25,32 @@
       }
     }
   }
+
+  onMount(async () => {
+    if (!query || !query._id) {
+      roleId = Roles.BASIC
+      loaded = true
+      return
+    }
+    try {
+      roleId = (await permissions.forResource(query._id))["read"]
+    } catch (err) {
+      roleId = Roles.BASIC
+    }
+    loaded = true
+  })
 </script>
 
-{#if label}
-  <Label>{label}</Label>
+{#if loaded}
+  {#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
+  />
 {/if}
-<Select
-  value={roleId}
-  on:change={e => updateRole(e.detail)}
-  options={$roles}
-  getOptionLabel={x => x.name}
-  getOptionValue={x => x._id}
-/>

packages/builder/src/components/integration/KeyValueBuilder.svelte

@@ -75,15 +75,15 @@
 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
 {#if Object.keys(object || {}).length > 0}
   {#if headings}
-    <div class="container" class:container-active={activity}>
+    <div class="container" class:container-active={toggle}>
       <Label>Key</Label>
       <Label>Value</Label>
-      {#if activity}
+      {#if toggle}
         <Label>Active</Label>
       {/if}
     </div>
   {/if}
-  <div class="container" class:container-active={activity} class:readOnly>
+  <div class="container" class:container-active={toggle} class:readOnly>
     {#each fields as field, idx}
       <Input placeholder="Key" bind:value={field.name} on:change={changed} />
       {#if options}

packages/builder/src/components/integration/QueryViewer.svelte

@@ -18,17 +18,11 @@
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
-  import {
-    datasources,
-    integrations,
-    queries,
-    permissions,
-  } from "stores/backend"
+  import { datasources, integrations, queries } from "stores/backend"
   import { capitalise } from "../../helpers"
   import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"
   import JSONPreview from "./JSONPreview.svelte"
-  import { Roles, SchemaTypeOptions } from "constants/backend"
-  import { onMount } from "svelte"
+  import { SchemaTypeOptions } from "constants/backend"
   import KeyValueBuilder from "./KeyValueBuilder.svelte"
   import { fieldsToSchema, schemaToFields } from "helpers/data/utils"
   import AccessLevelSelect from "./AccessLevelSelect.svelte"
@@ -38,7 +32,6 @@
   let fields = query?.schema ? schemaToFields(query.schema) : []
   let parameters
   let data = []
-  let roleId
   let saveId
   const transformerDocs =
     "https://docs.budibase.com/building-apps/data/transformers"
@@ -95,18 +88,6 @@
       notifications.error(`Error creating query. ${err.message}`)
     }
   }
-
-  onMount(async () => {
-    if (!query || !query._id) {
-      roleId = Roles.BASIC
-      return
-    }
-    try {
-      roleId = (await permissions.forResource(query._id))["read"]
-    } catch (err) {
-      roleId = Roles.BASIC
-    }
-  })
 </script>
 
 <Layout gap="S" noPadding>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte

@@ -1,8 +1,10 @@
 <script>
-  import { params } from "@roxi/routify"
-  import { database, queries } from "stores/backend"
+  import { params, goto } from "@roxi/routify"
+  import { database, datasources, queries } from "stores/backend"
   import QueryInterface from "components/integration/QueryViewer.svelte"
+  import { IntegrationTypes } from "constants/backend"
 
+  let selectedQuery, datasource
   $: selectedQuery = $queries.list.find(
     query => query._id === $queries.selected
   ) || {
@@ -11,6 +13,14 @@
     fields: {},
     queryVerb: "read",
   }
+  $: datasource = $datasources.list.find(
+    ds => ds._id === $params.selectedDatasource
+  )
+  $: {
+    if (datasource?.source === IntegrationTypes.REST) {
+      $goto(`../rest/${$params.query}`)
+    }
+  }
 </script>
 
 <section>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

@@ -36,6 +36,7 @@
     SchemaTypeOptions,
   } from "constants/backend"
   import JSONPreview from "components/integration/JSONPreview.svelte"
+  import AccessLevelSelect from "components/integration/AccessLevelSelect.svelte"
 
   let query, datasource
   let breakQs = {}
@@ -144,12 +145,18 @@
   <div class="inner">
     <div class="top">
       <Layout gap="S">
-        <EditableLabel
-          type="heading"
-          bind:value={query.name}
-          defaultValue="Untitled"
-          on:change={() => (query.flags.urlName = false)}
-        />
+        <div class="top-bar">
+          <EditableLabel
+            type="heading"
+            bind:value={query.name}
+            defaultValue="Untitled"
+            on:change={() => (query.flags.urlName = false)}
+          />
+          <div class="access">
+            <Label>Access level</Label>
+            <AccessLevelSelect {query} {saveId} />
+          </div>
+        </div>
         <div class="url-block">
           <div class="verb">
             <Select
@@ -303,4 +310,13 @@
   .red {
     color: #ea7d82;
   }
+  .top-bar {
+    display: flex;
+    justify-content: space-between;
+  }
+  .access {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
 </style>