Merge pull request #9278 from AlexSCorey/PreLingUI-Upgrade-3

Fixes final files in preparation for lingui upgrade

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/LaunchButton/LaunchButton.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import { number, shape } from 'prop-types';
 import { withI18n } from '@lingui/react';
@@ -32,40 +32,12 @@ function canLaunchWithoutPrompt(launchData) {
   );
 }
 
-class LaunchButton extends React.Component {
-  static propTypes = {
-    resource: shape({
-      id: number.isRequired,
-    }).isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showLaunchPrompt: false,
-      launchConfig: null,
-      launchError: false,
-      surveyConfig: null,
-    };
-
-    this.handleLaunch = this.handleLaunch.bind(this);
-    this.launchWithParams = this.launchWithParams.bind(this);
-    this.handleRelaunch = this.handleRelaunch.bind(this);
-    this.handleLaunchErrorClose = this.handleLaunchErrorClose.bind(this);
-    this.handlePromptErrorClose = this.handlePromptErrorClose.bind(this);
-  }
-
-  handleLaunchErrorClose() {
-    this.setState({ launchError: null });
-  }
-
-  handlePromptErrorClose() {
-    this.setState({ showLaunchPrompt: false });
-  }
-
-  async handleLaunch() {
-    const { resource } = this.props;
+function LaunchButton({ resource, i18n, children, history }) {
+  const [showLaunchPrompt, setShowLaunchPrompt] = useState(false);
+  const [launchConfig, setLaunchConfig] = useState(null);
+  const [surveyConfig, setSurveyConfig] = useState(null);
+  const [error, setError] = useState(null);
+  const handleLaunch = async () => {
     const readLaunch =
       resource.type === 'workflow_job_template'
         ? WorkflowJobTemplatesAPI.readLaunch(resource.id)
@@ -75,33 +47,27 @@ class LaunchButton extends React.Component {
         ? WorkflowJobTemplatesAPI.readSurvey(resource.id)
         : JobTemplatesAPI.readSurvey(resource.id);
     try {
-      const { data: launchConfig } = await readLaunch;
+      const { data: launch } = await readLaunch;
+      setLaunchConfig(launch);
 
-      let surveyConfig = null;
-
-      if (launchConfig.survey_enabled) {
+      if (launch.survey_enabled) {
         const { data } = await readSurvey;
 
-        surveyConfig = data;
+        setSurveyConfig(data);
       }
 
-      if (canLaunchWithoutPrompt(launchConfig)) {
-        this.launchWithParams({});
+      if (canLaunchWithoutPrompt(launch)) {
+        launchWithParams({});
       } else {
-        this.setState({
-          showLaunchPrompt: true,
-          launchConfig,
-          surveyConfig,
-        });
+        setShowLaunchPrompt(true);
       }
     } catch (err) {
-      this.setState({ launchError: err });
+      setError(err);
     }
-  }
+  };
 
-  async launchWithParams(params) {
+  const launchWithParams = async params => {
     try {
-      const { history, resource } = this.props;
       let jobPromise;
 
       if (resource.type === 'job_template') {
@@ -117,13 +83,11 @@ class LaunchButton extends React.Component {
       const { data: job } = await jobPromise;
       history.push(`/jobs/${job.id}/output`);
     } catch (launchError) {
-      this.setState({ launchError });
+      setError(launchError);
     }
-  }
-
-  async handleRelaunch() {
-    const { history, resource } = this.props;
+  };
 
+  const handleRelaunch = async () => {
     let readRelaunch;
     let relaunch;
 
@@ -145,6 +109,7 @@ class LaunchButton extends React.Component {
 
     try {
       const { data: relaunchConfig } = await readRelaunch;
+      setLaunchConfig(relaunchConfig);
       if (
         !relaunchConfig.passwords_needed_to_start ||
         relaunchConfig.passwords_needed_to_start.length === 0
@@ -165,53 +130,47 @@ class LaunchButton extends React.Component {
         const { data: job } = await relaunch;
         history.push(`/jobs/${job.id}/output`);
       } else {
-        this.setState({
-          showLaunchPrompt: true,
-          launchConfig: relaunchConfig,
-        });
+        setShowLaunchPrompt(true);
       }
     } catch (err) {
-      this.setState({ launchError: err });
+      setError(err);
     }
-  }
+  };
 
-  render() {
-    const {
-      launchError,
-      showLaunchPrompt,
-      launchConfig,
-      surveyConfig,
-    } = this.state;
-    const { resource, i18n, children } = this.props;
-    return (
-      <Fragment>
-        {children({
-          handleLaunch: this.handleLaunch,
-          handleRelaunch: this.handleRelaunch,
-        })}
-        {launchError && (
-          <AlertModal
-            isOpen={launchError}
-            variant="error"
-            title={i18n._(t`Error!`)}
-            onClose={this.handleLaunchErrorClose}
-          >
-            {i18n._(t`Failed to launch job.`)}
-            <ErrorDetail error={launchError} />
-          </AlertModal>
-        )}
-        {showLaunchPrompt && (
-          <LaunchPrompt
-            launchConfig={launchConfig}
-            surveyConfig={surveyConfig}
-            resource={resource}
-            onLaunch={this.launchWithParams}
-            onCancel={() => this.setState({ showLaunchPrompt: false })}
-          />
-        )}
-      </Fragment>
-    );
-  }
+  return (
+    <Fragment>
+      {children({
+        handleLaunch,
+        handleRelaunch,
+      })}
+      {error && (
+        <AlertModal
+          isOpen={error}
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={() => setError(null)}
+        >
+          {i18n._(t`Failed to launch job.`)}
+          <ErrorDetail error={error} />
+        </AlertModal>
+      )}
+      {showLaunchPrompt && (
+        <LaunchPrompt
+          launchConfig={launchConfig}
+          surveyConfig={surveyConfig}
+          resource={resource}
+          onLaunch={launchWithParams}
+          onCancel={() => setShowLaunchPrompt(false)}
+        />
+      )}
+    </Fragment>
+  );
 }
 
+LaunchButton.propTypes = {
+  resource: shape({
+    id: number.isRequired,
+  }).isRequired,
+};
+
 export default withI18n()(withRouter(LaunchButton));

awx/ui_next/src/components/LaunchButton/LaunchButton.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createMemoryHistory } from 'history';
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import { sleep } from '../../../testUtils/testUtils';
 
@@ -69,7 +70,7 @@ describe('LaunchButton', () => {
       }
     );
     const button = wrapper.find('button');
-    button.prop('onClick')();
+    await act(() => button.prop('onClick')());
     expect(JobTemplatesAPI.readLaunch).toHaveBeenCalledWith(1);
     await sleep(0);
     expect(JobTemplatesAPI.launch).toHaveBeenCalledWith(1, {});
@@ -106,7 +107,7 @@ describe('LaunchButton', () => {
       }
     );
     const button = wrapper.find('button');
-    button.prop('onClick')();
+    await act(() => button.prop('onClick')());
     expect(WorkflowJobTemplatesAPI.readLaunch).toHaveBeenCalledWith(1);
     await sleep(0);
     expect(WorkflowJobTemplatesAPI.launch).toHaveBeenCalledWith(1, {});
@@ -143,7 +144,7 @@ describe('LaunchButton', () => {
       }
     );
     const button = wrapper.find('button');
-    button.prop('onClick')();
+    await act(() => button.prop('onClick')());
     expect(JobsAPI.readRelaunch).toHaveBeenCalledWith(1);
     await sleep(0);
     expect(JobsAPI.relaunch).toHaveBeenCalledWith(1);
@@ -180,7 +181,7 @@ describe('LaunchButton', () => {
       }
     );
     const button = wrapper.find('button');
-    button.prop('onClick')();
+    await act(() => button.prop('onClick')());
     expect(WorkflowJobsAPI.readRelaunch).toHaveBeenCalledWith(1);
     await sleep(0);
     expect(WorkflowJobsAPI.relaunch).toHaveBeenCalledWith(1);
@@ -218,7 +219,7 @@ describe('LaunchButton', () => {
       }
     );
     const button = wrapper.find('button');
-    button.prop('onClick')();
+    await act(() => button.prop('onClick')());
     expect(ProjectsAPI.readLaunchUpdate).toHaveBeenCalledWith(5);
     await sleep(0);
     expect(ProjectsAPI.launchUpdate).toHaveBeenCalledWith(5);
@@ -256,7 +257,7 @@ describe('LaunchButton', () => {
       }
     );
     const button = wrapper.find('button');
-    button.prop('onClick')();
+    await act(() => button.prop('onClick')());
     expect(InventorySourcesAPI.readLaunchUpdate).toHaveBeenCalledWith(5);
     await sleep(0);
     expect(InventorySourcesAPI.launchUpdate).toHaveBeenCalledWith(5);
@@ -280,7 +281,7 @@ describe('LaunchButton', () => {
       })
     );
     expect(wrapper.find('Modal').length).toBe(0);
-    wrapper.find('button').prop('onClick')();
+    await act(() => wrapper.find('button').prop('onClick')());
     await sleep(0);
     wrapper.update();
     expect(wrapper.find('Modal').length).toBe(1);

awx/ui_next/src/components/Lookup/Lookup.jsx

@@ -123,6 +123,7 @@ function Lookup(props) {
           </ChipGroup>
         </ChipHolder>
       </InputGroup>
+
       <Modal
         variant="large"
         title={i18n._(t`Select ${header || i18n._(t`Items`)}`)}
@@ -138,7 +139,12 @@ function Lookup(props) {
           >
             {i18n._(t`Select`)}
           </Button>,
-          <Button key="cancel" variant="link" onClick={closeModal}>
+          <Button
+            key="cancel"
+            variant="link"
+            onClick={closeModal}
+            aria-label={i18n._(t`Cancel lookup`)}
+          >
             {i18n._(t`Cancel`)}
           </Button>,
         ]}

awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import {
@@ -578,7 +578,7 @@ class JobOutput extends Component {
   }
 
   render() {
-    const { job, i18n } = this.props;
+    const { job } = this.props;
 
     const {
       contentError,
@@ -666,64 +666,72 @@ class JobOutput extends Component {
         </CardBody>
         {showCancelPrompt &&
           ['pending', 'waiting', 'running'].includes(jobStatus) && (
-            <AlertModal
-              isOpen={showCancelPrompt}
-              variant="danger"
-              onClose={this.handleCancelClose}
-              title={i18n._(t`Cancel Job`)}
-              label={i18n._(t`Cancel Job`)}
-              actions={[
-                <Button
-                  id="cancel-job-confirm-button"
-                  key="delete"
+            <I18n>
+              {({ i18n }) => (
+                <AlertModal
+                  isOpen={showCancelPrompt}
                   variant="danger"
-                  isDisabled={cancelInProgress}
-                  aria-label={i18n._(t`Cancel job`)}
-                  onClick={this.handleCancelConfirm}
+                  onClose={this.handleCancelClose}
+                  title={i18n._(t`Cancel Job`)}
+                  label={i18n._(t`Cancel Job`)}
+                  actions={[
+                    <Button
+                      id="cancel-job-confirm-button"
+                      key="delete"
+                      variant="danger"
+                      isDisabled={cancelInProgress}
+                      aria-label={i18n._(t`Cancel job`)}
+                      onClick={this.handleCancelConfirm}
+                    >
+                      {i18n._(t`Cancel job`)}
+                    </Button>,
+                    <Button
+                      id="cancel-job-return-button"
+                      key="cancel"
+                      variant="secondary"
+                      aria-label={i18n._(t`Return`)}
+                      onClick={this.handleCancelClose}
+                    >
+                      {i18n._(t`Return`)}
+                    </Button>,
+                  ]}
                 >
-                  {i18n._(t`Cancel job`)}
-                </Button>,
-                <Button
-                  id="cancel-job-return-button"
-                  key="cancel"
-                  variant="secondary"
-                  aria-label={i18n._(t`Return`)}
-                  onClick={this.handleCancelClose}
-                >
-                  {i18n._(t`Return`)}
-                </Button>,
-              ]}
-            >
-              {i18n._(
-                t`Are you sure you want to submit the request to cancel this job?`
+                  {i18n._(
+                    t`Are you sure you want to submit the request to cancel this job?`
+                  )}
+                </AlertModal>
               )}
-            </AlertModal>
+            </I18n>
           )}
         {cancelError && (
-          <>
-            <AlertModal
-              isOpen={cancelError}
-              variant="danger"
-              onClose={() => this.setState({ cancelError: null })}
-              title={i18n._(t`Job Cancel Error`)}
-              label={i18n._(t`Job Cancel Error`)}
-            >
-              <ErrorDetail error={cancelError} />
-            </AlertModal>
-          </>
+          <I18n>
+            {({ i18n }) => (
+              <AlertModal
+                isOpen={cancelError}
+                variant="danger"
+                onClose={() => this.setState({ cancelError: null })}
+                title={i18n._(t`Job Cancel Error`)}
+                label={i18n._(t`Job Cancel Error`)}
+              >
+                <ErrorDetail error={cancelError} />
+              </AlertModal>
+            )}
+          </I18n>
         )}
         {deletionError && (
-          <>
-            <AlertModal
-              isOpen={deletionError}
-              variant="danger"
-              onClose={() => this.setState({ deletionError: null })}
-              title={i18n._(t`Job Delete Error`)}
-              label={i18n._(t`Job Delete Error`)}
-            >
-              <ErrorDetail error={deletionError} />
-            </AlertModal>
-          </>
+          <I18n>
+            {({ i18n }) => (
+              <AlertModal
+                isOpen={deletionError}
+                variant="danger"
+                onClose={() => this.setState({ deletionError: null })}
+                title={i18n._(t`Job Delete Error`)}
+                label={i18n._(t`Job Delete Error`)}
+              >
+                <ErrorDetail error={deletionError} />
+              </AlertModal>
+            )}
+          </I18n>
         )}
       </Fragment>
     );
@@ -731,4 +739,4 @@ class JobOutput extends Component {
 }
 
 export { JobOutput as _JobOutput };
-export default withI18n()(withRouter(JobOutput));
+export default withRouter(JobOutput);