From 2d3da0dfcf6213e4b2412c625074535d27ffc8c3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 26 Jul 2023 14:26:34 +0100
Subject: [PATCH] Fix null issues in view fetch, fix edit view popover, improve
 handling of nullish view params

---
 .../backend/DataTable/ViewV2DataTable.svelte  |  3 +-
 .../TableNavigator/TableNavigator.svelte      |  2 +-
 .../popovers/EditViewPopover.svelte           | 33 ++++++++++---------
 packages/builder/src/helpers/urlStateSync.js  |  2 +-
 .../app/[application]/data/view/index.svelte  | 15 +++++----
 .../src/components/grid/stores/rows.js        |  5 +++
 .../frontend-core/src/fetch/ViewV2Fetch.js    |  6 ++--
 7 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
index 6d549147fb..028030bb9a 100644
--- a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { datasources, viewsV2 } from "stores/backend"
+  import { viewsV2 } from "stores/backend"
   import { Grid } from "@budibase/frontend-core"
   import { API } from "api"
   import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
@@ -12,7 +12,6 @@
     id,
     tableId: id?.split("_").slice(0, -1).join("_"),
   }
-  $: console.log(datasource)
 
   const handleGridViewUpdate = async e => {
     viewsV2.replace(id, e.detail)
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 2c271637e6..f1965117ae 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -60,7 +60,7 @@
           }}
           selectedBy={$userSelectedResourceMap[name]}
         >
-          <EditViewPopover view={{ name, ...table.views[name] }} />
+          <EditViewPopover {view} />
         </NavItem>
       {/each}
     {/each}
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 295730f480..5e2b0102f8 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import { views } from "stores/backend"
+  import { views, viewsV2 } from "stores/backend"
   import { cloneDeep } from "lodash/fp"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -24,25 +23,29 @@
     const updatedView = cloneDeep(view)
     updatedView.name = updatedName
 
-    await views.save({
-      originalName,
-      ...updatedView,
-    })
+    if (view.version === 2) {
+      await viewsV2.save({
+        originalName,
+        ...updatedView,
+      })
+    } else {
+      await views.save({
+        originalName,
+        ...updatedView,
+      })
+    }
+
     notifications.success("View renamed successfully")
   }
 
   async function deleteView() {
     try {
-      const isSelected =
-        view.tableId === $views.selected.tableId &&
-        view.name === $views.selected.name
-
-      const { tableId } = view
-      await views.delete(view)
-      notifications.success("View deleted")
-      if (isSelected) {
-        $goto(`./table/${tableId}`)
+      if (view.version === 2) {
+        await viewsV2.delete(view)
+      } else {
+        await views.delete(view)
       }
+      notifications.success("View deleted")
     } catch (error) {
       notifications.error("Error deleting view")
     }
diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index 42308889b2..c4c48fb3fb 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -51,7 +51,7 @@ export const syncURLToState = options => {
   let cachedRedirect = get(routify.redirect)
   let cachedPage = get(routify.page)
   let previousParamsHash = null
-  let debug = true
+  let debug = false
   const log = (...params) => debug && console.log(`[${urlParam}]`, ...params)
 
   // Navigate to a certain URL
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte
index 7c0483fe1a..0a2fc3c32d 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte
@@ -1,14 +1,17 @@
 <script>
   import { onMount } from "svelte"
-  import { views } from "stores/backend"
+  import { views, viewsV2 } from "stores/backend"
   import { redirect } from "@roxi/routify"
 
   onMount(async () => {
-    const { list, selected } = $views
-    if (selected) {
-      $redirect(`./${encodeURIComponent(selected?.name)}`)
-    } else if (list?.length) {
-      $redirect(`./${encodeURIComponent(list[0].name)}`)
+    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("../")
     }
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 5d3cd20109..315fd986f1 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -102,6 +102,11 @@ export const deriveStores = context => {
     instanceLoaded.set(false)
     loading.set(true)
 
+    // Abandon if we don't have a valid datasource
+    if (!$datasource?.tableId) {
+      return
+    }
+
     // Tick to allow other reactive logic to update stores when table ID changes
     // before proceeding. This allows us to wipe filters etc if needed.
     await tick()
diff --git a/packages/frontend-core/src/fetch/ViewV2Fetch.js b/packages/frontend-core/src/fetch/ViewV2Fetch.js
index 6773dd8395..66f4f37f82 100644
--- a/packages/frontend-core/src/fetch/ViewV2Fetch.js
+++ b/packages/frontend-core/src/fetch/ViewV2Fetch.js
@@ -2,13 +2,15 @@ import DataFetch from "./DataFetch.js"
 
 export default class ViewV2Fetch extends DataFetch {
   async getSchema(datasource, definition) {
-    return definition.schema
+    return definition?.schema
   }
 
   async getDefinition(datasource) {
     try {
       const table = await this.API.fetchTableDefinition(datasource.tableId)
-      const view = Object.values(table.views).find(v => v.id === datasource.id)
+      const view = Object.values(table.views || {}).find(
+        view => view.id === datasource.id
+      )
       const { schema } = view
       return { schema }
     } catch (error) {