From 9ccc54773dbdea33264677caf24d7a4f5c383715 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 18 Jul 2023 18:32:52 +0200
Subject: [PATCH] ViewV2 page

---
 .../TableNavigator/TableNavigator.svelte      | 10 +++++++--
 .../data/view/v2/[viewName].svelte            | 22 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewName].svelte

diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index d9def682dc..ef8872c1ca 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -37,13 +37,19 @@
           <EditTablePopover {table} />
         {/if}
       </NavItem>
-      {#each [...Object.keys(table.views || {})].sort() as viewName, idx (idx)}
+      {#each [...Object.entries(table.views || {})].sort() as [viewName, view], idx (idx)}
         <NavItem
           indentLevel={2}
           icon="Remove"
           text={viewName}
           selected={$isActive("./view") && $views.selected?.name === viewName}
-          on:click={() => $goto(`./view/${encodeURIComponent(viewName)}`)}
+          on:click={() => {
+            if (view.version === 2) {
+              $goto(`./view/v2/${encodeURIComponent(viewName)}`)
+            } else {
+              $goto(`./view/${encodeURIComponent(viewName)}`)
+            }
+          }}
           selectedBy={$userSelectedResourceMap[viewName]}
         >
           <EditViewPopover
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewName].svelte b/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewName].svelte
new file mode 100644
index 0000000000..3df89bd777
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewName].svelte
@@ -0,0 +1,22 @@
+<script>
+  import { views } from "stores/backend"
+  import { Grid } from "@budibase/frontend-core"
+  import { API } from "api"
+
+  $: tableId = $views.selected?.id
+</script>
+
+<div class="wrapper">
+  <Grid {API} {tableId} datasourceType="view" showAvatars={false} />
+</div>
+
+<style>
+  .wrapper {
+    flex: 1 1 auto;
+    margin: -28px -40px -40px -40px;
+    display: flex;
+    flex-direction: column;
+    background: var(--background);
+    overflow: hidden;
+  }
+</style>