Skip to content

ui: add an infinite scroll select component#10840

Merged
DaanHoogland merged 2 commits intoapache:4.19from
shwstppr:ui-add-infinitescrollselect
May 16, 2025
Merged

ui: add an infinite scroll select component#10840
DaanHoogland merged 2 commits intoapache:4.19from
shwstppr:ui-add-infinitescrollselect

Conversation

@shwstppr
Copy link
Copy Markdown
Contributor

@shwstppr shwstppr commented May 9, 2025

Description

A select component which can retrieve more items from the API when the scroll reaches the end of the list. It will allow selecting options in case of a large number of items.

Currently used only in the following view:

  • Project selection on the dashboard.
  • Account and project selection in CreateNetworkPermission form.

Types of changes

  • Breaking change (fix or feature that would cause existing functionality to change)
  • New feature (non-breaking change which adds functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • Enhancement (improves an existing feature and functionality)
  • Cleanup (Code refactoring and cleanup, that may add test cases)
  • build/CI
  • test (unit or integration test code)

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

  • Major
  • Minor

Bug Severity

  • BLOCKER
  • Critical
  • Major
  • Minor
  • Trivial

Screenshots (if appropriate):

infinite-scroll-select.mp4

How Has This Been Tested?

How did you try to break this feature and the system with this change?

@codecov
Copy link
Copy Markdown

codecov bot commented May 9, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 15.16%. Comparing base (005afde) to head (c097c53).
Report is 6 commits behind head on 4.19.

Additional details and impacted files
@@             Coverage Diff              @@
##               4.19   #10840      +/-   ##
============================================
- Coverage     15.17%   15.16%   -0.01%     
+ Complexity    11346    11343       -3     
============================================
  Files          5415     5416       +1     
  Lines        475578   475598      +20     
  Branches      58036    58051      +15     
============================================
- Hits          72157    72139      -18     
- Misses       395354   395394      +40     
+ Partials       8067     8065       -2     
Flag Coverage Δ
uitests 4.28% <ø> (-0.01%) ⬇️
unittests 15.89% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@shwstppr shwstppr force-pushed the ui-add-infinitescrollselect branch from d90d939 to a05caf7 Compare May 9, 2025 13:03
@apache apache deleted a comment from blueorangutan May 13, 2025
@apache apache deleted a comment from blueorangutan May 13, 2025
@blueorangutan
Copy link
Copy Markdown

@shwstppr a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

@blueorangutan
Copy link
Copy Markdown

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10840 (QA-JID-619)

@DaanHoogland
Copy link
Copy Markdown
Contributor

@blueorangutan ui

@blueorangutan
Copy link
Copy Markdown

@DaanHoogland a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

@blueorangutan
Copy link
Copy Markdown

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10840 (QA-JID-623)

@apache apache deleted a comment from blueorangutan May 15, 2025
@apache apache deleted a comment from blueorangutan May 15, 2025
@shwstppr
Copy link
Copy Markdown
Contributor Author

@blueorangutan ui

@blueorangutan
Copy link
Copy Markdown

@shwstppr a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

@blueorangutan
Copy link
Copy Markdown

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10840 (QA-JID-626)

@shwstppr
Copy link
Copy Markdown
Contributor Author

@blueorangutan ui

@blueorangutan
Copy link
Copy Markdown

@shwstppr a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

@blueorangutan
Copy link
Copy Markdown

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10840 (QA-JID-627)

@shwstppr shwstppr force-pushed the ui-add-infinitescrollselect branch from 3dbbb73 to a6d00fe Compare May 15, 2025 12:33
A select component which can retrieve more items from the API when the scroll reaches the end of the list. It will allow selecting options in case of a large number of items.

Currently used only in the following view:

 -  Project selection on the dashboard.
 -  Account and project selection in CreateNetworkPermission form.

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
@github-actions
Copy link
Copy Markdown

This pull request has merge conflicts. Dear author, please fix the conflicts and sync your branch with the base branch.

@shwstppr shwstppr force-pushed the ui-add-infinitescrollselect branch from a6d00fe to 0040109 Compare May 15, 2025 12:37
@shwstppr
Copy link
Copy Markdown
Contributor Author

@blueorangutan ui

@blueorangutan
Copy link
Copy Markdown

@shwstppr a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

@blueorangutan
Copy link
Copy Markdown

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10840 (QA-JID-628)

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
@DaanHoogland
Copy link
Copy Markdown
Contributor

@blueorangutan ui

@blueorangutan
Copy link
Copy Markdown

@DaanHoogland a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

@blueorangutan
Copy link
Copy Markdown

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10840 (QA-JID-629)

Copy link
Copy Markdown
Contributor

@DaanHoogland DaanHoogland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, tested in qa and looks snappy and correct in both dashboard project selection and in add network permissions. This looks like a good framework element to implement all over the place.

Copy link
Copy Markdown
Member

@yadvr yadvr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@shwstppr shwstppr marked this pull request as ready for review May 16, 2025 10:04
@yadvr
Copy link
Copy Markdown
Member

yadvr commented May 16, 2025

One feedback @shwstppr can we add like a loader icon (like ) when you're fetching more projects; in environments with longer latencies we don't know if the project dropdown is trying to load more projects. This icon can be either in the dropdown itself, or say in case of project bar (top of the UI) can display temporarily with a Loading... message

@DaanHoogland DaanHoogland merged commit 951863c into apache:4.19 May 16, 2025
26 checks passed
dhslove pushed a commit to ablecloud-team/ablestack-cloud that referenced this pull request Jun 19, 2025
Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI: only 500 projects are listed when add network permission

4 participants