Bug 1952111
| Summary: | Optimize importing from @patternfly/react-tokens | ||
|---|---|---|---|
| Product: | OpenShift Container Platform | Reporter: | David Taylor <dtaylor> |
| Component: | Management Console | Assignee: | David Taylor <dtaylor> |
| Status: | CLOSED ERRATA | QA Contact: | Xiyun Zhao <xiyuzhao> |
| Severity: | medium | Docs Contact: | |
| Priority: | unspecified | ||
| Version: | 4.8 | CC: | aos-bugs, jokerman, spadgett, yanpzhan, yapei |
| Target Milestone: | --- | ||
| Target Release: | 4.8.0 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Whiteboard: | |||
| Fixed In Version: | Doc Type: | No Doc Update | |
| Doc Text: | Story Points: | --- | |
| Clone Of: | Environment: | ||
| Last Closed: | 2021-07-27 23:02:20 UTC | Type: | Bug |
| Regression: | --- | Mount Type: | --- |
| Documentation: | --- | CRM: | |
| Verified Versions: | Category: | --- | |
| oVirt Team: | --- | RHEL 7.3 requirements from Atomic Host: | |
| Cloudforms Team: | --- | Target Upstream Version: | |
| Embargoed: | |||
no functional impact and no build failures Moving to VERIFIED Since the problem described in this bug report should be resolved in a recent advisory, it has been closed with a resolution of ERRATA. For information on the advisory (Moderate: OpenShift Container Platform 4.8.2 bug fix and security update), and where to find the updated files, follow the link below. If the solution does not work for you, open a new bug report. https://access.redhat.com/errata/RHSA-2021:2438 |
In many files we are importing from @patternfly/react-tokens using a format like: import { something } from '@patternfly/react-tokens' Whenever we do that webpack has to parse 12k different token files. This caused a build failure in recent PF latest smoketesting. It also increases build time. It's much better to import a specific file, like: import something from '@patternfly/react-tokens/dist/esm/something' Ex. Replace: import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens'; With import warningColor from '@patternfly/react-tokens/dist/esm/global_warning_color_100' File list: frontend/packages/console-shared/src/components/dashboard (1 usage found) DashboardGrid.tsx (1 usage found) 3 import { global_breakpoint_lg as breakpointLG } from '@patternfly/react-tokens'; frontend/packages/console-shared/src/components/editor (1 usage found) yaml-editor-utils.ts (1 usage found) 11 import { global_BackgroundColor_dark_100 as editorBackground } from '@patternfly/react-tokens'; frontend/packages/console-shared/src/components/hpa (1 usage found) DeleteHPAModal.tsx (1 usage found) 5 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens'; frontend/packages/kubevirt-plugin/src/components/cdi-upload-provider (1 usage found) upload-pvc-popover.tsx (1 usage found) 5 import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens'; frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details (1 usage found) PipelineVisualizationTask.tsx (1 usage found) 11 } from '@patternfly/react-tokens'; frontend/packages/pipelines-plugin/src/components/pipelines/modals/triggers (1 usage found) RemoveTriggerForm.tsx (1 usage found) 4 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens'; frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/modals (1 usage found) index.tsx (1 usage found) 6 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens'; frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-topology (4 usages found) BuilderFinallyNode.tsx (1 usage found) 3 import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens'; ErrorNodeDecorator.tsx (1 usage found) 4 import { global_danger_color_100 as redColor } from '@patternfly/react-tokens'; PlusNodeDecorator.tsx (1 usage found) 4 import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens'; WhenExpressionDecorator.tsx (1 usage found) 4 import { global_BorderColor_100 as lightBorderColor } from '@patternfly/react-tokens'; frontend/packages/pipelines-plugin/src/utils (1 usage found) pipeline-augment.ts (1 usage found) 9 } from '@patternfly/react-tokens'; frontend/public/components/graphs (1 usage found) utils.ts (1 usage found) 2 import { chart_color_orange_300 as requestedColor } from '@patternfly/react-tokens';