OCPBUGS-79315: fix treeshaking of pf/react-icons#16188
Open
logonoff wants to merge 3 commits intoopenshift:mainfrom
Open
OCPBUGS-79315: fix treeshaking of pf/react-icons#16188logonoff wants to merge 3 commits intoopenshift:mainfrom
logonoff wants to merge 3 commits intoopenshift:mainfrom
Conversation
openshift-ci-robot
added
jira/valid-reference
Contributor
|
@logonoff: This pull request references Jira Issue OCPBUGS-79315, which is valid. The bug has been moved to the POST state. 3 validation(s) were run on this bug
The bug has been updated to refer to the pull request using the external bug tracker. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
openshift-ci
bot
added
component/core
Contributor
|
@logonoff: This pull request references Jira Issue OCPBUGS-79315, which is valid. 3 validation(s) were run on this bug
DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
Contributor
📝 WalkthroughWalkthroughThis pull request systematically updates import statements across the codebase to use consolidated package-level exports instead of deep distribution paths. PatternFly icon imports are consolidated from ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx (1)
4-4: Consider standardizingDataViewFilterOptionimports if available from package root.
Line 4 imports from an internaldist/esmpath, matching a pattern used across the codebase (persistent-volume-claim.tsx, pod-list.tsx, template-instance.tsx, and others). However, other types from the same package (e.g.,DataViewCheckboxFilteron line 3) import from the package root. If PatternFly exportsDataViewFilterOptionpublicly, aligning this import would improve consistency and reduce coupling to internal build artifacts.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx` at line 4, The import for DataViewFilterOption is pointing to an internal path; change the import statement that currently references '@patternfly/react-data-view/dist/esm/DataViewFilters' to import DataViewFilterOption from the package root (same source used for DataViewCheckboxFilter), e.g. '@patternfly/react-data-view', so both DataViewCheckboxFilter and DataViewFilterOption come from the public export; update the single import line accordingly and run TypeScript/build to confirm the named export exists and adjust if the package exposes a different name.frontend/public/components/pod-list.tsx (1)
30-30: Please verify this deep type import is intentionally required.
Using@patternfly/react-data-view/dist/esm/DataViewFilterscouples us to package internals; ifDataViewFilterOptionis exported from@patternfly/react-data-view, prefer the root export for forward compatibility.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/public/components/pod-list.tsx` at line 30, The import pulls DataViewFilterOption from the package internals which risks breakage; check whether DataViewFilterOption is exported from the package root and, if so, replace the deep import with import type { DataViewFilterOption } from '@patternfly/react-data-view'. If the type is not available on the root, add a short comment above the import explaining the intentional deep import and why (or pin the package version in package.json) so reviewers know this is deliberate and not accidental.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/pods.tsx`:
- Around line 5-6: Replace the legacy PatternFly v4 token imports
chart_color_blue_100 and chart_color_blue_200 with the v6 tokens using the t_
prefix and consolidate imports from the package root: import
t_chart_color_blue_100 as blue100 and t_chart_color_blue_200 as blue200, and
also import t_color_blue_50 as blue300 (mapping to existing blue300 usage) from
'@patternfly/react-tokens' instead of importing from '/dist/esm/...'.
In `@frontend/public/components/utils/selector.tsx`:
- Line 3: Replace the package-level barrel import of the SearchIcon with the
deep per-icon ESM path to ensure optimal treeshaking: locate the import of
SearchIcon and change it from the package-level '@patternfly/react-icons' to the
deep path '@patternfly/react-icons/dist/esm/icons/search-icon', keeping the same
imported symbol name (SearchIcon) used elsewhere in selector.tsx.
---
Nitpick comments:
In
`@frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx`:
- Line 4: The import for DataViewFilterOption is pointing to an internal path;
change the import statement that currently references
'@patternfly/react-data-view/dist/esm/DataViewFilters' to import
DataViewFilterOption from the package root (same source used for
DataViewCheckboxFilter), e.g. '@patternfly/react-data-view', so both
DataViewCheckboxFilter and DataViewFilterOption come from the public export;
update the single import line accordingly and run TypeScript/build to confirm
the named export exists and adjust if the package exposes a different name.
In `@frontend/public/components/pod-list.tsx`:
- Line 30: The import pulls DataViewFilterOption from the package internals
which risks breakage; check whether DataViewFilterOption is exported from the
package root and, if so, replace the deep import with import type {
DataViewFilterOption } from '@patternfly/react-data-view'. If the type is not
available on the root, add a short comment above the import explaining the
intentional deep import and why (or pin the package version in package.json) so
reviewers know this is deliberate and not accidental.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: dd5541d0-c4c2-4a53-a83c-c346503315da
📒 Files selected for processing (168)
frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.tsxfrontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsxfrontend/packages/console-app/src/components/data-view/ConsoleDataView.tsxfrontend/packages/console-app/src/components/nav/NavHeader.tsxfrontend/packages/console-app/src/components/nav/PinnedResource.tsxfrontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsxfrontend/packages/console-app/src/components/nodes/NodesPage.tsxfrontend/packages/console-app/src/components/nodes/status/CSRStatus.tsxfrontend/packages/console-app/src/components/quick-starts/QuickStartEmptyState.tsxfrontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.tsxfrontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsxfrontend/packages/console-app/src/utils/perspective.tsxfrontend/packages/console-shared/src/components/Tooltip/Tooltip.tsxfrontend/packages/console-shared/src/components/actions/menu/ActionMenuToggle.tsxfrontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsxfrontend/packages/console-shared/src/components/catalog/catalog-view/CatalogEmptyState.tsxfrontend/packages/console-shared/src/components/dashboard/activity-card/ActivityBody.tsxfrontend/packages/console-shared/src/components/dashboard/activity-card/ActivityItem.tsxfrontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsxfrontend/packages/console-shared/src/components/dashboard/status-card/AlertsBody.tsxfrontend/packages/console-shared/src/components/dashboard/status-card/states.tsxfrontend/packages/console-shared/src/components/datetime/Timestamp.tsxfrontend/packages/console-shared/src/components/dynamic-form/templates.tsxfrontend/packages/console-shared/src/components/form-utils/ActionGroupWithIcons.tsxfrontend/packages/console-shared/src/components/form-utils/FormFooter.tsxfrontend/packages/console-shared/src/components/formik-fields/MultiTypeaheadField.tsxfrontend/packages/console-shared/src/components/formik-fields/item-selector-field/SelectorCard.tsxfrontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.tsxfrontend/packages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldFooter.tsxfrontend/packages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldRow.tsxfrontend/packages/console-shared/src/components/formik-fields/text-column-field/TextColumnItemContent.tsxfrontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.tsxfrontend/packages/console-shared/src/components/getting-started/QuickStartGettingStartedCard.tsxfrontend/packages/console-shared/src/components/pod/PodRing.tsxfrontend/packages/console-shared/src/components/pod/PodRingSet.tsxfrontend/packages/console-shared/src/components/pod/__tests__/PodRingSet.spec.tsxfrontend/packages/console-shared/src/components/popover/Popover.tsxfrontend/packages/console-shared/src/components/query-browser/QueryBrowser.tsxfrontend/packages/console-shared/src/components/shortcuts/Shortcut.tsxfrontend/packages/console-shared/src/components/status/icons.tsxfrontend/packages/console-shared/src/components/status/statuses.tsxfrontend/packages/container-security/src/components/ImageVulnerabilityRow.tsxfrontend/packages/container-security/src/components/ImageVulnerabilityToggleGroup.tsxfrontend/packages/container-security/src/components/image-manifest-vuln.tsxfrontend/packages/container-security/src/components/summary.tsxfrontend/packages/container-security/src/const.tsfrontend/packages/dev-console/src/actions/add-resources.tsxfrontend/packages/dev-console/src/components/add/AddCardSectionEmptyState.tsxfrontend/packages/dev-console/src/components/add/__tests__/add-page-test-data.tsxfrontend/packages/dev-console/src/components/deployments/deployment-strategy/advanced-options/LifecycleHookField.tsxfrontend/packages/dev-console/src/components/guided-tour/GuidedTourText.tsxfrontend/packages/dev-console/src/components/health-checks/HealthCheckProbe.tsxfrontend/packages/dev-console/src/components/hpa/HPAUtilizationField.tsxfrontend/packages/dev-console/src/components/import/ImportStrategySection.tsxfrontend/packages/dev-console/src/components/import/ImportStrategySelector.tsxfrontend/packages/dev-console/src/components/import/__tests__/render-utils.spec.tsfrontend/packages/dev-console/src/components/import/devfile/DevfileInfo.tsxfrontend/packages/dev-console/src/components/import/git/DockerSection.tsxfrontend/packages/dev-console/src/components/import/git/SampleRepo.tsxfrontend/packages/dev-console/src/components/import/render-utils.tsxfrontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsxfrontend/packages/dev-console/src/components/monitoring/overview/__tests__/MonitoringOverview.spec.tsxfrontend/packages/dev-console/src/components/pipeline-section/pipeline/WebhookSection.tsxfrontend/packages/dev-console/src/components/pipelines-visualization/CustomTaskNode.tsxfrontend/packages/dev-console/src/components/pipelines-visualization/reducer.tsfrontend/packages/dev-console/src/models/pipelines.tsfrontend/packages/dev-console/src/utils/icons.tsxfrontend/packages/dev-console/src/utils/perspective.tsxfrontend/packages/eslint-plugin-console/lib/config/rules/typescript.jsfrontend/packages/helm-plugin/src/components/details-page/notes/HelmReleaseNotesEmptyState.tsxfrontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmChartVersionDropdown.tsxfrontend/packages/helm-plugin/src/components/list-page/HelmReleaseList.tsxfrontend/packages/helm-plugin/src/utils/icons.tsxfrontend/packages/insights-plugin/src/components/InsightsPopup/mappers.tsfrontend/packages/knative-plugin/src/components/overview/EventPubSubExpandButton.tsxfrontend/packages/knative-plugin/src/components/test-function/RequestPane.tsxfrontend/packages/knative-plugin/src/models.tsfrontend/packages/knative-plugin/src/topology/components/decorators/RevisionRouteDecorator.tsxfrontend/packages/knative-plugin/src/topology/components/decorators/ServiceRouteDecorator.tsxfrontend/packages/knative-plugin/src/topology/components/nodes/SinkUriNode.tsxfrontend/packages/knative-plugin/src/utils/fetch-dynamic-eventsources-utils.tsfrontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsxfrontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostNICs.tsxfrontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostPowerStatusIcon.tsxfrontend/packages/metal3-plugin/src/components/baremetal-hosts/dashboard/StatusCard.tsxfrontend/packages/metal3-plugin/src/components/maintenance/MaintenanceIcon.tsxfrontend/packages/metal3-plugin/src/components/maintenance/MaintenancePopover.tsxfrontend/packages/operator-lifecycle-manager-v1/src/components/OLMv1Switch.tsxfrontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/common.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/affinity.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/match-expressions.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/resource-requirements.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/status/phase.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/status/pods.tsxfrontend/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsxfrontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-item-details.tsxfrontend/packages/operator-lifecycle-manager/src/components/subscription.tsxfrontend/packages/shipwright-plugin/src/models.tsfrontend/packages/topology/src/behavior/withCreateConnector.tsxfrontend/packages/topology/src/components/graph-view/components/RegroupHint.tsxfrontend/packages/topology/src/components/graph-view/components/nodes/decorators/UrlDecorator.tsxfrontend/packages/topology/src/components/page/LimitExceededState.tsxfrontend/packages/topology/src/components/page/TopologyEmptyState.tsxfrontend/packages/topology/src/components/page/TopologyPageToolbar.tsxfrontend/packages/topology/src/components/workload/BuildOverview.tsxfrontend/packages/topology/src/components/workload/NetworkingOverview.tsxfrontend/packages/topology/src/filters/NameLabelFilterDropdown.tsxfrontend/packages/topology/src/filters/TopologyFilterBar.tsxfrontend/packages/vsphere-plugin/src/PopoverHelpButton.tsxfrontend/packages/vsphere-plugin/src/components/VSphereOperatorStatuses.tsxfrontend/packages/webterminal-plugin/src/components/cloud-shell/CloudShellMastheadAction.tsxfrontend/packages/webterminal-plugin/src/components/cloud-shell/CloudShellMastheadButton.tsxfrontend/packages/webterminal-plugin/src/components/cloud-shell/MinimizeRestoreButton.tsxfrontend/public/components/alert-manager.tsxfrontend/public/components/api-explorer.tsxfrontend/public/components/build-pipeline.tsxfrontend/public/components/cluster-settings/cluster-operator.tsxfrontend/public/components/cluster-settings/cluster-status.tsxfrontend/public/components/configmap-and-secret-data.tsxfrontend/public/components/custom-resource-definition.tsxfrontend/public/components/dashboard/dashboards-page/cluster-dashboard/details-card.tsxfrontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/cluster-setup-getting-started-card.tsxfrontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/explore-admin-features-getting-started-card.tsxfrontend/public/components/dashboard/project-dashboard/getting-started/DeveloperFeaturesGettingStartedCard.tsxfrontend/public/components/dashboard/project-dashboard/getting-started/SampleGettingStartedCard.tsxfrontend/public/components/edit-yaml.tsxfrontend/public/components/factory/Table/VirtualizedTableBody.tsxfrontend/public/components/factory/table.tsxfrontend/public/components/filter-toolbar.tsxfrontend/public/components/graphs/tooltip.tsxfrontend/public/components/graphs/utils.tsfrontend/public/components/image-stream-timeline.tsxfrontend/public/components/image-stream.tsxfrontend/public/components/machine-config-pool.tsxfrontend/public/components/machine-set.tsxfrontend/public/components/masthead/masthead-toolbar.tsxfrontend/public/components/modals/impersonate-user-modal.tsxfrontend/public/components/modals/taints-modal.tsxfrontend/public/components/modals/tolerations-modal.tsxfrontend/public/components/monitoring/alertmanager/alertmanager-config.tsxfrontend/public/components/monitoring/receiver-forms/routing-labels-editor.tsxfrontend/public/components/namespace.jsxfrontend/public/components/persistent-volume-claim.tsxfrontend/public/components/pod-connect.tsxfrontend/public/components/pod-list.tsxfrontend/public/components/pod-traffic.tsxfrontend/public/components/resource-quota.jsxfrontend/public/components/search-filter-dropdown.tsxfrontend/public/components/search.tsxfrontend/public/components/secrets/create-secret/OpaqueSecretForm.tsxfrontend/public/components/secrets/create-secret/OpaqueSecretFormEntry.tsxfrontend/public/components/secrets/create-secret/PullSecretCredentialEntry.tsxfrontend/public/components/secrets/create-secret/PullSecretCredentialsForm.tsxfrontend/public/components/sidebars/resource-sidebar-samples.tsxfrontend/public/components/start-guide.tsxfrontend/public/components/template-instance.tsxfrontend/public/components/utils/details-item.tsxfrontend/public/components/utils/details-page.tsxfrontend/public/components/utils/download-button.tsxfrontend/public/components/utils/field-level-help.tsxfrontend/public/components/utils/kebab.tsxfrontend/public/components/utils/list-input.tsxfrontend/public/components/utils/name-value-editor.jsxfrontend/public/components/utils/selector.tsxfrontend/public/components/utils/single-typeahead-dropdown.tsxfrontend/public/components/utils/toggle-play.tsxfrontend/public/components/utils/webhooks.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (1)
**
⚙️ CodeRabbit configuration file
-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.
Files:
frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsxfrontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsxfrontend/packages/dev-console/src/components/hpa/HPAUtilizationField.tsxfrontend/packages/console-app/src/components/quick-starts/QuickStartEmptyState.tsxfrontend/packages/dev-console/src/components/import/git/DockerSection.tsxfrontend/packages/console-app/src/utils/perspective.tsxfrontend/packages/dev-console/src/components/guided-tour/GuidedTourText.tsxfrontend/packages/metal3-plugin/src/components/baremetal-hosts/dashboard/StatusCard.tsxfrontend/packages/dev-console/src/components/import/git/SampleRepo.tsxfrontend/packages/helm-plugin/src/components/details-page/notes/HelmReleaseNotesEmptyState.tsxfrontend/public/components/custom-resource-definition.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/match-expressions.tsxfrontend/packages/metal3-plugin/src/components/maintenance/MaintenanceIcon.tsxfrontend/packages/console-app/src/components/nav/PinnedResource.tsxfrontend/packages/dev-console/src/utils/icons.tsxfrontend/packages/knative-plugin/src/components/overview/EventPubSubExpandButton.tsxfrontend/packages/helm-plugin/src/utils/icons.tsxfrontend/packages/dev-console/src/models/pipelines.tsfrontend/public/components/alert-manager.tsxfrontend/packages/topology/src/filters/NameLabelFilterDropdown.tsxfrontend/packages/operator-lifecycle-manager-v1/src/components/OLMv1Switch.tsxfrontend/packages/topology/src/components/page/TopologyEmptyState.tsxfrontend/packages/insights-plugin/src/components/InsightsPopup/mappers.tsfrontend/packages/console-app/src/components/data-view/ConsoleDataView.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/affinity.tsxfrontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostNICs.tsxfrontend/packages/dev-console/src/components/pipelines-visualization/CustomTaskNode.tsxfrontend/packages/container-security/src/components/image-manifest-vuln.tsxfrontend/packages/topology/src/components/page/LimitExceededState.tsxfrontend/public/components/dashboard/project-dashboard/getting-started/SampleGettingStartedCard.tsxfrontend/packages/dev-console/src/components/import/devfile/DevfileInfo.tsxfrontend/packages/knative-plugin/src/topology/components/decorators/RevisionRouteDecorator.tsxfrontend/packages/knative-plugin/src/components/test-function/RequestPane.tsxfrontend/packages/webterminal-plugin/src/components/cloud-shell/CloudShellMastheadButton.tsxfrontend/packages/dev-console/src/components/import/ImportStrategySelector.tsxfrontend/packages/vsphere-plugin/src/components/VSphereOperatorStatuses.tsxfrontend/public/components/modals/taints-modal.tsxfrontend/packages/console-shared/src/components/Tooltip/Tooltip.tsxfrontend/public/components/cluster-settings/cluster-status.tsxfrontend/public/components/factory/Table/VirtualizedTableBody.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/resource-requirements.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/common.tsxfrontend/packages/knative-plugin/src/models.tsfrontend/packages/webterminal-plugin/src/components/cloud-shell/CloudShellMastheadAction.tsxfrontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-item-details.tsxfrontend/public/components/masthead/masthead-toolbar.tsxfrontend/public/components/secrets/create-secret/OpaqueSecretFormEntry.tsxfrontend/packages/shipwright-plugin/src/models.tsfrontend/packages/dev-console/src/utils/perspective.tsxfrontend/packages/topology/src/components/workload/NetworkingOverview.tsxfrontend/public/components/search-filter-dropdown.tsxfrontend/public/components/machine-set.tsxfrontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmChartVersionDropdown.tsxfrontend/public/components/dashboard/project-dashboard/getting-started/DeveloperFeaturesGettingStartedCard.tsxfrontend/packages/console-shared/src/components/form-utils/FormFooter.tsxfrontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/cluster-setup-getting-started-card.tsxfrontend/packages/dev-console/src/actions/add-resources.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/status/phase.tsxfrontend/public/components/secrets/create-secret/PullSecretCredentialEntry.tsxfrontend/packages/console-shared/src/components/shortcuts/Shortcut.tsxfrontend/packages/console-shared/src/components/formik-fields/item-selector-field/SelectorCard.tsxfrontend/public/components/image-stream.tsxfrontend/public/components/utils/kebab.tsxfrontend/packages/topology/src/components/page/TopologyPageToolbar.tsxfrontend/packages/console-shared/src/components/form-utils/ActionGroupWithIcons.tsxfrontend/public/components/sidebars/resource-sidebar-samples.tsxfrontend/packages/vsphere-plugin/src/PopoverHelpButton.tsxfrontend/public/components/pod-connect.tsxfrontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostPowerStatusIcon.tsxfrontend/public/components/modals/tolerations-modal.tsxfrontend/public/components/image-stream-timeline.tsxfrontend/public/components/api-explorer.tsxfrontend/public/components/monitoring/alertmanager/alertmanager-config.tsxfrontend/public/components/configmap-and-secret-data.tsxfrontend/public/components/utils/toggle-play.tsxfrontend/packages/console-app/src/components/nodes/NodesPage.tsxfrontend/packages/knative-plugin/src/utils/fetch-dynamic-eventsources-utils.tsfrontend/public/components/cluster-settings/cluster-operator.tsxfrontend/packages/topology/src/components/graph-view/components/RegroupHint.tsxfrontend/packages/console-shared/src/components/formik-fields/MultiTypeaheadField.tsxfrontend/public/components/utils/selector.tsxfrontend/packages/dev-console/src/components/import/render-utils.tsxfrontend/public/components/modals/impersonate-user-modal.tsxfrontend/packages/console-shared/src/components/status/statuses.tsxfrontend/packages/operator-lifecycle-manager/src/components/subscription.tsxfrontend/packages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldRow.tsxfrontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsxfrontend/packages/console-shared/src/components/datetime/Timestamp.tsxfrontend/packages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldFooter.tsxfrontend/public/components/filter-toolbar.tsxfrontend/packages/dev-console/src/components/add/AddCardSectionEmptyState.tsxfrontend/packages/helm-plugin/src/components/list-page/HelmReleaseList.tsxfrontend/packages/container-security/src/components/summary.tsxfrontend/packages/topology/src/behavior/withCreateConnector.tsxfrontend/public/components/pod-list.tsxfrontend/packages/console-shared/src/components/dashboard/activity-card/ActivityItem.tsxfrontend/public/components/secrets/create-secret/OpaqueSecretForm.tsxfrontend/packages/knative-plugin/src/topology/components/decorators/ServiceRouteDecorator.tsxfrontend/packages/console-shared/src/components/getting-started/QuickStartGettingStartedCard.tsxfrontend/packages/webterminal-plugin/src/components/cloud-shell/MinimizeRestoreButton.tsxfrontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/explore-admin-features-getting-started-card.tsxfrontend/public/components/utils/details-item.tsxfrontend/public/components/dashboard/dashboards-page/cluster-dashboard/details-card.tsxfrontend/packages/console-app/src/components/nodes/status/CSRStatus.tsxfrontend/public/components/namespace.jsxfrontend/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsxfrontend/public/components/machine-config-pool.tsxfrontend/public/components/monitoring/receiver-forms/routing-labels-editor.tsxfrontend/packages/console-shared/src/components/catalog/catalog-view/CatalogEmptyState.tsxfrontend/public/components/graphs/utils.tsfrontend/packages/console-shared/src/components/actions/menu/ActionMenuToggle.tsxfrontend/public/components/utils/download-button.tsxfrontend/packages/topology/src/components/workload/BuildOverview.tsxfrontend/public/components/factory/table.tsxfrontend/public/components/build-pipeline.tsxfrontend/packages/console-app/src/components/nav/NavHeader.tsxfrontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.tsxfrontend/public/components/utils/details-page.tsxfrontend/packages/topology/src/filters/TopologyFilterBar.tsxfrontend/packages/dev-console/src/components/health-checks/HealthCheckProbe.tsxfrontend/packages/operator-lifecycle-manager/src/components/descriptors/status/pods.tsxfrontend/packages/dev-console/src/components/pipeline-section/pipeline/WebhookSection.tsxfrontend/packages/dev-console/src/components/import/__tests__/render-utils.spec.tsfrontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsxfrontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsxfrontend/packages/container-security/src/components/ImageVulnerabilityRow.tsxfrontend/packages/container-security/src/components/ImageVulnerabilityToggleGroup.tsxfrontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsxfrontend/packages/console-shared/src/components/formik-fields/text-column-field/TextColumnItemContent.tsxfrontend/packages/dev-console/src/components/add/__tests__/add-page-test-data.tsxfrontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.tsxfrontend/packages/console-shared/src/components/dashboard/activity-card/ActivityBody.tsxfrontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsxfrontend/public/components/start-guide.tsxfrontend/public/components/graphs/tooltip.tsxfrontend/packages/console-shared/src/components/popover/Popover.tsxfrontend/packages/dev-console/src/components/import/ImportStrategySection.tsxfrontend/public/components/secrets/create-secret/PullSecretCredentialsForm.tsxfrontend/packages/console-shared/src/components/query-browser/QueryBrowser.tsxfrontend/public/components/utils/single-typeahead-dropdown.tsxfrontend/public/components/persistent-volume-claim.tsxfrontend/packages/console-shared/src/components/status/icons.tsxfrontend/public/components/search.tsxfrontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.tsxfrontend/packages/dev-console/src/components/deployments/deployment-strategy/advanced-options/LifecycleHookField.tsxfrontend/packages/container-security/src/const.tsfrontend/packages/console-shared/src/components/dynamic-form/templates.tsxfrontend/public/components/template-instance.tsxfrontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsxfrontend/public/components/utils/list-input.tsxfrontend/packages/console-shared/src/components/pod/PodRing.tsxfrontend/packages/dev-console/src/components/pipelines-visualization/reducer.tsfrontend/packages/metal3-plugin/src/components/maintenance/MaintenancePopover.tsxfrontend/packages/console-shared/src/components/pod/PodRingSet.tsxfrontend/public/components/resource-quota.jsxfrontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.tsxfrontend/packages/console-shared/src/components/pod/__tests__/PodRingSet.spec.tsxfrontend/public/components/edit-yaml.tsxfrontend/public/components/utils/field-level-help.tsxfrontend/packages/console-shared/src/components/dashboard/status-card/states.tsxfrontend/public/components/utils/webhooks.tsxfrontend/packages/console-shared/src/components/dashboard/status-card/AlertsBody.tsxfrontend/packages/knative-plugin/src/topology/components/nodes/SinkUriNode.tsxfrontend/packages/dev-console/src/components/monitoring/overview/__tests__/MonitoringOverview.spec.tsxfrontend/packages/eslint-plugin-console/lib/config/rules/typescript.jsfrontend/packages/topology/src/components/graph-view/components/nodes/decorators/UrlDecorator.tsxfrontend/public/components/utils/name-value-editor.jsxfrontend/public/components/pod-traffic.tsx
Comment on lines
+5
to
+6
| import { chart_color_blue_100 as blue100 } from '@patternfly/react-tokens/dist/esm/chart_color_blue_100'; | ||
| import { chart_color_blue_200 as blue200 } from '@patternfly/react-tokens/dist/esm/chart_color_blue_200'; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check PatternFly react-tokens package exports for chart color tokens
# Check if chart color tokens are exported from package root
rg -n "export.*chart_color_blue" node_modules/@patternfly/react-tokens/dist/esm/index.js || \
echo "Chart color tokens not found in main index"
# Verify the specific token files exist in ESM dist
fd -t f "chart_color_blue_100" node_modules/@patternfly/react-tokens/dist/esm/
fd -t f "chart_color_blue_200" node_modules/@patternfly/react-tokens/dist/esm/Repository: openshift/console
Length of output: 486
🏁 Script executed:
#!/bin/bash
# Read the file to see actual imports at lines 1-10
head -20 frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/pods.tsxRepository: openshift/console
Length of output: 983
🏁 Script executed:
#!/bin/bash
# Search for all `@patternfly/react-tokens` imports in the codebase to identify patterns
rg "@patternfly/react-tokens" --no-heading -A 0 | head -50Repository: openshift/console
Length of output: 6771
🌐 Web query:
@patternfly/react-tokens package exports structure package.json
💡 Result:
@patternfly/react-tokens does not define a Node "exports" map in its package.json (so subpath resolution isn’t restricted/declared via "exports"). (app.unpkg.com)
Instead, the entrypoints are the older fields:
- CJS entry:
"main": "dist/js/index.js"(app.unpkg.com) - ESM entry:
"module": "dist/esm/index.js"(app.unpkg.com) - Types:
"types": "dist/esm/index.d.ts"(app.unpkg.com)
And the package is intended to be consumed either via:
- deep imports like
@patternfly/react-tokens/dist/esm/<token_name>(github.com) - or from the package root (which resolves via
main/moduleabove). (app.unpkg.com)
Citations:
- 1: https://app.unpkg.com/%40patternfly/react-tokens%406.0.0/files/package.json
- 2: https://app.unpkg.com/%40patternfly/react-tokens%406.0.0/files/package.json
- 3: https://app.unpkg.com/%40patternfly/react-tokens%406.0.0/files/package.json
- 4: https://app.unpkg.com/%40patternfly/react-tokens%406.0.0/files/package.json
- 5: https://github.com/patternfly/patternfly-react/tree/main/packages/react-tokens
- 6: https://app.unpkg.com/%40patternfly/react-tokens%406.0.0/files/package.json
🏁 Script executed:
#!/bin/bash
# Search for any chart_color imports from package root (not deep paths)
rg "from '@patternfly/react-tokens'" | grep "chart_color"Repository: openshift/console
Length of output: 43
🌐 Web query:
@patternfly/react-tokens 6.4.0 chart_color tokens package root export index
💡 Result:
In @patternfly/react-tokens 6.4.0, the chart color design tokens are in the chart scope (e.g. CSS token pf-t--chart--color--blue--100). (patternfly.org)
The corresponding React token name follows PatternFly’s mapping rules (scope segments become _-separated and prefixed with t_), so for example:
pf-t--chart--color--blue--100→t_chart_color_blue_100(patternfly.org)
You can import React tokens either:
- from the package root “barrel” export:
import { t_chart_color_blue_100 } from '@patternfly/react-tokens';
- or directly from the generated file:
import t_chart_color_blue_100 from '@patternfly/react-tokens/dist/esm/t_chart_color_blue_100'; ``` ([patternfly.org](https://www.patternfly.org/tokens/develop-with-tokens/))
Citations:
- 1: https://www.patternfly.org/tokens/all-patternfly-tokens
- 2: https://www.patternfly.org/tokens/all-patternfly-tokens
- 3: https://www.patternfly.org/tokens/develop-with-tokens/
🏁 Script executed:
#!/bin/bash
# Check what token names are actually being used in the file
sed -n '4,6p' frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/pods.tsxRepository: openshift/console
Length of output: 343
🌐 Web query:
@patternfly/react-tokens chart_color_blue_100 token name correct naming
💡 Result:
In PatternFly 6 (current token system), the React token for the CSS chart token --pf-t--chart--color--blue--100 is:
- React token export name:
t_chart_color_blue_100(underscores;--pf-t→t) [2] - CSS token name it maps to:
--pf-t--chart--color--blue--100[1][2]
If you’re instead looking at PatternFly 4’s legacy chart variable, that CSS variable was --pf-chart-color-blue-100 (note: no -t-) [3].
🏁 Script executed:
#!/bin/bash
# Search to see if chart_color tokens are used elsewhere and if they're valid
rg "chart_color_blue_100|chart_color_blue_200" --no-headingRepository: openshift/console
Length of output: 639
🌐 Web query:
@patternfly/react-tokens dist/esm chart_color_blue_100 legacy naming
💡 Result:
In PatternFly v4/v5, chart color tokens used the legacy chart variable naming:
- CSS variable:
--pf-chart-color-blue-100(v4-archive.patternfly.org) - React token (legacy file/name):
chart_color_blue_100(this corresponds to that CSS variable naming scheme)
In PatternFly v6, tokens were renamed into the new --pf-t--... token system:
- CSS token:
--pf-t--chart--color--blue--100(patternfly.org) - React token name/file format:
t_chart_color_blue_100(because--pf-t--...becomest_...and segments become underscores) (patternfly.org)
Citations:
- 1: https://v4-archive.patternfly.org/v4/documentation/overview/global-css-variables
- 2: https://www.patternfly.org/tokens/all-patternfly-tokens
- 3: https://www.patternfly.org/tokens/develop-with-tokens/
🏁 Script executed:
#!/bin/bash
# Check if the file actually builds/compiles with current token names
# Look for any TypeScript errors or type definition references
grep -r "chart_color_blue_100" frontend/packages/operator-lifecycle-manager --include="*.d.ts" || echo "No TS types found for legacy naming"Repository: openshift/console
Length of output: 96
🌐 Web query:
@patternfly/react-tokens 6.4.0 backwards compatibility chart_color legacy tokens v4
💡 Result:
There isn’t a built-in “backwards compatibility chart” in @patternfly/react-tokens@6.4.0 that keeps PatternFly v4 legacy chart tokens like chart_color_* working unchanged—you need to rename/migrate them.
v4 → v6 mapping (chart color tokens)
PatternFly 4 chart colors were CSS vars like:
--pf-chart-color-blue-100(and similar) (v4-archive.patternfly.org)
In PatternFly 6, chart color tokens are design tokens like:
--pf-t--chart--color--blue--100(and similar) (patternfly.org)
And the PatternFly 6 React token naming mirrors the CSS token name by replacing --pf-t-- with t_ and -- with _, e.g.:
--pf-t--global--spacer--sm→t_global_spacer_sm(patternfly.org)
So, for chart colors, the practical migration is:
| PatternFly v4 (CSS var) | PatternFly v6 (CSS token) | PatternFly v6 (React token) |
|---|---|---|
--pf-chart-color-blue-100 |
--pf-t--chart--color--blue--100 (patternfly.org) |
t_chart_color_blue_100 (patternfly.org) |
Note about @patternfly/react-tokens@6.4.0
In the 6.4.0 release, PatternFly explicitly notes that React tokens added a t_ prefix for design token references (including charts) to avoid collisions and make them easier to distinguish. (patternfly.org)
Citations:
- 1: https://v4-archive.patternfly.org/v4/documentation/overview/global-css-variables
- 2: https://www.patternfly.org/tokens/all-patternfly-tokens
- 3: https://www.patternfly.org/tokens/develop-with-tokens/?utm_source=openai
- 4: https://www.patternfly.org/tokens/all-patternfly-tokens
- 5: https://www.patternfly.org/tokens/develop-with-tokens/?utm_source=openai
- 6: https://www.patternfly.org/get-started/release-highlights
Replace with correct PatternFly v6 token naming and consolidate imports to package root.
Lines 5–6 use legacy PatternFly v4 naming (chart_color_blue_100, chart_color_blue_200); PatternFly 6.4.0 requires the t_ prefix scheme. The correct tokens are t_chart_color_blue_100 and t_chart_color_blue_200, which are available from the package root—consolidate all three color imports:
import { t_color_blue_50 as blue300, t_chart_color_blue_100 as blue100, t_chart_color_blue_200 as blue200 } from '@patternfly/react-tokens';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/pods.tsx`
around lines 5 - 6, Replace the legacy PatternFly v4 token imports
chart_color_blue_100 and chart_color_blue_200 with the v6 tokens using the t_
prefix and consolidate imports from the package root: import
t_chart_color_blue_100 as blue100 and t_chart_color_blue_200 as blue200, and
also import t_color_blue_50 as blue300 (mapping to existing blue300 usage) from
'@patternfly/react-tokens' instead of importing from '/dist/esm/...'.
pf/react-styles has files in .mjs which import from .css. they were not being transformed by swc, so the css stylemock was not working. now swc will transform those files and the stylemock will work as intended.
logonoff
force-pushed
the
OCPBUGS-79315-treeshaking-icons
branch
from
f85ace7 to
87b8ac5
Compare
Contributor
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: jhadvig, logonoff The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
Member
Author
|
checked the artifact in the analyze job and saw that tree shaking is working for icons (e.g., WizardsOfTheCoastIcon is no longer bundled) /verified by @logonoff, ci |
openshift-ci-robot
added
the
verified
Contributor
|
@logonoff: This PR has been marked as verified by DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
Contributor
|
@logonoff: The following test failed, say
Full PR test history. Your PR dashboard. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
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
3 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.
Previously the data-view CJS import was causing the non-dynamic react-icons barrel file to be imported, causing every icon to be imported.
This PR rewrites those imports which shrinks the vendors main bundle by ~2 MiB
after:
before:
Summary by CodeRabbit
Refactor
Chores