Add a 'create new' link in the footer of the DataSourceDropdown. (baserow#4349)

* Adding a 'create new data source' link in the footer of the DataSourceDropdown.

* Force a DataSourceCreateEditModal remount by setting a unique key. After an updated event has been emitted, we don't want to edit in the subsequent 'add new' click.

Author: picklepete

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 {