From c7d282cd2e46d06b2c61f9b9798116dc312ecf30 Mon Sep 17 00:00:00 2001 From: vishesh92 Date: Fri, 7 Nov 2025 14:00:32 +0530 Subject: [PATCH] Address comments --- .../widgets/InfiniteScrollSelect.vue | 48 +++++++++++++++++-- .../compute/wizard/OwnershipSelection.vue | 16 ------- ui/src/views/iam/AddUser.vue | 9 +--- ui/src/views/infra/UsageRecords.vue | 5 +- ui/src/views/storage/CreateTemplate.vue | 2 + ui/src/views/storage/UploadLocalVolume.vue | 5 ++ ui/src/views/storage/UploadVolume.vue | 13 +++-- ui/src/views/tools/CreateWebhook.vue | 2 + ui/src/views/tools/ManageVolumes.vue | 3 ++ 9 files changed, 69 insertions(+), 34 deletions(-) diff --git a/ui/src/components/widgets/InfiniteScrollSelect.vue b/ui/src/components/widgets/InfiniteScrollSelect.vue index 1cf5bd9e636..023330d4116 100644 --- a/ui/src/components/widgets/InfiniteScrollSelect.vue +++ b/ui/src/components/widgets/InfiniteScrollSelect.vue @@ -41,8 +41,10 @@ - optionValueKey (String, optional): Property to use as the value for options (e.g., 'name'). Default is 'id' - optionLabelKey (String, optional): Property to use as the label for options (e.g., 'name'). Default is 'name' - defaultOption (Object, optional): Preselected object to include initially + - allowClear (Boolean, optional): Whether to allow clearing the selection. Default is false - showIcon (Boolean, optional): Whether to show icon for the options. Default is true - defaultIcon (String, optional): Icon to be shown when there is no resource icon for the option. Default is 'cloud-outlined' + - selectFirstOption (Boolean, optional): Whether to automatically select the first option when options are loaded. Default is false Events: - @change-option-value (Function): Emits the selected option value(s) when value(s) changes. Do not use @change as it will give warnings and may not work @@ -58,7 +60,7 @@ :filter-option="false" :loading="loading" show-search - allowClear + :allowClear="allowClear" placeholder="Select" @search="onSearchTimed" @popupScroll="onScroll" @@ -78,7 +80,7 @@ - + @@ -125,6 +127,10 @@ export default { type: Object, default: null }, + allowClear: { + type: Boolean, + default: false + }, showIcon: { type: Boolean, default: true @@ -136,6 +142,10 @@ export default { pageSize: { type: Number, default: null + }, + selectFirstOption: { + type: Boolean, + default: false } }, data () { @@ -148,7 +158,8 @@ export default { searchTimer: null, scrollHandlerAttached: false, preselectedOptionValue: null, - successiveFetches: 0 + successiveFetches: 0, + hasAutoSelectedFirst: false } }, created () { @@ -211,6 +222,7 @@ export default { }).finally(() => { if (this.successiveFetches === 0) { this.loading = false + this.autoSelectFirstOptionIfNeeded() } }) }, @@ -247,6 +259,36 @@ export default { this.preselectedOptionValue = null this.successiveFetches = 0 }, + autoSelectFirstOptionIfNeeded () { + if (!this.selectFirstOption || this.hasAutoSelectedFirst) { + return + } + // Don't auto-select if there's a preselected value being fetched + if (this.preselectedOptionValue) { + return + } + const currentValue = this.$attrs.value + if (currentValue !== undefined && currentValue !== null && currentValue !== '') { + return + } + if (this.options.length === 0) { + return + } + if (this.searchQuery && this.searchQuery.length > 0) { + return + } + // Only auto-select after initial load is complete (no more successive fetches) + if (this.successiveFetches > 0) { + return + } + const firstOption = this.options[0] + if (firstOption) { + const firstValue = firstOption[this.optionValueKey] + this.hasAutoSelectedFirst = true + this.$emit('change-option-value', firstValue) + this.$emit('change-option', firstOption) + } + }, onSearchTimed (value) { clearTimeout(this.searchTimer) this.searchTimer = setTimeout(() => { diff --git a/ui/src/views/compute/wizard/OwnershipSelection.vue b/ui/src/views/compute/wizard/OwnershipSelection.vue index 6a70d20a1db..abf93beb251 100644 --- a/ui/src/views/compute/wizard/OwnershipSelection.vue +++ b/ui/src/views/compute/wizard/OwnershipSelection.vue @@ -166,32 +166,16 @@ export default { this.emitChangeEvent() }, - handleDomainOptionChange (option) { - this.selectedDomainOption = option - // Note: Override filtering is not implemented in InfiniteScrollSelect migration - // If override.domains filtering is needed, it should be handled at a higher level - // or by using a custom filtering mechanism - }, handleAccountChange (accountName) { this.selectedAccount = accountName this.selectedProject = null this.emitChangeEvent() }, - handleAccountOptionChange (option) { - this.selectedAccountOption = option - // Note: Override filtering is not implemented in InfiniteScrollSelect migration - // If override.accounts filtering is needed, it should be handled at a higher level - }, handleProjectChange (projectId) { this.selectedProject = projectId this.selectedAccount = null this.emitChangeEvent() }, - handleProjectOptionChange (option) { - this.selectedProjectOption = option - // Note: Override filtering is not implemented in InfiniteScrollSelect migration - // If override.projects filtering is needed, it should be handled at a higher level - }, emitChangeEvent () { this.$emit('fetch-owner', this) } diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue index 9366e1c8251..74770061ed9 100644 --- a/ui/src/views/iam/AddUser.vue +++ b/ui/src/views/iam/AddUser.vue @@ -98,6 +98,7 @@ optionValueKey="id" optionLabelKey="path" defaultIcon="block-outlined" + :selectFirstOption="true" :placeholder="apiParams.domainid.description" @change-option-value="handleDomainChange" /> @@ -209,15 +210,9 @@ export default { } }, accountsApiParams () { - if (!this.form.domainid) { - return { - showicon: true, - listall: true - } - } return { showicon: true, - domainid: this.form.domainid + domainid: this.form?.domainid || null } } }, diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue index e862f32be6d..a5fe3cf85c5 100644 --- a/ui/src/views/infra/UsageRecords.vue +++ b/ui/src/views/infra/UsageRecords.vue @@ -130,6 +130,8 @@ optionLabelKey="path" defaultIcon="block-outlined" :placeholder="$t('label.domain')" + :defaultOption="{ id: null, path: ''}" + :allowClear="true" style="width: 100%;" @change-option-value="handleDomainChange" @change-option="handleDomainOptionChange" /> @@ -163,6 +165,8 @@ defaultIcon="team-outlined" :placeholder="$t('label.account')" :disabled="form.isRecursive" + :defaultOption="{ id: null, name: ''}" + allowClear="true" @change-option-value="selectAccount" @change-option="selectAccountOption" /> @@ -455,7 +459,6 @@ export default { } } return { - listall: true, domainid: this.form.domain } } diff --git a/ui/src/views/storage/CreateTemplate.vue b/ui/src/views/storage/CreateTemplate.vue index 00985affafc..e885d82404c 100644 --- a/ui/src/views/storage/CreateTemplate.vue +++ b/ui/src/views/storage/CreateTemplate.vue @@ -81,6 +81,7 @@ optionValueKey="id" optionLabelKey="path" defaultIcon="block-outlined" + allowClear="true" :placeholder="apiParams.domainid.description" @change-option-value="handleDomainChange" /> @@ -96,6 +97,7 @@ optionValueKey="name" optionLabelKey="name" defaultIcon="team-outlined" + allowClear="true" :placeholder="apiParams.account.description" /> diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue index 2388cb6b1b7..8abc17bfd92 100644 --- a/ui/src/views/storage/UploadLocalVolume.vue +++ b/ui/src/views/storage/UploadLocalVolume.vue @@ -65,6 +65,7 @@ optionValueKey="id" optionLabelKey="name" defaultIcon="global-outlined" + selectFirstOption="true" @change-option-value="handleZoneChange" /> @@ -79,6 +80,8 @@ optionValueKey="id" optionLabelKey="displaytext" defaultIcon="hdd-outlined" + :defaultOption="{ id: null, displaytext: ''}" + allowClear="true" :placeholder="apiParams.diskofferingid.description" @change-option="onChangeDiskOffering" /> @@ -120,6 +123,7 @@ optionLabelKey="path" defaultIcon="block-outlined" :placeholder="$t('label.domainid')" + allowClear="true" @change-option-value="handleDomainChange" /> @@ -134,6 +138,7 @@ optionValueKey="name" optionLabelKey="name" defaultIcon="team-outlined" + allowClear="true" :placeholder="$t('label.account')" @change-option-value="handleAccountChange" /> diff --git a/ui/src/views/storage/UploadVolume.vue b/ui/src/views/storage/UploadVolume.vue index e8114327030..e049399910c 100644 --- a/ui/src/views/storage/UploadVolume.vue +++ b/ui/src/views/storage/UploadVolume.vue @@ -55,6 +55,7 @@ optionValueKey="id" optionLabelKey="name" defaultIcon="global-outlined" + selectFirstOption="true" @change-option-value="handleZoneChange" /> @@ -85,6 +86,8 @@ optionValueKey="id" optionLabelKey="displaytext" defaultIcon="hdd-outlined" + :defaultOption="{ id: null, displaytext: ''}" + allowClear="true" @change-option="onChangeDiskOffering" /> @@ -108,6 +111,7 @@ optionValueKey="id" optionLabelKey="path" defaultIcon="block-outlined" + allowClear="true" :placeholder="$t('label.domainid')" @change-option-value="handleDomainChange" /> @@ -124,6 +128,7 @@ optionLabelKey="name" defaultIcon="team-outlined" :placeholder="$t('label.account')" + allowClear="true" @change-option-value="handleAccountChange" />
@@ -190,14 +195,8 @@ export default { } }, accountsApiParams () { - if (!this.form.domainid) { - return { - listall: true, - showicon: true - } - } return { - domainid: this.form.domainid, + domainid: this.form?.domainid || null, showicon: true } } diff --git a/ui/src/views/tools/CreateWebhook.vue b/ui/src/views/tools/CreateWebhook.vue index 92de0401883..c1ac36bdec9 100644 --- a/ui/src/views/tools/CreateWebhook.vue +++ b/ui/src/views/tools/CreateWebhook.vue @@ -76,6 +76,8 @@ optionValueKey="id" optionLabelKey="path" defaultIcon="block-outlined" + :defaultOption="{ id: null, path: ''}" + allowClear="true" :placeholder="apiParams.domainid.description" @change-option-value="handleDomainChanged" /> diff --git a/ui/src/views/tools/ManageVolumes.vue b/ui/src/views/tools/ManageVolumes.vue index 915e3010602..7fe4a56c1bc 100644 --- a/ui/src/views/tools/ManageVolumes.vue +++ b/ui/src/views/tools/ManageVolumes.vue @@ -380,6 +380,7 @@ optionValueKey="id" optionLabelKey="path" defaultIcon="block-outlined" + allowClear="true" @change-option-value="changeDomain" /> @@ -396,6 +397,7 @@ optionValueKey="name" optionLabelKey="name" defaultIcon="team-outlined" + allowClear="true" @change-option-value="changeAccount" /> {{ $t('label.required') }} @@ -413,6 +415,7 @@ optionValueKey="id" optionLabelKey="name" defaultIcon="project-outlined" + allowClear="true" @change-option-value="changeProject" /> {{ $t('label.required') }}