Making it so that schema always shows up for future work towards global variables and making it so that tabs selected can be bound to.

packages/bbui/src/Tabs/Tabs.svelte

@@ -11,6 +11,8 @@
   export let quiet = false
   export let emphasized = false
 
+  let thisSelected = undefined
+
   let _id = id()
   const tab = writable({ title: selected, id: _id, emphasized })
   setContext("tab", tab)
@@ -20,9 +22,18 @@
   const dispatch = createEventDispatcher()
 
   $: {
-    if ($tab.title !== selected) {
+    if (thisSelected !== selected) {
-      selected = $tab.title
+      thisSelected = selected
-      dispatch("select", selected)
+      dispatch("select", thisSelected)
+    } else if ($tab.title !== thisSelected) {
+      thisSelected = $tab.title
+      dispatch("select", thisSelected)
+    }
+    if ($tab.title !== thisSelected) {
+      tab.update(state => {
+        state.title = thisSelected
+        return state
+      })
     }
   }
 

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

@@ -124,6 +124,7 @@
         notifications.info("Request did not return any data.")
       } else {
         response.info = response.info || { code: 200 }
+        schema = response.schema
         notifications.success("Request sent successfully.")
       }
     } catch (err) {
@@ -243,7 +244,7 @@
     <div class="bottom">
       <Layout paddingY="S" gap="S">
         <Divider size="S" />
-        {#if !response}
+        {#if !response && Object.keys(schema).length === 0}
           <Heading size="M">Response</Heading>
           <div class="placeholder">
             <div class="placeholder-internal">
@@ -254,20 +255,30 @@
             </div>
           </div>
         {:else}
-          <Tabs selected="JSON" quiet noPadding noHorizPadding>
+          <Tabs
+            selected={!response ? "Schema" : "JSON"}
+            quiet
+            noPadding
+            noHorizPadding
+          >
+            {#if response}
               <Tab title="JSON">
                 <div>
                   <JSONPreview height="300" data={response.rows[0]} />
                 </div>
               </Tab>
+            {/if}
+            {#if schema || response}
               <Tab title="Schema">
                 <KeyValueBuilder
-                bind:object={response.schema}
+                  bind:object={schema}
                   name="schema"
                   headings
                   options={SchemaTypeOptions}
                 />
               </Tab>
+            {/if}
+            {#if response}
               <Tab title="Raw">
                 <TextArea disabled value={response.extra?.raw} height="300" />
               </Tab>
@@ -307,6 +318,7 @@
                   >Save query</Button
                 >
               </div>
+            {/if}
           </Tabs>
         {/if}
       </Layout>