Merge branch '3434-fix-query-pararms-open-page' into 'develop'

fix: update page parameters when URL query string changes

Closes #3434

See merge request baserow/baserow!3148

changelog/entries/unreleased/bug/3434_fix_automatically_upd.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "[Builder] Fix updating of page parameters when URL query parameters change.",
+    "issue_number": 3434,
+    "bullet_points": [],
+    "created_at": "2025-02-19"
+}

web-frontend/modules/builder/dataProviderTypes.js

@@ -313,10 +313,18 @@ export class PageParameterDataProviderType extends DataProviderType {
           const validators = queryParamNames.includes(name)
             ? QUERY_PARAM_TYPE_VALIDATION_FUNCTIONS
             : PAGE_PARAM_TYPE_VALIDATION_FUNCTIONS
+          let value
+          try {
+            value = validators[type](pageParamsValue[name])
+          } catch {
+            // Skip setting the parameter if the user-provided value
+            // doesn't pass our parameter `type` validation.
+            return null
+          }
           return this.app.store.dispatch('pageParameter/setParameter', {
             page,
             name,
-            value: validators[type](pageParamsValue[name]),
+            value,
           })
         })
       )

web-frontend/modules/builder/pages/publicPage.vue

@@ -27,6 +27,7 @@ import {
   userSourceCookieTokenName,
   setToken,
 } from '@baserow/modules/core/utils/auth'
+import { QUERY_PARAM_TYPE_VALIDATION_FUNCTIONS } from '@baserow/modules/builder/enums'
 
 const logOffAndReturnToLogin = async ({ builder, store, redirect }) => {
   await store.dispatch('userSourceUser/logoff', {
@@ -341,6 +342,34 @@ export default {
     },
   },
   watch: {
+    '$route.query': {
+      immediate: true,
+      deep: true,
+      handler(newQuery) {
+        // when query string changed due to user action,
+        // update the page's query parameters in the store
+        Promise.all(
+          this.currentPage.query_params.map(({ name, type }) => {
+            if (!newQuery[name]) return null
+            let value
+            try {
+              value = QUERY_PARAM_TYPE_VALIDATION_FUNCTIONS[type](
+                newQuery[name]
+              )
+            } catch {
+              // Skip setting the parameter if the user-provided value
+              // doesn't pass our parameter `type` validation.
+              return null
+            }
+            return this.$store.dispatch('pageParameter/setParameter', {
+              page: this.currentPage,
+              name,
+              value,
+            })
+          })
+        )
+      },
+    },
     dispatchContext: {
       deep: true,
       /**