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) {
-      selected = $tab.title
-      dispatch("select", selected)
+    if (thisSelected !== selected) {
+      thisSelected = 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,59 +255,70 @@
             </div>
           </div>
         {:else}
-          <Tabs selected="JSON" quiet noPadding noHorizPadding>
-            <Tab title="JSON">
-              <div>
-                <JSONPreview height="300" data={response.rows[0]} />
-              </div>
-            </Tab>
-            <Tab title="Schema">
-              <KeyValueBuilder
-                bind:object={response.schema}
-                name="schema"
-                headings
-                options={SchemaTypeOptions}
-              />
-            </Tab>
-            <Tab title="Raw">
-              <TextArea disabled value={response.extra?.raw} height="300" />
-            </Tab>
-            <Tab title="Headers">
-              <KeyValueBuilder object={response.extra?.headers} readOnly />
-            </Tab>
-            <Tab title="Preview">
-              <div class="table">
-                {#if response}
-                  <Table
-                    schema={response?.schema}
-                    data={response?.rows}
-                    allowEditColumns={false}
-                    allowEditRows={false}
-                    allowSelectRows={false}
-                  />
-                {/if}
-              </div>
-            </Tab>
-            <div class="stats">
-              <Label size="L">
-                Status: <span class={responseSuccess ? "green" : "red"}
-                  >{response?.info.code}</span
-                >
-              </Label>
-              <Label size="L">
-                Time: <span class={responseSuccess ? "green" : "red"}
-                  >{response?.info.time}</span
+          <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={schema}
+                  name="schema"
+                  headings
+                  options={SchemaTypeOptions}
+                />
+              </Tab>
+            {/if}
+            {#if response}
+              <Tab title="Raw">
+                <TextArea disabled value={response.extra?.raw} height="300" />
+              </Tab>
+              <Tab title="Headers">
+                <KeyValueBuilder object={response.extra?.headers} readOnly />
+              </Tab>
+              <Tab title="Preview">
+                <div class="table">
+                  {#if response}
+                    <Table
+                      schema={response?.schema}
+                      data={response?.rows}
+                      allowEditColumns={false}
+                      allowEditRows={false}
+                      allowSelectRows={false}
+                    />
+                  {/if}
+                </div>
+              </Tab>
+              <div class="stats">
+                <Label size="L">
+                  Status: <span class={responseSuccess ? "green" : "red"}
+                    >{response?.info.code}</span
+                  >
+                </Label>
+                <Label size="L">
+                  Time: <span class={responseSuccess ? "green" : "red"}
+                    >{response?.info.time}</span
+                  >
+                </Label>
+                <Label size="L">
+                  Size: <span class={responseSuccess ? "green" : "red"}
+                    >{response?.info.size}</span
+                  >
+                </Label>
+                <Button disabled={!responseSuccess} cta on:click={saveQuery}
+                  >Save query</Button
                 >
-              </Label>
-              <Label size="L">
-                Size: <span class={responseSuccess ? "green" : "red"}
-                  >{response?.info.size}</span
-                >
-              </Label>
-              <Button disabled={!responseSuccess} cta on:click={saveQuery}
-                >Save query</Button
-              >
-            </div>
+              </div>
+            {/if}
           </Tabs>
         {/if}
       </Layout>