prevent editing of headers in params

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte

@@ -109,6 +109,7 @@
     </div>
     <div class="drawer-contents" slot="body">
       <IntegrationQueryEditor
+        datasource={$backendUiStore.datasources.find(ds => ds._id === value.datasourceId)}
         query={value}
         schema={fetchDatasourceSchema(value)}
         editable={false} />

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

@@ -2,6 +2,7 @@
   import { Button, Input } from "@budibase/bbui"
 
   export let object = {}
+  export let readOnly
 
   let fields = Object.entries(object).map(([name, value]) => ({ name, value }))
 
@@ -21,14 +22,18 @@
 </script>
 
 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
-<div class="container">
+<div class="container" class:readOnly>
   {#each fields as field, idx}
     <Input placeholder="Key" thin outline bind:value={field.name} />
     <Input placeholder="Value" thin outline bind:value={field.value} />
-    <i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
+    {#if !readOnly}
+      <i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
+    {/if}
   {/each}
 </div>
-<Button secondary thin outline on:click={addEntry}>Add</Button>
+{#if !readOnly}
+  <Button secondary thin outline on:click={addEntry}>Add</Button>
+{/if}
 
 <style>
   .container {

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

@@ -1,5 +1,6 @@
 <script>
   import CodeMirror from "./codemirror"
+  import { Label, Spacer } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { themeStore } from "builderStore"
   import { handlebarsCompletions } from "constants/completions"
@@ -11,6 +12,7 @@
     LIGHT: "default",
   }
 
+  export let label
   export let value = ""
   export let readOnly = false
   export let lineNumbers = true
@@ -169,6 +171,8 @@
   }
 </script>
 
+<Label small>{label}</Label>
+<Spacer medium />
 <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
 
 <style>

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

@@ -32,7 +32,7 @@
         <div>
           <Label small>{field}</Label>
           <Spacer small />
-          <KeyValueBuilder bind:object={fields[field]} />
+          <KeyValueBuilder readOnly={!editable} bind:object={fields[field]} />
         </div>
       {:else if schema.fields[field]?.type === 'json'}
         <div>
@@ -59,8 +59,6 @@
   </div>
 </form>
 {#if schema.customisable}
-  <Label small>Query</Label>
-  <Spacer small />
   <Editor
     label="Query"
     mode="json"

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

@@ -156,30 +156,7 @@
     <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
     <hr />
   {/if}
-  <!-- <div class="input">
-    <div class="label">Enter query name:</div>
-    <Input outline border bind:value={query.name} />
-  </div> -->
-  <!-- {#if config} -->
-  <!-- <div class="props"> -->
-  <!-- <div class="query-type">
-        Query type:
-        <span class="query-type-span">{config[query.queryVerb].type}</span>
-      </div> -->
-  <!-- <div class="select">
-        <Select primary thin bind:value={query.queryVerb}>
-          {#each Object.keys(config) as queryVerb}
-            <option value={queryVerb}>{queryVerb}</option>
-          {/each}
-        </Select>
-      </div> -->
-  <!-- </div>
-    <EditQueryParamsPopover
-      bind:parameters={query.parameters}
-      bindable={false} /> -->
-  <!-- {/if} -->
 </section>
-<Spacer large />
 
 {#if shouldShowQueryConfig}
   <section>
@@ -196,7 +173,7 @@
 
       <div class="viewer-controls">
         <Heading small>Query Results</Heading>
-        <div>
+        <div class="button-container">
           <Button
             secondary
             thin
@@ -204,7 +181,8 @@
             on:click={saveQuery}>
             Save Query
           </Button>
-        <Button thin primary on:click={previewQuery}>Run Query</Button>
+          <Spacer medium />
+          <Button thin primary on:click={previewQuery}>Run Query</Button>
         </div>
       </div>
       <Body small grey>
@@ -212,7 +190,7 @@
         schema.
       </Body>
 
-      <Spacer medium />
+      <Spacer large />
 
       <section class="viewer">
         {#if data}
@@ -274,8 +252,8 @@
     gap: var(--spacing-l);
   }
 
-  a {
+  .button-container {
-    font-size: var(--font-size-s);
+    display: flex;
   }
 
   hr {

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

@@ -60,10 +60,4 @@
   grid-gap: var(--spacing-l);
   align-items: center;
 }
-
-pre {
-  background: var(--background);
-  border-radius: var(--border-radius-s);
-  margin: 0;
-}
 </style>

packages/builder/src/pages/[application]/data/_layout.svelte

@@ -27,9 +27,10 @@
   <div class="nav">
     <Switcher headings={tabs} bind:value={tab}>
       <div class="title">
-        <Button blue data-cy={`new-${tab}`} on:click={modal.show}>
+        <i
-          <i class="ri-add-fill" />
+          data-cy={`new-${tab}`}
-        </Button>
+          class="ri-add-circle-fill"
+          on:click={modal.show} />
       </div>
       {#if tab === 'table'}
         <TableNavigator />
@@ -81,7 +82,7 @@
     position: relative;
   }
 
-  .title {
+  i {
     font-size: 20px;
     position: absolute;
     top: var(--spacing-l);