Use infinite scroll select#11991
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## 4.20 #11991 +/- ##
============================================
+ Coverage 16.23% 16.24% +0.01%
- Complexity 13380 13395 +15
============================================
Files 5657 5658 +1
Lines 499039 499150 +111
Branches 60567 60581 +14
============================================
+ Hits 81024 81100 +76
- Misses 408978 409007 +29
- Partials 9037 9043 +6
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR refactors multiple Vue components to replace custom domain/account/project select dropdowns with a new reusable InfiniteScrollSelect component. The changes consolidate repetitive code, remove manual API fetching logic, and leverage automatic data reloading through computed properties.
- Introduces
InfiniteScrollSelectcomponent with infinite scrolling and search capabilities - Removes manual
fetchDomains(),fetchAccounts(),fetchProjects()methods across multiple components - Implements reactive API parameter computed properties that auto-reload data when dependencies change
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/views/tools/ManageVolumes.vue | Replaced domain/account/project select dropdowns with InfiniteScrollSelect |
| ui/src/views/tools/CreateWebhook.vue | Migrated domain/account selections to InfiniteScrollSelect |
| ui/src/views/storage/UploadVolume.vue | Converted zone/disk offering/domain/account selects to InfiniteScrollSelect |
| ui/src/views/storage/UploadLocalVolume.vue | Replaced zone/disk offering/domain/account selections with InfiniteScrollSelect |
| ui/src/views/storage/CreateTemplate.vue | Migrated domain/account selections to InfiniteScrollSelect |
| ui/src/views/infra/UsageRecords.vue | Replaced auto-complete components for domain/account with InfiniteScrollSelect |
| ui/src/views/iam/AddUser.vue | Converted domain/account selections to InfiniteScrollSelect |
| ui/src/views/compute/wizard/OwnershipSelection.vue | Migrated domain/account/project selections to InfiniteScrollSelect with notes about override filtering |
| ui/src/components/widgets/InfiniteScrollSelect.vue | Added allowClear prop to the select component |
| ui/src/components/view/DedicateDomain.vue | Replaced domain/account selections with InfiniteScrollSelect |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
vishesh92
force-pushed
the
use-infinite-scroll-select
branch
from
7a00d91 to
c7d282c
Compare
|
@shwstppr a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress. |
|
UI build: ✔️ |
|
@vishesh92 the default option when creating a webhook is only shown whilst another option is chosen. And also still the last shown option is the last but one domain. |
|
Dear @vishesh92 , this is a very welcome feature. Thank you. As our organization grows, the filters and pages take time to load and the UI becomes more and more sluggish. I would say, pagination is could be applied to more parts of the UI. Keep up with the good work! |
|
This looks more suitable for a major release. Thoughts? @vishesh92 @DaanHoogland |
|
I think it can go on a LTS, it is an improvement on the UI only and does not change any functionality, nor add DB or API interfaces. |
|
@shwstppr a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress. |
shwstppr
left a comment
shwstppr
left a comment
There was a problem hiding this comment.
Code mostly looks good, added some comments. There are few comments added in the code which I'm not sure help a lot.
Will try to test some cases.
@vishesh92 are the changes done/forms covered in some order or on random basis? Migrating forms section-wise would have helped a bit more maybe.
| selectableOptions () { | ||
| const currentValue = this.$attrs.value | ||
| // Only filter out null/empty options when the current value is also null/undefined/empty | ||
| // This prevents such options from being selected and allows the placeholder to show instead | ||
| if (currentValue === null || currentValue === undefined || currentValue === '') { | ||
| return this.options.filter(option => { | ||
| const optionValue = option[this.optionValueKey] | ||
| return optionValue !== null && optionValue !== undefined && optionValue !== '' | ||
| }) | ||
| } | ||
| // When a valid value is selected, show all options | ||
| return this.options |
There was a problem hiding this comment.
What is the benefit of this differentiation? Maybe we can show the null/empty option always or is it beneficial when using the value from route?
There was a problem hiding this comment.
I added this to maintain consistency with the existing behavior in UI.
|
UI build: ✔️ |
|
@vishesh92 a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress. |
|
UI build failed: ✖️ |
|
@RosiKyu a [SL] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress. |
|
Packaging result [SF]: ✖️ el8 ✖️ el9 ✖️ debian ✖️ suse15. SL-JID 16412 |
|
@blueorangutan package |
|
@RosiKyu a [SL] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress. |
|
Packaging result [SF]: ✖️ el8 ✖️ el9 ✖️ debian ✖️ suse15. SL-JID 16418 |
|
@blueorangutan package |
|
@DaanHoogland a [SL] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress. |
|
Packaging result [SF]: ✖️ el8 ✖️ el9 ✖️ debian ✖️ suse15. SL-JID 16444 |
|
@blueorangutan package |
|
@sureshanaparti a [SL] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress. |
|
Packaging result [SF]: ✖️ el8 ✖️ el9 ✖️ debian ✖️ suse15. SL-JID 16545 |
|
@vishesh92 check the ui build. |
|
Packaging result [SF]: ✔️ el8 ✔️ el9 ✔️ el10 ✔️ debian ✔️ suse15. SL-JID 16551 |
|
@DaanHoogland a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress. |
|
UI build: ✔️ |
|
Verified the domain selection (listed after the page size) with keyword search, in the following views:
|
* addresses the domain selection (listed after the page size) with keyword search
Description
This PR partly fixes #9729 by implementing infinite scroll select.
ui/src/components/view/DedicateDomain.vue-> On/host, Click on Add Host, and then select Dedicated Checkbox.ui/src/views/compute/wizard/OwnershipSelection.vue-> Launch VM Deploymentui/src/views/iam/AddUser.vue-> On/accountuser, click on Add User button. The dialog changes based on whether the accountid or domainid is present in the query params.ui/src/views/infra/UsageRecords.vue-> On/usageui/src/views/storage/CreateTemplate.vue-> Create a volume snapshot, and create template from it.ui/src/views/storage/UploadLocalVolume.vue-> On/volume, click on the "Upload Volume from Local"ui/src/views/storage/UploadVolume.vue-> On/volume, click on the "Upload Volume from URL"ui/src/views/tools/CreateWebhook.vue-> On/webhook, click on the "Create Webhook" button.ui/src/views/tools/ManageVolumes.vue-> On/managevolumesTypes of changes
Feature/Enhancement Scale or Bug Severity
Feature/Enhancement Scale
Bug Severity
Screenshots (if appropriate):
How Has This Been Tested?
How did you try to break this feature and the system with this change?