Resolve "Navigation is messed up after introducing remembering the last view visited feature."

changelog/entries/unreleased/bug/2006_fix_navigation_bug_with_last_remembered_view.json

@@ -0,0 +1,7 @@
+{
+  "type": "bug",
+  "message": "Fix bug where the navigation history was wrong after last view.",
+  "issue_number": 2006,
+  "bullet_points": [],
+  "created_at": "2023-10-05"
+}

web-frontend/modules/database/components/table/Table.vue

@@ -34,10 +34,10 @@
                 <EditableViewName ref="rename" :view="view"></EditableViewName>
               </span>
             </template>
-            <span v-else-if="view !== null">
+            <template v-else-if="view !== null">
               <i class="header__filter-icon iconoir-nav-arrow-down"></i>
               {{ $t('table.chooseView') }}
-            </span>
+            </template>
           </a>
           <ViewsContext
             v-if="views !== null"

web-frontend/modules/database/pages/table.vue

@@ -207,6 +207,22 @@ export default {
     this.$store.dispatch('table/setLoading', false)
   },
   mounted() {
+    // If no view route parameter is provided, then the `asyncData` function
+    // automatically selects the last viewed view, or the first one. This is however
+    // not updated in the URL path, so to make the history navigation work, we must
+    // replace the existing path.
+    if (
+      this.view !== undefined &&
+      parseInt(this.$route.params.viewId) !== this.view.id
+    ) {
+      this.$router.replace({
+        name: 'database-table',
+        params: {
+          viewId: this.view.id,
+        },
+      })
+    }
+
     this.$realtime.subscribe('table', { table_id: this.table.id })
   },
   beforeDestroy() {
@@ -218,7 +234,7 @@ export default {
         return
       }
 
-      this.$nuxt.$router.push({
+      this.$router.push({
         name: 'database-table',
         params: {
           viewId: view.id,
@@ -256,7 +272,7 @@ export default {
           rowId,
         },
       }
-      this.$nuxt.$router.push(location)
+      this.$router.push(location)
     },
     async fetchAdjacentRow(previous, activeSearchTerm = null) {
       const { row, status } = await this.$store.dispatch(

web-frontend/test/helpers/testApp.js

@@ -121,6 +121,9 @@ export class TestApp {
         resolve({ name, params }) {
           return new URL(`https://${name}`)
         },
+        replace({ name, params }) {
+          return new URL(`https://${name}`)
+        },
       },
       $route: {
         params: {},