Add support for old views in new view nav bar

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

@@ -48,12 +48,18 @@
   $: datasource = $datasources.list.find(ds => ds._id === table?.sourceId)
   $: tableSelectedBy = $userSelectedResourceMap[table?._id]
   $: tableEditable = table?._id !== TableNames.USERS
-  $: activeId = $params.viewId ?? $params.tableId
+  $: activeId = $params.viewName ?? $params.viewId ?? $params.tableId
   $: views = Object.values(table?.views || {})
     .filter(x => x.version === 2)
     .slice()
     .sort(alphabetical)
+  $: v1Views = Object.values(table?.views || {})
+    .filter(x => x.version !== 2)
+    .slice()
+    .sort(alphabetical)
   $: setUpObserver(views)
+  $: hasViews = v1Views.length || views.length
+
   $: overflowedViews = views.filter(view => !viewVisibiltyMap[view.id])
   $: viewHidden = viewVisibiltyMap[activeId] === false
 
@@ -61,6 +67,10 @@
     return $url(`../${$params.tableId}/${encodeURIComponent(viewId)}`)
   })
 
+  const viewV1Url = derived([url, params], ([$url, $params]) => viewName => {
+    return $url(`../${$params.tableId}/v1/${encodeURIComponent(viewName)}`)
+  })
+
   const tableUrl = derived(url, $url => tableId => $url(`../${tableId}`))
 
   const openTableContextMenu = e => {
@@ -176,8 +186,8 @@
 
 <div class="nav">
   <IntegrationIcon
-    integrationType={datasource.source}
+    integrationType={datasource?.source}
-    schema={datasource.schema}
+    schema={datasource?.schema}
     size="24"
   />
   <a
@@ -202,8 +212,32 @@
       />
     {/if}
   </a>
-  {#if views.length}
+  {#if hasViews}
     <div class="nav__views" bind:this={viewContainer}>
+      {#each v1Views as view (view.name)}
+        {@const selectedBy = $userSelectedResourceMap[view.name]}
+        <a
+          href={$viewV1Url(view.name)}
+          class="nav-item"
+          class:active={view.name === activeId}
+          on:contextmenu={e => openViewContextMenu(e, view)}
+          data-id={view.name}
+        >
+          <div class="nav-item__title">
+            {view.name}
+          </div>
+          {#if selectedBy}
+            <UserAvatars size="XS" users={selectedBy} />
+          {/if}
+          <Icon
+            on:click={e => openViewContextMenu(e, view)}
+            hoverable
+            name="MoreSmallList"
+            color="var(--spectrum-global-color-gray-600)"
+            hoverColor="var(--spectrum-global-color-gray-900)"
+          />
+        </a>
+      {/each}
       {#each views as view (view.id)}
         {@const selectedBy = $userSelectedResourceMap[view.id]}
         <a
@@ -231,7 +265,7 @@
       {/each}
     </div>
   {/if}
-  {#if !views.length && tableEditable}
+  {#if !hasViews && tableEditable}
     <Button cta on:click={createViewModal?.show}>Create a view</Button>
     <span>
       To create subsets of data, control access and more, create a view.
@@ -274,7 +308,7 @@
       {/each}
     </ActionMenu>
   {/if}
-  {#if views.length}
+  {#if hasViews}
     <Icon
       name="Add"
       size="L"

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/index.svelte

@@ -57,29 +57,34 @@
   }
 </script>
 
-{#if view}
+<div class="view-v1">
-  <Table
+  {#if view}
-    title={decodeURI(name)}
+    <Table
-    {schema}
+      title={decodeURI(name)}
-    tableId={view.tableId}
+      {schema}
-    {data}
+      tableId={view.tableId}
-    {loading}
+      {data}
-    rowCount={10}
+      {loading}
-    allowEditing={false}
+      rowCount={10}
-    bind:hideAutocolumns
+      allowEditing={false}
-  >
+      bind:hideAutocolumns
-    <ViewFilterButton {view} />
+    >
-    <CalculateButton {view} />
+      <ViewFilterButton {view} />
-    {#if view.calculation}
+      <CalculateButton {view} />
-      <GroupByButton {view} />
+      {#if view.calculation}
-    {/if}
+        <GroupByButton {view} />
-    <ManageAccessButton resourceId={decodeURI(name)} />
+      {/if}
-    <HideAutocolumnButton bind:hideAutocolumns />
+      <ManageAccessButton resourceId={decodeURI(name)} />
-    <ExportButton view={view.name} formats={supportedFormats} />
+      <HideAutocolumnButton bind:hideAutocolumns />
-  </Table>
+      <ExportButton view={view.name} formats={supportedFormats} />
-{:else}<i>Create your first table to start building</i>{/if}
+    </Table>
+  {:else}<i>Create your first table to start building</i>{/if}
+</div>
 
 <style>
+  .view-v1 {
+    padding: var(--spacing-xl);
+  }
   i {
     font-size: var(--font-size-m);
     color: var(--grey-4);

packages/builder/src/pages/builder/app/[application]/data/view/index.svelte

@@ -1,19 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { views, viewsV2 } from "stores/builder"
-  import { redirect } from "@roxi/routify"
-
-  onMount(async () => {
-    if ($viewsV2.selected) {
-      $redirect(`./v2/${$viewsV2.selected.id}`)
-    } else if ($viewsV2.list?.length) {
-      $redirect(`./v2/${$viewsV2.list[0].id}`)
-    } else if ($views.selected) {
-      $redirect(`./${encodeURIComponent($views.selected?.name)}`)
-    } else if ($views.list?.length) {
-      $redirect(`./${encodeURIComponent($views.list[0].name)}`)
-    } else {
-      $redirect("../")
-    }
-  })
-</script>

packages/client/src/constants.js

@@ -3,7 +3,8 @@ export { FieldType as FieldTypes } from "@budibase/types"
 export const ActionTypes = {
   ValidateForm: "ValidateForm",
   UpdateFieldValue: "UpdateFieldValue",
-  RefreshDatasource: "RefreshDatasource",
+  RefreshDatasource:
+     "RefreshDatasource",
   AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
   RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
   SetDataProviderSorting: "SetDataProviderSorting",