Add GAlert component and replace BAlert in exemplar usages - #22687
Merged
Conversation
Adds a small Vue 3-friendly SFC that mirrors the bootstrap-vue BAlert markup the codebase relies on, ahead of the broader bootstrap-vue removal tracked in galaxyproject#21956. The API covers the subset of BAlert that Galaxy actually uses -- show, variant, dismissible, dismissLabel, fade, default slot, dismissed and update:show events. Numeric show countdown, the dismiss named slot, and the dismissCountDown event are dropped for now; they have ~zero production usages and can be revisited if needed.
Swaps eight call sites (twelve alerts total) over to the new GAlert SFC: ConfirmDialog, HistoryImport, CitationsList, TourList, FormRadio, BroadcastsList, UserDeletion, and FormCardSticky. These cover the variants the codebase actually uses -- info/warning/danger, plain show, reactive :show, dismissible with @dismissed, v-localize, and rich slot content (lists, icons, LoadingSpan). This is intentionally not a sweeping replacement -- ~200 BAlert usages remain and will get picked up incrementally in follow-up PRs, similar to how the BTable migration was split across many PRs. FormCardSticky's test was tweaked to assert on the rendered DOM (.alert.alert-danger) instead of the BAlert component name.
Tracks visibility in a localShow ref so a `dismissible` GAlert with no parent handler still hides itself when the close button is clicked, mirroring bootstrap-vue's BAlert. The watcher re-syncs whenever the parent's `show` prop changes, so reactive `:show` bindings keep working too. Fixes a footgun future mechanical migrations would have hit -- BAlert callsites that pass `show dismissible` without wiring a `dismissed`/`input` handler expect the alert to disappear on click.
github-project-automation
Bot
moved this from Needs Review
to Done
in Galaxy Dev - weeklies
nsoranzo
added
kind/enhancement
kind/refactoring
Member
|
We have #22328 to track this as well! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a small Vue 3-friendly
GAlertSFC atclient/src/components/BaseComponents/GAlert.vueand replaces<BAlert>with<GAlert>at twelve call sites across eight components. Part of the bootstrap-vue scoped-slot replacement effort tracked in #21956.The motivation is concrete:
BAlert"works" through@vue/compatfor production rendering, but in tests bootstrap-vue's compat shim renders it as a bare<__compat__transition>element with no slot content. On the Vue 3 migration branch (#20787) that shows up as 92 failing test files whose selectors look for.alertor specific alert IDs and find nothing.GAlertemits the same<div class="alert alert-{variant}">markup the existing bootstrap CSS expects, so the rendered DOM matches what real and test selectors are looking for.What's in the component
GAlertis intentionally a subset ofBAlert, not a full API clone:show,variant,dismissible,dismissLabel,fadedismissed,update:showBAlert-- clicking the close button on adismissiblealert hides it locally without requiring a parent handler; a subsequentshowprop change re-syncsDropped from
BAlert: numericshowcountdown (one production usage inInteractiveTools.vue), thedismissnamed slot (zero usages), and thedismissCountDownevent (zero usages). These can be added back if a future call site needs them.The exemplar swaps
I intentionally did not do a sweeping replacement.
BAlerthas ~200 remaining production usages and a single mega-PR would be hard to review. Instead this PR swaps twelve alerts across eight components that exercise the common API patterns -- info/warning/danger, plainshow, reactive:show, dismissible with@dismissed,v-localize, and rich slot content (lists, icons,LoadingSpan):ConfirmDialog,HistoryImport(2),Citation/CitationsList,Tour/TourList,Form/Elements/FormRadio,admin/Notifications/BroadcastsList(2),User/UserDeletion(3), andForm/FormCardSticky. TheFormCardSticky.test.jsselector was updated from aBAlertcomponent-name lookup to a DOM-level.alert.alert-dangerassertion, which is the migration pattern future swaps will follow.Subsequent PRs will pick up the remaining
BAlertcall sites incrementally, similar to how theBTablemigration was split across many PRs.Test plan
pnpm eslint --quietclean on changed filespnpm type-checkcleanpnpm testfor affected component areas (FormCardSticky, FormRadio, BroadcastsList) greenBroadcastsList,HistoryImport,UserDeletionin dev server and verify alerts render and dismiss correctly