fix (grid view): group by flickering at every change (baserow#5043)

* revert: undo unnecessary frontend changes from f6a7d30

Revert all frontend changes introduced in "fix: bug in public view with
hidden group by" (f6a7d30). The backend changes from that commit are
kept as they are the actual fix for the public view bug.

The reverted frontend changes caused a regression where group bys would
flicker (disappear and reappear) when changing the group by order,
because activeGroupBys was being cleared at the start of every refresh.

* fix: public view crash when group by is added or removed

Add ViewType.forceViewRefresh() method that handles updating the view,
fields, and (for grid views) activeGroupBys atomically during a
force_view_refresh realtime event. This prevents components from
accessing fields that have been removed or haven't been added yet.

Also fix LinkRowFieldType.isEqual crashing with null/undefined values
when rows have no linked items.

* fix: inconsistency in counting hidden fields in grid view

* fix issue deleting/restoring group bys

Author: silvestrid

web-frontend/justfile

@@ -102,10 +102,10 @@ test *ARGS:
 ci-test:
     yarn test:coverage
 
-# Update Jest snapshots
+# Update Vitest snapshots
 [group('3 - testing')]
 update-snapshots:
-    yarn test --update
+    EXTRA_VITEST_PARAMS="--update" yarn test
 
 # =============================================================================
 # Development

web-frontend/modules/database/components/field/DuplicateFieldModal.vue

@@ -122,6 +122,7 @@ export default {
             position: 'right',
             fromField: this.fromField,
             undoRedoActionGroupId: this.actionGroupId,
+            visible: true,
           })
           this.onDuplicationEnd()
         }

web-frontend/modules/database/components/field/InsertFieldContext.vue

@@ -59,6 +59,7 @@ export default {
         position: this.position,
         fromField: this.fromField,
         undoRedoActionGroupId,
+        visible: true, // when inserting a new field, it should always be visible
       })
     },
     toggle(ref, position) {

web-frontend/modules/database/components/view/grid/GridViewGroup.vue

@@ -2,7 +2,12 @@
   <div class="grid-view__group" v-bind="$attrs">
     <div class="grid-view__group-cell">
       <div class="grid-view__group-value">
-        <component :is="groupByComponent" :field="field" :value="value" />
+        <component
+          :is="groupByComponent"
+          v-if="groupByComponent"
+          :field="field"
+          :value="value"
+        />
       </div>
       <div v-if="count > 0" class="grid-view__group-count">
         {{ count }}
@@ -19,8 +24,8 @@ export default {
       type: Object,
       required: true,
     },
-    field: {
-      type: Object,
+    allFieldsInTable: {
+      type: Array,
       required: true,
     },
     value: {
@@ -33,9 +38,24 @@ export default {
     },
   },
   computed: {
+    field() {
+      return this.getField(this.allFieldsInTable, this.groupBy)
+    },
     groupByComponent() {
-      const fieldType = this.$registry.get('field', this.field.type)
-      return fieldType.getGroupByComponent(this.field)
+      if (!this.field) {
+        return null
+      }
+      return this.getGroupByComponent(this.field, this)
+    },
+  },
+  methods: {
+    getField(allFieldsInTable, groupBy) {
+      const field = allFieldsInTable.find((f) => f.id === groupBy.field)
+      return field
+    },
+    getGroupByComponent(field, parent) {
+      const fieldType = parent.$registry.get('field', field.type)
+      return fieldType.getGroupByComponent(field)
     },
   },
 }

web-frontend/modules/database/components/view/grid/GridViewGroups.vue

@@ -20,7 +20,7 @@
       >
         <GridViewGroup
           :group-by="groupBy"
-          :field="getGroupByField(groupBy)"
+          :all-fields-in-table="allFieldsInTable"
           :value="groupSpan.value"
           :count="groupSpan.count"
         ></GridViewGroup>
@@ -40,6 +40,14 @@ export default {
   components: { GridViewGroup },
   mixins: [gridViewHelpers],
   props: {
+    /**
+     * All the fields in the table, regardless of the visibility, or whether they
+     * should be rendered.
+     */
+    allFieldsInTable: {
+      type: Array,
+      required: true,
+    },
     groupByValueSets: {
       type: Array,
       required: true,

web-frontend/modules/database/components/view/grid/GridViewHead.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="grid-view__head">
     <div
-      v-for="{ groupBy, field } in activeGroupBysWithFields"
+      v-for="groupBy in includeGroupBy ? activeGroupBys : []"
       :key="'field-group-' + groupBy.field"
       class="grid-view__head-group"
       :style="{ width: groupBy.width + 'px' }"
+      :set="field = $options.methods.getField(allFieldsInTable, groupBy)"
     >
-      <div class="grid-view__group-cell">
+      <div v-if="field" class="grid-view__group-cell">
         <div class="grid-view__group-name">
           {{ field.name }}
         </div>
@@ -150,15 +151,6 @@ export default {
     },
   },
   emits: ['dragging', 'field-created', 'refresh'],
-  computed: {
-    activeGroupBysWithFields() {
-      if (!this.includeGroupBy) return []
-      return this.activeGroupBys.map((groupBy) => ({
-        groupBy,
-        field: this.getGroupByField(groupBy),
-      }))
-    },
-  },
   methods: {
     /**
      * After newField is created pressing "insert left" or "insert right" button,
@@ -171,6 +163,7 @@ export default {
       newField,
       fromField,
       undoRedoActionGroupId = null,
+      visible = null,
     }) {
       try {
         await this.$store.dispatch(
@@ -181,6 +174,7 @@ export default {
             fromField,
             undoRedoActionGroupId,
             readOnly: this.readOnly,
+            visible,
           }
         )
       } catch (error) {
@@ -200,6 +194,10 @@ export default {
     onShownCreateFieldContext() {
       this.$refs.createFieldContext.showFieldTypesDropdown(this.$el)
     },
+    getField(allFieldsInTable, groupBy) {
+      const field = allFieldsInTable.find((f) => f.id === groupBy.field)
+      return field
+    },
   },
 }
 </script>

web-frontend/modules/database/components/view/grid/GridViewHide.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { filterHiddenFieldsFunction } from '@baserow/modules/database/utils/view'
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import ViewFieldsContext from '@baserow/modules/database/components/view/ViewFieldsContext'
 
@@ -60,29 +60,15 @@ export default {
   },
   computed: {
     hiddenFields() {
-      return this.fields.filter((field) => {
-        const exists = Object.prototype.hasOwnProperty.call(
-          this.fieldOptions,
-          field.id
-        )
-        return !exists || (exists && this.fieldOptions[field.id].hidden)
-      })
+      const isFieldHidden = filterHiddenFieldsFunction(this.fieldOptions)
+      return this.fields.filter((field) => isFieldHidden(field))
     },
     fieldOptions() {
       return this.$store.getters[
         this.storePrefix + 'view/grid/getAllFieldOptions'
       ]
     },
   },
-  /*beforeCreate() {
-    this.$options.computed = {
-      ...(this.$options.computed || {}),
-      ...mapGetters({
-        fieldOptions:
-          this.$options.propsData.storePrefix + 'view/grid/getAllFieldOptions',
-      }),
-    }
-  },*/
   methods: {
     async updateAllFieldOptions({ newFieldOptions, oldFieldOptions }) {
       try {

web-frontend/modules/database/components/view/grid/GridViewSection.vue

@@ -75,6 +75,7 @@
           ></GridViewPlaceholder>
           <GridViewGroups
             v-if="includeGroupBy && activeGroupBys.length > 0"
+            :all-fields-in-table="allFieldsInTable"
             :group-by-value-sets="groupByValueSets"
             :store-prefix="storePrefix"
           ></GridViewGroups>
@@ -422,7 +423,12 @@ export default {
               return false
             }
             return groupBys.slice(0, groupByIndex + 1).every((groupBy) => {
-              const groupByField = this.getGroupByField(groupBy)
+              const groupByField = this.allFieldsInTable.find(
+                (f) => f.id === groupBy.field
+              )
+              if (!groupByField) {
+                return false
+              }
               const groupByFieldType = this.$registry.get(
                 'field',
                 groupByField.type
@@ -444,9 +450,10 @@ export default {
               (metadata[`field_${groupBy.field}`] || []).find((entry) => {
                 const groupByFields = groupBys
                   .slice(0, groupByIndex + 1)
-                  .map((groupBy) => {
-                    return this.getGroupByField(groupBy)
-                  })
+                  .map((groupBy) =>
+                    this.allFieldsInTable.find((f) => f.id === groupBy.field)
+                  )
+                  .filter(Boolean)
                 return fieldValuesAreEqualInObjects(
                   groupByFields,
                   this.$registry,

web-frontend/modules/database/components/view/grid/GroupByFieldLinkRow.vue

@@ -114,7 +114,6 @@ import RowCardFieldEmail from '@baserow/modules/database/components/card/RowCard
 import RowCardFieldFile from '@baserow/modules/database/components/card/RowCardFieldFile'
 import RowCardFieldFormula from '@baserow/modules/database/components/card/RowCardFieldFormula'
 import RowCardFieldLinkRow from '@baserow/modules/database/components/card/RowCardFieldLinkRow'
-import GroupByFieldLinkRow from '@baserow/modules/database/components/view/grid/GroupByFieldLinkRow'
 import RowCardFieldMultipleSelect from '@baserow/modules/database/components/card/RowCardFieldMultipleSelect'
 import RowCardFieldNumber from '@baserow/modules/database/components/card/RowCardFieldNumber'
 import RowCardFieldRating from '@baserow/modules/database/components/card/RowCardFieldRating'
@@ -1361,10 +1360,6 @@ export class LinkRowFieldType extends FieldType {
     return RowCardFieldLinkRow
   }
 
-  getGroupByComponent() {
-    return GroupByFieldLinkRow
-  }
-
   getRowHistoryEntryComponent() {
     return RowHistoryFieldLinkRow
   }
@@ -1392,8 +1387,8 @@ export class LinkRowFieldType extends FieldType {
   }
 
   isEqual(field, value1, value2) {
-    const value1Ids = value1.map((v) => v.id)
-    const value2Ids = value2.map((v) => v.id)
+    const value1Ids = (value1 || []).map((v) => v.id)
+    const value2Ids = (value2 || []).map((v) => v.id)
 
     return _.isEqual(value1Ids, value2Ids)
   }
@@ -4274,14 +4269,6 @@ export class FormulaFieldType extends mix(
     return RowCardFieldFormula
   }
 
-  getGroupByComponent(field) {
-    const formulaType = this.getFormulaType(field)
-    if (formulaType) {
-      return formulaType.getCardComponent(field)
-    }
-    return this.getCardComponent(field)
-  }
-
   getFilterInputComponent(field, filterType) {
     return this.getFormulaType(field)?.getFilterInputComponent(
       field,