ui: migrate intentions UI to HDS - #23835
Open
suresh-hashicorp wants to merge 6 commits into
Open
Conversation
- Move toolbar inside the card (above the table) via a named :toolbar slot on Consul::Intention::List::Table, replacing the outer <:toolbar> block on the page template - Expose isManagedByCRDs and card args through Consul::Intention::List so the CRD notice renders above the card and the table gets the card context it needs - Refactor intentions/index.hbs to use Consul::Intention::List::Table directly, removing the DataCollection wrapper indirection and the now-redundant <label for='toolbar-toggle'> - Change confirm-delete modal from @color='warning' to @color='critical' and icon from alert-triangle to alert-diamond to match HDS design spec - Update toolbar SCSS: replace padding-bottom/margin-bottom with padding and faint-surface background; add border-bottom separator on the filter-bar actions row to match nodes/services toolbar appearance
- Rename page title 'New Intention' → 'Create Intention' - Migrate Source/Destination selects into bordered card panels with legend headings - Replace plain Description input with Hds::Form::TextInput::Field - Migrate Allow/Deny/Application aware radio cards to vertical RadioCard layout with icons - Add Hds::Separator before Permissions section - Add permissions-header (flex justify-between) and permissions-content (bordered card) - Rewrite radio-card to flex-col with content area + bottom radio strip - Update radio-card layout/skin for HDS border tokens, elevation, and typography - Fix SuperSelectWithCreate to render label via <F.Label> yield slot - Scope-remove fieldset border-bottom/margin-bottom on intentions routes - Update acceptance tests for new page title
- Replace ModalDialog with Hds::Modal; open/close via isPermissionModalOpen flag - Replace raw radio inputs with Hds::Form::Radio::Group for Allow/Deny - Replace raw checkbox with Hds::Form::Toggle::Field for All Methods - Replace raw checkboxes with Hds::Form::Checkbox::Field for HTTP methods - Move methods description above toggle as standalone paragraph - Replace ListCollection + overflow menu with flat header rows using 4-col grid - Each header row (saved and entry form) shows its own column labels (Header type / Header name / Header information) with trash icon in col 4 - Trash button uses @color='secondary' (not critical) - Grid uses align-items:start so error messages expand downward without shifting sibling column labels; ::before spacer keeps trash beside inputs - Replace full-width secondary Add Another Header button with compact secondary small button with leading plus icon - Add Hds::Separator between Action/Path/Methods/Headers sections - Remove legacy ModalDialog CSS overrides
The HDS migration replaced the inline ConfirmationDialog with an Hds::Modal for the intention delete flow, but introduced three bugs: 1. Page object selector: createDeletable() maps confirmDelete to [data-test-delete], which matched the old inline DeleteConfirmation component. The new modal's confirm button uses data-test-confirm-delete and renders in a portal outside <main>. Override confirmDelete in the intention edit page object to target the modal directly, using resetScope/testContainer like the KV edit page does. 2. Untracked pendingDelete: pendingDelete was a plain (untracked) property. Mark it @Tracked so Glimmer re-evaluates template expressions reading it when it changes. 3. queue helper captures args at render time: (queue closeDeleteModal pendingDelete) evaluates pendingDelete when the helper runs, not when the button is clicked. Replace with a new confirmDelete() action that reads this.pendingDelete at invocation time, closes the modal, then calls the delete function.
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
1 participant
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
This PR migrates the Consul UI Intentions components to the HashiCorp Design System (HDS).
Commits
2a73a6333fui: migrate intentions index to HDS card layout3d0bd92496ui: HDS migration for Create Intention form9cf3824ecaui: migrate Add Permission modal to HDS components476cef3ae9Migrate intention permission list components to HDSf4a74e34fefeat(ui): migrate intentions components to HDSChanges
Intentions Index
dc/intentions/index.hbs) to HDS layout and table componentsintention/listandintention/list/tabletemplates to use HDS componentsstyles/routes/dc/intentions/index.scss)Create / Edit Intention Form
intention/form/index.hbsand.jsto use HDS form controls and layout primitivesform/fieldsets/index.hbsandlayout.scssto use HDS grid/fieldset patternsform/index.scssfor HDS-specific overridesPermission Form & List (Add Permission modal)
intention/permission/formto HDS modal and form componentsintention/permission/listto HDS table/badge components, updating JS, layout, and skin stylespermission/header/formandpermission/header/listtemplates to HDSIntention View
intention/view/index.hbsto HDS layoutintention/view/index.scssShared Components
radio-cardcomponent (.hbs,layout.scss,skin.scss) for HDS compatibilitysuper-select-with-createandcomposite-rowfor HDS alignmentTests
dc/intentions/create-test.jsand Cucumber featurepermissions/create.featurefor new selectorsTesting