Fix row modal routing bugs caused by rewriting the url directly but instead...

premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentMentionNotification.vue

@@ -1,7 +1,6 @@
 <template>
   <nuxt-link
     class="notification-panel__notification-link"
-    event=""
     :to="url"
     @click.native="markAsReadAndHandleClick"
   >
@@ -22,7 +21,6 @@
 <script>
 import RichTextEditor from '@baserow/modules/core/components/editor/RichTextEditor.vue'
 import notificationContent from '@baserow/modules/core/mixins/notificationContent'
-import { openRowEditModal } from '@baserow/modules/database/utils/router'
 
 export default {
   name: 'RowCommentMentionNotification',
@@ -39,10 +37,22 @@ export default {
   computed: {
     params() {
       const data = this.notification.data
+      let viewId = null
+
+      if (
+        ['database-table-row', 'database-table'].includes(
+          this.$nuxt.$route.name
+        ) &&
+        this.$nuxt.$route.params.tableId === this.notification.data.table_id
+      ) {
+        viewId = this.$nuxt.$route.params.viewId
+      }
+
       return {
         databaseId: data.database_id,
         tableId: data.table_id,
         rowId: data.row_id,
+        viewId,
       }
     },
     url() {
@@ -53,11 +63,8 @@ export default {
     },
   },
   methods: {
-    async handleClick(evt) {
-      evt.preventDefault()
+    handleClick(evt) {
       this.$emit('close-panel')
-      const { $store, $router, $route } = this
-      await openRowEditModal({ $store, $router, $route }, this.params)
     },
   },
 }

web-frontend/modules/database/middleware/tableLoading.js

@@ -3,6 +3,17 @@
  * changes. That way we can show a loading animation to the user when switching
  * between views.
  */
-export default async function ({ store }) {
-  await store.dispatch('table/setLoading', true)
+export default async function ({ route, from, store }) {
+  function parseIntOrNull(x) {
+    return x != null ? parseInt(x) : null
+  }
+
+  if (
+    !from ||
+    parseIntOrNull(route.params.tableId) !==
+      parseIntOrNull(from.params.tableId) ||
+    parseIntOrNull(route.params.viewId) !== parseIntOrNull(from.params.viewId)
+  ) {
+    await store.dispatch('table/setLoading', true)
+  }
 }

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

@@ -9,7 +9,7 @@
       :table-loading="tableLoading"
       store-prefix="page/"
       @selected-view="selectedView"
-      @selected-row="selectRow"
+      @selected-row="navigateToRowModal"
       @navigate-previous="
         (row, activeSearchTerm) => setAdjacentRow(true, row, activeSearchTerm)
       "
@@ -41,6 +41,50 @@ export default {
     this.$store.dispatch('table/unselect')
     next()
   },
+  async beforeRouteUpdate(to, from, next) {
+    function parseIntOrNull(x) {
+      return x != null ? parseInt(x) : null
+    }
+    const currentRowId = parseIntOrNull(to.params?.rowId)
+    const currentTableId = parseIntOrNull(to.params.tableId)
+
+    const storeRow = this.$store.getters['rowModalNavigation/getRow']
+    const failedToFetchTableRowId =
+      this.$store.getters['rowModalNavigation/getFailedToFetchTableRowId']
+    if (currentRowId == null) {
+      await this.$store.dispatch('rowModalNavigation/clearRow')
+    } else if (
+      failedToFetchTableRowId &&
+      parseIntOrNull(failedToFetchTableRowId?.rowId) === currentRowId &&
+      parseIntOrNull(failedToFetchTableRowId?.tableId) === currentTableId
+    ) {
+      return next({
+        name: 'database-table',
+        params: {
+          ...to.params,
+          rowId: null,
+        },
+      })
+    } else if (
+      storeRow?.id !== currentRowId ||
+      storeRow?.table_id !== currentTableId
+    ) {
+      const row = await this.$store.dispatch('rowModalNavigation/fetchRow', {
+        tableId: currentTableId,
+        rowId: currentRowId,
+      })
+      if (row == null) {
+        return next({
+          name: 'database-table',
+          params: {
+            ...to.params,
+            rowId: null,
+          },
+        })
+      }
+    }
+    next()
+  },
   layout: 'app',
   /**
    * Because there is no hook that is called before the route changes, we need the
@@ -127,14 +171,10 @@ export default {
     }
 
     if (params.rowId) {
-      try {
-        await store.dispatch('rowModalNavigation/fetchRow', {
-          tableId,
-          rowId: params.rowId,
-        })
-      } catch (e) {
-        return error({ statusCode: 404, message: 'Row not found.' })
-      }
+      await store.dispatch('rowModalNavigation/fetchRow', {
+        tableId,
+        rowId: params.rowId,
+      })
     }
 
     return data
@@ -186,7 +226,7 @@ export default {
     async setAdjacentRow(previous, row = null, activeSearchTerm = null) {
       if (row) {
         await this.$store.dispatch('rowModalNavigation/setRow', row)
-        this.updatePath(row.id)
+        this.navigateToRowModal(row.id)
       } else {
         // If the row isn't provided then the row is
         // probably not visible to the user at the moment
@@ -194,21 +234,10 @@ export default {
         await this.fetchAdjacentRow(previous, activeSearchTerm)
       }
     },
-    async selectRow(rowId) {
-      if (rowId) {
-        const row = await this.$store.dispatch('rowModalNavigation/fetchRow', {
-          tableId: this.table.id,
-          rowId,
-        })
-        if (row) {
-          this.updatePath(rowId)
-        }
-      } else {
-        await this.$store.dispatch('rowModalNavigation/clearRow')
-        this.updatePath(rowId)
-      }
+    selectRow(rowId) {
+      this.navigateToRowModal(rowId)
     },
-    updatePath(rowId) {
+    navigateToRowModal(rowId) {
       if (
         this.$route.params.rowId !== undefined &&
         this.$route.params.rowId === rowId
@@ -216,16 +245,16 @@ export default {
         return
       }
 
-      const newPath = this.$nuxt.$router.resolve({
+      const location = {
         name: rowId ? 'database-table-row' : 'database-table',
         params: {
           databaseId: this.database.id,
           tableId: this.table.id,
-          viewId: this.view?.id,
+          viewId: this.$route.params.viewId,
           rowId,
         },
-      }).href
-      history.replaceState({}, null, newPath)
+      }
+      this.$nuxt.$router.push(location)
     },
     async fetchAdjacentRow(previous, activeSearchTerm = null) {
       const { row, status } = await this.$store.dispatch(
@@ -254,7 +283,7 @@ export default {
       }
 
       if (row) {
-        this.updatePath(row.id)
+        this.navigateToRowModal(row.id)
       }
     },
   },

web-frontend/modules/database/store/rowModalNavigation.js

@@ -23,6 +23,7 @@ export const state = () => ({
    * also not be part of the `rows` in the `rowModal` store.
    */
   row: null,
+  failedToFetchTableRowId: null,
 })
 
 export const mutations = {
@@ -35,12 +36,17 @@ export const mutations = {
   SET_ROW(state, row) {
     state.row = row
   },
+  SET_FAILED_TO_FETCH_TABLE_ROW_ID(state, tableAndRowId) {
+    state.failedToFetchTableRowId = tableAndRowId
+  },
 }
 export const actions = {
   clearRow({ commit }) {
+    commit('SET_FAILED_TO_FETCH_TABLE_ROW_ID', null)
     commit('CLEAR_ROW')
   },
   setRow({ commit }, row) {
+    commit('SET_FAILED_TO_FETCH_TABLE_ROW_ID', null)
     commit('SET_ROW', row)
   },
   async fetchRow({ commit }, { tableId, rowId }) {
@@ -49,6 +55,7 @@ export const actions = {
       commit('SET_ROW', row)
       return row
     } catch (error) {
+      commit('SET_FAILED_TO_FETCH_TABLE_ROW_ID', { tableId, rowId })
       notifyIf(error, 'row')
     }
   },
@@ -91,6 +98,9 @@ export const getters = {
   getRow(state) {
     return state.row
   },
+  getFailedToFetchTableRowId(state) {
+    return state.failedToFetchTableRowId
+  },
 }
 
 export default {

web-frontend/modules/database/utils/router.js

@@ -1,42 +0,0 @@
-import { notifyIf } from '@baserow/modules/core/utils/error'
-
-export async function openRowEditModal(
-  { $store, $router, $route },
-  { databaseId, tableId, rowId }
-) {
-  const tableRoute = $route.name.startsWith('database-table')
-  const sameTable = tableRoute && $route.params.tableId === tableId
-
-  // Because 'rowModalNavigation/fetchRow' is called in the asyncData, we need
-  // to manually call it here if we are already on the row/table page.
-  if (sameTable) {
-    try {
-      await $store.dispatch('rowModalNavigation/fetchRow', {
-        tableId,
-        rowId,
-      })
-    } catch (error) {
-      notifyIf(error, 'application')
-      return
-    }
-    const newPath = $router.resolve({
-      name: 'database-table-row',
-      params: {
-        databaseId,
-        tableId,
-        rowId,
-        viewId: $route.params.viewId,
-      },
-    }).href
-    history.replaceState({}, null, newPath)
-  } else {
-    $router.push({
-      name: 'database-table-row',
-      params: {
-        databaseId,
-        tableId,
-        rowId,
-      },
-    })
-  }
-}