Workflow action perf issues for create/update action with many fields (baserow#4302)

* improve performances for workflow automations

* Improve performances of local baserow upsert form

* Revert to the old placeholder string.

---------

Co-authored-by: peter_baserow <peter@baserow.io>

Author: jrmi

backend/src/baserow/core/populate.py

@@ -14,6 +14,11 @@ def load_test_data():
     print("Add basic users...")
     user_handler = UserHandler()
 
+    # Allow to import any external archive
+    core_settings = CoreHandler().get_settings()
+    core_settings.verify_import_signature = False
+    core_settings.save()
+
     for i in range(3):
         # Create main admin
         email = f"admin{i + 1}@baserow.io" if i > 0 else "admin@baserow.io"

changelog/entries/unreleased/bug/improve_performances_when_editing_a_createupdate_workflow_ac.json

@@ -0,0 +1,9 @@
+{
+    "type": "bug",
+    "message": "Improve performances when editing a create/update workflow action with a lot of table fields",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2025-11-20"
+}

web-frontend/modules/core/assets/scss/components/integrations/local_baserow/local_baserow_form.scss

@@ -8,3 +8,11 @@
     flex: 1 0 auto;
   }
 }
+
+.field-mapping-form__placeholder {
+  width: 100%;
+  height: 36px;
+  background-color: $white;
+
+  @include rounded($rounded-md);
+}

web-frontend/modules/core/components/InViewport.vue

@@ -0,0 +1,32 @@
+<template>
+  <div ref="rootEl">
+    <template v-if="isVisible">
+      <slot />
+    </template>
+    <template v-else><slot name="placeholder">...</slot></template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const isVisible = ref(false)
+const rootEl = ref(null)
+let observer = null
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      // Update visibility based on intersection
+      if (entries[0].isIntersecting) isVisible.value = true
+    },
+    { threshold: 0.1 }
+  )
+
+  if (rootEl.value) observer.observe(rootEl.value)
+})
+
+onBeforeUnmount(() => {
+  if (observer && rootEl.value) observer.unobserve(rootEl.value)
+})
+</script>

web-frontend/modules/integrations/localBaserow/components/services/FieldMapping.vue

@@ -2,12 +2,7 @@
   <Context :overflow-scroll="true" :max-height-if-outside-viewport="true">
     <ul class="context__menu">
       <li class="context__menu-item">
-        <a
-          class="context__menu-item-link"
-          @click.prevent="
-            handleEditClick({ enabled: !fieldMapping.enabled, value: '' })
-          "
-        >
+        <a class="context__menu-item-link" @click.prevent="handleEditClick()">
           <i class="context__menu-item-icon" :class="enabledClass"></i>
           {{ toggleEnabledText }}
         </a>
@@ -39,8 +34,11 @@ export default {
     },
   },
   methods: {
-    handleEditClick(change) {
-      this.$emit('edit', change)
+    handleEditClick() {
+      this.$emit(
+        'edit',
+        this.fieldMapping.enabled ? undefined : { enabled: true, formula: '' }
+      )
       this.hide()
     },
   },

web-frontend/modules/integrations/localBaserow/components/services/FieldMappingContext.vue

@@ -1,116 +1,107 @@
 <template>
-  <div>
-    <FormGroup
-      v-for="field in filteredFields"
-      :key="field.id"
-      small-label
-      :label="field.name"
-      required
-      class="margin-bottom-2"
-    >
-      <FieldMapping
-        :field-mapping="field.mapping"
-        :placeholder="$t('upsertRowWorkflowActionForm.fieldMappingPlaceholder')"
-        @change="updateFieldMapping(field.id, $event)"
-      />
+  <div v-if="mapping?.enabled">
+    <FormGroup small-label :label="field.name" required class="margin-bottom-2">
+      <InViewport>
+        <InjectedFormulaInput
+          :key="`${field.id} ${mapping.enabled}`"
+          v-model="fieldValue"
+          :disabled="!mapping.enabled"
+          :placeholder="
+            $t('upsertRowWorkflowActionForm.fieldMappingPlaceholder')
+          "
+        />
+        <template #placeholder>
+          <div class="field-mapping-form__placeholder" />
+        </template>
+      </InViewport>
       <template #after-input>
-        <div :ref="`editFieldMappingOpener-${field.id}`">
+        <div :ref="`editFieldMappingOpener`">
           <ButtonIcon
             type="secondary"
             icon="iconoir-more-vert"
-            @click="openContext(field)"
+            @click="openContext()"
           />
         </div>
         <FieldMappingContext
-          :ref="`fieldMappingContext-${field.id}`"
-          :field-mapping="field.mapping"
-          @edit="updateFieldMapping(field.id, $event)"
+          :ref="`fieldMappingContext`"
+          :field-mapping="mapping"
+          @edit="$emit('update', $event)"
         />
       </template>
     </FormGroup>
   </div>
+  <div v-else>
+    <FormGroup small-label :label="field.name" required class="margin-bottom-2">
+      <Button type="secondary" @click="$emit('update', defaultEmptyFormula())">
+        {{ $t('fieldMappingContext.enableField') }}
+      </Button>
+    </FormGroup>
+  </div>
 </template>
 
 <script>
-import FieldMapping from '@baserow/modules/integrations/localBaserow/components/services/FieldMapping'
 import FieldMappingContext from '@baserow/modules/integrations/localBaserow/components/services/FieldMappingContext'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
+import InViewport from '@baserow/modules/core/components/InViewport'
 
 export default {
   name: 'FieldMappingForm',
-  components: { FieldMappingContext, FieldMapping },
+  components: { FieldMappingContext, InjectedFormulaInput, InViewport },
   inject: ['workspace'],
   props: {
-    value: {
-      type: Array,
+    field: {
+      type: Object,
       required: true,
     },
-    fields: {
-      type: Array,
-      required: true,
+    mapping: {
+      type: Object,
+      required: false,
+      default: undefined,
     },
   },
+  data() {
+    return {
+      localValue: this.mapping?.value,
+      debounceTimeout: null,
+    }
+  },
   computed: {
-    filteredFields() {
-      return this.fields
-        .map((field) => ({
-          ...field,
-          mapping: this.getFieldMapping(field.id),
-        }))
-        .filter((field) => this.canWriteFieldValues(field))
+    fieldValue: {
+      get() {
+        return this.localValue
+      },
+      set(value) {
+        this.localValue = value
+
+        // Debouncing value update as it produces performance issues when they are
+        // a lot of fields
+        clearTimeout(this.debounceTimeout)
+        this.debounceTimeout = setTimeout(() => {
+          this.$emit('update', { value })
+        }, 500)
+      },
+    },
+  },
+  watch: {
+    'mapping.value'(newValue) {
+      this.localValue = newValue
     },
   },
   methods: {
-    openContext(field) {
-      this.$refs[`fieldMappingContext-${field.id}`][0].toggle(
-        this.$refs[`editFieldMappingOpener-${field.id}`][0],
+    defaultEmptyFormula() {
+      return {
+        enabled: true,
+        value: { formula: '""' },
+      }
+    },
+    openContext() {
+      this.$refs.fieldMappingContext.toggle(
+        this.$refs.editFieldMappingOpener,
         'bottom',
         'left',
         4
       )
     },
-    canWriteFieldValues(field) {
-      return this.$hasPermission(
-        'database.table.field.write_values',
-        field,
-        this.workspace.id
-      )
-    },
-    getFieldMapping(fieldId) {
-      return (
-        this.value.find(
-          (fieldMapping) => fieldMapping.field_id === fieldId
-        ) || { enabled: true, field_id: fieldId, value: {} }
-      )
-    },
-    updateFieldMapping(fieldId, changes) {
-      const existingMapping = this.value.some(
-        ({ field_id: existingId }) => existingId === fieldId
-      )
-      const existingFieldIds = this.fields.map(({ id }) => id)
-
-      // If the field has been removed in the meantime we want to ignore it
-      const filteredValue = this.value.filter(({ field_id: fieldId }) =>
-        existingFieldIds.includes(fieldId)
-      )
-
-      if (existingMapping) {
-        const newMapping = filteredValue.map((fieldMapping) => {
-          if (fieldMapping.field_id === fieldId) {
-            return { ...fieldMapping, ...changes }
-          }
-          return fieldMapping
-        })
-        this.$emit('input', newMapping)
-      } else {
-        const newMapping = filteredValue
-        newMapping.push({
-          enabled: true,
-          field_id: fieldId,
-          ...changes,
-        })
-        this.$emit('input', newMapping)
-      }
-    },
   },
 }
 </script>