Bug 1952111 - Optimize importing from @patternfly/react-tokens
Summary: Optimize importing from @patternfly/react-tokens
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.8
Hardware: Unspecified
OS: Unspecified
unspecified
medium
Target Milestone: ---
: 4.8.0
Assignee: David Taylor
QA Contact: Xiyun Zhao
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2021-04-21 14:20 UTC by David Taylor
Modified: 2021-07-27 23:02 UTC (History)
5 users (show)

Fixed In Version:
Doc Type: No Doc Update
Doc Text:
Clone Of:
Environment:
Last Closed: 2021-07-27 23:02:20 UTC
Target Upstream Version:


Attachments (Terms of Use)


Links
System ID Private Priority Status Summary Last Updated
Github openshift console pull 8777 0 None open Bug 1952111: Optimized imports from @patternfly/react-tokens 2021-04-26 16:13:14 UTC
Red Hat Product Errata RHSA-2021:2438 0 None None None 2021-07-27 23:02:40 UTC

Description David Taylor 2021-04-21 14:20:22 UTC
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';

Comment 2 Yadan Pei 2021-05-06 06:45:59 UTC
no functional impact and no build failures 

Moving to VERIFIED

Comment 5 errata-xmlrpc 2021-07-27 23:02:20 UTC
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


Note You need to log in before you can comment on or make changes to this bug.