From af2b3198a552acd71e18526812e3596595d9ce85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 10:07:33 +0200
Subject: [PATCH] builder data side panel now uses new tabs component

---
 .../builder/[application]/data/_layout.svelte | 59 ++++++++++---------
 .../data/datasource/index.svelte              |  2 +-
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index 5fe0b03780..a7dd60a93a 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { isActive, goto } from "@roxi/routify"
-  import { Switcher, Modal } from "@budibase/bbui"
+  import { Switcher, Modal, Tabs, Tab } from "@budibase/bbui"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@@ -17,11 +17,11 @@
     },
   ]
 
-  let tab = $isActive("./datasource") ? "datasource" : "table"
+  let selected = $isActive("./datasource") ? "External" : "Internal"
 
   function selectFirstTableOrSource({ detail }) {
-    const type = detail.heading.key
-    if (type === "datasource") {
+    const { key } = tabs.find(t => t.title === detail)
+    if (key === "datasource") {
       $goto("./datasource")
     } else {
       $goto("./table")
@@ -34,28 +34,30 @@
 <!-- routify:options index=0 -->
 <div class="root">
   <div class="nav">
-    <Switcher
-      headings={tabs}
-      bind:value={tab}
-      on:change={selectFirstTableOrSource}>
-      <div class="title">
-        <i
-          data-cy={`new-${tab}`}
-          class="ri-add-circle-fill"
-          on:click={modal.show} />
-      </div>
-      {#if tab === 'table'}
-        <TableNavigator />
-        <Modal bind:this={modal}>
-          <CreateTableModal />
-        </Modal>
-      {:else if tab === 'datasource'}
-        <DatasourceNavigator />
-        <Modal bind:this={modal}>
-          <CreateDatasourceModal />
-        </Modal>
-      {/if}
-    </Switcher>
+    <Tabs {selected} on:select={selectFirstTableOrSource}>
+      <Tab title="Internal">
+        <div class="tab-content-padding">
+          <TableNavigator />
+          <Modal bind:this={modal}>
+            <CreateTableModal />
+          </Modal>
+        </div>
+      </Tab>
+      <Tab title="External">
+        <div class="tab-content-padding">
+          <DatasourceNavigator />
+          <Modal bind:this={modal}>
+            <CreateDatasourceModal />
+          </Modal>
+        </div>
+      </Tab>
+    </Tabs>
+    <div class="title">
+      <i
+        data-cy={`new-${selected === 'External' ? 'datasource' : 'tabel'}`}
+        class="ri-add-circle-fill"
+        on:click={modal.show} />
+    </div>
   </div>
   <div class="content">
     <slot />
@@ -84,16 +86,17 @@
   .content :global(> span) {
     display: contents;
   }
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
 
   .nav {
     overflow-y: auto;
     background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
     position: relative;
     border-right: var(--border-light);
   }
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
index fb14c6d0a1..6667e4eeff 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
@@ -5,7 +5,7 @@
 
   onMount(async () => {
     // navigate to first table in list, if not already selected
-    $datasources.list.length > 0 && $goto(`../${$datasources.list[0]._id}`)
+    $datasources.list.length > 0 && $goto(`./${$datasources.list[0]._id}`)
   })
 </script>