[pull] develop from baserow:develop

backend/src/baserow/contrib/database/api/fields/serializers.py

@@ -8,6 +8,7 @@
 
 from drf_spectacular.types import OpenApiTypes
 from drf_spectacular.utils import extend_schema_field
+from loguru import logger
 from rest_framework import serializers
 from rest_framework.serializers import SkipField, empty
 
@@ -227,7 +228,14 @@ def __init__(self, child, *args, **kwargs):
         self.fields["value"] = child
 
     def to_representation(self, instance):
-        return super().to_representation(instance)
+        # Note this is workaround for https://github.com/baserow/baserow/issues/4424
+        # Once we have a proper way to handle this, we can remove this
+        # and return the super().to_representation(instance) directly.
+        try:
+            return super().to_representation(instance)
+        except Exception:
+            logger.exception("Mismatch between field type and value type")
+        return []
 
 
 class LinkRowValueSerializer(serializers.Serializer):

changelog/entries/unreleased/bug/4424_do_not_fail_hard_when_arrayvalueserializer_throws_conversion.json

@@ -0,0 +1,9 @@
+{
+    "type": "bug",
+    "message": "Do not fail hard when ArrayValueSerializer throws ConversionSyntax exception",
+    "issue_origin": "github",
+    "issue_number": 4424,
+    "domain": "database",
+    "bullet_points": [],
+    "created_at": "2025-12-11"
+}

changelog/entries/unreleased/feature/added_a_create_new_data_source_link_at_the_bottom_of_iterate.json

@@ -0,0 +1,9 @@
+{
+    "type": "feature",
+    "message": "Added a 'Create new data source' link at the bottom of iterate/table element dropdowns for quicker data source creation.",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2025-11-28"
+}

web-frontend/modules/builder/components/dataSource/DataSourceCreateEditModal.vue

@@ -174,11 +174,12 @@ export default {
             )
           )
 
-          await this.actionUpdateDataSource({
+          const updatedDataSource = await this.actionUpdateDataSource({
             page: this.dataSourcePage,
             dataSourceId: this.dataSource.id,
             values: differences,
           })
+          this.$emit('updated', updatedDataSource)
           // Send data source update element event
           this.$store.dispatch('element/emitElementEvent', {
             event: ELEMENT_EVENTS.DATA_SOURCE_AFTER_UPDATE,

web-frontend/modules/builder/components/dataSource/DataSourceDropdown.vue

@@ -5,6 +5,7 @@
     </p>
     <Dropdown
       :value="value"
+      show-footer
       class="data-source-dropdown"
       @input="$emit('input', $event)"
     >
@@ -37,13 +38,27 @@
           }}
         </slot>
       </template>
+      <template #footer>
+        <a class="select__footer-button" @click="openDataSourceModal">
+          <i class="iconoir-plus"></i>
+          {{ $t('dataSourceDropdown.addNew') }}
+        </a>
+      </template>
     </Dropdown>
+    <DataSourceCreateEditModal
+      :key="modalKey"
+      ref="dataSourceCreateEditModal"
+      @updated="onDataSourceUpdated"
+    />
   </div>
 </template>
 
 <script>
+import DataSourceCreateEditModal from '@baserow/modules/builder/components/dataSource/DataSourceCreateEditModal'
+
 export default {
   name: 'DataSourceDropdown',
+  components: { DataSourceCreateEditModal },
   props: {
     value: {
       type: Number,
@@ -65,6 +80,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      modalKey: 0,
+    }
+  },
   computed: {
     isOnSharedPage() {
       return this.localDataSources === null
@@ -91,6 +111,24 @@ export default {
         : this.$t('integrationsCommon.singleRow')
       return `${dataSource.name} (${suffix})`
     },
+    openDataSourceModal() {
+      this.$refs.dataSourceCreateEditModal.show()
+    },
+    /**
+     * When a data source is updated (i.e. the user has created the record,
+     * *and* updated it), we want to check if it has a valid schema. If it does,
+     * we emit the input event so that the dropdown updates to select the newly
+     * created data source.
+     * @param dataSource - The updated data source.
+     */
+    onDataSourceUpdated(dataSource) {
+      const serviceType =
+        dataSource.type && this.$registry.get('service', dataSource.type)
+      if (serviceType?.getDataSchema(dataSource)) {
+        this.modalKey++
+        this.$emit('input', dataSource.id)
+      }
+    },
   },
 }
 </script>

web-frontend/modules/builder/locales/en.json

@@ -996,7 +996,8 @@
     "noDataSources": "No data sources available",
     "noSharedDataSources": "No shared data sources available",
     "shared": "shared",
-    "pageOnly": "this page"
+    "pageOnly": "this page",
+    "addNew": "Add new data source"
   },
   "multiPageContainerElementForm": {
     "pagePosition": "Position",

web-frontend/modules/builder/store/dataSource.js

@@ -140,11 +140,13 @@ const actions = {
         dataSource,
         values: updatedDataSource,
       })
+      return updatedDataSource
     } catch (error) {
       await dispatch('forceUpdate', { page, dataSource, values: oldValues })
       throw error
+    } finally {
+      commit('SET_LOADING', { page, value: false })
     }
-    commit('SET_LOADING', { page, value: false })
   },
 
   async debouncedUpdate(

web-frontend/modules/core/assets/scss/components/select.scss

@@ -277,7 +277,7 @@
   margin-bottom: 4px;
 
   @include rounded($rounded);
-  @include fixed-height(36px, 14px);
+  @include fixed-height(36px, 13px);
   @include flex-align-items(6px);
 
   &:hover {