Updating key value store to allow adding an activity toggle.

packages/bbui/src/Form/Core/Switch.svelte

@@ -25,7 +25,9 @@
     class="spectrum-Switch-input"
   />
   <span class="spectrum-Switch-switch" />
+  {#if text}
     <label class="spectrum-Switch-label" for={id}>{text}</label>
+  {/if}
 </div>
 
 <style>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Icon, ActionButton, Input } from "@budibase/bbui"
+  import { Icon, ActionButton, Input, Label, Toggle } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { lowercase } from "helpers"
 
@@ -10,6 +10,8 @@
   export let readOnly
   export let noAddButton
   export let name
+  export let headings = false
+  export let activity = false
 
   let fields = Object.entries(object).map(([name, value]) => ({ name, value }))
 
@@ -36,10 +38,22 @@
 
 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
 {#if Object.keys(object || {}).length > 0}
-  <div class="container" class:readOnly>
+  {#if headings}
+    <div class="container" class:container-active={activity}>
+      <Label>Key</Label>
+      <Label>Value</Label>
+      {#if activity}
+        <Label>Active</Label>
+      {/if}
+    </div>
+  {/if}
+  <div class="container" class:container-active={activity} class:readOnly>
     {#each fields as field, idx}
       <Input placeholder="Key" bind:value={field.name} on:change={changed} />
       <Input placeholder="Value" bind:value={field.value} on:change={changed} />
+      {#if activity}
+        <Toggle />
+      {/if}
       {#if !readOnly}
         <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
       {/if}
@@ -62,4 +76,7 @@
     align-items: center;
     margin-bottom: var(--spacing-m);
   }
+  .container-active {
+    grid-template-columns: 1fr 1fr 50px 20px;
+  }
 </style>

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

@@ -136,9 +136,16 @@
         </div>
         <Tabs selected="Params">
           <Tab title="Params">
-            <KeyValueBuilder bind:object={breakQs} name="param" />
+            <KeyValueBuilder bind:object={breakQs} name="param" headings />
+          </Tab>
+          <Tab title="Headers">
+            <KeyValueBuilder
+              bind:object={query.fields.headers}
+              name="header"
+              headings
+              activity
+            />
           </Tab>
-          <Tab title="Headers" />
           <Tab title="Body" />
           <Tab title="Transformer">
             <Layout noPadding>