Fixes #36400 - Update ConfigReports to pf4

theforeman · Aug 16, 2023 · 9bb4bc7 · 9bb4bc7
1 parent 31b23dd
commit 9bb4bc7
Show file tree

Hide file tree

Showing 6 changed files with 230 additions and 217 deletions.
diff --git 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
@@ -1,112 +1,104 @@
-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';
 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
@@ -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();
   });
 });