fix(build): issues/296 npm updates for pf4 react core (#326)

* graphCard, c3, cardTitle component * graphCardChartLegend, c3, tooltip distance * optinView, cardTitle and flex layout * pageHeader, revert to pf title component * select, isExpanded to isOpen prop * toolbar, dataToolbar to toolbar component rename * style, card header
RedHatInsights · Jul 13, 2020 · c210245 · c210245
1 parent 66f971f
commit c210245
Show file tree

Hide file tree

Showing 22 changed files with 922 additions and 652 deletions.
diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
   "dependencies": {
     "@patternfly/patternfly": "4.16.7",
     "@patternfly/react-charts": "6.5.4",
-    "@patternfly/react-core": "3.158.3",
+    "@patternfly/react-core": "4.23.1",
     "@patternfly/react-icons": "4.4.2",
     "@patternfly/react-styles": "4.4.2",
     "@patternfly/react-tokens": "4.5.2",

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -73,24 +73,15 @@ 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"
           >
-            <PageHeaderTitle
-              title="Subscription Watch"
+            <Title
+              headingLevel="h1"
             >
-              <Title
-                className=""
-                size="2xl"
-                widget-type="InsightsPageHeaderTitle"
+              <h1
+                className="pf-c-title pf-m-2xl"
               >
-                <h1
-                  className="pf-c-title pf-m-2xl"
-                  widget-type="InsightsPageHeaderTitle"
-                >
-                   
-                  Subscription Watch
-                   
-                </h1>
-              </Title>
-            </PageHeaderTitle>
+                Subscription Watch
+              </h1>
+            </Title>
           </section>
         </PageHeader>
       </PageHeader>
@@ -108,55 +99,59 @@ exports[`Authentication Component should render a non-connected component error:
             <div
               className="pf-c-empty-state fadein"
             >
-              <Title
-                headingLevel="h2"
-                size="lg"
+              <div
+                className="pf-c-empty-state__content"
               >
-                <h2
-                  className="pf-c-title pf-m-lg"
+                <Title
+                  headingLevel="h2"
+                  size="lg"
                 >
-                  t(curiosity-auth.authorizedTitle, [object Object])
-                </h2>
-              </Title>
-              <EmptyStateIcon
-                icon={[Function]}
-              >
-                <LockIcon
-                  aria-hidden="true"
-                  className="pf-c-empty-state__icon"
-                  color="currentColor"
-                  noVerticalAlign={false}
-                  size="sm"
+                  <h2
+                    className="pf-c-title pf-m-lg"
+                  >
+                    t(curiosity-auth.authorizedTitle, [object Object])
+                  </h2>
+                </Title>
+                <EmptyStateIcon
+                  icon={[Function]}
                 >
-                  <svg
+                  <LockIcon
                     aria-hidden="true"
-                    aria-labelledby={null}
                     className="pf-c-empty-state__icon"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
+                    color="currentColor"
+                    noVerticalAlign={false}
+                    size="sm"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-labelledby={null}
+                      className="pf-c-empty-state__icon"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style={
+                        Object {
+                          "verticalAlign": "-0.125em",
+                        }
                       }
-                    }
-                    viewBox="0 0 448 512"
-                    width="1em"
+                      viewBox="0 0 448 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
+                        transform=""
+                      />
+                    </svg>
+                  </LockIcon>
+                </EmptyStateIcon>
+                <EmptyStateBody>
+                  <div
+                    className="pf-c-empty-state__body"
                   >
-                    <path
-                      d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
-                      transform=""
-                    />
-                  </svg>
-                </LockIcon>
-              </EmptyStateIcon>
-              <EmptyStateBody>
-                <div
-                  className="pf-c-empty-state__body"
-                >
-                  t(curiosity-auth.authorizedCopy, ...)
-                </div>
-              </EmptyStateBody>
+                    t(curiosity-auth.authorizedCopy, ...)
+                  </div>
+                </EmptyStateBody>
+              </div>
             </div>
           </EmptyState>
         </section>

diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card, CardHead, CardActions, CardBody } from '@patternfly/react-core';
+import { Card, CardTitle, CardHeader, CardActions, CardBody } from '@patternfly/react-core';
 import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/Skeleton';
 import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
@@ -181,8 +181,8 @@ class C3GraphCard extends React.Component {
 
     return (
       <Card className="curiosity-usage-graph fadein">
-        <CardHead>
-          <h2>{cardTitle}</h2>
+        <CardHeader>
+          <CardTitle>{cardTitle}</CardTitle>
           <CardActions>
             {children}
             <Select
@@ -193,7 +193,7 @@ class C3GraphCard extends React.Component {
               placeholder={t('curiosity-graph.dropdownPlaceholder')}
             />
           </CardActions>
-        </CardHead>
+        </CardHeader>
         <CardBody>
           <div className={`curiosity-skeleton-container ${(error && 'blur') || ''}`}>
             {pending && (

diff --git a/src/components/c3GraphCard/c3GraphCardLegendItem.js b/src/components/c3GraphCard/c3GraphCardLegendItem.js
@@ -139,7 +139,7 @@ class C3GraphCardLegendItem extends React.Component {
           key={`curiosity-tooltip-${chartId}`}
           content={tooltipContent}
           position={TooltipPosition.top}
-          distance={-10}
+          distance={0}
           entryDelay={100}
           exitDelay={0}
         >

diff --git a/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap b/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap
@@ -100,8 +100,8 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn
 <Card
   className="curiosity-usage-graph fadein"
 >
-  <CardHead>
-    <h2 />
+  <CardHeader>
+    <CardTitle />
     <CardActions>
       <Select
         aria-label="t(curiosity-graph.dropdownPlaceholder)"
@@ -137,7 +137,7 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn
         variant="single"
       />
     </CardActions>
-  </CardHead>
+  </CardHeader>
   <CardBody>
     <div
       className="curiosity-skeleton-container "
@@ -186,8 +186,8 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = `
 <Card
   className="curiosity-usage-graph fadein"
 >
-  <CardHead>
-    <h2 />
+  <CardHeader>
+    <CardTitle />
     <CardActions>
       <Select
         aria-label="t(curiosity-graph.dropdownPlaceholder)"
@@ -223,7 +223,7 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = `
         variant="single"
       />
     </CardActions>
-  </CardHead>
+  </CardHeader>
   <CardBody>
     <div
       className="curiosity-skeleton-container "
@@ -334,8 +334,8 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = `
 <Card
   className="curiosity-usage-graph fadein"
 >
-  <CardHead>
-    <h2 />
+  <CardHeader>
+    <CardTitle />
     <CardActions>
       <Select
         aria-label="t(curiosity-graph.dropdownPlaceholder)"
@@ -371,7 +371,7 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = `
         variant="single"
       />
     </CardActions>
-  </CardHead>
+  </CardHeader>
   <CardBody>
     <div
       className="curiosity-skeleton-container "

diff --git a/src/components/c3GraphCard/tests/__snapshots__/c3GraphCardLegendItem.test.js.snap b/src/components/c3GraphCard/tests/__snapshots__/c3GraphCardLegendItem.test.js.snap
@@ -104,7 +104,7 @@ exports[`C3GraphCardLegendItem Component should render a tooltip with button: to
       lorem ipsum
     </div>
   }
-  distance={-10}
+  distance={0}
   enableFlip={true}
   entryDelay={100}
   exitDelay={0}