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
RedHatInsights · May 27, 2022 · f04ac70 · f04ac70
1 parent 38ecc40
commit f04ac70
Show file tree

Hide file tree

Showing 21 changed files with 108 additions and 77 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {