Add dedicated route for routes v1, improve view creation modal, fix selection state

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

@@ -1,22 +1,19 @@
 <script>
   import { Input, notifications, ModalContent } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { views as viewsStore } from "stores/backend"
+  import { viewsV2 } from "stores/backend"
   import { tables } from "stores/backend"
 
   let name
   let field
 
-  $: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
+  $: views = Object.keys($tables.selected?.views || {})
+  $: nameExists = views.includes(name?.trim())
 
   const saveView = async () => {
     name = name?.trim()
-    if (views.includes(name)) {
-      notifications.error(`View exists with name ${name}`)
-      return
-    }
     try {
-      const newView = await viewsStore.create({
+      const newView = await viewsV2.create({
         name,
         tableId: $tables.selected._id,
         field,
@@ -33,6 +30,12 @@
   title="Create View"
   confirmText="Create View"
   onConfirm={saveView}
+  disabled={nameExists}
 >
-  <Input label="View Name" thin bind:value={name} />
+  <Input
+    label="View Name"
+    thin
+    bind:value={name}
+    error={nameExists ? "A view already exists with that name" : null}
+  />
 </ModalContent>

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

@@ -7,9 +7,6 @@
   import { goto, isActive } from "@roxi/routify"
   import { userSelectedResourceMap } from "builderStore"
 
-  const alphabetical = (a, b) =>
-    a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
-
   export let sourceId
   export let selectTable
 
@@ -18,6 +15,17 @@
       table => table.sourceId === sourceId && table._id !== TableNames.USERS
     )
     .sort(alphabetical)
+
+  const alphabetical = (a, b) => {
+    return a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
+  }
+
+  const isViewActive = (view, isActive, views, viewsV2) => {
+    return (
+      (isActive("./view/v1") && views.selected?.name === view.name) ||
+      (isActive("./view/v2") && viewsV2.selected?.id === view.id)
+    )
+  }
 </script>
 
 {#if $database?._id}
@@ -37,28 +45,22 @@
           <EditTablePopover {table} />
         {/if}
       </NavItem>
-      {#each [...Object.entries(table.views || {})].sort() as [viewName, view], idx (idx)}
-        {@const viewSelected =
-          $isActive("./view") && $views.selected?.name === viewName}
-        {@const viewV2Selected =
-          $isActive("./view/v2") && $viewsV2.selected?.name === viewName}
+      {#each [...Object.entries(table.views || {})].sort() as [name, view], idx (idx)}
         <NavItem
           indentLevel={2}
           icon="Remove"
-          text={viewName}
-          selected={viewSelected || viewV2Selected}
+          text={name}
+          selected={isViewActive(view, $isActive, $views, $viewsV2)}
           on:click={() => {
             if (view.version === 2) {
               $goto(`./view/v2/${view.id}`)
             } else {
-              $goto(`./view/${encodeURIComponent(viewName)}`)
+              $goto(`./view/v1/${encodeURIComponent(name)}`)
             }
           }}
-          selectedBy={$userSelectedResourceMap[viewName]}
+          selectedBy={$userSelectedResourceMap[name]}
         >
-          <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }}
-          />
+          <EditViewPopover view={{ name, ...table.views[name] }} />
         </NavItem>
       {/each}
     {/each}

packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/_layout.svelte

@@ -13,7 +13,7 @@
     stateKey: "selectedViewName",
     validate: name => $views.list?.some(view => view.name === name),
     update: views.select,
-    fallbackUrl: "../",
+    fallbackUrl: "../../",
     store: views,
     routify,
     decode: decodeURIComponent,

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

@@ -0,0 +1,5 @@
+<script>
+  import { redirect } from "@roxi/routify"
+
+  $redirect("../")
+</script>

packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/_layout.svelte

@@ -9,7 +9,7 @@
   $: store.actions.websocket.selectResource(id)
 
   const stopSyncing = syncURLToState({
-    urlParam: "id",
+    urlParam: "viewId",
     stateKey: "selectedViewId",
     validate: id => $viewsV2.list?.some(view => view.id === id),
     update: viewsV2.select,

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

@@ -0,0 +1,5 @@
+<script>
+  import { redirect } from "@roxi/routify"
+
+  $redirect("../")
+</script>

packages/frontend-core/src/components/grid/stores/rows.js

@@ -111,7 +111,7 @@ export const deriveStores = context => {
     // Create new fetch model
     const newFetch = fetchData({
       API,
-      datasource,
+      datasource: $datasource,
       options: {
         filter: $filter,
         sortColumn: $sort.column,