Correctly handle trashed fields in chart config form

enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationGroupByForm.vue

@@ -6,6 +6,7 @@
     <Dropdown
       :value="aggregationGroupBy"
       :show-search="true"
+      :error="v$.aggregationGroupBy?.$error || false"
       fixed-items
       @change="groupByChangedByUser($event)"
     >
@@ -22,6 +23,15 @@
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core'
+
+const includesIfSet = (array) => (value) => {
+  if (value === null || value === undefined) {
+    return true
+  }
+  return array.includes(value)
+}
+
 export default {
   name: 'AggregationGroupByForm',
   props: {
@@ -34,6 +44,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() }
+  },
   data() {
     return {
       aggregationGroupBy: 'none',
@@ -70,6 +83,22 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    this.v$.$touch()
+  },
+  validations() {
+    const self = this
+    return {
+      aggregationGroupBy: {
+        isValidGroupBy: (value) => {
+          const validGroupByValues = self.groupByOptions.map(
+            (item) => item.value
+          )
+          return includesIfSet(validGroupByValues)(value)
+        },
+      },
+    }
+  },
   methods: {
     groupByChangedByUser(value) {
       this.aggregationGroupBy = value

enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationSeriesForm.vue

@@ -33,7 +33,6 @@
         <Dropdown
           v-model="values.field_id"
           :error="fieldHasErrors('field_id')"
-          :disabled="fieldsAvailableForSelection.length === 0"
           @change="v$.values.field_id.$touch"
         >
           <DropdownItem
@@ -188,7 +187,10 @@ export default {
       const field = this.tableFields.find(
         (field) => field.id === this.values.field_id
       )
-      if (field && !aggType.fieldIsCompatible(field)) {
+      if (
+        (field && !aggType.fieldIsCompatible(field)) ||
+        this.fieldHasErrors('field_id')
+      ) {
         this.values.field_id = null
       }
       this.v$.values.aggregation_type.$touch()

enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/GroupedAggregateRowsDataSourceForm.vue

@@ -220,7 +220,12 @@ export default {
     },
     allowedSortReferences() {
       const seriesSortReferences = this.values.aggregation_series
-        .filter((item) => item.field_id && item.aggregation_type)
+        .filter(
+          (item) =>
+            item.field_id &&
+            item.aggregation_type &&
+            this.getTableFieldById(item.field_id)
+        )
         .map((item) => {
           const field = this.getTableFieldById(item.field_id)
           return {
@@ -232,19 +237,25 @@ export default {
             )})`,
           }
         })
-      const groupBySortReferences = this.values.aggregation_group_bys.map(
-        (item) => {
+      const groupBySortReferences = this.values.aggregation_group_bys.reduce(
+        (acc, item) => {
           const field =
             item.field_id === null
               ? this.primaryTableField
               : this.getTableFieldById(item.field_id)
-          return {
-            sort_on: 'GROUP_BY',
-            reference: `field_${field.id}`,
-            field,
-            name: field.name,
+
+          if (field !== undefined) {
+            acc.push({
+              sort_on: 'GROUP_BY',
+              reference: `field_${field.id}`,
+              field,
+              name: field.name,
+            })
           }
-        }
+
+          return acc
+        },
+        []
       )
       return seriesSortReferences.concat(groupBySortReferences)
     },