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