Create a HarvesterInfoModal component that unifies error and success …

…texts

Refactor StartHarvester.js and UDP.js to use the HarvesterInfoModal component
Use okapiKy to call /start endpoint on harvester

src/components/HarvesterInfoModal/HarvesterInfoModal.js

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import { Button, Modal } from '@folio/stripes-components';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import urls from '../../util/urls';
+
+const createSuccessText = (udpLabel) => {
+  const additionalValues = udpLabel ? { provider: true, name: udpLabel } : { provider: false };
+  return (
+    <FormattedMessage
+      id="ui-erm-usage.harvester.start.success"
+      values={{
+        link: (
+          <Link to={urls.jobsView + '?sort=-startedAt'}>
+            <FormattedMessage id="ui-erm-usage.harvester.jobs.paneTitle" />
+          </Link>
+        ),
+        ...additionalValues,
+      }}
+    />
+  );
+};
+
+const createErrorText = (udpLabel) => {
+  const values = udpLabel ? { provider: true, name: udpLabel } : { provider: false };
+  return <FormattedMessage id="ui-erm-usage.harvester.start.failure" values={values} />;
+};
+
+const createLabelText = (isSuccess) => {
+  const msgId = isSuccess
+    ? 'ui-erm-usage.harvester.start.started'
+    : 'ui-erm-usage.harvester.start.failed';
+  return <FormattedMessage id={msgId} />;
+};
+
+const HarvesterInfoModal = ({ errMessage = null, isSuccess = false, onClose, open = false, udpLabel }) => (
+  <Modal
+    dismissible
+    closeOnBackgroundClick
+    open={open}
+    onClose={onClose}
+    label={createLabelText(isSuccess)}
+    footer={
+      <Button onClick={onClose}>
+        <FormattedMessage id="ui-erm-usage.general.ok" />
+      </Button>
+    }
+  >
+    {isSuccess ? (
+      createSuccessText(udpLabel)
+    ) : (
+      <>
+        {createErrorText(udpLabel)}
+        <br />
+        {errMessage}
+      </>
+    )}
+  </Modal>
+);
+
+HarvesterInfoModal.propTypes = {
+  errMessage: PropTypes.string,
+  isSuccess: PropTypes.bool,
+  onClose: PropTypes.func,
+  open: PropTypes.bool,
+  udpLabel: PropTypes.string,
+};
+
+export default HarvesterInfoModal;

src/components/HarvesterInfoModal/HarvesterInfoModal.test.js

@@ -0,0 +1,69 @@
+import { MemoryRouter } from 'react-router-dom';
+import renderWithIntl from '../../../test/jest/helpers/renderWithIntl';
+import HarvesterInfoModal from './HarvesterInfoModal';
+
+const render = (props) => {
+  return renderWithIntl(
+    <MemoryRouter>
+      <HarvesterInfoModal {...props} />
+    </MemoryRouter>
+  );
+};
+
+describe('HarvesterInfoModal', () => {
+  test('default values', () => {
+    const { container } = render();
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  test('open == false', () => {
+    const { container } = render({ open: false });
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  test('isSuccess==true, udpLabel', () => {
+    const { getByText, getByRole } = render({
+      open: true,
+      isSuccess: true,
+      udpLabel: 'Provider123',
+    });
+    expect(getByText('Harvester started')).toBeInTheDocument();
+    expect(getByText(/^A harvesting job for 'Provider123' has been/)).toBeInTheDocument();
+    expect(getByText('Harvesting jobs')).toHaveAttribute('href', '/eusage/jobs?sort=-startedAt');
+    expect(getByRole('button', { name: 'OK' })).toBeInTheDocument();
+  });
+
+  test('isSuccess==true, no udpLabel', () => {
+    const { getByText, getByRole } = render({
+      open: true,
+      isSuccess: true,
+    });
+    expect(getByText('Harvester started')).toBeInTheDocument();
+    expect(getByText(/^A harvesting job has been/)).toBeInTheDocument();
+    expect(getByText('Harvesting jobs')).toHaveAttribute('href', '/eusage/jobs?sort=-startedAt');
+    expect(getByRole('button', { name: 'OK' })).toBeInTheDocument();
+  });
+
+  test('isSuccess==false, udpLabel', () => {
+    const { getByRole, queryByText } = render({
+      open: true,
+      isSuccess: false,
+      udpLabel: 'Provider123',
+    });
+    expect(queryByText('Harvester failed to start')).toBeInTheDocument();
+    expect(queryByText(/^Failed to schedule .* for 'Provider123'/)).toBeInTheDocument();
+    expect(queryByText('Harvesting jobs')).toBeNull();
+    expect(getByRole('button', { name: 'OK' })).toBeInTheDocument();
+  });
+
+  test('isSuccess==false, no udpLabel', () => {
+    const { getByRole, queryByText } = render({
+      open: true,
+      isSuccess: false,
+    });
+    expect(queryByText('Harvester failed to start')).toBeInTheDocument();
+    expect(queryByText(/^Failed to schedule a harvesting job.$/)).toBeInTheDocument();
+    expect(queryByText('Harvesting jobs')).toBeNull();
+    expect(getByRole('button', { name: 'OK' })).toBeInTheDocument();
+  });
+});

src/components/HarvesterInfoModal/index.js

@@ -0,0 +1 @@
+export { default } from './HarvesterInfoModal';

src/components/views/UDP.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { get, isEmpty } from 'lodash';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
-import { IfPermission, TitleManager, Pluggable } from '@folio/stripes/core';
+import { IfPermission, TitleManager, Pluggable, withOkapiKy } from '@folio/stripes/core';
 import {
   Accordion,
   AccordionSet,
@@ -32,7 +32,6 @@ import HelperApp from '../HelperApp';
 
 import { UDPInfoView } from '../UDPInfo';
 import { HarvestingConfigurationView } from '../HarvestingConfiguration';
-import StartHarvesterModal from '../StartHarvesterModal';
 import CounterUpload from '../ReportUpload/CounterUpload';
 import NonCounterUpload from '../ReportUpload/NonCounterUpload';
 import CounterStatistics from '../Counter';
@@ -43,6 +42,7 @@ import urls from '../../util/urls';
 import groupReportsPerYear from '../../util/groupReportsPerYear';
 import createStandardReportFormatter from '../Counter/StandardReportFormatter';
 import UDPHeader from '../UDPHeader/UDPHeader';
+import HarvesterInfoModal from '../HarvesterInfoModal/HarvesterInfoModal';
 
 let callout;
 
@@ -54,7 +54,7 @@ class UDP extends React.Component {
     this.state = {
       helperApp: null,
       showDeleteReports: false,
-      showStartHarvesterModal: false,
+      harvesterModalState: {},
       showCounterUpload: false,
       showNonCounterUpload: false,
     };
@@ -169,12 +169,27 @@ class UDP extends React.Component {
     return !this.props.isHarvesterExistent || status === 'inactive';
   };
 
-  openStartHarvesterModal = () => {
-    this.setState({ showStartHarvesterModal: true });
+  openStartHarvesterModal = (udpId) => {
+    this.props
+      .okapiKy(`erm-usage-harvester/start/${udpId}`, {
+        method: 'GET',
+        retry: 0,
+      })
+      .then(() => {
+        this.setState({ harvesterModalState: { open: true, isSuccess: true } });
+        this.reloadUdp();
+      })
+      .catch((error) => {
+        Promise.resolve(error.response?.text?.() ?? error.message)
+          .catch(() => error.message)
+          .then((errMessage) => this.setState({
+            harvesterModalState: { open: true, isSuccess: false, errMessage }
+          }));
+      });
   };
 
   closeStartHarvesterModal = () => {
-    this.setState({ showStartHarvesterModal: false });
+    this.setState({ harvesterModalState: { open: false } });
   };
 
   getActionMenu = () => ({ onToggle }) => {
@@ -193,7 +208,7 @@ class UDP extends React.Component {
               marginBottom0
               disabled={this.isInActive(usageDataProvider)}
               onClick={() => {
-                this.openStartHarvesterModal();
+                this.openStartHarvesterModal(usageDataProvider.id);
                 onToggle();
               }}
             >
@@ -202,14 +217,11 @@ class UDP extends React.Component {
               </Icon>
             </Button>
           </IfPermission>
-          {this.state.showStartHarvesterModal && (
-            <StartHarvesterModal
-              usageDataProvider={usageDataProvider}
-              isHarvesterExistent={this.props.isHarvesterExistent}
-              onReloadUDP={this.reloadUdp}
-              onClose={this.closeStartHarvesterModal}
-            />
-          )}
+          <HarvesterInfoModal
+            {...this.state.harvesterModalState}
+            udpLabel={usageDataProvider.label}
+            onClose={this.closeStartHarvesterModal}
+          />
         </div>
         <div>
           <IfPermission perm="ui-erm-usage-harvester.jobs.view">
@@ -586,7 +598,8 @@ UDP.propTypes = {
   location: PropTypes.shape({
     pathname: PropTypes.string,
     search: PropTypes.string
-  }).isRequired
+  }).isRequired,
+  okapiKy: PropTypes.func.isRequired,
 };
 
-export default injectIntl(UDP);
+export default injectIntl(withOkapiKy(UDP));