Unique row urls for every view

changelog.md

@@ -12,6 +12,7 @@ For example:
 ### New Features
 * Added missing success printouts to `count_rows` and `calculate_storage_usage` commands.
 * Add `isort` settings to sort python imports.
+* Add row url parameter to `gallery` and `kanban` view.
 
 ### Bug Fixes
 * Resolve circular dependency in `FieldWithFiltersAndSortsSerializer` [#1113](https://gitlab.com/bramw/baserow/-/issues/1113)

premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanView.vue

@@ -31,7 +31,7 @@
         :read-only="readOnly"
         :store-prefix="storePrefix"
         @create-row="openCreateRowModal"
-        @edit-row="$refs.rowEditModal.show($event.id)"
+        @edit-row="openRowEditModal($event.id)"
         @refresh="$emit('refresh', $event)"
       ></KanbanViewStack>
       <KanbanViewStack
@@ -46,7 +46,7 @@
         :read-only="readOnly"
         :store-prefix="storePrefix"
         @create-row="openCreateRowModal"
-        @edit-row="$refs.rowEditModal.show($event.id)"
+        @edit-row="openRowEditModal($event.id)"
         @refresh="$emit('refresh', $event)"
       ></KanbanViewStack>
       <a
@@ -89,6 +89,7 @@
       :rows="allRows"
       :read-only="false"
       :show-hidden-fields="showHiddenFieldsInRowModal"
+      @hidden="$emit('selected-row', undefined)"
       @toggle-hidden-fields-visibility="
         showHiddenFieldsInRowModal = !showHiddenFieldsInRowModal
       "
@@ -108,6 +109,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { clone } from '@baserow/modules/core/utils/object'
+import { populateRow } from '@baserow/modules/database/store/view/grid'
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import viewHelpers from '@baserow/modules/database/mixins/viewHelpers'
 import {
@@ -153,10 +155,13 @@ export default {
       type: Boolean,
       required: true,
     },
+    row: {
+      validator: (prop) => typeof prop === 'object' || prop === null,
+      required: true,
+    },
   },
   data() {
     return {
-      row: {},
       showHiddenFieldsInRowModal: false,
     }
   },
@@ -210,7 +215,22 @@ export default {
       }),
     }
   },
+  mounted() {
+    if (this.row !== null) {
+      const rowClone = populateRow(clone(this.row))
+      this.$refs.rowEditModal.show(this.row.id, rowClone)
+    }
+  },
   methods: {
+    /**
+     * When the row edit modal is opened we notifiy
+     * the Table component that a new row has been selected,
+     * such that we can update the path to include the row id.
+     */
+    openRowEditModal(rowId) {
+      this.$refs.rowEditModal.show(rowId)
+      this.$emit('selected-row', rowId)
+    },
     openCreateRowModal(event) {
       const defaults = {}
       if (event.option !== null) {

web-frontend/modules/database/components/view/gallery/GalleryView.vue

@@ -79,6 +79,7 @@
       :rows="allRows"
       :read-only="false"
       :show-hidden-fields="showHiddenFieldsInRowModal"
+      @hidden="$emit('selected-row', undefined)"
       @toggle-hidden-fields-visibility="
         showHiddenFieldsInRowModal = !showHiddenFieldsInRowModal
       "
@@ -115,6 +116,8 @@ import RowEditModal from '@baserow/modules/database/components/row/RowEditModal'
 import bufferedRowsDragAndDrop from '@baserow/modules/database/mixins/bufferedRowsDragAndDrop'
 import viewHelpers from '@baserow/modules/database/mixins/viewHelpers'
 import viewDecoration from '@baserow/modules/database/mixins/viewDecoration'
+import { populateRow } from '@baserow/modules/database/store/view/grid'
+import { clone } from '@baserow/modules/core/utils/object'
 
 export default {
   name: 'GalleryView',
@@ -145,6 +148,10 @@ export default {
       type: String,
       required: true,
     },
+    row: {
+      validator: (prop) => typeof prop === 'object' || prop === null,
+      required: true,
+    },
   },
   data() {
     return {
@@ -264,6 +271,11 @@ export default {
       }
     }
     this.$refs.scroll.addEventListener('scroll', this.$el.scrollEvent)
+
+    if (this.row !== null) {
+      const rowClone = populateRow(clone(this.row))
+      this.$refs.rowEditModal.show(this.row.id, rowClone)
+    }
   },
   beforeDestroy() {
     this.$el.resizeObserver.unobserve(this.$el)
@@ -393,6 +405,7 @@ export default {
      */
     rowClick(row) {
       this.$refs.rowEditModal.show(row.id)
+      this.$emit('selected-row', row.id)
     },
     /**
      * Calls the fieldCreated callback and shows the hidden fields section

web-frontend/test/unit/database/components/view/gallery/galleryViewDecoration.spec.js

@@ -166,6 +166,7 @@ describe('GalleryView component with decoration', () => {
       fields,
       readOnly: false,
       storePrefix: 'page/',
+      row: null,
     })
 
     expect(wrapper1.element).toMatchSnapshot()
@@ -214,6 +215,7 @@ describe('GalleryView component with decoration', () => {
       fields,
       readOnly: false,
       storePrefix: 'page/',
+      row: null,
     })
 
     expect(wrapper1.element).toMatchSnapshot()
@@ -243,6 +245,7 @@ describe('GalleryView component with decoration', () => {
       fields,
       readOnly: false,
       storePrefix: 'page/',
+      row: null,
     })
 
     expect(wrapper1.element).toMatchSnapshot()