Merge pull request #8706 from AlexSCorey/PreLinguiUpgrade

Pre-lingui upgrade 

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
             https://github.com/jakemcdermott

awx/ui_next/src/components/About/About.jsx

@@ -12,8 +12,8 @@ import {
 import { BrandName } from '../../variables';
 import brandLogoImg from './brand-logo.svg';
 
-class About extends React.Component {
+function About({ ansible_version, version, isOpen, onClose, i18n }) {
-  static createSpeechBubble(version) {
+  const createSpeechBubble = () => {
     let text = `${BrandName} ${version}`;
     let top = '';
     let bottom = '';
@@ -28,18 +28,9 @@ class About extends React.Component {
     bottom = ` --${bottom}-- `;
 
     return top + text + bottom;
-  }
+  };
 
-  constructor(props) {
+  const speechBubble = createSpeechBubble();
-    super(props);
-
-    this.createSpeechBubble = this.constructor.createSpeechBubble.bind(this);
-  }
-
-  render() {
-    const { ansible_version, version, isOpen, onClose, i18n } = this.props;
-
-    const speechBubble = this.createSpeechBubble(version);
 
   return (
     <AboutModal
@@ -71,7 +62,6 @@ class About extends React.Component {
       </TextContent>
     </AboutModal>
   );
-  }
 }
 
 About.propTypes = {

awx/ui_next/src/components/AppContainer/PageHeaderToolbar.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -17,49 +17,23 @@ import { QuestionCircleIcon, UserIcon } from '@patternfly/react-icons';
 const DOCLINK =
   'https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html';
 
-class PageHeaderToolbar extends Component {
+function PageHeaderToolbar({
-  constructor(props) {
-    super(props);
-    this.state = {
-      isHelpOpen: false,
-      isUserOpen: false,
-    };
-
-    this.handleHelpSelect = this.handleHelpSelect.bind(this);
-    this.handleHelpToggle = this.handleHelpToggle.bind(this);
-    this.handleUserSelect = this.handleUserSelect.bind(this);
-    this.handleUserToggle = this.handleUserToggle.bind(this);
-  }
-
-  handleHelpSelect() {
-    const { isHelpOpen } = this.state;
-
-    this.setState({ isHelpOpen: !isHelpOpen });
-  }
-
-  handleUserSelect() {
-    const { isUserOpen } = this.state;
-
-    this.setState({ isUserOpen: !isUserOpen });
-  }
-
-  handleHelpToggle(isOpen) {
-    this.setState({ isHelpOpen: isOpen });
-  }
-
-  handleUserToggle(isOpen) {
-    this.setState({ isUserOpen: isOpen });
-  }
-
-  render() {
-    const { isHelpOpen, isUserOpen } = this.state;
-    const {
   isAboutDisabled,
   onAboutClick,
   onLogoutClick,
   loggedInUser,
   i18n,
-    } = this.props;
+}) {
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
+  const [isUserOpen, setIsUserOpen] = useState(false);
+
+  const handleHelpSelect = () => {
+    setIsHelpOpen(!isHelpOpen);
+  };
+
+  const handleUserSelect = () => {
+    setIsUserOpen(!isUserOpen);
+  };
 
   return (
     <PageHeaderTools>
@@ -70,10 +44,10 @@ class PageHeaderToolbar extends Component {
               isPlain
               isOpen={isHelpOpen}
               position={DropdownPosition.right}
-                onSelect={this.handleHelpSelect}
+              onSelect={handleHelpSelect}
               toggle={
                 <DropdownToggle
-                    onToggle={this.handleHelpToggle}
+                  onToggle={setIsHelpOpen}
                   aria-label={i18n._(t`Info`)}
                 >
                   <QuestionCircleIcon />
@@ -102,9 +76,9 @@ class PageHeaderToolbar extends Component {
               isPlain
               isOpen={isUserOpen}
               position={DropdownPosition.right}
-                onSelect={this.handleUserSelect}
+              onSelect={handleUserSelect}
               toggle={
-                  <DropdownToggle onToggle={this.handleUserToggle}>
+                <DropdownToggle onToggle={setIsUserOpen}>
                   <UserIcon />
                   {loggedInUser && (
                     <span style={{ marginLeft: '10px' }}>
@@ -117,9 +91,7 @@ class PageHeaderToolbar extends Component {
                 <DropdownItem
                   key="user"
                   href={
-                      loggedInUser
+                    loggedInUser ? `/users/${loggedInUser.id}/details` : '/home'
-                        ? `/users/${loggedInUser.id}/details`
-                        : '/home'
                   }
                 >
                   {i18n._(t`User Details`)}
@@ -139,7 +111,6 @@ class PageHeaderToolbar extends Component {
       </PageHeaderToolsGroup>
     </PageHeaderTools>
   );
-  }
 }
 
 PageHeaderToolbar.propTypes = {

awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
@@ -32,27 +32,15 @@ const Expandable = styled(PFExpandable)`
   }
 `;
 
-class ErrorDetail extends Component {
+function ErrorDetail({ error, i18n }) {
-  constructor(props) {
+  const { response } = error;
-    super(props);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-    this.state = {
+  const handleToggle = () => {
-      isExpanded: false,
+    setIsExpanded(!isExpanded);
   };
 
-    this.handleToggle = this.handleToggle.bind(this);
+  const renderNetworkError = () => {
-    this.renderNetworkError = this.renderNetworkError.bind(this);
-    this.renderStack = this.renderStack.bind(this);
-  }
-
-  handleToggle() {
-    const { isExpanded } = this.state;
-    this.setState({ isExpanded: !isExpanded });
-  }
-
-  renderNetworkError() {
-    const { error } = this.props;
-    const { response } = error;
     const message = getErrorMessage(response);
 
     return (
@@ -74,31 +62,25 @@ class ErrorDetail extends Component {
         </CardBody>
       </Fragment>
     );
-  }
+  };
 
-  renderStack() {
+  const renderStack = () => {
-    const { error } = this.props;
     return <CardBody>{error.stack}</CardBody>;
-  }
+  };
-
-  render() {
-    const { isExpanded } = this.state;
-    const { error, i18n } = this.props;
 
   return (
     <Expandable
       toggleText={i18n._(t`Details`)}
-        onToggle={this.handleToggle}
+      onToggle={handleToggle}
       isExpanded={isExpanded}
     >
       <Card>
         {Object.prototype.hasOwnProperty.call(error, 'response')
-            ? this.renderNetworkError()
+          ? renderNetworkError()
-            : this.renderStack()}
+          : renderStack()}
       </Card>
     </Expandable>
   );
-  }
 }
 
 ErrorDetail.propTypes = {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import ErrorDetail from './ErrorDetail';
@@ -39,7 +40,7 @@ describe('ErrorDetail', () => {
         }
       />
     );
-    wrapper.find('ExpandableSection').prop('onToggle')();
+    act(() => wrapper.find('ExpandableSection').prop('onToggle')());
     wrapper.update();
   });
 });

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

@@ -1,57 +1,31 @@
-import React, { Component } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Redirect, Link } from 'react-router-dom';
 import { PageSection, Card } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-
+import useRequest from '../../util/useRequest';
 import { UnifiedJobsAPI } from '../../api';
 import ContentError from '../../components/ContentError';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
 const NOT_FOUND = 'not found';
 
-class JobTypeRedirect extends Component {
+function JobTypeRedirect({ id, path, view, i18n }) {
-  static defaultProps = {
+  const {
-    view: 'output',
+    isLoading,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      error: null,
-      job: null,
-      isLoading: true,
-    };
-    this.loadJob = this.loadJob.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadJob();
-  }
-
-  async loadJob() {
-    const { id } = this.props;
-    this.setState({ isLoading: true });
-    try {
-      const { data } = await UnifiedJobsAPI.read({ id });
-      const job = data.results[0];
-      this.setState({
-        job,
-        isLoading: false,
-        error: job ? null : NOT_FOUND,
-      });
-    } catch (error) {
-      this.setState({
     error,
-        isLoading: false,
+    result: { job },
-      });
+    request: loadJob,
-    }
+  } = useRequest(
-  }
+    useCallback(async () => {
-
+      const { data } = await UnifiedJobsAPI.read({ id });
-  render() {
+      return { job: data };
-    const { path, view, i18n } = this.props;
+    }, [id]),
-    const { error, job, isLoading } = this.state;
+    { job: {} }
+  );
+  useEffect(() => {
+    loadJob();
+  }, [loadJob]);
 
   if (error) {
     return (
@@ -74,7 +48,9 @@ class JobTypeRedirect extends Component {
   }
   const type = JOB_TYPE_URL_SEGMENTS[job.type];
   return <Redirect from={path} to={`/jobs/${type}/${job.id}/${view}`} />;
-  }
 }
 
+JobTypeRedirect.defaultProps = {
+  view: 'output',
+};
 export default withI18n()(JobTypeRedirect);

awx/ui_next/src/screens/ManagementJob/ManagementJobs.jsx

@@ -1,13 +1,10 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import Breadcrumbs from '../../components/Breadcrumbs';
 
-class ManagementJobs extends Component {
+function ManagementJobs({ i18n }) {
-  render() {
-    const { i18n } = this.props;
-
   return (
     <Fragment>
       <Breadcrumbs
@@ -15,7 +12,6 @@ class ManagementJobs extends Component {
       />
     </Fragment>
   );
-  }
 }
 
 export default withI18n()(ManagementJobs);

awx/ui_next/src/screens/Organization/Organizations.jsx

@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
-import { Route, withRouter, Switch } from 'react-router-dom';
+import { Route, withRouter, Switch, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
@@ -10,28 +10,19 @@ import OrganizationsList from './OrganizationList/OrganizationList';
 import OrganizationAdd from './OrganizationAdd/OrganizationAdd';
 import Organization from './Organization';
 
-class Organizations extends Component {
+function Organizations({ i18n }) {
-  constructor(props) {
+  const match = useRouteMatch();
-    super(props);
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
-
-    const { i18n } = props;
-
-    this.state = {
-      breadcrumbConfig: {
     '/organizations': i18n._(t`Organizations`),
     '/organizations/add': i18n._(t`Create New Organization`),
-      },
+  });
-    };
-  }
-
-  setBreadcrumbConfig = organization => {
-    const { i18n } = this.props;
 
+  const setBreadcrumb = organization => {
     if (!organization) {
       return;
     }
 
-    const breadcrumbConfig = {
+    const breadcrumb = {
       '/organizations': i18n._(t`Organizations`),
       '/organizations/add': i18n._(t`Create New Organization`),
       [`/organizations/${organization.id}`]: `${organization.name}`,
@@ -43,14 +34,9 @@ class Organizations extends Component {
         t`Notifications`
       ),
     };
-
+    setBreadcrumbConfig(breadcrumb);
-    this.setState({ breadcrumbConfig });
   };
 
-  render() {
-    const { match } = this.props;
-    const { breadcrumbConfig } = this.state;
-
   return (
     <Fragment>
       <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
@@ -61,10 +47,7 @@ class Organizations extends Component {
         <Route path={`${match.path}/:id`}>
           <Config>
             {({ me }) => (
-                <Organization
+              <Organization setBreadcrumb={setBreadcrumb} me={me || {}} />
-                  setBreadcrumb={this.setBreadcrumbConfig}
-                  me={me || {}}
-                />
             )}
           </Config>
         </Route>
@@ -74,7 +57,6 @@ class Organizations extends Component {
       </Switch>
     </Fragment>
   );
-  }
 }
 
 export { Organizations as _Organizations };

awx/ui_next/src/screens/Project/Project.jsx

@@ -137,10 +137,10 @@ function Project({ i18n, setBreadcrumb }) {
     );
   }
 
-  let showCardHeader = true;
+  const showCardHeader = !(
-  if (['edit', 'schedules/'].some(name => location.pathname.includes(name))) {
+    location.pathname.endsWith('edit') ||
-    showCardHeader = false;
+    location.pathname.includes('schedules/')
-  }
+  );
 
   return (
     <PageSection>

awx/ui_next/src/screens/Project/Project.test.jsx

@@ -11,6 +11,14 @@ import mockDetails from './data.project.json';
 import Project from './Project';
 
 jest.mock('../../api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteMatch: () => ({
+    pathname: '/projects/1/details',
+    url: '/projects/1',
+  }),
+  useParams: () => ({ id: 1 }),
+}));
 
 const mockMe = {
   is_super_user: true,
@@ -50,7 +58,7 @@ describe('<Project />', () => {
     });
     const tabs = await waitForElement(
       wrapper,
-      '.pf-c-tabs__item',
+      '.pf-c-tabs__item-text',
       el => el.length === 6
     );
     expect(tabs.at(3).text()).toEqual('Notifications');
@@ -71,7 +79,7 @@ describe('<Project />', () => {
     });
     const tabs = await waitForElement(
       wrapper,
-      '.pf-c-tabs__item',
+      '.pf-c-tabs__item-text',
       el => el.length === 5
     );
     tabs.forEach(tab => expect(tab.text()).not.toEqual('Notifications'));
@@ -91,7 +99,6 @@ describe('<Project />', () => {
         <Project setBreadcrumb={() => {}} me={mockMe} />
       );
     });
-
     const tabs = await waitForElement(
       wrapper,
       '.pf-c-tabs__item',
@@ -115,7 +122,6 @@ describe('<Project />', () => {
         <Project setBreadcrumb={() => {}} me={mockMe} />
       );
     });
-
     const tabs = await waitForElement(
       wrapper,
       '.pf-c-tabs__item',

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx

@@ -1,89 +1,23 @@
 /* eslint react/no-unused-state: 0 */
-import React, { Component } from 'react';
+import React, { useState } from 'react';
-import { withRouter, Redirect } from 'react-router-dom';
+import { withRouter, Redirect, useHistory } from 'react-router-dom';
 import { CardBody } from '../../../components/Card';
-import ContentError from '../../../components/ContentError';
+
-import ContentLoading from '../../../components/ContentLoading';
 import { JobTemplatesAPI } from '../../../api';
 import { JobTemplate } from '../../../types';
 import { getAddedAndRemoved } from '../../../util/lists';
 import JobTemplateForm from '../shared/JobTemplateForm';
 
-class JobTemplateEdit extends Component {
+import ContentLoading from '../../../components/ContentLoading';
-  static propTypes = {
-    template: JobTemplate.isRequired,
-  };
 
-  constructor(props) {
+function JobTemplateEdit({ template }) {
-    super(props);
+  const history = useHistory();
+  const [formSubmitError, setFormSubmitError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-    this.state = {
+  const detailsUrl = `/templates/${template.type}/${template.id}/details`;
-      hasContentLoading: true,
-      contentError: null,
-      formSubmitError: null,
-      relatedCredentials: [],
-      relatedProjectPlaybooks: [],
-    };
 
-    const {
+  const handleSubmit = async values => {
-      template: { id, type },
-    } = props;
-    this.detailsUrl = `/templates/${type}/${id}/details`;
-
-    this.handleCancel = this.handleCancel.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.loadRelatedCredentials = this.loadRelatedCredentials.bind(this);
-    this.submitLabels = this.submitLabels.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadRelated();
-  }
-
-  async loadRelated() {
-    this.setState({ contentError: null, hasContentLoading: true });
-    try {
-      const [relatedCredentials] = await this.loadRelatedCredentials();
-      this.setState({
-        relatedCredentials,
-      });
-    } catch (contentError) {
-      this.setState({ contentError });
-    } finally {
-      this.setState({ hasContentLoading: false });
-    }
-  }
-
-  async loadRelatedCredentials() {
-    const {
-      template: { id },
-    } = this.props;
-    const params = {
-      page: 1,
-      page_size: 200,
-      order_by: 'name',
-    };
-    try {
-      const {
-        data: { results: credentials = [] },
-      } = await JobTemplatesAPI.readCredentials(id, params);
-      return credentials;
-    } catch (err) {
-      if (err.status !== 403) throw err;
-
-      this.setState({ hasRelatedCredentialAccess: false });
-      const {
-        template: {
-          summary_fields: { credentials = [] },
-        },
-      } = this.props;
-
-      return credentials;
-    }
-  }
-
-  async handleSubmit(values) {
-    const { template, history } = this.props;
     const {
       labels,
       instanceGroups,
@@ -95,25 +29,26 @@ class JobTemplateEdit extends Component {
       ...remainingValues
     } = values;
 
-    this.setState({ formSubmitError: null });
+    setFormSubmitError(null);
+    setIsLoading(true);
     remainingValues.project = values.project.id;
     remainingValues.webhook_credential = webhook_credential?.id || null;
     try {
       await JobTemplatesAPI.update(template.id, remainingValues);
       await Promise.all([
-        this.submitLabels(labels, template?.organization),
+        submitLabels(labels, template?.organization),
-        this.submitInstanceGroups(instanceGroups, initialInstanceGroups),
+        submitInstanceGroups(instanceGroups, initialInstanceGroups),
-        this.submitCredentials(credentials),
+        submitCredentials(credentials),
       ]);
-      history.push(this.detailsUrl);
+      history.push(detailsUrl);
     } catch (error) {
-      this.setState({ formSubmitError: error });
+      setFormSubmitError(error);
-    }
+    } finally {
+      setIsLoading(false);
     }
+  };
 
-  async submitLabels(labels = [], orgId) {
+  const submitLabels = async (labels = [], orgId) => {
-    const { template } = this.props;
-
     const { added, removed } = getAddedAndRemoved(
       template.summary_fields.labels.results,
       labels
@@ -131,10 +66,9 @@ class JobTemplateEdit extends Component {
       ...associationPromises,
     ]);
     return results;
-  }
+  };
 
-  async submitInstanceGroups(groups, initialGroups) {
+  const submitInstanceGroups = async (groups, initialGroups) => {
-    const { template } = this.props;
     const { added, removed } = getAddedAndRemoved(initialGroups, groups);
     const disassociatePromises = await removed.map(group =>
       JobTemplatesAPI.disassociateInstanceGroup(template.id, group.id)
@@ -143,10 +77,9 @@ class JobTemplateEdit extends Component {
       JobTemplatesAPI.associateInstanceGroup(template.id, group.id)
     );
     return Promise.all([...disassociatePromises, ...associatePromises]);
-  }
+  };
 
-  async submitCredentials(newCredentials) {
+  const submitCredentials = async newCredentials => {
-    const { template } = this.props;
     const { added, removed } = getAddedAndRemoved(
       template.summary_fields.credentials,
       newCredentials
@@ -160,55 +93,34 @@ class JobTemplateEdit extends Component {
     );
     const associatePromise = Promise.all(associateCredentials);
     return Promise.all([disassociatePromise, associatePromise]);
-  }
+  };
 
-  handleCancel() {
+  const handleCancel = () => {
-    const { history } = this.props;
+    history.push(detailsUrl);
-    history.push(this.detailsUrl);
+  };
-  }
 
-  render() {
+  const canEdit = template?.summary_fields?.user_capabilities?.edit;
-    const { template } = this.props;
-    const {
-      contentError,
-      formSubmitError,
-      hasContentLoading,
-      relatedProjectPlaybooks,
-    } = this.state;
-    const canEdit = template.summary_fields.user_capabilities.edit;
-
-    if (hasContentLoading) {
-      return (
-        <CardBody>
-          <ContentLoading />
-        </CardBody>
-      );
-    }
-
-    if (contentError) {
-      return (
-        <CardBody>
-          <ContentError error={contentError} />
-        </CardBody>
-      );
-    }
 
   if (!canEdit) {
-      return <Redirect to={this.detailsUrl} />;
+    return <Redirect to={detailsUrl} />;
+  }
+  if (isLoading) {
+    return <ContentLoading />;
   }
-
   return (
     <CardBody>
       <JobTemplateForm
         template={template}
-          handleCancel={this.handleCancel}
+        handleCancel={handleCancel}
-          handleSubmit={this.handleSubmit}
+        handleSubmit={handleSubmit}
-          relatedProjectPlaybooks={relatedProjectPlaybooks}
         submitError={formSubmitError}
       />
     </CardBody>
   );
-  }
 }
 
+JobTemplateEdit.propTypes = {
+  template: JobTemplate.isRequired,
+};
+
 export default withRouter(JobTemplateEdit);

awx/ui_next/src/screens/Template/Template.jsx

@@ -13,6 +13,7 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 import RoutedTabs from '../../components/RoutedTabs';
+import { useConfig } from '../../contexts/Config';
 import useRequest from '../../util/useRequest';
 import ContentError from '../../components/ContentError';
 import JobList from '../../components/JobList';
@@ -24,15 +25,16 @@ import JobTemplateEdit from './JobTemplateEdit';
 import { JobTemplatesAPI, OrganizationsAPI } from '../../api';
 import TemplateSurvey from './TemplateSurvey';
 
-function Template({ i18n, me, setBreadcrumb }) {
+function Template({ i18n, setBreadcrumb }) {
+  const match = useRouteMatch();
   const location = useLocation();
   const { id: templateId } = useParams();
-  const match = useRouteMatch();
+  const { me = {} } = useConfig();
 
   const {
     result: { isNotifAdmin, template },
-    isLoading: hasRolesandTemplateLoading,
+    isLoading,
-    error: rolesAndTemplateError,
+    error: contentError,
     request: loadTemplateAndRoles,
   } = useRequest(
     useCallback(async () => {
@@ -44,9 +46,8 @@ function Template({ i18n, me, setBreadcrumb }) {
           role_level: 'notification_admin_role',
         }),
       ]);
-
+      if (actions?.data?.actions?.PUT) {
-      if (actions.data.actions.PUT) {
+        if (data?.webhook_service && data?.related?.webhook_key) {
-        if (data.webhook_service && data?.related?.webhook_key) {
           const {
             data: { webhook_key },
           } = await JobTemplatesAPI.readWebhookKey(templateId);
@@ -54,35 +55,40 @@ function Template({ i18n, me, setBreadcrumb }) {
           data.webhook_key = webhook_key;
         }
       }
-      setBreadcrumb(data);
-
       return {
         template: data,
         isNotifAdmin: notifAdminRes.data.results.length > 0,
       };
-    }, [setBreadcrumb, templateId]),
+    }, [templateId]),
     { isNotifAdmin: false, template: null }
   );
+
   useEffect(() => {
     loadTemplateAndRoles();
   }, [loadTemplateAndRoles, location.pathname]);
 
+  useEffect(() => {
+    if (template) {
+      setBreadcrumb(template);
+    }
+  }, [template, setBreadcrumb]);
+
   const createSchedule = data => {
-    return JobTemplatesAPI.createSchedule(templateId, data);
+    return JobTemplatesAPI.createSchedule(template.id, data);
   };
 
   const loadScheduleOptions = useCallback(() => {
-    return JobTemplatesAPI.readScheduleOptions(templateId);
+    return JobTemplatesAPI.readScheduleOptions(template.id);
-  }, [templateId]);
+  }, [template]);
 
   const loadSchedules = useCallback(
     params => {
-      return JobTemplatesAPI.readSchedules(templateId, params);
+      return JobTemplatesAPI.readSchedules(template.id, params);
     },
-    [templateId]
+    [template]
   );
 
-  const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin;
+  const canSeeNotificationsTab = me?.is_system_auditor || isNotifAdmin;
   const canAddAndEditSurvey =
     template?.summary_fields?.user_capabilities.edit ||
     template?.summary_fields?.user_capabilities.delete;
@@ -131,17 +137,7 @@ function Template({ i18n, me, setBreadcrumb }) {
     tab.id = n;
   });
 
-  let showCardHeader = true;
+  if (contentError) {
-
-  if (
-    location.pathname.endsWith('edit') ||
-    location.pathname.includes('schedules/')
-  ) {
-    showCardHeader = false;
-  }
-
-  const contentError = rolesAndTemplateError;
-  if (!hasRolesandTemplateLoading && contentError) {
     return (
       <PageSection>
         <Card>
@@ -158,38 +154,37 @@ function Template({ i18n, me, setBreadcrumb }) {
     );
   }
 
+  const showCardHeader = !(
+    location.pathname.endsWith('edit') ||
+    location.pathname.includes('schedules/')
+  );
+
   return (
     <PageSection>
       <Card>
         {showCardHeader && <RoutedTabs tabsArray={tabsArray} />}
+        {template && (
           <Switch>
             <Redirect
               from="/templates/:templateType/:id"
               to="/templates/:templateType/:id/details"
               exact
             />
-          {template && (
             <Route key="details" path="/templates/:templateType/:id/details">
               <JobTemplateDetail
-                hasTemplateLoading={hasRolesandTemplateLoading}
+                hasTemplateLoading={isLoading}
                 template={template}
               />
             </Route>
-          )}
-          {template && (
             <Route key="edit" path="/templates/:templateType/:id/edit">
               <JobTemplateEdit template={template} />
             </Route>
-          )}
-          {template && (
             <Route key="access" path="/templates/:templateType/:id/access">
               <ResourceAccessList
                 resource={template}
                 apiModel={JobTemplatesAPI}
               />
             </Route>
-          )}
-          {template && (
             <Route
               key="schedules"
               path="/templates/:templateType/:id/schedules"
@@ -202,7 +197,6 @@ function Template({ i18n, me, setBreadcrumb }) {
                 loadScheduleOptions={loadScheduleOptions}
               />
             </Route>
-          )}
             {canSeeNotificationsTab && (
               <Route path="/templates/:templateType/:id/notifications">
                 <NotificationList
@@ -212,25 +206,21 @@ function Template({ i18n, me, setBreadcrumb }) {
                 />
               </Route>
             )}
-          {template?.id && (
             <Route path="/templates/:templateType/:id/completed_jobs">
               <JobList defaultParams={{ job__job_template: template.id }} />
             </Route>
-          )}
-          {template && (
             <Route path="/templates/:templateType/:id/survey">
               <TemplateSurvey
                 template={template}
                 canEdit={canAddAndEditSurvey}
               />
             </Route>
-          )}
+            {!isLoading && (
-          {!hasRolesandTemplateLoading && (
               <Route key="not-found" path="*">
                 <ContentError isNotFound>
                   {match.params.id && (
                     <Link
-                    to={`/templates/${match.params.templateType}/${match.params.id}/details`}
+                      to={`/templates/${match?.params?.templateType}/${templateId}/details`}
                     >
                       {i18n._(t`View Template Details`)}
                     </Link>
@@ -239,6 +229,7 @@ function Template({ i18n, me, setBreadcrumb }) {
               </Route>
             )}
           </Switch>
+        )}
       </Card>
     </PageSection>
   );

awx/ui_next/src/screens/Template/Templates.jsx

@@ -1,10 +1,9 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Route, withRouter, Switch } from 'react-router-dom';
 import { PageSection } from '@patternfly/react-core';
 
-import { Config } from '../../contexts/Config';
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 import { TemplateList } from './TemplateList';
 import Template from './Template';
@@ -12,115 +11,59 @@ import WorkflowJobTemplate from './WorkflowJobTemplate';
 import JobTemplateAdd from './JobTemplateAdd';
 import WorkflowJobTemplateAdd from './WorkflowJobTemplateAdd';
 
-class Templates extends Component {
+function Templates({ i18n }) {
-  constructor(props) {
+  const initBreadcrumbs = useRef({
-    super(props);
-    const { i18n } = this.props;
-
-    this.state = {
-      breadcrumbConfig: {
     '/templates': i18n._(t`Templates`),
     '/templates/job_template/add': i18n._(t`Create New Job Template`),
     '/templates/workflow_job_template/add': i18n._(
       t`Create New Workflow Template`
     ),
+  });
+  const [breadcrumbConfig, setBreadcrumbs] = useState(initBreadcrumbs.current);
+  const setBreadcrumbConfig = useCallback(
+    (template, schedule) => {
+      if (!template) return;
+      const templatePath = `/templates/${template.type}/${template.id}`;
+      const schedulesPath = `${templatePath}/schedules`;
+      const surveyPath = `${templatePath}/survey`;
+      setBreadcrumbs({
+        ...initBreadcrumbs.current,
+        [templatePath]: `${template.name}`,
+        [`${templatePath}/details`]: i18n._(t`Details`),
+        [`${templatePath}/edit`]: i18n._(t`Edit Details`),
+        [`${templatePath}/access`]: i18n._(t`Access`),
+        [`${templatePath}/notifications`]: i18n._(t`Notifications`),
+        [`${templatePath}/completed_jobs`]: i18n._(t`Completed Jobs`),
+        [surveyPath]: i18n._(t`Survey`),
+        [`${surveyPath}add`]: i18n._(t`Add Question`),
+        [`${surveyPath}/edit`]: i18n._(t`Edit Question`),
+        [schedulesPath]: i18n._(t`Schedules`),
+        [`${schedulesPath}/add`]: i18n._(t`Create New Schedule`),
+        [`${schedulesPath}/${schedule?.id}`]: `${schedule?.name}`,
+        [`${schedulesPath}/details`]: i18n._(t`Schedule Details`),
+        [`${schedulesPath}/edit`]: i18n._(t`Edit Details`),
+      });
     },
-    };
+    [i18n]
-  }
+  );
 
-  setBreadCrumbConfig = (template, schedule) => {
-    const { i18n } = this.props;
-    if (!template) {
-      return;
-    }
-    const breadcrumbConfig = {
-      '/templates': i18n._(t`Templates`),
-      '/templates/job_template/add': i18n._(t`Create New Job Template`),
-      '/templates/workflow_job_template/add': i18n._(
-        t`Create New Workflow Template`
-      ),
-      [`/templates/${template.type}/${template.id}`]: `${template.name}`,
-      [`/templates/${template.type}/${template.id}/details`]: i18n._(
-        t`Details`
-      ),
-      [`/templates/${template.type}/${template.id}/edit`]: i18n._(
-        t`Edit Details`
-      ),
-      [`/templates/${template.type}/${template.id}/access`]: i18n._(t`Access`),
-      [`/templates/${template.type}/${template.id}/notifications`]: i18n._(
-        t`Notifications`
-      ),
-      [`/templates/${template.type}/${template.id}/completed_jobs`]: i18n._(
-        t`Completed Jobs`
-      ),
-      [`/templates/${template.type}/${template.id}/survey`]: i18n._(t`Survey`),
-      [`/templates/${template.type}/${template.id}/survey/add`]: i18n._(
-        t`Add Question`
-      ),
-      [`/templates/${template.type}/${template.id}/survey/edit`]: i18n._(
-        t`Edit Question`
-      ),
-      [`/templates/${template.type}/${template.id}/schedules`]: i18n._(
-        t`Schedules`
-      ),
-      [`/templates/${template.type}/${template.id}/schedules/add`]: i18n._(
-        t`Create New Schedule`
-      ),
-      [`/templates/${template.type}/${template.id}/schedules/${schedule &&
-        schedule.id}`]: `${schedule && schedule.name}`,
-      [`/templates/${template.type}/${template.id}/schedules/${schedule &&
-        schedule.id}/details`]: i18n._(t`Schedule Details`),
-      [`/templates/${template.type}/${template.id}/schedules/${schedule &&
-        schedule.id}/edit`]: i18n._(t`Edit Details`),
-    };
-    this.setState({ breadcrumbConfig });
-  };
-
-  render() {
-    const { match, history, location } = this.props;
-    const { breadcrumbConfig } = this.state;
   return (
     <>
       <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
       <Switch>
-          <Route path={`${match.path}/job_template/add`}>
+        <Route path="/templates/job_template/add">
           <JobTemplateAdd />
         </Route>
-          <Route path={`${match.path}/workflow_job_template/add`}>
+        <Route path="/templates/workflow_job_template/add">
           <WorkflowJobTemplateAdd />
         </Route>
-          <Route
+        <Route path="/templates/job_template/:id">
-            path={`${match.path}/job_template/:id`}
+          <Template setBreadcrumb={setBreadcrumbConfig} />
-            render={({ match: newRouteMatch }) => (
+        </Route>
-              <Config>
+        <Route path="/templates/workflow_job_template/:id">
-                {({ me }) => (
+          <WorkflowJobTemplate setBreadcrumb={setBreadcrumbConfig} />
-                  <Template
+        </Route>
-                    history={history}
+        <Route path="/templates">
-                    location={location}
-                    setBreadcrumb={this.setBreadCrumbConfig}
-                    me={me || {}}
-                    match={newRouteMatch}
-                  />
-                )}
-              </Config>
-            )}
-          />
-          <Route
-            path={`${match.path}/workflow_job_template/:id`}
-            render={({ match: newRouteMatch }) => (
-              <Config>
-                {({ me }) => (
-                  <WorkflowJobTemplate
-                    location={location}
-                    setBreadcrumb={this.setBreadCrumbConfig}
-                    me={me || {}}
-                    match={newRouteMatch}
-                  />
-                )}
-              </Config>
-            )}
-          />
-          <Route path={`${match.path}`}>
           <PageSection>
             <TemplateList />
           </PageSection>
@@ -128,7 +71,6 @@ class Templates extends Component {
       </Switch>
     </>
   );
-  }
 }
 
 export { Templates as _Templates };

awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx

@@ -13,6 +13,7 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 import RoutedTabs from '../../components/RoutedTabs';
+import { useConfig } from '../../contexts/Config';
 import useRequest from '../../util/useRequest';
 import AppendBody from '../../components/AppendBody';
 import ContentError from '../../components/ContentError';
@@ -27,10 +28,11 @@ import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '../../api';
 import TemplateSurvey from './TemplateSurvey';
 import { Visualizer } from './WorkflowJobTemplateVisualizer';
 
-function WorkflowJobTemplate({ i18n, me, setBreadcrumb }) {
+function WorkflowJobTemplate({ i18n, setBreadcrumb }) {
   const location = useLocation();
-  const { id: templateId } = useParams();
   const match = useRouteMatch();
+  const { id: templateId } = useParams();
+  const { me = {} } = useConfig();
 
   const {
     result: { isNotifAdmin, template },

awx/ui_next/testUtils/enzymeHelpers.test.jsx

@@ -1,27 +1,24 @@
 import React, { Component } from 'react';
 import { createMemoryHistory } from 'history';
 import { Link } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+
-import { t } from '@lingui/macro';
 import { mountWithContexts, waitForElement } from './enzymeHelpers';
 import { Config } from '../src/contexts/Config';
 
 describe('mountWithContexts', () => {
   describe('injected I18nProvider', () => {
     test('should mount and render', () => {
-      const Child = withI18n()(({ i18n }) => (
+      const Child = () => (
         <div>
-          <span>{i18n._(t`Text content`)}</span>
+          <span>Text content</span>
         </div>
-      ));
+      );
       const wrapper = mountWithContexts(<Child />);
       expect(wrapper.find('div')).toMatchSnapshot();
     });
 
     test('should mount and render deeply nested consumer', () => {
-      const Child = withI18n()(({ i18n }) => (
+      const Child = () => <div>Text content</div>;
-        <div>{i18n._(t`Text content`)}</div>
-      ));
       const Parent = () => <Child />;
       const wrapper = mountWithContexts(<Parent />);
       expect(wrapper.find('Parent')).toMatchSnapshot();
@@ -146,7 +143,9 @@ describe('waitForElement', () => {
     } catch (err) {
       error = err;
     } finally {
-      expect(error.message).toContain('Expected condition for <#does-not-exist> not met');
+      expect(error.message).toContain(
+        'Expected condition for <#does-not-exist> not met'
+      );
       expect(error.message).toContain('el.length === 1');
       done();
     }