Upgrade PatternFly from v5 to v6 — 1/2 - #519
Merged
Merged
Conversation
…ponents (1/2) Migrate all shared UI components, CSS theming (ascender.css, darkmode.css, border.css, login.css), and build configuration (package.json, lingui.config.js) from PatternFly 5 to PatternFly 6. Key changes: - Update PF5 CSS class prefixes (pf-v5-) to PF6 (pf-v6-) - Replace deprecated PF5 component imports with PF6 equivalents - Migrate deprecated components (DropdownItem, Modal, Wizard) to @patternfly/react-core/deprecated or new PF6 APIs - Update styled-components using PF CSS variables to v6 token names - Fix InputGroup/InputGroupItem usage with isFill prop - Update Popover button styling to prevent label height expansion - Adjust masthead icon sizing and dropdown menu font sizes - Add dark mode overrides for topology view SVG nodes
Destructure the unused gridColumns prop so it doesn't pass through to the underlying Td element, which causes a React warning about unrecognized DOM attributes and fails the setupTests.js console error check.
- AppContainer: use OUIA attribute selector for NavExpandable (PF6 dropped pf-m-expandable modifier) - OptionsList: rename 'Chip group category' to 'Label group category' (PF6 ChipGroup → LabelGroup) - NotificationListItem: query by role="switch" instead of role="checkbox" (PF6 Switch component change) - ScheduleList: use .pf-v6-svg selector for icon SVGs (PF6 renders nested SVG elements per icon) - ChipGroup: destructure onOverflowChipClick out of props to prevent DOM leak, and wire it via event delegation on the overflow button
Contributor
There was a problem hiding this comment.
Pull request overview
This PR is the first half of the UI migration from PatternFly v5 to v6, updating shared UI infrastructure (shared components, styles, and configuration) so that screen-level components can be migrated in a follow-up PR.
Changes:
- Upgraded PatternFly dependencies to v6 and migrated shared component usage from PF5 APIs/classes to PF6 (including use of deprecated exports where required).
- Updated global/theme CSS and styled-components to PF6 token names and PF6 class prefixes (
pf-v6-*), including dark-mode handling. - Updated unit/RTL tests to match PF6 DOM structure and ARIA roles, and adjusted a few navigation paths for job output.
Reviewed changes
Copilot reviewed 137 out of 138 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/login.css | Updates login theming variables and PF6 class selectors. |
| awx/ui/src/hooks/useToast.test.js | Updates toast alert selector for PF6 alert class. |
| awx/ui/src/components/WorkflowOutputNavigation/WorkflowOutputNavigation.js | Replaces Chip usage with PF6 Label for filter indicator. |
| awx/ui/src/components/Workflow/WorkflowTools.js | Updates styling tokens and switches to PF6 Button icon prop usage. |
| awx/ui/src/components/Workflow/WorkflowNodeHelp.js | Updates warning color token to PF6. |
| awx/ui/src/components/Workflow/WorkflowLegend.js | Updates styling tokens to PF6 equivalents. |
| awx/ui/src/components/Workflow/WorkflowActionTooltipItem.js | Updates hover colors to PF6 tokens. |
| awx/ui/src/components/Workflow/WorkflowActionTooltip.js | Updates border/background tokens to PF6 tokens. |
| awx/ui/src/components/Wizard/Wizard.js | Moves Modal imports to deprecated PF6 package and updates toolbar selector to PF6. |
| awx/ui/src/components/VerbositySelectField/VerbositySelectField.js | Migrates FormGroup help prop from labelIcon to labelHelp. |
| awx/ui/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.test.js | Updates wizard class selectors and improves selection interaction. |
| awx/ui/src/components/TemplateList/TemplateListItem.js | Replaces Chips with Labels, updates icon-button usage, and adjusts PF6 tokens. |
| awx/ui/src/components/TemplateList/TemplateList.test.js | Updates modal box selector to PF6. |
| awx/ui/src/components/StatusLabel/StatusLabel.test.js | Updates label selector class to PF6. |
| awx/ui/src/components/StatusLabel/StatusLabel.js | Changes label variant and adds class for custom styling. |
| awx/ui/src/components/StatusIcon/StatusIcon.js | Migrates status color tokens to PF6 tokens and updates SR class. |
| awx/ui/src/components/Sort/Sort.js | Updates border tokens to PF6 equivalents. |
| awx/ui/src/components/SelectedList/SelectedList.js | Replaces Chip with Label and maps removal to onClose. |
| awx/ui/src/components/SelectedList/DraggableSelectedList.js | Switches to PF6 icon-button pattern (icon + self-closing). |
| awx/ui/src/components/SelectableCard/SelectableCard.js | Updates border/tokens to PF6 token names. |
| awx/ui/src/components/Search/Search.test.js | Updates chip-group selectors/queries to PF6 label-group selectors/queries. |
| awx/ui/src/components/Search/Search.js | Updates PF class selectors and migrates ToolbarFilter chips API to labels API. |
| awx/ui/src/components/Search/RelatedLookupTypeInput.js | Switches to PF6 icon-button usage for clear action. |
| awx/ui/src/components/Search/LookupTypeInput.js | Switches to PF6 icon-button usage for clear action. |
| awx/ui/src/components/Search/AdvancedSearch.test.js | Updates menu-toggle selector to PF6. |
| awx/ui/src/components/Search/AdvancedSearch.js | Updates tokens/selectors and switches to PF6 icon-button usage. |
| awx/ui/src/components/ScreenHeader/ScreenHeader.js | Removes PF5 PageSection variant usage and updates icon-button pattern. |
| awx/ui/src/components/Schedule/shared/UnsupportedScheduleForm.js | Updates mono font token usage for PF6. |
| awx/ui/src/components/Schedule/shared/UnsupportedRRuleAlert.js | Updates spacing/font weight tokens and mono font token usage for PF6. |
| awx/ui/src/components/Schedule/shared/ScheduleFormFields.js | Migrates labelIcon to labelHelp and updates PF6 token reference. |
| awx/ui/src/components/Schedule/ScheduleToggle/ScheduleToggle.test.js | Updates expected Switch role to switch (PF6). |
| awx/ui/src/components/Schedule/ScheduleToggle/ScheduleToggle.js | Removes labelOff usage to match PF6 Switch API changes. |
| awx/ui/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.js | Updates label token names and shifts dt/dd variant usage. |
| awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.test.js | Updates expected Switch role to switch (PF6). |
| awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js | Updates danger token and converts edit action to PF6 icon-button pattern. |
| awx/ui/src/components/Schedule/ScheduleList/ScheduleList.test.js | Updates icon selector to PF6 svg class. |
| awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.test.js | Updates expected Switch role to switch (PF6). |
| awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.js | Replaces Chips with Labels and updates PF6 spacing/border/title tokens. |
| awx/ui/src/components/Schedule/ScheduleDetail/FrequencyDetails.js | Updates spacing/font weight tokens to PF6. |
| awx/ui/src/components/ResourceAccessList/ResourceAccessListItem.js | Replaces Chip with Label and maps removal to onClose with OUIA attr. |
| awx/ui/src/components/ResourceAccessList/DeleteRoleConfirmationModal.test.js | Updates modal body selector to PF6. |
| awx/ui/src/components/PromptDetail/PromptWFJobTemplateDetail.js | Replaces TextList with Content, and Chips with Labels. |
| awx/ui/src/components/PromptDetail/PromptProjectDetail.js | Replaces TextList with Content for PF6-friendly markup. |
| awx/ui/src/components/PromptDetail/PromptJobTemplateDetail.js | Replaces TextList with Content, and Chips with Labels. |
| awx/ui/src/components/PromptDetail/PromptInventorySourceDetail.js | Replaces TextList with Content, and Chips with Labels. |
| awx/ui/src/components/PromptDetail/PromptDetail.js | Updates spacing/title tokens and replaces Chips with Labels (+ OUIA attrs). |
| awx/ui/src/components/Popover/Popover.js | Updates PF class and button styling for PF6 form help affordance. |
| awx/ui/src/components/Pagination/Pagination.js | Updates PF menu-toggle selector to PF6. |
| awx/ui/src/components/PaginatedTable/ToolbarDeleteButton.js | Adds spacing in confirmation content for PF6 modal layout. |
| awx/ui/src/components/PaginatedTable/ToolbarAddButton.js | Adds explicit MenuToggle variant for PF6 visual consistency. |
| awx/ui/src/components/PaginatedTable/PaginatedTable.test.js | Updates test queries to use screen for menuitem selection. |
| awx/ui/src/components/PaginatedTable/HeaderRow.js | Updates PF table CSS custom properties to PF6. |
| awx/ui/src/components/PaginatedTable/ActionsTd.js | Simplifies actions layout from grid to flex and updates PF6 tokens. |
| awx/ui/src/components/PaginatedTable/ActionItem.js | Removes grid-column wrapper now that actions use flex layout. |
| awx/ui/src/components/OptionsList/OptionsList.test.js | Updates ARIA role expectations for PF6 LabelGroup rendering. |
| awx/ui/src/components/OptionsList/OptionsList.js | Updates toolbar selector to PF6. |
| awx/ui/src/components/NotificationList/NotificationListItem.test.js | Updates Switch role expectations to switch (PF6). |
| awx/ui/src/components/NotificationList/NotificationListItem.js | Removes labelOff usage to align with PF6 Switch API changes. |
| awx/ui/src/components/MultiSelect/TagMultiSelect.js | Switches clear control to PF6 icon-button pattern. |
| awx/ui/src/components/MultiButtonToggle/MultiButtonToggle.js | Updates font-size token to PF6. |
| awx/ui/src/components/MultiButtonToggle/ButtonGroup.js | Updates PF selectors and adds PF6 button theme overrides. |
| awx/ui/src/components/Lookup/shared/LookupErrorMessage.js | Updates helper-text class selector to PF6. |
| awx/ui/src/components/Lookup/ProjectLookup.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/Lookup/PeersLookup.js | Replaces Chip with Label for selected items and migrates labelHelp. |
| awx/ui/src/components/Lookup/MultiCredentialsLookup.test.js | Updates chip selector to PF6 label selector. |
| awx/ui/src/components/Lookup/Lookup.test.js | Updates chip selector to PF6 label selector. |
| awx/ui/src/components/Lookup/Lookup.js | Replaces Chip with Label, moves Modal to deprecated PF6 import, and fixes InputGroup fill behavior. |
| awx/ui/src/components/Lookup/InstanceGroupsLookup.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/Lookup/HostFilterLookup.js | Replaces Chips with Labels, moves Modal to deprecated PF6 import, updates selectors/tokens, migrates labelHelp. |
| awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/Lookup/CredentialLookup.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/LaunchPrompt/steps/SurveyStep.js | Migrates labelIcon to labelHelp and updates clear buttons to PF6 icon-button pattern. |
| awx/ui/src/components/LaunchPrompt/steps/StepName.js | Updates tokens and icon styling for PF6. |
| awx/ui/src/components/LaunchPrompt/steps/PreviewStep.js | Updates error text tokens to PF6. |
| awx/ui/src/components/LaunchPrompt/steps/OtherPromptsStep.test.js | Updates Switch role expectation to switch (PF6). |
| awx/ui/src/components/LaunchPrompt/steps/OtherPromptsStep.js | Updates form label selectors/tokens, migrates labelHelp, removes labelOff. |
| awx/ui/src/components/LaunchPrompt/steps/CredentialsStep.test.js | Updates selection/removal queries to align with PF6 label/button structure. |
| awx/ui/src/components/LaunchButton/LaunchButton.js | Updates navigation to job output URLs using job-type URL segments. |
| awx/ui/src/components/LabelSelect/LabelSelect.js | Switches clear button to PF6 icon-button pattern. |
| awx/ui/src/components/JobList/JobListItem.js | Replaces Chips with Labels and switches relaunch action to PF6 icon-button pattern. |
| awx/ui/src/components/JobList/JobListCancelButton.js | Adds spacing in cancellation confirmation content for PF6 modal layout. |
| awx/ui/src/components/JobCancelButton/JobCancelButton.test.js | Updates PF button selector to PF6. |
| awx/ui/src/components/JobCancelButton/JobCancelButton.js | Switches icon-only variant to PF6 icon-button pattern. |
| awx/ui/src/components/InstanceToggle/InstanceToggle.test.js | Updates Switch role expectation to switch (PF6). |
| awx/ui/src/components/InstanceToggle/InstanceToggle.js | Removes labelOff usage to align with PF6 Switch API changes. |
| awx/ui/src/components/HostToggle/HostToggle.test.js | Updates Switch role expectation to switch (PF6). |
| awx/ui/src/components/HostToggle/HostToggle.js | Removes labelOff usage to align with PF6 Switch API changes. |
| awx/ui/src/components/HostForm/HostForm.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/FullPage/FullPage.js | Updates background token usage and z-index for PF6 layering. |
| awx/ui/src/components/FormLayout/FormLayout.js | Updates spacing/tokens/selectors to PF6 equivalents. |
| awx/ui/src/components/FormField/PasswordField.js | Migrates FormGroup help prop to labelHelp and updates InputGroup fill behavior. |
| awx/ui/src/components/FormField/FormSubmitError.test.js | Updates alert selector class to PF6. |
| awx/ui/src/components/FormField/FormField.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/FormField/ArrayTextField.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/FieldWithPrompt/FieldWithPrompt.test.js | Updates required marker selector class to PF6. |
| awx/ui/src/components/FieldWithPrompt/FieldWithPrompt.js | Updates PF form classes and label markup to PF6. |
| awx/ui/src/components/ExpandCollapse/ExpandCollapse.js | Adjusts styled prop naming to avoid passing invalid prop to DOM and updates tokens. |
| awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js | Updates warning color token to PF6. |
| awx/ui/src/components/ErrorDetail/ErrorDetail.js | Updates card styling and mono font token usage for PF6. |
| awx/ui/src/components/DisassociateButton/DisassociateButton.js | Updates spacing token to PF6. |
| awx/ui/src/components/DetailList/DetailList.js | Replaces PF TextList with semantic dl layout and PF6 spacing rules. |
| awx/ui/src/components/DetailList/Detail.js | Replaces PF TextListItem dt/dd with semantic dt/dd and PF6 typography. |
| awx/ui/src/components/DetailList/CodeDetail.js | Refactors code detail layout and PF6 border/radius tokens for editor chrome. |
| awx/ui/src/components/DetailList/ArrayDetail.js | Updates border/spacing tokens and removes TextListItemVariants usage. |
| awx/ui/src/components/DataListToolbar/DataListToolbar.js | Updates toolbar selectors and switches expand-all button to PF6 icon-button pattern. |
| awx/ui/src/components/CredentialChip/CredentialChip.js | Replaces Chip with Label and updates close/removal semantics + OUIA mapping. |
| awx/ui/src/components/CopyButton/CopyButton.js | Switches to PF6 icon-button pattern. |
| awx/ui/src/components/ContentLoading/ContentLoading.js | Updates EmptyState and spacing tokens/selectors to PF6. |
| awx/ui/src/components/ContentError/ContentError.js | Migrates EmptyState API usage toward PF6 props. |
| awx/ui/src/components/ContentEmpty/ContentEmpty.js | Migrates EmptyState API usage toward PF6 props. |
| awx/ui/src/components/CodeEditor/VariablesField.js | Moves Modal to deprecated PF6 import, updates tokens/classes, and switches to PF6 icon-button pattern. |
| awx/ui/src/components/CodeEditor/VariablesDetail.test.js | Updates form label selector class to PF6. |
| awx/ui/src/components/CodeEditor/VariablesDetail.js | Refactors variables detail layout, moves Modal to deprecated PF6 import, updates tokens/classes, PF6 icon-button usage. |
| awx/ui/src/components/CodeEditor/CodeEditorField.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/CodeEditor/CodeEditor.js | Updates editor styling tokens/classes to PF6 and tweaks Ace options for PF6 UX. |
| awx/ui/src/components/ChipGroup/ChipGroup.test.js | Updates tests from Chip to Label usage. |
| awx/ui/src/components/ChipGroup/ChipGroup.js | Replaces PF ChipGroup with PF6 LabelGroup and adds overflow-click handling. |
| awx/ui/src/components/Card/CardBody.js | Updates card padding token to PF6. |
| awx/ui/src/components/Card/CardActionsRow.js | Updates spacing tokens to PF6. |
| awx/ui/src/components/AssociateModal/AssociateModal.js | Moves Modal to deprecated PF6 import and updates imports accordingly. |
| awx/ui/src/components/AppContainer/AppContainer.test.js | Updates nav expandable selector to PF6 OUIA component type. |
| awx/ui/src/components/AppContainer/AppContainer.js | Migrates Masthead APIs and Page prop names for PF6. |
| awx/ui/src/components/AlertModal/AlertModal.js | Moves Modal to deprecated PF6 import and updates icon sizing/styling. |
| awx/ui/src/components/AdHocCommands/AdHocPreviewStep.js | Updates error text tokens to PF6. |
| awx/ui/src/components/AdHocCommands/AdHocExecutionEnvironmentStep.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/AdHocCommands/AdHocDetailsStep.test.js | Updates Switch role expectation to switch (PF6). |
| awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js | Migrates FormGroup help prop to labelHelp and removes labelOff usage. |
| awx/ui/src/components/AdHocCommands/AdHocCredentialStep.js | Migrates FormGroup help prop to labelHelp. |
| awx/ui/src/components/AddRole/CheckboxCard.js | Updates border tokens to PF6. |
| awx/ui/src/components/AddRole/AddResourceRole.test.js | Updates chip/label DOM selectors for PF6 Labels. |
| awx/ui/src/border.css | Updates select toggle border overrides from PF5 classes/tokens to PF6. |
| awx/ui/src/ascender.css | Adds/updates PF6 theme tokens, PF6 selectors, and shared styling overrides for PF6. |
| awx/ui/src/App.js | Updates PageSection usage and switches dark-mode class name to PF6. |
| awx/ui/package.json | Bumps PatternFly dependencies to v6. |
| awx/ui/package-lock.json | Updates lockfile for PatternFly v6 dependency graph. |
| awx/ui/lingui.config.js | Updates Lingui config module format for v6 compatibility. |
Files not reviewed (1)
- awx/ui/package-lock.json: Generated file
Comment on lines
167
to
+171
| if (prefersDarkMode) { | ||
| document.documentElement.classList.add('pf-v5-theme-dark'); | ||
| document.documentElement.classList.add('pf-v6-theme-dark'); | ||
| import('./darkmode.css'); | ||
| } else { | ||
| import('./lightmode.css'); |
Comment on lines
+75
to
+79
| document.documentElement.classList.add('pf-v6-theme-dark'); | ||
| import('../../darkmode.css'); | ||
| } else { | ||
| document.documentElement.classList.remove('pf-v5-theme-dark'); | ||
| document.documentElement.classList.remove('pf-v6-theme-dark'); | ||
| import('../../lightmode.css'); |
Comment on lines
40
to
43
| <ExclamationCircleIcon | ||
| size="lg" | ||
| css="color: var(--pf-v5-global--danger-color--100)" | ||
| size="xl" | ||
| css="var(--pf-t--global--color--status--danger--default)" | ||
| /> |
Comment on lines
58
to
62
| <CheckCircleIcon | ||
| size="lg" | ||
| css="color: var(--pf-v5-global--success-color--100)" | ||
| size="xl" | ||
| css="var(--pf-t--global--color--status--success--default)" | ||
| /> | ||
| ), |
| position="right" | ||
| > | ||
| <ExclamationTriangleIcon css="color: var(--pf-v5-global--danger-color--100); margin-left: 20px;" /> | ||
| <ExclamationTriangleIcon css="var(--pf-t--global--color--status--danger--default)" /> |
| /> | ||
| <b>{t`Schedule Rules`}:</b> | ||
| <pre css="white-space: pre; font-family: var(--pf-v5-global--FontFamily--monospace)"> | ||
| <pre css="var(--pf-t--global--font--family--mono)"> |
| /> | ||
| <RulesTitle>{t`Schedule Rules`}:</RulesTitle> | ||
| <pre css="white-space: pre; font-family: var(--pf-v5-global--FontFamily--monospace)"> | ||
| <pre css="var(--pf-t--global--font--family--mono)"> |
| className="pf-v5-c-form__label-text" | ||
| css="font-weight: var(--pf-v5-global--FontWeight--bold)" | ||
| className="pf-v6-c-form__label-text" | ||
| css="var(--pf-t--global--font--weight--heading--bold)" |
Comment on lines
45
to
49
| <PopoverButton | ||
| aria-label={ariaLabel ?? t`More information`} | ||
| aria-haspopup="true" | ||
| className="pf-v5-c-form__group-label-help" | ||
| className="pf-v6-c-form__group-label-help" | ||
| onClick={(e) => e.preventDefault()} |
Comment on lines
10
to
+14
| "@lingui/react": "^6.3.0", | ||
| "@patternfly/patternfly": "^5.4.2", | ||
| "@patternfly/react-core": "^5.4.14", | ||
| "@patternfly/react-icons": "^5.4.2", | ||
| "@patternfly/react-table": "^5.4.16", | ||
| "@patternfly/patternfly": "^6.5.2", | ||
| "@patternfly/react-core": "^6.5.1", | ||
| "@patternfly/react-icons": "^6.5.1", | ||
| "@patternfly/react-table": "^6.5.1", |
Replace bare css= attributes (not valid HTML/React) with proper
style={{ }} objects on PF6 icons, CardBody, pre, Split, and Title
elements. Wire unused ouiaId prop in Popover to the trigger button.
Add lightmode.css which was imported but not tracked.
Contributor
Author
|
All Copilot review comments addressed in commit 0135d03:
|
cigamit
approved these changes
Jun 28, 2026
This was referenced Jun 28, 2026
sy-base
pushed a commit
to sy-base/ascender
that referenced
this pull request
Jul 4, 2026
* Upgrade PatternFly from v5 to v6 — core infrastructure and shared components (1/2)
Migrate all shared UI components, CSS theming (ascender.css, darkmode.css,
border.css, login.css), and build configuration (package.json, lingui.config.js)
from PatternFly 5 to PatternFly 6.
Key changes:
- Update PF5 CSS class prefixes (pf-v5-) to PF6 (pf-v6-)
- Replace deprecated PF5 component imports with PF6 equivalents
- Migrate deprecated components (DropdownItem, Modal, Wizard) to
@patternfly/react-core/deprecated or new PF6 APIs
- Update styled-components using PF CSS variables to v6 token names
- Fix InputGroup/InputGroupItem usage with isFill prop
- Update Popover button styling to prevent label height expansion
- Adjust masthead icon sizing and dropdown menu font sizes
- Add dark mode overrides for topology view SVG nodes
* Fix gridColumns prop leaking to DOM in ActionsTd
Destructure the unused gridColumns prop so it doesn't pass through
to the underlying Td element, which causes a React warning about
unrecognized DOM attributes and fails the setupTests.js console
error check.
* Fix PF6 component test failures
- AppContainer: use OUIA attribute selector for NavExpandable (PF6
dropped pf-m-expandable modifier)
- OptionsList: rename 'Chip group category' to 'Label group category'
(PF6 ChipGroup → LabelGroup)
- NotificationListItem: query by role="switch" instead of
role="checkbox" (PF6 Switch component change)
- ScheduleList: use .pf-v6-svg selector for icon SVGs (PF6 renders
nested SVG elements per icon)
- ChipGroup: destructure onOverflowChipClick out of props to prevent
DOM leak, and wire it via event delegation on the overflow button
* Fix invalid css prop usage and add missing lightmode.css
Replace bare css= attributes (not valid HTML/React) with proper
style={{ }} objects on PF6 icons, CardBody, pre, Split, and Title
elements. Wire unused ouiaId prop in Popover to the trigger button.
Add lightmode.css which was imported but not tracked.
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
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
Migrate all shared UI infrastructure from PatternFly 5 to PatternFly 6: package dependencies, build configuration, CSS theming files, and all shared components under
awx/ui/src/components/.This is part 1 of 2 — covers the foundational layer that screens depend on. Part 2 (screen-level components) follows in PR #520 and depends on this PR being merged first.
Key changes
@patternfly/react-core,@patternfly/react-icons,@patternfly/react-tableto v6pf-v5-) to PF6 (pf-v6-) across all theming files (ascender.css,darkmode.css,border.css,login.css)DropdownItem,Modal,Wizard) to@patternfly/react-core/deprecatedor new PF6 APIsInputGroup/InputGroupItemusage withisFillprop for proper flex filllingui.config.jsfor Lingui v6 compatibilitycss=prop usage on icons and components — replaced with properstyle={{ }}objectslightmode.csswith Quantic-themed card borders and masthead stylinggridColumnsprop leaking to DOM inActionsTdChipGrouponOverflowChipClickprop leak (PF6LabelGroupuses event delegation on.pf-m-overflow)Files: 137 changed (components, CSS, config)
ISSUE TYPE
COMPONENT NAME
ASCENDER VERSION
25.4.0
ADDITIONAL INFORMATION
Part 1/2 of the PatternFly 6 upgrade. Screen-level migrations are in PR #520 (2/2).
Tested with
npm --prefix awx/ui run test— 551 suites passing, 2903 tests passing (8 skipped: NodeModal, see PR #520). Browser smoke-tested across Dashboard, Settings, Inventories, Users, Topology View, and Notification Templates in both light and dark modes.