From 5d3f0ace2249e928c1f192f889fb65bb621d4b83 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Wed, 24 Jun 2020 21:32:38 -0400 Subject: [PATCH] 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 --- package.json | 2 +- .../__snapshots__/authentication.test.js.snap | 111 ++- src/components/c3GraphCard/c3GraphCard.js | 8 +- .../c3GraphCard/c3GraphCardLegendItem.js | 2 +- .../__snapshots__/c3GraphCard.test.js.snap | 18 +- .../c3GraphCardLegendItem.test.js.snap | 2 +- .../__snapshots__/select.test.js.snap | 713 ++++++++++++++++-- src/components/form/__tests__/select.test.js | 12 + src/components/form/select.js | 2 +- .../__snapshots__/graphCard.test.js.snap | 30 +- .../graphCardChartLegend.test.js.snap | 12 +- src/components/graphCard/graphCard.js | 8 +- .../graphCard/graphCardChartLegend.js | 2 +- .../__snapshots__/optinView.test.js.snap | 142 ++-- src/components/optinView/optinView.js | 51 +- .../__snapshots__/pageHeader.test.js.snap | 54 +- .../__snapshots__/pageLayout.test.js.snap | 23 +- src/components/pageLayout/pageHeader.js | 14 +- .../__snapshots__/toolbar.test.js.snap | 13 +- src/components/toolbar/toolbar.js | 18 +- src/styles/_usage-graph.scss | 7 +- yarn.lock | 330 +------- 22 files changed, 922 insertions(+), 652 deletions(-) diff --git a/package.json b/package.json index 00557b80b..6d0b27c49 100644 --- 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 index ac3876901..636c767f5 100644 --- 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" > - - - <h1 - className="pf-c-title pf-m-2xl" - widget-type="InsightsPageHeaderTitle" - > - - Subscription Watch - - </h1> - - + Subscription Watch + + @@ -108,55 +99,59 @@ exports[`Authentication Component should render a non-connected component error:
- - <h2 - className="pf-c-title pf-m-lg" + <Title + headingLevel="h2" + size="lg" > - t(curiosity-auth.authorizedTitle, [object Object]) - </h2> - - - + + +
- - - - - -
- t(curiosity-auth.authorizedCopy, ...) -
- + t(curiosity-auth.authorizedCopy, ...) +
+ +
diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js index 943bddc2b..42f31a1d0 100644 --- 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 ( - -

{cardTitle}

+ + {cardTitle} {children} - +
- -

+ + - +
} - distance={-10} + distance={0} enableFlip={true} entryDelay={100} exitDelay={0} diff --git a/src/components/form/__tests__/__snapshots__/select.test.js.snap b/src/components/form/__tests__/__snapshots__/select.test.js.snap index c6c78fb48..01cb84132 100644 --- a/src/components/form/__tests__/__snapshots__/select.test.js.snap +++ b/src/components/form/__tests__/__snapshots__/select.test.js.snap @@ -3,6 +3,9 @@ exports[`Select Component should allow a alternate array and object options: key value object 1`] = `
- + +
`; @@ -43,6 +49,9 @@ exports[`Select Component should allow a alternate array and object options: key exports[`Select Component should allow a alternate array and object options: string array 1`] = `
- + +

`; @@ -83,6 +95,9 @@ exports[`Select Component should allow a alternate array and object options: str exports[`Select Component should allow selected options to match value or title: value or title match 1`] = `
- + + `; @@ -131,6 +149,9 @@ exports[`Select Component should allow selected options to match value or title: exports[`Select Component should render a basic component: basic dropdown 1`] = `
- + + `; @@ -171,6 +195,9 @@ exports[`Select Component should render a basic component: basic dropdown 1`] = exports[`Select Component should render a checkbox select: checkbox select 1`] = `
- + + `; +exports[`Select Component should render a expanded select: expanded 1`] = ` + + +
+ +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + , + } + } + onClose={[Function]} + onEnter={[Function]} + onToggle={[Function]} + parentRef={ + Object { + "current":
    + +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    , + } + } + type="button" + variant="single" + > + +     + + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + , + } + } + isCustomContent={false} + isExpanded={false} + isGrouped={false} + keyHandler={[Function]} + maxHeight="" + openedOnEnter={false} + selected="" + sendRef={[Function]} + > +
      + +
    • + +
      • +       + +
    • + +
      • +       + +
    • + +
      • +       + +
    • + +
      • +       +
    +     +     +
    +     + + +`; + exports[`Select Component should return an emulated onchange event: emulated event 1`] = ` Object { "currentTarget": Object { diff --git a/src/components/form/__tests__/select.test.js b/src/components/form/__tests__/select.test.js index 8f35ca16b..3a98a9414 100644 --- a/src/components/form/__tests__/select.test.js +++ b/src/components/form/__tests__/select.test.js @@ -85,4 +85,16 @@ describe('Select Component', () => { component.instance().onSelect({}, 'world'); }); + + it('should render a expanded select', () => { + const props = { + id: 'test', + options: ['lorem', 'ipsum', 'hello', 'world'] + }; + + const component = mount( - +
    - -

    + + - +
    - -

    + + - +
    } - distance={-10} + distance={0} enableFlip={true} entryDelay={100} exitDelay={0} @@ -197,7 +197,7 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1 t(curiosity-graph.loremIpsumLegendTooltip, [object Object])

    } - distance={-10} + distance={0} enableFlip={true} entryDelay={100} exitDelay={0} @@ -263,7 +263,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` t(curiosity-graph.loremIpsumLegendTooltip, [object Object])

    } - distance={-10} + distance={0} enableFlip={true} entryDelay={100} exitDelay={0} @@ -324,7 +324,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` t(curiosity-graph.ametConsecteturLegendTooltip, [object Object])

    } - distance={-10} + distance={0} enableFlip={true} entryDelay={100} exitDelay={0} @@ -380,7 +380,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` t(curiosity-graph.dolorSitLegendTooltip,curiosity-graph.thresholdLegendTooltip, [object Object])

    } - distance={-10} + distance={0} enableFlip={true} entryDelay={100} exitDelay={0} @@ -441,7 +441,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` t(curiosity-graph.nonCursusLegendTooltip,curiosity-graph.thresholdLegendTooltip, [object Object])

    } - distance={-10} + distance={0} enableFlip={true} entryDelay={100} exitDelay={0} diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js index b0dd7c97c..bdd0a845b 100644 --- a/src/components/graphCard/graphCard.js +++ b/src/components/graphCard/graphCard.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 { chart_color_green_300 as chartColorGreenDark } from '@patternfly/react-tokens'; import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/Skeleton'; import _isEqual from 'lodash/isEqual'; @@ -168,8 +168,8 @@ class GraphCard extends React.Component { return ( - -

    {cardTitle}

    + + {cardTitle} {children}