Bug 1952111

Summary: Optimize importing from @patternfly/react-tokens
Product: OpenShift Container Platform Reporter: David Taylor <dtaylor>
Component: Management ConsoleAssignee: David Taylor <dtaylor>
Status: CLOSED ERRATA QA Contact: Xiyun Zhao <xiyuzhao>
Severity: medium Docs Contact:
Priority: unspecified    
Version: 4.8CC: aos-bugs, jokerman, spadgett, yanpzhan, yapei
Target Milestone: ---   
Target Release: 4.8.0   
Hardware: Unspecified   
OS: Unspecified   
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:

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'



  import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens';


  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.