fix(build): issues/296 npm updates for platform (#326)

* build, platform specific npm resources * chartArea, fix resize method, relates to left nav * pageHeader, revert title to platform version * redux, middleware, reducer, types, update notifications import * styles, move css files to src/index.js to avoid breaking sass
RedHatInsights · Jul 13, 2020 · 96c459e · 96c459e
1 parent c210245
commit 96c459e
Show file tree

Hide file tree

Showing 17 changed files with 218 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -82,9 +82,9 @@
     "@patternfly/react-icons": "4.4.2",
     "@patternfly/react-styles": "4.4.2",
     "@patternfly/react-tokens": "4.5.2",
-    "@redhat-cloud-services/frontend-components": "1.0.29",
-    "@redhat-cloud-services/frontend-components-notifications": "1.0.4",
-    "@redhat-cloud-services/frontend-components-utilities": "1.0.4",
+    "@redhat-cloud-services/frontend-components": "2.1.1",
+    "@redhat-cloud-services/frontend-components-notifications": "2.1.0",
+    "@redhat-cloud-services/frontend-components-utilities": "2.1.0",
     "axios": "^0.19.2",
     "c3": "^0.7.15",
     "classnames": "^2.2.6",

diff --git a/src/components/app.js b/src/components/app.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
+import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications/cjs';
 import { connectRouter, reduxActions } from '../redux';
 import { helpers } from '../common/helpers';
 import { I18n } from './i18n/i18n';

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -73,15 +73,25 @@ exports[`Authentication Component should render a non-connected component error:
             className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
             widget-type="InsightsPageHeader"
           >
-            <Title
-              headingLevel="h1"
+            <PageHeaderTitle
+              title="Subscription Watch"
             >
-              <h1
-                className="pf-c-title pf-m-2xl"
+              <Title
+                className=""
+                headingLevel="h1"
+                size="2xl"
+                widget-type="InsightsPageHeaderTitle"
               >
-                Subscription Watch
-              </h1>
-            </Title>
+                <h1
+                  className="pf-c-title pf-m-2xl"
+                  widget-type="InsightsPageHeaderTitle"
+                >
+                   
+                  Subscription Watch
+                   
+                </h1>
+              </Title>
+            </PageHeaderTitle>
           </section>
         </PageHeader>
       </PageHeader>

diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Card, CardTitle, CardHeader, CardActions, CardBody } from '@patternfly/react-core';
-import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/Skeleton';
+import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
 import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
 import { connectTranslate, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';

diff --git a/src/components/chartArea/chartArea.js b/src/components/chartArea/chartArea.js
@@ -27,32 +27,20 @@ class ChartArea extends React.Component {
 
   dataSetsToggle = {};
 
+  resizeObserver = helpers.noop;
+
   containerRef = React.createRef();
 
   tooltipRef = React.createRef();
 
   componentDidMount() {
-    this.onResizeContainer();
-    window.addEventListener('resize', this.onResizeContainer);
+    this.setResizeObserve();
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.onResizeContainer);
+    this.resizeObserver();
   }
 
-  /**
-   * On window resize adjust graph display.
-   *
-   * @event onResizeContainer
-   */
-  onResizeContainer = () => {
-    const containerElement = this.containerRef.current;
-
-    if (containerElement && containerElement.clientWidth) {
-      this.setState({ chartWidth: containerElement.clientWidth });
-    }
-  };
-
   /**
    * Consumer exposed, hides chart layer.
    *
@@ -89,6 +77,20 @@ class ChartArea extends React.Component {
     return updatedToggle;
   };
 
+  /**
+   * On resize adjust graph display.
+   *
+   * @event onResizeContainer
+   */
+  onResizeContainer = () => {
+    const { chartWidth } = this.state;
+    const { clientWidth = 0 } = this.containerRef.current || {};
+
+    if (clientWidth !== chartWidth) {
+      this.setState({ chartWidth: clientWidth });
+    }
+  };
+
   /**
    * Consumer exposed, determine if chart layer on/off.
    * Note: Using "setState" as related to this exposed check gives the appearance of a race condition.
@@ -99,6 +101,24 @@ class ChartArea extends React.Component {
    */
   getIsToggled = id => this.dataSetsToggle[id] || false;
 
+  /**
+   * Set ResizeObserver for scenarios where the window.resize event doesn't fire.
+   */
+  setResizeObserve() {
+    const containerElement = this.containerRef.current;
+    const { ResizeObserver } = window;
+
+    if (containerElement && ResizeObserver) {
+      const resizeObserver = new ResizeObserver(this.onResizeContainer);
+      resizeObserver.observe(containerElement);
+      this.resizeObserver = () => resizeObserver.unobserve(containerElement);
+    } else {
+      this.onResizeContainer();
+      window.addEventListener('resize', this.onResizeContainer);
+      this.resizeObserver = () => window.removeEventListener('resize', this.onResizeContainer);
+    }
+  }
+
   /**
    * Apply props, set x and y axis chart increments/ticks formatting.
    *

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Card, CardTitle, CardHeader, CardActions, CardBody } from '@patternfly/react-core';
 import { chart_color_green_300 as chartColorGreenDark } from '@patternfly/react-tokens';
-import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/Skeleton';
+import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
 import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
 import { connectTranslate, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap
@@ -7,19 +7,35 @@ exports[`PageHeader Component should render a basic component: basic 1`] = `
       className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
       widget-type="InsightsPageHeader"
     >
-      <Title
-        headingLevel="h1"
-      >
-        <h1
-          className="pf-c-title pf-m-2xl"
-        >
+      <PageHeaderTitle
+        title={
           <span
             className="test"
           >
             lorem
           </span>
-        </h1>
-      </Title>
+        }
+      >
+        <Title
+          className=""
+          headingLevel="h1"
+          size="2xl"
+          widget-type="InsightsPageHeaderTitle"
+        >
+          <h1
+            className="pf-c-title pf-m-2xl"
+            widget-type="InsightsPageHeaderTitle"
+          >
+             
+            <span
+              className="test"
+            >
+              lorem
+            </span>
+             
+          </h1>
+        </Title>
+      </PageHeaderTitle>
     </section>
   </PageHeader>
 </PageHeader>
@@ -32,15 +48,25 @@ exports[`PageHeader Component should render string node types: string 1`] = `
       className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
       widget-type="InsightsPageHeader"
     >
-      <Title
-        headingLevel="h1"
+      <PageHeaderTitle
+        title="dolor sit"
       >
-        <h1
-          className="pf-c-title pf-m-2xl"
+        <Title
+          className=""
+          headingLevel="h1"
+          size="2xl"
+          widget-type="InsightsPageHeaderTitle"
         >
-          dolor sit
-        </h1>
-      </Title>
+          <h1
+            className="pf-c-title pf-m-2xl"
+            widget-type="InsightsPageHeaderTitle"
+          >
+             
+            dolor sit
+             
+          </h1>
+        </Title>
+      </PageHeaderTitle>
     </section>
   </PageHeader>
 </PageHeader>

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap
@@ -29,15 +29,25 @@ exports[`PageLayout Component should render header and section children: multipl
         className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
         widget-type="InsightsPageHeader"
       >
-        <Title
-          headingLevel="h1"
+        <PageHeaderTitle
+          title="lorem"
         >
-          <h1
-            className="pf-c-title pf-m-2xl"
+          <Title
+            className=""
+            headingLevel="h1"
+            size="2xl"
+            widget-type="InsightsPageHeaderTitle"
           >
-            lorem
-          </h1>
-        </Title>
+            <h1
+              className="pf-c-title pf-m-2xl"
+              widget-type="InsightsPageHeaderTitle"
+            >
+               
+              lorem
+               
+            </h1>
+          </Title>
+        </PageHeaderTitle>
       </section>
     </PageHeader>
   </PageHeader>

diff --git a/src/components/pageLayout/pageHeader.js b/src/components/pageLayout/pageHeader.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Title } from '@patternfly/react-core';
-import { PageHeader as RcsPageHeader } from '@redhat-cloud-services/frontend-components/components/PageHeader';
+import {
+  PageHeader as RcsPageHeader,
+  PageHeaderTitle
+} from '@redhat-cloud-services/frontend-components/components/cjs/PageHeader';
 
 /**
  * Render a platform page header.
@@ -12,7 +14,7 @@ import { PageHeader as RcsPageHeader } from '@redhat-cloud-services/frontend-com
  */
 const PageHeader = ({ children }) => (
   <RcsPageHeader>
-    <Title headingLevel="h1">{children}</Title>
+    <PageHeaderTitle title={children} />
   </RcsPageHeader>
 );
 
@@ -22,14 +24,12 @@ const PageHeader = ({ children }) => (
  * @type {{children: Node}}
  */
 PageHeader.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.node.isRequired
 };
 
 /**
  * Default props.
  */
-PageHeader.defaultProps = {
-  children: null
-};
+PageHeader.defaultProps = {};
 
 export { PageHeader as default, PageHeader };
diff --git a/src/components/pageLayout/pageSection.js b/src/components/pageLayout/pageSection.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Section } from '@redhat-cloud-services/frontend-components/components/Section';
+import { Section } from '@redhat-cloud-services/frontend-components/components/cjs/Section';
 
 /**
  * Render a platform page section.

diff --git a/src/components/pageLayout/pageToolbar.js b/src/components/pageLayout/pageToolbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Section } from '@redhat-cloud-services/frontend-components/components/Section';
+import { Section } from '@redhat-cloud-services/frontend-components/components/cjs/Section';
 
 /**
  * Render a platform toolbar section.

diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,8 @@ import { BrowserRouter } from 'react-router-dom';
 import { baseName } from './components/router/routerHelpers';
 import { store } from './redux';
 import App from './components/app';
+import '@redhat-cloud-services/frontend-components/index.css';
+import '@redhat-cloud-services/frontend-components-notifications/index.css';
 import './styles/index.scss';
 
 render(

diff --git a/src/redux/middleware/index.js b/src/redux/middleware/index.js
@@ -1,7 +1,7 @@
 import { createLogger } from 'redux-logger';
 import promiseMiddleware from 'redux-promise-middleware';
 import thunkMiddleware from 'redux-thunk';
-import { notificationsMiddleware } from '@redhat-cloud-services/frontend-components-notifications';
+import { notificationsMiddleware } from '@redhat-cloud-services/frontend-components-notifications/cjs';
 import { statusMiddleware } from './statusMiddleware';
 import { reduxHelpers } from '../common/reduxHelpers';
 

diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import { notifications } from '@redhat-cloud-services/frontend-components-notifications';
+import { notifications } from '@redhat-cloud-services/frontend-components-notifications/cjs';
 import graphReducer from './graphReducer';
 import inventoryReducer from './inventoryReducer';
 import viewReducer from './viewReducer';

diff --git a/src/redux/types/platformTypes.js b/src/redux/types/platformTypes.js
@@ -2,7 +2,7 @@ import {
   ADD_NOTIFICATION,
   REMOVE_NOTIFICATION,
   CLEAR_NOTIFICATIONS
-} from '@redhat-cloud-services/frontend-components-notifications';
+} from '@redhat-cloud-services/frontend-components-notifications/cjs';
 
 const PLATFORM_ADD_NOTIFICATION = ADD_NOTIFICATION;
 const PLATFORM_REMOVE_NOTIFICATION = REMOVE_NOTIFICATION;

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,8 +1,11 @@
 // Framework
 @import '~@redhat-cloud-services/frontend-components-utilities/files/Utilities/_all';
-@import '~@redhat-cloud-services/frontend-components/index.css';
-@import '~@redhat-cloud-services/frontend-components-notifications/index.css';
-@import '~@patternfly/patternfly/sass-utilities/all';
+/**
+ * FixMe: Variables break Sass compiler
+ * Sass compiler throws an error when coming across the following syntax in
+ *     --BackgroundUrl:url("d...
+ * Workaround is to move the CSS files to ./src/index.js
+ */
 
 // App
 @import 'app';