Improve the user source creation experience.

changelog/entries/unreleased/feature/introduced_a_shortcut_in_the_login_form_configuration_so_tha.json

@@ -0,0 +1,8 @@
+{
+    "type": "feature",
+    "message": "Introduced a shortcut in the Login form configuration so that it's easier to create a new user source.",
+    "domain": "builder",
+    "issue_number": null,
+    "bullet_points": [],
+    "created_at": "2025-03-14"
+}

enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue

@@ -12,14 +12,11 @@
       required
       class="margin-bottom-2"
     >
-      <Dropdown v-model="values.user_source_id" :show-search="false">
-        <DropdownItem
-          v-for="userSource in userSources"
-          :key="userSource.id"
-          :name="userSource.name"
-          :value="userSource.id"
-        />
-      </Dropdown>
+      <UserSourceDropdown
+        v-model="values.user_source_id"
+        :builder="builder"
+        :user-sources="userSources"
+      ></UserSourceDropdown>
     </FormGroup>
     <CustomStyle
       v-model="values.styles"
@@ -45,10 +42,12 @@
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
 import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
+import UserSourceDropdown from '@baserow/modules/builder/components/userSource/UserSourceDropdown'
 
 export default {
   name: 'AuthFormElementForm',
   components: {
+    UserSourceDropdown,
     CustomStyle,
     InjectedFormulaInput,
   },
@@ -69,9 +68,5 @@ export default {
       return this.$store.getters['userSource/getUserSources'](this.builder)
     },
   },
-  methods: {},
-  validations() {
-    return {}
-  },
 }
 </script>

web-frontend/modules/builder/components/settings/BuilderSettingsModal.vue

@@ -32,7 +32,7 @@
         :builder="builder"
         :hide-after-create="hideAfterCreate"
         :force-display-form="displaySelectedSettingForm"
-        @hide-modal="hide()"
+        @hide-modal="emitCreatedRecord($event)"
       ></component>
     </template>
   </Modal>
@@ -117,6 +117,17 @@ export default {
 
       return modal.methods.show.call(this, ...args)
     },
+    /**
+     * If this modal is being used with the `hideAfterCreate` prop set to `true`,
+     * then once a record has been created, we want to hide the modal, and then
+     * emit the newly created record ID so that it can be used by the component
+     * implementing this modal.
+     * @param createdRecordId - The ID of the newly created record.
+     */
+    emitCreatedRecord(createdRecordId) {
+      this.hide()
+      this.$emit('created', createdRecordId)
+    },
   },
 }
 </script>

web-frontend/modules/builder/components/settings/UserSourcesSettings.vue

@@ -194,7 +194,6 @@ export default {
         this.hideForm()
         // immediately select this user source to edit it.
         this.editedUserSource = createdUserSource
-        this.hideModalIfRequired()
       } catch (error) {
         this.handleError(error)
       }
@@ -212,6 +211,11 @@ export default {
           userSourceId: this.editedUserSource.id,
           values: clone(newValues),
         })
+        // If the builder settings modal is set to hide after create, normally
+        // we would have hidden the modal and shared the record ID after the user
+        // source was created, but in this settings component we'll share the ID
+        // after the update, when there's a better change of having a configure source.
+        this.hideModalIfRequired(this.editedUserSource.id)
         this.hideForm()
       } catch (error) {
         // Restore the previously saved values from the store

web-frontend/modules/builder/components/settings/mixins/builderSetting.js

@@ -32,9 +32,9 @@ export default {
     }
   },
   methods: {
-    hideModalIfRequired() {
+    hideModalIfRequired(createdRecordId) {
       if (this.hideAfterCreate) {
-        this.$emit('hide-modal')
+        this.$emit('hide-modal', createdRecordId)
       }
     },
   },

web-frontend/modules/builder/components/userSource/UserSourceDropdown.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <Dropdown
+      :value="value"
+      fixed-items
+      show-footer
+      :show-search="false"
+      @input="$emit('input', $event)"
+    >
+      <DropdownItem
+        v-for="userSource in userSources"
+        :key="userSource.id"
+        :name="userSource.name"
+        :value="userSource.id"
+      />
+      <template #emptyState>
+        <slot name="emptyState">
+          {{ $t('userSourceDropdown.noUserSources') }}
+        </slot>
+      </template>
+      <template #footer>
+        <a class="select__footer-button" @click="openUserSettings">
+          <i class="iconoir-plus"></i>
+          {{ $t('userSourceDropdown.addUserSource') }}
+        </a>
+        <BuilderSettingsModal
+          ref="userSourcesSettingsModal"
+          hide-after-create
+          :builder="builder"
+          @created="$emit('input', $event)"
+        />
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+import BuilderSettingsModal from '@baserow/modules/builder/components/settings/BuilderSettingsModal'
+import { UserSourcesBuilderSettingsType } from '@baserow/modules/builder/builderSettingTypes'
+
+export default {
+  name: 'UserSourceDropdown',
+  components: { BuilderSettingsModal },
+  props: {
+    value: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    builder: {
+      type: Object,
+      required: true,
+    },
+    userSources: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    openUserSettings() {
+      this.$refs.userSourcesSettingsModal.show(
+        UserSourcesBuilderSettingsType.getType(),
+        true
+      )
+    },
+  },
+}
+</script>

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

@@ -956,6 +956,11 @@
     "label": "Property",
     "noProperties": "No properties available"
   },
+  "userSourceDropdown": {
+    "label": "User source",
+    "addUserSource": "Add new user source",
+    "noUserSources": "No user sources available"
+  },
   "dataSourceDropdown": {
     "label": "Data source",
     "noDataSources": "No data sources available",