From 9bb4bc75107ba4baceba9756f8d222cec5ba27fd Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Tue, 16 May 2023 13:30:40 +0100
Subject: [PATCH] Fixes #36400 - Update ConfigReports to pf4

---
 .../components/ChartBox/ChartBox.css          |   9 +-
 .../react_app/components/ChartBox/ChartBox.js | 174 +++++++++---------
 .../components/ChartBox/ChartBox.test.js      |  48 +----
 .../__snapshots__/ChartBox.test.js.snap       | 167 ++++++++++++-----
 .../components/ConfigReports/ConfigReports.js |  18 +-
 .../__snapshots__/ConfigReports.test.js.snap  |  31 ++--
 6 files changed, 230 insertions(+), 217 deletions(-)

diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css
index cb2d53d44a8..681c11a1b4b 100644
--- a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css
+++ b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css
@@ -1,3 +1,8 @@
-.pointer {
-  cursor: pointer;
+.chart-box {
+  .pointer {
+    cursor: pointer;
+  }
+}
+.chart-box-modal .pf-c-modal-box__body {
+  text-align: center;
 }
diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js
index 230d32d2759..a2cd21c93d4 100644
--- a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js
+++ b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.js
@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Card, Modal } from 'patternfly-react';
-import { isEqual } from 'lodash';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardHeader,
+  Modal,
+  ModalVariant,
+} from '@patternfly/react-core';
 import classNames from 'classnames';
-import ElipsisWithTooltip from 'react-ellipsis-with-tooltip';
 import DonutChart from '../common/charts/DonutChart';
 import BarChart from '../common/charts/BarChart';
 import Loader from '../common/Loader';
@@ -11,102 +16,89 @@ import MessageBox from '../common/MessageBox';
 import { translate as __ } from '../../common/I18n';
 import './ChartBox.css';
 
-class ChartBox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { showModal: false };
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    return (
-      !isEqual(this.props.chart, nextProps.chart) ||
-      !isEqual(this.state, nextState)
-    );
-  }
+const ChartBox = ({
+  chart,
+  type,
+  config,
+  title,
+  status,
+  errorText,
+  className,
+  tip,
+}) => {
+  const [showModal, setShowModal] = useState(false);
 
-  openModal = () => {
-    this.setState({ showModal: true });
+  const openModal = () => {
+    setShowModal(true);
   };
 
-  closeModal = () => {
-    this.setState({ showModal: false });
+  const closeModal = () => {
+    setShowModal(false);
   };
 
-  render() {
-    const { chart, type, config, title, status, className } = this.props;
-    const components = {
-      donut: DonutChart,
-      bar: BarChart,
-    };
-    const Chart = components[type];
-    const dataFiltered = chart.data && chart.data.filter(arr => arr[1] !== 0);
-    const hasChartData = dataFiltered && dataFiltered.length > 0;
-    const headerProps = hasChartData
-      ? {
-          onClick: this.openModal,
-          title: this.props.tip,
-          'data-toggle': 'tooltip',
-          'data-placement': 'top',
-        }
-      : {};
-    const chartProps = {
-      searchUrl:
-        chart.search && !chart.search.match(/=$/) ? chart.search : null,
-      data: chart.data ? chart.data : undefined,
-      key: `${chart.id}-chart`,
-    };
+  const components = {
+    donut: DonutChart,
+    bar: BarChart,
+  };
+  const Chart = components[type];
+  const dataFiltered = chart.data && chart.data.filter(arr => arr[1] !== 0);
+  const hasChartData = dataFiltered && dataFiltered.length > 0;
+  const headerProps = hasChartData
+    ? {
+        onClick: openModal,
+        title: tip,
+        'data-toggle': 'tooltip',
+        'data-placement': 'top',
+      }
+    : {};
+  const chartProps = {
+    searchUrl: chart.search && !chart.search.match(/=$/) ? chart.search : null,
+    data: chart.data ? chart.data : undefined,
+    key: `${chart.id}-chart`,
+  };
 
-    const barChartProps = {
-      ...chartProps,
-      xAxisLabel: chart.xAxisLabel,
-      yAxisLabel: chart.yAxisLabel,
-    };
+  const barChartProps = {
+    ...chartProps,
+    xAxisLabel: chart.xAxisLabel,
+    yAxisLabel: chart.yAxisLabel,
+  };
 
-    const chartPropsForType = {
-      donut: chartProps,
-      bar: barChartProps,
-    };
+  const chartPropsForType = {
+    donut: chartProps,
+    bar: barChartProps,
+  };
 
-    const panelChart = <Chart {...chartPropsForType[type]} config={config} />;
-    const error = (
-      <MessageBox
-        msg={this.props.errorText}
-        key={`${this.props.chart.id}-error`}
-        icontype="error-circle-o"
-      />
-    );
+  const panelChart = <Chart {...chartPropsForType[type]} config={config} />;
+  const error = (
+    <MessageBox
+      msg={errorText}
+      key={`${chart.id}-error`}
+      icontype="error-circle-o"
+    />
+  );
 
-    return (
-      <Card
-        className={classNames('chart-box', className)}
-        key={chart.id}
-        accented
-      >
-        <Card.Heading>
-          <Card.Title className="pointer panel-title" {...headerProps}>
-            <ElipsisWithTooltip> {title} </ElipsisWithTooltip>
-          </Card.Title>
-        </Card.Heading>
-        <Card.Body>
-          <Loader status={status}>{[panelChart, error]}</Loader>
-          {this.state.showModal && (
-            <Modal
-              show={this.state.showModal}
-              enforceFocus
-              onHide={this.closeModal}
-            >
-              <Modal.Header closeButton>
-                <Modal.Title>{title}</Modal.Title>
-              </Modal.Header>
-              <Modal.Body>
-                <Chart {...chartProps} config={config} />
-              </Modal.Body>
-            </Modal>
-          )}
-        </Card.Body>
-      </Card>
-    );
-  }
-}
+  return (
+    <Card className={classNames('chart-box', className)} key={chart.id}>
+      <CardHeader>
+        <CardTitle className="pointer panel-title" {...headerProps}>
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardBody>
+        <Loader status={status}>{[panelChart, error]}</Loader>
+        <Modal
+          className="chart-box-modal"
+          variant={ModalVariant.small}
+          title={title}
+          isOpen={showModal}
+          onClose={closeModal}
+        >
+          <Chart {...chartProps} config={config} />
+        </Modal>
+      </CardBody>
+    </Card>
+  );
+};
 
 ChartBox.propTypes = {
   status: PropTypes.string.isRequired,
diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.test.js b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.test.js
index dc739a201f3..b81fbcecfb5 100644
--- a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.test.js
+++ b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.test.js
@@ -47,49 +47,9 @@ describe('ChartBox', () => {
       chart: { id: '2', data: [[1, 2]] },
       status: 'RESOLVED',
     });
-    expect(box.find('Modal')).toHaveLength(0);
-    box.setState({ showModal: true });
-    expect(box.find('Modal')).toHaveLength(1);
-  });
-  it('shouldComponentUpdate should be called', () => {
-    const shouldUpdateSpy = jest.spyOn(
-      ChartBox.prototype,
-      'shouldComponentUpdate'
-    );
-    const box = shallow(
-      <ChartBox
-        id="4"
-        type="donut"
-        chart={{ id: '4', data: undefined }}
-        status="PENDING"
-      />
-    );
-    box.setProps({ status: 'PENDING' });
-    expect(shouldUpdateSpy).toHaveBeenCalled();
-  });
-  it('shouldComponentUpdate', () => {
-    const objThis = {
-      state: { showModal: false },
-      props: { chart: { data: [1, 2] } },
-    };
-
-    expect(
-      classFunctionUnitTest(ChartBox, 'shouldComponentUpdate', objThis, [
-        { chart: { data: [1, 2] } },
-        { showModal: false },
-      ])
-    ).toBe(false);
-    expect(
-      classFunctionUnitTest(ChartBox, 'shouldComponentUpdate', objThis, [
-        { chart: { data: [1, 1] } },
-        { showModal: false },
-      ])
-    ).toBe(true);
-    expect(
-      classFunctionUnitTest(ChartBox, 'shouldComponentUpdate', objThis, [
-        { chart: { data: [1, 2] } },
-        { showModal: true },
-      ])
-    ).toBe(true);
+    expect(box.find('.chart-box-modal').props().isOpen).toBeFalsy();
+    box.find('.panel-title').simulate('click');
+    box.update();
+    expect(box.find('.chart-box-modal').props().isOpen).toBeTruthy();
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap b/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap
index 65fbeab258a..f293b96930b 100644
--- a/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap
@@ -2,30 +2,17 @@
 
 exports[`ChartBox error 1`] = `
 <Card
-  accented={true}
-  aggregated={false}
-  aggregatedMini={false}
-  cardRef={null}
   className="chart-box"
   key="2"
-  matchHeight={false}
 >
-  <CardHeading
-    className=""
-  >
+  <CardHeader>
     <CardTitle
       className="pointer panel-title"
     >
-      <EllipisWithTooltip>
-         
-        some title
-         
-      </EllipisWithTooltip>
+      some title
     </CardTitle>
-  </CardHeading>
-  <CardBody
-    className=""
-  >
+  </CardHeader>
+  <CardBody>
     <Loader
       spinnerSize="lg"
       status="PENDING"
@@ -50,36 +37,55 @@ exports[`ChartBox error 1`] = `
         msg="some error"
       />
     </Loader>
+    <Modal
+      actions={Array []}
+      appendTo={[Function]}
+      aria-describedby=""
+      aria-label=""
+      aria-labelledby=""
+      className="chart-box-modal"
+      hasNoBodyWrapper={false}
+      isOpen={false}
+      onClose={[Function]}
+      ouiaSafe={true}
+      showClose={true}
+      title="some title"
+      titleIconVariant={null}
+      titleLabel=""
+      variant="small"
+    >
+      <DonutChart
+        config="regular"
+        key="2-chart"
+        noDataMsg="No data available"
+        onclick={[Function]}
+        searchUrl={null}
+        title={
+          Object {
+            "precision": 1,
+            "type": "percent",
+          }
+        }
+        unloadData={false}
+      />
+    </Modal>
   </CardBody>
 </Card>
 `;
 
 exports[`ChartBox pending 1`] = `
 <Card
-  accented={true}
-  aggregated={false}
-  aggregatedMini={false}
-  cardRef={null}
   className="chart-box"
   key="2"
-  matchHeight={false}
 >
-  <CardHeading
-    className=""
-  >
+  <CardHeader>
     <CardTitle
       className="pointer panel-title"
     >
-      <EllipisWithTooltip>
-         
-        some title
-         
-      </EllipisWithTooltip>
+      some title
     </CardTitle>
-  </CardHeading>
-  <CardBody
-    className=""
-  >
+  </CardHeader>
+  <CardBody>
     <Loader
       spinnerSize="lg"
       status="PENDING"
@@ -104,23 +110,48 @@ exports[`ChartBox pending 1`] = `
         msg="some error"
       />
     </Loader>
+    <Modal
+      actions={Array []}
+      appendTo={[Function]}
+      aria-describedby=""
+      aria-label=""
+      aria-labelledby=""
+      className="chart-box-modal"
+      hasNoBodyWrapper={false}
+      isOpen={false}
+      onClose={[Function]}
+      ouiaSafe={true}
+      showClose={true}
+      title="some title"
+      titleIconVariant={null}
+      titleLabel=""
+      variant="small"
+    >
+      <DonutChart
+        config="regular"
+        key="2-chart"
+        noDataMsg="No data available"
+        onclick={[Function]}
+        searchUrl={null}
+        title={
+          Object {
+            "precision": 1,
+            "type": "percent",
+          }
+        }
+        unloadData={false}
+      />
+    </Modal>
   </CardBody>
 </Card>
 `;
 
 exports[`ChartBox resolved 1`] = `
 <Card
-  accented={true}
-  aggregated={false}
-  aggregatedMini={false}
-  cardRef={null}
   className="chart-box"
   key="2"
-  matchHeight={false}
 >
-  <CardHeading
-    className=""
-  >
+  <CardHeader>
     <CardTitle
       className="pointer panel-title"
       data-placement="top"
@@ -128,16 +159,10 @@ exports[`ChartBox resolved 1`] = `
       onClick={[Function]}
       title="sone tooltip"
     >
-      <EllipisWithTooltip>
-         
-        some title
-         
-      </EllipisWithTooltip>
+      some title
     </CardTitle>
-  </CardHeading>
-  <CardBody
-    className=""
-  >
+  </CardHeader>
+  <CardBody>
     <Loader
       spinnerSize="lg"
       status="PENDING"
@@ -170,6 +195,46 @@ exports[`ChartBox resolved 1`] = `
         msg="some error"
       />
     </Loader>
+    <Modal
+      actions={Array []}
+      appendTo={[Function]}
+      aria-describedby=""
+      aria-label=""
+      aria-labelledby=""
+      className="chart-box-modal"
+      hasNoBodyWrapper={false}
+      isOpen={false}
+      onClose={[Function]}
+      ouiaSafe={true}
+      showClose={true}
+      title="some title"
+      titleIconVariant={null}
+      titleLabel=""
+      variant="small"
+    >
+      <DonutChart
+        config="regular"
+        data={
+          Array [
+            Array [
+              1,
+              2,
+            ],
+          ]
+        }
+        key="2-chart"
+        noDataMsg="No data available"
+        onclick={[Function]}
+        searchUrl={null}
+        title={
+          Object {
+            "precision": 1,
+            "type": "percent",
+          }
+        }
+        unloadData={false}
+      />
+    </Modal>
   </CardBody>
 </Card>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.js b/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.js
index 035c138c57b..747cd3c19db 100644
--- a/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.js
+++ b/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'patternfly-react';
+import { Grid, GridItem } from '@patternfly/react-core';
 import classNames from 'classnames';
 import ChartBox from '../ChartBox/ChartBox';
 import { translate as __ } from '../../common/I18n';
@@ -30,25 +30,25 @@ const ConfigReports = props => {
   };
 
   return (
-    <Row>
-      <Col md={5}>
+    <Grid>
+      <GridItem span={4}>
         <ChartBox
           {...chartBoxProps}
           type="donut"
           chart={{ data: metricsChartData, id: 'report-metrics' }}
           title={__('Report Metrics')}
         />
-      </Col>
+      </GridItem>
 
-      <Col md={5} className="bar-chart-medium-width">
+      <GridItem span={6} className="bar-chart-medium-width">
         <ChartBox
           {...chartBoxProps}
           type="bar"
           chart={{ data: statusChartData, id: 'report-status' }}
           title={__('Report Status')}
         />
-      </Col>
-      <Col md={2}>
+      </GridItem>
+      <GridItem span={2}>
         <table className={classNames(tableClasses, 'report-chart')}>
           <tbody>{tableData.map((metric, i) => createRow(metric, i))}</tbody>
           <tfoot>
@@ -58,8 +58,8 @@ const ConfigReports = props => {
             </tr>
           </tfoot>
         </table>
-      </Col>
-    </Row>
+      </GridItem>
+    </Grid>
   );
 };
 
diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/__snapshots__/ConfigReports.test.js.snap b/webpack/assets/javascripts/react_app/components/ConfigReports/__snapshots__/ConfigReports.test.js.snap
index 156d377af10..6a1a5d55008 100644
--- a/webpack/assets/javascripts/react_app/components/ConfigReports/__snapshots__/ConfigReports.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/ConfigReports/__snapshots__/ConfigReports.test.js.snap
@@ -1,14 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ComponentWrapper should render config reports 1`] = `
-<Row
-  bsClass="row"
-  componentClass="div"
->
-  <Col
-    bsClass="col"
-    componentClass="div"
-    md={5}
+<Grid>
+  <GridItem
+    span={4}
   >
     <ChartBox
       chart={
@@ -31,12 +26,10 @@ exports[`ComponentWrapper should render config reports 1`] = `
       title="Report Metrics"
       type="donut"
     />
-  </Col>
-  <Col
-    bsClass="col"
+  </GridItem>
+  <GridItem
     className="bar-chart-medium-width"
-    componentClass="div"
-    md={5}
+    span={6}
   >
     <ChartBox
       chart={
@@ -59,11 +52,9 @@ exports[`ComponentWrapper should render config reports 1`] = `
       title="Report Status"
       type="bar"
     />
-  </Col>
-  <Col
-    bsClass="col"
-    componentClass="div"
-    md={2}
+  </GridItem>
+  <GridItem
+    span={2}
   >
     <table
       className="report-chart"
@@ -93,6 +84,6 @@ exports[`ComponentWrapper should render config reports 1`] = `
         </tr>
       </tfoot>
     </table>
-  </Col>
-</Row>
+  </GridItem>
+</Grid>
 `;