Rename backend components file structure and standardise no table empty state

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -52,7 +52,7 @@
   }
 </script>
 
-<div class="container">
+<div class="actions">
   <Input placeholder="Name" thin bind:value={field.name} />
 
   <Select
@@ -110,7 +110,7 @@
 </div>
 
 <style>
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);

packages/builder/src/components/backend/DataTable/modals/CreateEditRecord.svelte

@@ -40,7 +40,7 @@
   }
 </script>
 
-<div class="container">
+<div class="actions">
   <ErrorsBox {errors} />
   <form on:submit|preventDefault>
     {#each modelSchema as [key, meta]}
@@ -63,7 +63,7 @@
 </div>
 
 <style>
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);

packages/builder/src/components/backend/DataTable/popovers/Calculate.svelte

@@ -46,7 +46,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Calculate</h5>
     <div class="input-group-row">
       <p>The</p>
@@ -72,7 +72,7 @@
 </Popover>
 
 <style>
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }

packages/builder/src/components/backend/DataTable/popovers/Filter.svelte

@@ -95,7 +95,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Filter</h5>
     {#if view.filters.length}
       <div class="input-group-row">
@@ -150,7 +150,7 @@
 </Popover>
 
 <style>
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }

packages/builder/src/components/backend/DataTable/popovers/GroupBy.svelte

@@ -42,7 +42,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Group By</h5>
     <div class="input-group-row">
       <p>Group By</p>
@@ -61,7 +61,7 @@
 </Popover>
 
 <style>
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }

packages/builder/src/components/backend/DataTable/popovers/View.svelte

@@ -48,7 +48,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Create View</h5>
     <Input placeholder="View Name" thin bind:value={name} />
     <div class="footer">
@@ -64,7 +64,7 @@
     font-weight: 500;
   }
 
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }

packages/builder/src/components/backend/ModelNavigator/CreateTable.svelte

@@ -31,7 +31,7 @@
   <Button primary wide on:click={dropdown.show}>Create New Table</Button>
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Create Table</h5>
     <Input
       data-cy="table-name-input"
@@ -46,7 +46,7 @@
 </DropdownMenu>
 
 <style>
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);

packages/builder/src/components/backend/ModelNavigator/EditTable.svelte

@@ -40,7 +40,7 @@
 </div>
 <DropdownMenu align="left" {anchor} bind:this={dropdown}>
   {#if editing}
-    <div class="container">
+    <div class="actions">
       <h5>Edit Table</h5>
       <Input placeholder="Table Name" thin bind:value={table.name} />
       <footer>
@@ -80,7 +80,7 @@
     font-size: 16px;
   }
 
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);

packages/builder/src/components/backend/ModelNavigator/EditView.svelte

@@ -48,7 +48,7 @@
 </div>
 <DropdownMenu align="left" {anchor} bind:this={dropdown}>
   {#if editing}
-    <div class="container">
+    <div class="actions">
       <h5>Edit View</h5>
       <Input placeholder="View Name" thin bind:value={view.name} />
       <footer>
@@ -88,7 +88,7 @@
     font-size: 16px;
   }
 
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);

packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte

@@ -30,7 +30,7 @@
   {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">
-        <div class="title">Tables</div>
+        <h5>Tables</h5>
         <CreateTablePopover />
         <div class="hierarchy-items-container">
           {#each $backendUiStore.models as model}
@@ -63,9 +63,10 @@
 </div>
 
 <style>
-  .title {
+  h5 {
     font-size: 18px;
     font-weight: 600;
+    margin-top: 0;
     margin-bottom: var(--spacing-xl);
   }
 

packages/builder/src/components/nav/NavItem.svelte

@@ -1,20 +0,0 @@
-<script>
-  import { isActive, url, goto } from "@sveltech/routify"
-
-  export let label = ""
-  export let href
-</script>
-
-<div
-  on:click={() => $goto(href)}
-  class="budibase__nav-item backend-nav-item"
-  class:selected={$isActive(href)}>
-  {label}
-</div>
-
-<style>
-  .backend-nav-item {
-    padding-left: 25px;
-    cursor: pointer;
-  }
-</style>

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -1,8 +1,8 @@
 <script>
   import { getContext } from "svelte"
   import { store, backendUiStore } from "builderStore"
-  import * as api from "components/database/DataTable/api"
+  import * as api from "components/backend/DataTable/api"
-  import ModelNavigator from "components/nav/ModelNavigator/ModelNavigator.svelte"
+  import ModelNavigator from "components/backend/ModelNavigator/ModelNavigator.svelte"
 </script>
 
 <!-- routify:options index=1 -->

packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte

@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
   import { Button } from "@budibase/bbui"
-  import ModelDataTable from "components/database/DataTable"
+  import ModelDataTable from "components/backend/DataTable"
   import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/database/DataTable/api"
+  import * as api from "components/backend/DataTable/api"
-  import { CreateEditRecordModal } from "components/database/DataTable/modals"
+  import { CreateEditRecordModal } from "components/backend/DataTable/modals"
 
   const { open, close } = getContext("simple-modal")
 
@@ -15,12 +15,13 @@
 {#if $backendUiStore.selectedDatabase._id && selectedModel.name}
   <ModelDataTable />
 {:else}
-  <i style="color: var(--grey-4)">create your first table to start building</i>
+  <i>Create your first table to start building</i>
 {/if}
 
 <style>
   i {
     font-size: 20px;
-    margin-right: 10px;
+    padding-bottom: 10px;
+    color: var(--grey-4);
   }
 </style>

packages/builder/src/pages/[application]/backend/model/_layout.svelte

@@ -21,9 +21,7 @@
 </script>
 
 <div class="root">
-  <div class="node-view">
+  <slot />
-    <slot />
-  </div>
 </div>
 
 <style>
@@ -31,9 +29,4 @@
     height: 100%;
     position: relative;
   }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
 </style>

packages/builder/src/pages/[application]/backend/model/index.svelte

@@ -22,5 +22,13 @@
 </script>
 
 {#if $backendUiStore.models.length === 0}
-  Please create a table
+  <i>Create your first table to start building</i>
 {:else}Please select a table{/if}
+
+<style>
+  i {
+    font-size: 20px;
+    padding-bottom: 10px;
+    color: var(--grey-4);
+  }
+</style>

packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte

@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
   import { Button } from "@budibase/bbui"
-  import ViewDataTable from "components/database/DataTable/ViewDataTable"
+  import ViewDataTable from "components/backend/DataTable/ViewDataTable"
   import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/database/DataTable/api"
+  import * as api from "components/backend/DataTable/api"
-  import { CreateEditRecordModal } from "components/database/DataTable/modals"
+  import { CreateEditRecordModal } from "components/backend/DataTable/modals"
 
   const { open, close } = getContext("simple-modal")