Upgrade styled-components from 5 to 6 by blaipr · Pull Request #380 · ctrliq/ascender

blaipr · 2026-06-11T07:51:01Z

SUMMARY

Upgrades styled-components 5.3.11 → 6.4.2. This is the first stage of modernizing the React stack (styled-components 5 does not even compile against React 18/19, so it has to move first). v6 has two breaking changes that affect this codebase, both handled here:

1. The babel macro was removed. ~50 files relied on styled-components/macro for the css-prop transform (css="..." on plain JSX elements). The macro's direct replacement, babel-plugin-styled-components, is now wired into the jest babel transform and the webpack babel-loader, so those usages keep working unchanged. Macro imports become plain imports; dead side-effect macro imports are removed. The css={\...`}` template-literal usages (ActionsTd, ActionItem, Search, AdvancedSearch) are converted to explicit styled components.

2. v6 no longer filters non-HTML props from styled DOM elements — everything is forwarded to the DOM, producing React unknown-prop warnings (which this test suite treats as failures). Custom props on styled DOM elements are converted to transient ($-prefixed) props per the v6 migration guide: ActionsGrid ($numActions/$gridColumns), ChipHolder ($isDisabled), SelectableItem/Indicator ($isSelected), JobEventLine ($isClickable), OutputWrapper ($cssMap), LinkG/StartG ($ignorePointerEvents), NodeG ($noPointerEvents), FormColumnLayout ($stacked), HeaderRow's Th ($alignRight). Three props that were never consumed and only existed to be swallowed by v5's filtering are dropped (isFirst on JobEventLine, isInline on FormCheckboxLayout, ouiaId on a styled div — none ever reached the DOM in v5).

Rendering output is unchanged: every conversion preserves the exact CSS the component produced under v5.

Independent of every other open PR — verified conflict-free via pairwise git merge-tree.

ISSUE TYPE

New or Enhanced Feature

COMPONENT NAME

UI

ASCENDER VERSION

awx: 25.4.1.dev5+gcda0899.d20260610

ADDITIONAL INFORMATION

All UI gates run against exactly this branch state (unmodified main + only this change):

npm --prefix awx/ui run lint     # clean
npm --prefix awx/ui run test     # 544 suites passed (1 skipped), 2855 tests passed (19 skipped)
npm --prefix awx/ui run build    # production build succeeds

The unknown-prop warnings the suite surfaces are an exhaustive detector here: setupTests.js fails any test that logs a console error, so the passing suite demonstrates no styled component leaks props to the DOM anywhere the tests render.

Pre-existing oddity left untouched: Project.helptext.js uses css={{...}} objects on <ul> elements without ever having imported the macro — those styles never applied in v5 either and remain inert.

styled-components 6 removed the babel macro and no longer filters non-HTML props from styled DOM elements, so beyond the version bump: - Replace styled-components/macro imports with plain styled-components imports, and wire babel-plugin-styled-components into the jest babel transform and webpack babel-loader: the macro previously provided the css-prop transform that ~50 files rely on (css="..." on JSX elements), and the plugin is its direct replacement. Dead side-effect macro imports are removed. - Convert custom props on styled DOM elements to transient ($-prefixed) props so they are not forwarded to the DOM (v5 filtered them automatically; v6 forwards everything): ActionsGrid, ChipHolder, SelectableItem/Indicator, JobEventLine, OutputWrapper, LinkG, StartG, NodeG, FormColumnLayout, Th in HeaderRow. - Convert the css={`...`} template usages in ActionsTd, ActionItem, Search and AdvancedSearch to explicit styled components. - Drop props that were never consumed and only existed to be swallowed by v5's filtering: isFirst on JobEventLine, isInline on FormCheckboxLayout, ouiaId on the WorkflowOutputToolbar styled div. Verified: lint clean, jest 544 suites / 2855 tests passing (baseline), production build succeeds.

Copilot

Pull request overview

This PR upgrades the AWX UI React codebase from styled-components@5.3.11 to styled-components@6.4.2 as a prerequisite for modernizing the React stack, updating build/test tooling and component code to account for v6’s macro removal and changed prop-forwarding behavior.

Changes:

Upgrade styled-components to v6.4.2 and add babel-plugin-styled-components to restore the css-prop transform.
Remove styled-components/macro usage and replace macro-driven css={...} patterns with explicit styled-components where needed.
Convert styled DOM-element custom props to transient ($-prefixed) props / drop unused swallowed props to prevent React unknown-prop warnings.

Reviewed changes

Copilot reviewed 76 out of 77 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
awx/ui/src/screens/User/UserList/UserListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerStartScreen.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.js	Convert styling/props for styled SVG elements for v6 prop-forwarding.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.js	Convert custom prop to transient prop for styled SVG element.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeDeleteModal.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/Survey/SurveyListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Template/shared/WorkflowJobTemplateForm.js	Drop unused prop previously swallowed by v5 filtering.
awx/ui/src/screens/Team/TeamList/TeamListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Project/shared/ProjectSubForms/SvnSubForm.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Project/shared/ProjectSubForms/ManualSubForm.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Project/shared/ProjectSubForms/GitSubForm.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Project/shared/ProjectSubForms/ArchiveSubForm.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Project/ProjectList/ProjectListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js	Drop unused/swallowed DOM prop on styled wrapper.
awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Job/JobOutput/shared/JobEventLine.js	Convert custom prop to transient prop for styled DOM element.
awx/ui/src/screens/Job/JobOutput/PageControls.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Job/JobOutput/JobOutput.js	Convert custom prop to transient prop for styled DOM element.
awx/ui/src/screens/Job/JobOutput/JobEvent.js	Drop unused swallowed prop + convert clickable prop to transient.
awx/ui/src/screens/Job/JobOutput/EmptyOutput.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Job/JobDetail/JobDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Inventory/shared/InventoryGroupsDeleteModal.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Instances/InstancePeers/InstancePeerListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Instances/InstanceListenerAddressList/InstanceListenerAddressListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Instances/InstanceList/InstanceListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Instances/InstanceList/InstanceList.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/InstanceGroup/Instances/InstanceList.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/HostMetrics/HostMetricsListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Host/HostList/HostListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/screens/Host/HostDetail/HostDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/Workflow/WorkflowTools.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/Workflow/WorkflowStartNode.js	Convert custom prop to transient prop for styled SVG element.
awx/ui/src/components/Workflow/WorkflowNodeHelp.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/TemplateList/TemplateListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/StatusLabel/StatusLabel.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/SelectableCard/SelectableCard.js	Convert custom selection props to transient props.
awx/ui/src/components/Search/Search.js	Replace `css` prop usage with styled wrapper + remove macro import.
awx/ui/src/components/Search/AdvancedSearch.js	Replace `css` prop usage with styled wrapper + remove macro import.
awx/ui/src/components/Schedule/shared/ScheduleFormFields.js	Convert layout prop to transient prop + remove macro import.
awx/ui/src/components/Schedule/shared/FrequencyDetailSubform.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/Schedule/ScheduleToggle/ScheduleToggle.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/ResourceAccessList/ResourceAccessListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/PromptDetail/PromptDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/PaginatedTable/PaginatedTable.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/PaginatedTable/HeaderRow.js	Replace `css` prop usage with transient prop-driven styled component.
awx/ui/src/components/PaginatedTable/ActionsTd.js	Replace `css` prop block with explicit styled cell + transient props.
awx/ui/src/components/PaginatedTable/ActionItem.js	Replace `css` prop usage with explicit styled wrapper + transient prop.
awx/ui/src/components/Lookup/MultiCredentialsLookup.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/Lookup/Lookup.js	Convert custom prop to transient prop for styled DOM element.
awx/ui/src/components/LaunchPrompt/steps/CredentialsStep.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/HostToggle/HostToggle.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/FormLayout/FormLayout.js	Convert layout prop to transient prop for styled DOM element.
awx/ui/src/components/ErrorDetail/ErrorDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/DetailList/CodeDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/DetailList/ArrayDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/CodeEditor/VariablesDetail.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/CheckboxListItem/CheckboxListItem.js	Remove `styled-components/macro` side-effect import.
awx/ui/src/components/AlertModal/AlertModal.js	Remove `styled-components/macro` side-effect import.
awx/ui/package.json	Upgrade `styled-components` and add `babel-plugin-styled-components`.
awx/ui/package-lock.json	Lockfile updates for styled-components v6 + new babel plugin and deps.
awx/ui/config/webpack.config.js	Add `babel-plugin-styled-components` to Babel loader pipeline.
awx/ui/config/jest/babelTransform.js	Add `babel-plugin-styled-components` to Jest Babel transform.

Files not reviewed (1)

awx/ui/package-lock.json: Language not supported

 const NodeG = styled.g`
-  pointer-events: ${(props) => (props.noPointerEvents ? 'none' : 'initial')};
+  pointer-events: ${(props) => (props.$noPointerEvents ? 'none' : 'initial')};
  cursor: ${(props) => (props.job ? 'pointer' : 'default')};
 `;


      <NodeG
        id={`node-${node.id}`}
        job={node.job}
-        noPointerEvents={isAddLinkSourceNode}
+        $noPointerEvents={isAddLinkSourceNode}
        onMouseEnter={handleNodeMouseEnter}


cigamit

Tested and working just fine.

blaipr · 2026-06-12T13:16:44Z

Both review comments addressed in the latest commit: NodeG's cursor styling now reads a transient $job prop (and the JSX passes $job), and NodeContents reads $isInvalidLinkTarget — nothing custom is forwarded to the DOM anymore. All 119 visualizer tests pass; lint clean.

cigamit self-assigned this Jun 11, 2026

cigamit added enhancement New feature or request dependencies Pull requests that update a dependency file javascript Pull requests that update javascript code cleanup labels Jun 11, 2026

cigamit requested a review from Copilot June 11, 2026 21:26

Copilot started reviewing on behalf of cigamit June 11, 2026 21:26 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

cigamit approved these changes Jun 11, 2026

View reviewed changes

cigamit merged commit a5c9fd1 into ctrliq:main Jun 11, 2026

This was referenced Jun 12, 2026

Make VisualizerNode styling props transient #395

Merged

Show elapsed time on the workflow job output toolbar #393

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade styled-components from 5 to 6#380

Upgrade styled-components from 5 to 6#380
cigamit merged 1 commit into
ctrliq:mainfrom
blaipr:feature/styled-components-6

blaipr commented Jun 11, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

cigamit left a comment

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Conversation

blaipr commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

ISSUE TYPE

COMPONENT NAME

ASCENDER VERSION

ADDITIONAL INFORMATION

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

cigamit left a comment

Choose a reason for hiding this comment

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

blaipr commented Jun 11, 2026 •

edited

Loading