[pull] develop from baserow:develop

enterprise/web-frontend/modules/baserow_enterprise/components/dateDependency/DateDependencyFieldPicker.vue

@@ -7,16 +7,15 @@
     :error="hasError"
   >
     <Dropdown
+      ref="dropdown"
       :value="modelValue"
-      :show-search="true"
-      :fixed-items="true"
+      show-search
+      fixed-items
+      show-footer
       :disabled="disabled"
       :error="hasError"
       size="regular"
-      @update:model-value="
-        (isAddNew($event) ? $emit('add-new', $event) : null,
-        $emit('update:modelValue', $event))
-      "
+      @update:model-value="$emit('update:modelValue', $event)"
     >
       <DropdownItem
         v-for="r in fields"
@@ -26,12 +25,16 @@
         :icon="r.icon ? r.icon : r.id ? icon : null"
       ></DropdownItem>
 
-      <DropdownItem
-        v-if="addNew"
-        :name="$t('dateDependencyModal.addNewField')"
-        value="add-new"
-        icon="iconoir-plus"
-      ></DropdownItem>
+      <template #footer>
+        <a
+          class="select__footer-button"
+          :class="{ 'button--loading': loading }"
+          @click="$emit('add-new')"
+        >
+          <i class="iconoir-plus"></i>
+          {{ $t('dateDependencyModal.addNewField') }}
+        </a>
+      </template>
     </Dropdown>
     <template #error>{{ errors[0].$message }}</template>
   </FormGroup>
@@ -83,6 +86,7 @@ export default {
     },
     disabled: { type: Boolean, required: false, default: false },
     addNew: { type: Boolean, required: false, default: false },
+    loading: { type: Boolean, required: false, default: true },
   },
   computed: {
     errorMessageStr() {
@@ -96,8 +100,9 @@ export default {
     },
   },
   methods: {
-    isAddNew(value) {
-      return value === 'add-new'
+    async hideDropdown() {
+      await this.$nextTick()
+      this.$refs.dropdown.hide()
     },
   },
 }

enterprise/web-frontend/modules/baserow_enterprise/components/dateDependency/DateDependencyModal.vue

@@ -39,6 +39,8 @@
               icon="iconoir-calendar"
               :errors="v$.dependency.start_date_field_id.$errors"
               :field-name="$t('dateDependencyModal.startDateFieldLabel')"
+              :disabled="creatingField"
+              :loading="creatingField"
               add-new
               @add-new="addNewField('start_date_field_id')"
             />
@@ -52,6 +54,8 @@
               :errors="v$.dependency.end_date_field_id.$errors"
               icon="iconoir-calendar"
               :field-name="$t('dateDependencyModal.endDateFieldLabel')"
+              :disabled="creatingField"
+              :loading="creatingField"
               add-new
               @add-new="addNewField('end_date_field_id')"
             />
@@ -68,6 +72,8 @@
               icon="iconoir-clock-rotate-right"
               :field-name="$t('dateDependencyModal.durationFieldLabel')"
               :helper-text="$t('dateDependencyModal.durationFieldHint')"
+              :disabled="creatingField"
+              :loading="creatingField"
               add-new
               @add-new="addNewField('duration_field_id')"
             />
@@ -87,6 +93,8 @@
               :helper-text="
                 $t('dateDependencyModal.dependencyLinkrowFieldHint')
               "
+              :disabled="creatingField"
+              :loading="creatingField"
               add-new
               @add-new="addNewField('dependency_linkrow_field_id')"
             />
@@ -154,6 +162,7 @@ export default {
         dependency_linkrow_field_id: null,
       },
       loading: false,
+      creatingField: false,
       fields: [],
       ready: false,
     }
@@ -298,10 +307,16 @@ export default {
       )
       fieldDef.values.name = fieldName
 
-      const fieldCreated = await this.handleCreateField(fieldDef)
-      // fields is not using fields store, so we need to update it manually
-      this.fields.push(fieldCreated)
-      this.dependency[dependencyFieldName] = fieldCreated.id
+      this.creatingField = true
+      try {
+        const fieldCreated = await this.handleCreateField(fieldDef)
+        // fields is not using fields store, so we need to update it manually
+        this.fields.push(fieldCreated)
+        this.dependency[dependencyFieldName] = fieldCreated.id
+      } finally {
+        this.creatingField = false
+        this.$refs[dependencyFieldName].hideDropdown()
+      }
     },
 
     async fetchFields() {

web-frontend/modules/automation/components/settings/AutomationSettingsModal.vue

@@ -17,7 +17,11 @@
         <li v-for="setting in registeredSettings" :key="setting.getType()">
           <a
             class="modal-sidebar__nav-link"
-            :class="{ active: setting === settingSelected }"
+            :class="{
+              active:
+                settingSelected &&
+                setting.getType() === settingSelected.getType(),
+            }"
             @click="settingSelected = setting"
           >
             <i class="modal-sidebar__nav-icon" :class="setting.icon"></i>

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

@@ -16,7 +16,11 @@
           <a
             v-tooltip="setting.isDeactivatedReason({ workspace }) || null"
             class="modal-sidebar__nav-link"
-            :class="{ active: setting === settingSelected }"
+            :class="{
+              active:
+                settingSelected &&
+                setting.getType() === settingSelected.getType(),
+            }"
             @click="onClick(setting)"
           >
             <i class="modal-sidebar__nav-icon" :class="setting.icon"></i>

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

@@ -287,6 +287,13 @@
 
   &.button--loading {
     background-color: $palette-neutral-400;
+
+    &::after {
+      position: relative;
+      top: 0;
+      left: 0;
+      margin: 0;
+    }
   }
 }
 

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

@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+/**
+ * This component is used as a placeholder for routes that do not have a component
+ * but need one to satisfy the router. It renders nothing, allowing the parent route
+ * or router-view to handle the structure. This is particularly useful for nested
+ * routes where a segment is logical but has no specific UI representation itself.
+ */
+export default {
+  name: 'RouterViewPlaceholder',
+}
+</script>

web-frontend/modules/database/components/field/FieldContext.vue

@@ -187,6 +187,8 @@ export default {
       try {
         const { data } = await this.$store.dispatch('field/deleteCall', field)
         this.$emit('delete')
+        this.hide()
+        this.deleteLoading = false
         await this.$store.dispatch('field/forceDelete', field)
         await this.$store.dispatch('field/forceUpdateFields', {
           fields: data.related_fields,
@@ -198,13 +200,14 @@ export default {
       } catch (error) {
         if (error.response && error.response.status === 404) {
           this.$emit('delete')
+          this.hide()
+          this.deleteLoading = false
           await this.$store.dispatch('field/forceDelete', field)
         } else {
           notifyIf(error, 'field')
+          this.deleteLoading = false
         }
       }
-      this.hide()
-      this.deleteLoading = false
     },
   },
 }

web-frontend/modules/database/routes.js

@@ -14,6 +14,10 @@ export const routes = [
       {
         path: 'row/:rowId',
         name: 'database-table-row',
+        file: path.resolve(
+          __dirname,
+          '../core/components/RouterViewPlaceholder.vue'
+        ),
       },
       {
         path: 'webhooks',