From f04ac700b5c73e2d4758a95761cdf1283f0139a2 Mon Sep 17 00:00:00 2001 From: Fewwy <62722417+Fewwy@users.noreply.github.com> Date: Fri, 27 May 2022 12:39:26 +0200 Subject: [PATCH] fix(App): babel transformation for the react-core modules (#279) * fix(App): babel transformation for the react-core modules * Updated react-core layout imports and removed the mapper * Updated the babel config * Removed the trailing slashes --- babel.config.js | 31 +++++++++++++++++++ config/dev.webpack.config.js | 3 ++ package-lock.json | 2 +- package.json | 2 +- src/App.js | 3 +- .../AffectedClustersTable.js | 15 ++++----- src/Components/Breadcrumbs/index.js | 3 +- src/Components/ClusterHeader/ClusterHeader.js | 10 ++++-- src/Components/ClusterRules/ClusterRules.js | 7 ++--- .../ClustersListTable/ClustersListTable.js | 13 ++++---- src/Components/Labels/CategoryLabel.js | 3 +- src/Components/Labels/RuleLabels.js | 8 ++--- src/Components/Loading/Loading.js | 3 +- src/Components/MessageState/EmptyStates.js | 4 +-- src/Components/MessageState/MessageState.js | 14 ++++----- src/Components/Modals/DisableRule.js | 14 +++++---- src/Components/Modals/ViewHostAcks.js | 3 +- .../Recommendation/Recommendation.js | 20 ++++++------ src/Components/RecsListTable/RecsListTable.js | 15 +++++---- src/Routes.js | 10 +++--- src/Utilities/ErrorBoundary.js | 2 +- 21 files changed, 108 insertions(+), 77 deletions(-) diff --git a/babel.config.js b/babel.config.js index 725faa63..557c616b 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,6 @@ +const path = require('path'); +const glob = require('glob'); + module.exports = { presets: [ // Polyfills @@ -13,6 +16,34 @@ module.exports = { // Devs tend to write `import { someIcon } from '@patternfly/react-icons';` // This transforms the import to be specific which prevents having to parse 2k+ icons // Also prevents potential bundle size blowups with CJS + [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `./node_modules/@patternfly/react-core/dist/js/**/${importName}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw `File with importName ${importName} does not exist`; + } + + res = res.replace(path.resolve(__dirname, './node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true, + }, + }, + 'react-core', + ], [ 'transform-imports', { diff --git a/config/dev.webpack.config.js b/config/dev.webpack.config.js index 31a76123..327b25f6 100644 --- a/config/dev.webpack.config.js +++ b/config/dev.webpack.config.js @@ -1,5 +1,7 @@ const { resolve } = require('path'); const config = require('@redhat-cloud-services/frontend-components-config'); +const BundleAnalyzerPlugin = + require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const { config: webpackConfig, plugins } = config({ rootFolder: resolve(__dirname, '../'), @@ -33,6 +35,7 @@ plugins.push( } ) ); +plugins.push(new BundleAnalyzerPlugin()); module.exports = { ...webpackConfig, diff --git a/package-lock.json b/package-lock.json index 67b49469..1a528ae2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -68,7 +68,7 @@ "stylelint": "14.8.2", "stylelint-config-recommended-scss": "^6.0.0", "stylelint-scss": "4.2.0", - "webpack-bundle-analyzer": "4.5.0", + "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "4.9.2" } }, diff --git a/package.json b/package.json index 85ecb449..93b01b5d 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "stylelint": "14.8.2", "stylelint-config-recommended-scss": "^6.0.0", "stylelint-scss": "4.2.0", - "webpack-bundle-analyzer": "4.5.0", + "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "4.9.2" }, "release": { diff --git a/src/App.js b/src/App.js index e5ca5ff5..343550fb 100644 --- a/src/App.js +++ b/src/App.js @@ -9,9 +9,8 @@ import PropTypes from 'prop-types'; import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal'; import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry/Registry'; import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux'; -import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye/Bullseye'; +import { Bullseye, Spinner } from '@patternfly/react-core'; import LockIcon from '@patternfly/react-icons/dist/js/icons/lock-icon'; -import { Spinner } from '@patternfly/react-core/dist/js/components/Spinner'; import { Routes } from './Routes'; import ErrorBoundary from './Utilities/ErrorBoundary'; diff --git a/src/Components/AffectedClustersTable/AffectedClustersTable.js b/src/Components/AffectedClustersTable/AffectedClustersTable.js index 0c1cfae6..c4e40754 100644 --- a/src/Components/AffectedClustersTable/AffectedClustersTable.js +++ b/src/Components/AffectedClustersTable/AffectedClustersTable.js @@ -11,16 +11,17 @@ import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryTo import { EmptyTable } from '@redhat-cloud-services/frontend-components/EmptyTable'; import { TableToolbar } from '@redhat-cloud-services/frontend-components/TableToolbar'; import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat'; -import { Card, CardBody } from '@patternfly/react-core/dist/js/components/Card'; +import { + Card, + CardBody, + Tooltip, + Bullseye, + Pagination, +} from '@patternfly/react-core'; +import { PaginationVariant } from '@patternfly/react-core/dist/js/components/Pagination/Pagination'; import { Table } from '@patternfly/react-table/dist/js/components/Table/Table'; import { TableBody } from '@patternfly/react-table/dist/js/components/Table/Body'; import { TableHeader } from '@patternfly/react-table/dist/js/components/Table/Header'; -import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye'; -import { Tooltip } from '@patternfly/react-core/dist/js/components/Tooltip'; -import { - Pagination, - PaginationVariant, -} from '@patternfly/react-core/dist/js/components/Pagination/Pagination'; import { ErrorState, diff --git a/src/Components/Breadcrumbs/index.js b/src/Components/Breadcrumbs/index.js index 85b580e6..bd830724 100644 --- a/src/Components/Breadcrumbs/index.js +++ b/src/Components/Breadcrumbs/index.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { Link, useLocation } from 'react-router-dom'; -import { Breadcrumb } from '@patternfly/react-core/dist/js/components/Breadcrumb/Breadcrumb'; -import { BreadcrumbItem } from '@patternfly/react-core/dist/js/components/Breadcrumb/BreadcrumbItem'; +import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; import messages from '../../Messages'; diff --git a/src/Components/ClusterHeader/ClusterHeader.js b/src/Components/ClusterHeader/ClusterHeader.js index 58784e0d..4d518989 100644 --- a/src/Components/ClusterHeader/ClusterHeader.js +++ b/src/Components/ClusterHeader/ClusterHeader.js @@ -2,9 +2,13 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; -import { Grid, GridItem } from '@patternfly/react-core/dist/js/layouts/Grid'; -import { Stack, StackItem } from '@patternfly/react-core/dist/js/layouts/Stack'; -import { Title } from '@patternfly/react-core/dist/js/components/Title'; +import { + Grid, + GridItem, + Stack, + StackItem, + Title, +} from '@patternfly/react-core'; import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core'; import Skeleton from '@redhat-cloud-services/frontend-components/Skeleton'; import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat/DateFormat'; diff --git a/src/Components/ClusterRules/ClusterRules.js b/src/Components/ClusterRules/ClusterRules.js index 7b9c27c6..3a0806cf 100644 --- a/src/Components/ClusterRules/ClusterRules.js +++ b/src/Components/ClusterRules/ClusterRules.js @@ -17,11 +17,8 @@ import { TableHeader, TableVariant, } from '@patternfly/react-table'; -import { Card, CardBody } from '@patternfly/react-core/dist/js/components/Card'; -import { - Tooltip, - TooltipPosition, -} from '@patternfly/react-core/dist/js/components/Tooltip'; +import { Card, CardBody, Tooltip } from '@patternfly/react-core'; +import { TooltipPosition } from '@patternfly/react-core/dist/js/components/Tooltip'; import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon'; import { global_danger_color_100 as globalDangerColor100 } from '@patternfly/react-tokens/dist/js/global_danger_color_100'; diff --git a/src/Components/ClustersListTable/ClustersListTable.js b/src/Components/ClustersListTable/ClustersListTable.js index 1883624c..9d453563 100644 --- a/src/Components/ClustersListTable/ClustersListTable.js +++ b/src/Components/ClustersListTable/ClustersListTable.js @@ -15,14 +15,15 @@ import { TableHeader, TableVariant, } from '@patternfly/react-table'; -import { Card, CardBody } from '@patternfly/react-core/dist/js/components/Card'; -import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye'; -import { Spinner } from '@patternfly/react-core/dist/js/components/Spinner'; import { + Card, + CardBody, + Bullseye, + Spinner, Pagination, - PaginationVariant, -} from '@patternfly/react-core/dist/js/components/Pagination'; -import { Tooltip } from '@patternfly/react-core'; + Tooltip, +} from '@patternfly/react-core'; +import { PaginationVariant } from '@patternfly/react-core/dist/js/components/Pagination/Pagination'; import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryToolbar/PrimaryToolbar'; import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat'; import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter/conditionalFilterConstants'; diff --git a/src/Components/Labels/CategoryLabel.js b/src/Components/Labels/CategoryLabel.js index e498fca8..6d86707b 100644 --- a/src/Components/Labels/CategoryLabel.js +++ b/src/Components/Labels/CategoryLabel.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import camelCase from 'lodash/camelCase'; -import { Label } from '@patternfly/react-core/dist/js/components/Label/index'; -import { LabelGroup } from '@patternfly/react-core/dist/js/components/LabelGroup/LabelGroup'; +import { Label, LabelGroup } from '@patternfly/react-core'; import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon'; import PortIcon from '@patternfly/react-icons/dist/esm/icons/port-icon'; import AutomationIcon from '@patternfly/react-icons/dist/esm/icons/automation-icon'; diff --git a/src/Components/Labels/RuleLabels.js b/src/Components/Labels/RuleLabels.js index 2d7d69b8..19e45877 100644 --- a/src/Components/Labels/RuleLabels.js +++ b/src/Components/Labels/RuleLabels.js @@ -1,9 +1,5 @@ -import { - Tooltip, - TooltipPosition, -} from '@patternfly/react-core/dist/js/components/Tooltip/Tooltip'; - -import { Label } from '@patternfly/react-core/dist/js/components/Label/Label'; +import { TooltipPosition } from '@patternfly/react-core/dist/js/components/Tooltip/Tooltip'; +import { Tooltip, Label } from '@patternfly/react-core'; import PropTypes from 'prop-types'; import React from 'react'; import { useIntl } from 'react-intl'; diff --git a/src/Components/Loading/Loading.js b/src/Components/Loading/Loading.js index 2c0b9ec5..15725759 100644 --- a/src/Components/Loading/Loading.js +++ b/src/Components/Loading/Loading.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Card } from '@patternfly/react-core/dist/js/components/Card/Card'; -import { CardBody } from '@patternfly/react-core/dist/js/components/Card/CardBody'; +import { Card, CardBody } from '@patternfly/react-core'; import { List } from 'react-content-loader'; const Loading = ({ id }) => ( diff --git a/src/Components/MessageState/EmptyStates.js b/src/Components/MessageState/EmptyStates.js index 9526e301..36ccc0c1 100644 --- a/src/Components/MessageState/EmptyStates.js +++ b/src/Components/MessageState/EmptyStates.js @@ -2,15 +2,13 @@ import * as React from 'react'; import { useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { Stack, StackItem } from '@patternfly/react-core/dist/js/layouts/Stack'; -import { Title } from '@patternfly/react-core/dist/js/components/Title'; +import { Title, Button, Stack, StackItem } from '@patternfly/react-core'; import { EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateSecondaryActions, } from '@patternfly/react-core/dist/js/components/EmptyState'; -import { Button } from '@patternfly/react-core/dist/js/components/Button'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/js/icons/plus-circle-icon'; diff --git a/src/Components/MessageState/MessageState.js b/src/Components/MessageState/MessageState.js index 662e6087..c6f0ddc4 100644 --- a/src/Components/MessageState/MessageState.js +++ b/src/Components/MessageState/MessageState.js @@ -1,14 +1,14 @@ -import { - EmptyState, - EmptyStateVariant, -} from '@patternfly/react-core/dist/js/components/EmptyState/EmptyState'; +import { EmptyStateVariant } from '@patternfly/react-core/dist/js/components/EmptyState/EmptyState'; import CubesIcon from '@patternfly/react-icons/dist/js/icons/cubes-icon'; -import { EmptyStateBody } from '@patternfly/react-core/dist/js/components/EmptyState/EmptyStateBody'; -import { EmptyStateIcon } from '@patternfly/react-core/dist/js/components/EmptyState/EmptyStateIcon'; +import { + EmptyStateIcon, + EmptyStateBody, + EmptyState, + Title, +} from '@patternfly/react-core'; import PropTypes from 'prop-types'; import React from 'react'; -import { Title } from '@patternfly/react-core/dist/js/components/Title/Title'; const MessageState = ({ className, diff --git a/src/Components/Modals/DisableRule.js b/src/Components/Modals/DisableRule.js index 50e1bdf3..5f0d43de 100644 --- a/src/Components/Modals/DisableRule.js +++ b/src/Components/Modals/DisableRule.js @@ -3,12 +3,14 @@ import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; import { useDispatch } from 'react-redux'; -import { Button } from '@patternfly/react-core/dist/js/components/Button/Button'; -import { Checkbox } from '@patternfly/react-core/dist/js/components/Checkbox/Checkbox'; -import { Form } from '@patternfly/react-core/dist/js/components/Form/Form'; -import { FormGroup } from '@patternfly/react-core/dist/js/components/Form/FormGroup'; -import { Modal } from '@patternfly/react-core/dist/js/components/Modal/Modal'; -import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput'; +import { + Button, + Checkbox, + Form, + FormGroup, + Modal, + TextInput, +} from '@patternfly/react-core'; import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/'; import messages from '../../Messages'; diff --git a/src/Components/Modals/ViewHostAcks.js b/src/Components/Modals/ViewHostAcks.js index 35e6bed6..eb0fd043 100644 --- a/src/Components/Modals/ViewHostAcks.js +++ b/src/Components/Modals/ViewHostAcks.js @@ -10,9 +10,8 @@ import { TableHeader, cellWidth, } from '@patternfly/react-table'; -import { Button } from '@patternfly/react-core/dist/js/components/Button/Button'; +import { Button, Modal } from '@patternfly/react-core'; import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat'; -import { Modal } from '@patternfly/react-core/dist/js/components/Modal/Modal'; import OutlinedBellIcon from '@patternfly/react-icons/dist/js/icons/outlined-bell-icon'; import { addNotification as notification } from '@redhat-cloud-services/frontend-components-notifications/'; diff --git a/src/Components/Recommendation/Recommendation.js b/src/Components/Recommendation/Recommendation.js index fc2c8b0b..a6a25dd8 100644 --- a/src/Components/Recommendation/Recommendation.js +++ b/src/Components/Recommendation/Recommendation.js @@ -17,18 +17,20 @@ import { } from '@redhat-cloud-services/frontend-components/PageHeader'; import { Main } from '@redhat-cloud-services/frontend-components/Main'; import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat'; -import { Label } from '@patternfly/react-core/dist/js/components/Label/Label'; -import { Title } from '@patternfly/react-core/dist/js/components/Title/Title'; -import { LabelGroup } from '@patternfly/react-core/dist/js/components/LabelGroup'; +import { + Label, + Title, + LabelGroup, + Button, + Dropdown, + DropdownItem, + DropdownToggle, + Flex, + FlexItem, +} from '@patternfly/react-core'; import BellSlashIcon from '@patternfly/react-icons/dist/js/icons/bell-slash-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/'; -import { Button } from '@patternfly/react-core/dist/js/components/Button/Button'; -import { Dropdown } from '@patternfly/react-core/dist/js/components/Dropdown/Dropdown'; -import { DropdownItem } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownItem'; -import { DropdownToggle } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownToggle'; -import { Flex } from '@patternfly/react-core/dist/js/layouts/Flex/Flex'; -import { FlexItem } from '@patternfly/react-core/dist/js/layouts/Flex/FlexItem'; import { ErrorState } from '@redhat-cloud-services/frontend-components/ErrorState'; import { AdvisorProduct, diff --git a/src/Components/RecsListTable/RecsListTable.js b/src/Components/RecsListTable/RecsListTable.js index 078d0448..b8c236de 100644 --- a/src/Components/RecsListTable/RecsListTable.js +++ b/src/Components/RecsListTable/RecsListTable.js @@ -13,17 +13,16 @@ import { TableHeader, TableVariant, } from '@patternfly/react-table'; -import { Card, CardBody } from '@patternfly/react-core/dist/js/components/Card'; import { Pagination, - PaginationVariant, -} from '@patternfly/react-core/dist/js/components/Pagination'; -import { Stack } from '@patternfly/react-core/dist/js/layouts/Stack'; -import isEqual from 'lodash/isEqual'; -import { + Stack, + Card, + CardBody, Tooltip, - TooltipPosition, -} from '@patternfly/react-core/dist/js/components/Tooltip'; +} from '@patternfly/react-core'; +import { TooltipPosition } from '@patternfly/react-core/dist/js/components/Tooltip'; +import { PaginationVariant } from '@patternfly/react-core/dist/js/components/Pagination/Pagination'; +import isEqual from 'lodash/isEqual'; import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat'; import { InsightsLabel } from '@redhat-cloud-services/frontend-components/InsightsLabel'; diff --git a/src/Routes.js b/src/Routes.js index 89f5a770..5ac24c9a 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -1,10 +1,12 @@ import { Route, Switch, Redirect } from 'react-router-dom'; import React, { Suspense, lazy } from 'react'; -import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye'; -import { Spinner } from '@patternfly/react-core/dist/js/components/Spinner'; -import { EmptyState } from '@patternfly/react-core/dist/js/components/EmptyState'; -import { EmptyStateBody } from '@patternfly/react-core/dist/js/components/EmptyState'; +import { + Bullseye, + EmptyStateBody, + Spinner, + EmptyState, +} from '@patternfly/react-core'; import InvalidObject from '@redhat-cloud-services/frontend-components/InvalidObject/InvalidObject'; const Cluster = lazy(() => diff --git a/src/Utilities/ErrorBoundary.js b/src/Utilities/ErrorBoundary.js index 84670775..7a2d64ae 100644 --- a/src/Utilities/ErrorBoundary.js +++ b/src/Utilities/ErrorBoundary.js @@ -3,7 +3,7 @@ import { injectIntl } from 'react-intl'; import PropTypes from 'prop-types'; import { ErrorState } from '../Components/MessageState/EmptyStates'; -import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye/Bullseye'; +import { Bullseye } from '@patternfly/react-core'; class ErrorBoundary extends React.Component { constructor(props) {