Add view CRUD and table editing via new UI

packages/builder/src/components/backend/DataTable/TableDataTable.svelte

@@ -9,7 +9,6 @@
   import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
   import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
   import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
-  import GridCreateViewButton from "components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte"
   import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
   import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
   import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
@@ -77,9 +76,6 @@
     <GridFilterButton />
   </svelte:fragment>
   <svelte:fragment slot="controls">
-    {#if !isUsersTable}
-      <GridCreateViewButton />
-    {/if}
     <GridManageAccessButton />
     {#if !isUsersTable}
       <GridCreateAutomationButton />

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

@@ -39,9 +39,7 @@
 
   const selectTable = tableId => {
     tables.select(tableId)
-    if (!$isActive("./table/:tableId")) {
+    $goto(`./table/${tableId}`)
-      $goto(`./table/${tableId}`)
-    }
   }
 
   function openNode(datasource) {

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

@@ -1,14 +1,11 @@
 <script>
   import TableNavItem from "./TableNavItem/TableNavItem.svelte"
+  import { alphabetical } from "./utils"
 
   export let tables
   export let selectTable
 
   $: sortedTables = tables.sort(alphabetical)
-
-  const alphabetical = (a, b) => {
-    return a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
-  }
 </script>
 
 <div class="hierarchy-items-container">

packages/builder/src/components/backend/TableNavigator/utils.js

@@ -66,3 +66,7 @@ export const parseFile = e => {
     reader.readAsText(file)
   })
 }
+
+export const alphabetical = (a, b) => {
+  return a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
+}

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte

@@ -1,16 +1,21 @@
 <script>
-  import { getContext } from "svelte"
+  import { Modal, Input, notifications, ModalContent } from "@budibase/bbui"
-  import { Input, notifications, ModalContent } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { viewsV2 } from "stores/builder"
 
-  const { filter, sort, definition } = getContext("grid")
+  export let table
 
   let name
+  let modal
 
-  $: views = Object.keys($definition?.views || {}).map(x => x.toLowerCase())
+  $: views = Object.keys(table?.views || {}).map(x => x.toLowerCase())
   $: nameExists = views.includes(name?.trim().toLowerCase())
 
+  export const show = () => {
+    name = null
+    modal?.show()
+  }
+
   const enrichSchema = schema => {
     // We need to sure that "visible" is set to true for any fields which have
     // not yet been saved with grid metadata attached
@@ -28,33 +33,30 @@
     try {
       const newView = await viewsV2.create({
         name,
-        tableId: $definition._id,
+        tableId: table._id,
-        query: $filter,
+        schema: enrichSchema(table.schema),
-        sort: {
+        primaryDisplay: table.primaryDisplay,
-          field: $sort.column,
-          order: $sort.order,
-        },
-        schema: enrichSchema($definition.schema),
-        primaryDisplay: $definition.primaryDisplay,
       })
       notifications.success(`View ${name} created`)
-      $goto(`../../view/v2/${newView.id}`)
+      $goto(`./${newView.id}`)
     } catch (error) {
       notifications.error("Error creating view")
     }
   }
 </script>
 
-<ModalContent
+<Modal bind:this={modal}>
-  title="Create view"
+  <ModalContent
-  confirmText="Create view"
+    title="Create view"
-  onConfirm={saveView}
+    confirmText="Create view"
-  disabled={nameExists}
+    onConfirm={saveView}
->
+    disabled={nameExists}
-  <Input
+  >
-    label="View name"
+    <Input
-    thin
+      label="View name"
-    bind:value={name}
+      thin
-    error={nameExists ? "A view already exists with that name" : null}
+      bind:value={name}
-  />
+      error={nameExists ? "A view already exists with that name" : null}
-</ModalContent>
+    />
+  </ModalContent>
+</Modal>

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte

@@ -6,7 +6,7 @@
     contextMenuStore,
   } from "stores/builder"
   import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Button } from "@budibase/bbui"
   import { params, url } from "@roxi/routify"
   import EditViewModal from "./EditViewModal.svelte"
   import DeleteViewModal from "./DeleteViewModal.svelte"
@@ -16,8 +16,11 @@
   import { tick } from "svelte"
   import { DB_TYPE_EXTERNAL } from "constants/backend"
   import { TableNames } from "constants"
+  import { alphabetical } from "components/backend/TableNavigator/utils"
+  import CreateViewModal from "./CreateViewModal.svelte"
 
   // Editing table
+  let createViewModal
   let editTableModal
   let deleteTableModal
 
@@ -101,10 +104,6 @@
       }
     )
   }
-
-  const alphabetical = (a, b) => {
-    return a.name < b.name ? -1 : 1
-  }
 </script>
 
 <div class="view-nav-bar">
@@ -126,7 +125,13 @@
       <UserAvatars size="XS" users={tableSelectedBy} />
     {/if}
     {#if tableEditable}
-      <Icon on:click={openTableContextMenu} s hoverable name="MoreSmallList" />
+      <Icon
+        on:click={openTableContextMenu}
+        hoverable
+        name="MoreSmallList"
+        color="var(--spectrum-global-color-gray-600)"
+        hoverColor="var(--spectrum-global-color-gray-900)"
+      />
     {/if}
   </a>
   {#each views as view (view.id)}
@@ -145,15 +150,33 @@
       {/if}
       <Icon
         on:click={e => openViewContextMenu(e, view)}
-        s
         hoverable
         name="MoreSmallList"
+        color="var(--spectrum-global-color-gray-600)"
+        hoverColor="var(--spectrum-global-color-gray-900)"
       />
     </a>
   {/each}
+  {#if !views.length && tableEditable}
+    <Button cta on:click={createViewModal?.show}>Create a view</Button>
+    <span>
+      To create subsets of data, control access and more, create a view.
+    </span>
+  {/if}
+  {#if views.length}
+    <Icon
+      name="Add"
+      size="L"
+      hoverable
+      color="var(--spectrum-global-color-gray-600)"
+      hoverColor="var(--spectrum-global-color-gray-900)"
+      on:click={createViewModal?.show}
+    />
+  {/if}
 </div>
 
-{#if table}
+{#if table && tableEditable}
+  <CreateViewModal {table} bind:this={createViewModal} />
   <EditTableModal {table} bind:this={editTableModal} />
   <DeleteTableModal {table} bind:this={deleteTableModal} />
 {/if}
@@ -183,7 +206,7 @@
     align-items: center;
     gap: var(--spacing-m);
     transition: background 130ms ease-out, color 130ms ease-out;
-    color: var(--spectrum-global-color-gray-700);
+    color: var(--spectrum-global-color-gray-600);
   }
   .title {
     font-size: 16px;