fix(App): babel transformation for the react-core modules

babel.config.js

@@ -1,3 +1,13 @@
+const path = require('path');
+const glob = require('glob');
+
+const mapper = {
+  TextVariants: 'Text',
+  DropdownPosition: 'dropdownConstants',
+  //TextListVariants: 'TextList',
+  //TextListItemVariants: 'TextListItem'
+};
+
 module.exports = {
   presets: [
     // Polyfills
@@ -13,6 +23,36 @@ 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/**/${
+                  mapper[importName] || 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',
       {

config/dev.webpack.config.js

@@ -9,7 +9,7 @@ const { config: webpackConfig, plugins } = config({
   appUrl: process.env.BETA
     ? ['/beta/openshift/insights/advisor']
     : ['/openshift/insights/advisor'],
-  env: process.env.BETA ? 'stage-beta' : 'stage-stable',
+  env: process.env.BETA ? 'prod-beta' : 'stage-stable',
   sassPrefix: '.ocp-advisor, .ocpAdvisor',
   ...(process.env.MOCK
     ? {

package.json

@@ -84,7 +84,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": {

src/App.js

@@ -9,9 +9,9 @@ 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 } 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 { Spinner } from '@patternfly/react-core/';
 
 import { Routes } from './Routes';
 import ErrorBoundary from './Utilities/ErrorBoundary';

src/Components/AffectedClustersTable/AffectedClustersTable.js

@@ -9,16 +9,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 { 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 {
+  Card,
+  CardBody,
+  Tooltip,
+  Bullseye,
   Pagination,
   PaginationVariant,
-} from '@patternfly/react-core/dist/js/components/Pagination/Pagination';
+} from '@patternfly/react-core/';
+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 {
   ErrorState,

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';
 

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';

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';

src/Components/ClustersListTable/ClustersListTable.js

@@ -12,13 +12,14 @@ 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';
+} from '@patternfly/react-core/';
 import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryToolbar/PrimaryToolbar';
 
 import {

src/Components/Common/Tables.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import capitalize from 'lodash/capitalize';
 import cloneDeep from 'lodash/cloneDeep';
 
-import { Tooltip } from '@patternfly/react-core/dist/js/components/Tooltip';
+import { Tooltip } from '@patternfly/react-core';
 import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat';
 
 import {

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';

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';

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 }) => (

src/Components/MessageState/EmptyStates.js

@@ -3,14 +3,13 @@ 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 } 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';

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,

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';

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/';
 

src/Components/Recommendation/Recommendation.js

@@ -17,16 +17,18 @@ 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,
+} 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';

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 isEqual from 'lodash/isEqual';
 
 import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat';
 import { InsightsLabel } from '@redhat-cloud-services/frontend-components/InsightsLabel';

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(() =>