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,39 +130,28 @@ 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,
+        handleLaunch,
+        handleRelaunch,
       })}
-        {launchError && (
+      {error && (
         <AlertModal
-            isOpen={launchError}
+          isOpen={error}
           variant="error"
           title={i18n._(t`Error!`)}
-            onClose={this.handleLaunchErrorClose}
+          onClose={() => setError(null)}
         >
           {i18n._(t`Failed to launch job.`)}
-            <ErrorDetail error={launchError} />
+          <ErrorDetail error={error} />
         </AlertModal>
       )}
       {showLaunchPrompt && (
@@ -205,13 +159,18 @@ class LaunchButton extends React.Component {
           launchConfig={launchConfig}
           surveyConfig={surveyConfig}
           resource={resource}
-            onLaunch={this.launchWithParams}
-            onCancel={() => this.setState({ showLaunchPrompt: false })}
+          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,6 +666,8 @@ class JobOutput extends Component {
         </CardBody>
         {showCancelPrompt &&
           ['pending', 'waiting', 'running'].includes(jobStatus) && (
+            <I18n>
+              {({ i18n }) => (
                 <AlertModal
                   isOpen={showCancelPrompt}
                   variant="danger"
@@ -699,8 +701,11 @@ class JobOutput extends Component {
                   )}
                 </AlertModal>
               )}
+            </I18n>
+          )}
         {cancelError && (
-          <>
+          <I18n>
+            {({ i18n }) => (
               <AlertModal
                 isOpen={cancelError}
                 variant="danger"
@@ -710,10 +715,12 @@ class JobOutput extends Component {
               >
                 <ErrorDetail error={cancelError} />
               </AlertModal>
-          </>
+            )}
+          </I18n>
         )}
         {deletionError && (
-          <>
+          <I18n>
+            {({ i18n }) => (
               <AlertModal
                 isOpen={deletionError}
                 variant="danger"
@@ -723,7 +730,8 @@ class JobOutput extends Component {
               >
                 <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);