Merge pull request #8963 from marshmalien/8962-fix-output-navigation

Fix navigation bug in job output 

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

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

@@ -14,15 +14,15 @@ import { CaretLeftIcon } from '@patternfly/react-icons';
 import { Card, PageSection } from '@patternfly/react-core';
 import { JobsAPI } from '../../api';
 import ContentError from '../../components/ContentError';
+import ContentLoading from '../../components/ContentLoading';
 import RoutedTabs from '../../components/RoutedTabs';
 import useRequest from '../../util/useRequest';
 import JobDetail from './JobDetail';
 import JobOutput from './JobOutput';
 import { WorkflowOutput } from './WorkflowOutput';
 import useWsJob from './useWsJob';
-import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
-function Job({ i18n, lookup, setBreadcrumb }) {
+function Job({ i18n, setBreadcrumb }) {
   const { id, type } = useParams();
   const match = useRouteMatch();
 
@@ -41,11 +41,6 @@ function Job({ i18n, lookup, setBreadcrumb }) {
 
   const job = useWsJob(result);
 
-  let jobType;
-  if (job) {
-    jobType = JOB_TYPE_URL_SEGMENTS[job.type];
-  }
-
   const tabsArray = [
     {
       name: (
@@ -61,7 +56,17 @@ function Job({ i18n, lookup, setBreadcrumb }) {
     { name: i18n._(t`Output`), link: `${match.url}/output`, id: 1 },
   ];
 
-  if (!isLoading && error) {
+  if (isLoading) {
+    return (
+      <PageSection>
+        <Card>
+          <ContentLoading />
+        </Card>
+      </PageSection>
+    );
+  }
+
+  if (error) {
     return (
       <PageSection>
         <Card>
@@ -78,20 +83,10 @@ function Job({ i18n, lookup, setBreadcrumb }) {
     );
   }
 
-  if (lookup && job) {
-    return (
-      <Switch>
-        <Redirect from="jobs/:id" to={`/jobs/${jobType}/:id/output`} />
-        <Redirect from="jobs/:id/details" to={`/jobs/${jobType}/:id/details`} />
-        <Redirect from="jobs/:id/output" to={`/jobs/${jobType}/:id/output`} />
-      </Switch>
-    );
-  }
-
   return (
     <PageSection>
       <Card>
-        {!isLoading && <RoutedTabs tabsArray={tabsArray} />}
+        <RoutedTabs tabsArray={tabsArray} />
         <Switch>
           <Redirect from="/jobs/:type/:id" to="/jobs/:type/:id/output" exact />
           {job &&
@@ -112,13 +107,11 @@ function Job({ i18n, lookup, setBreadcrumb }) {
                 <JobOutput type={type} job={job} />
               </Route>,
               <Route key="not-found" path="*">
-                {!isLoading && (
+                <ContentError isNotFound>
-                  <ContentError isNotFound>
+                  <Link to={`/jobs/${type}/${id}/details`}>
-                    <Link to={`/jobs/${type}/${id}/details`}>
+                    {i18n._(t`View Job Details`)}
-                      {i18n._(t`View Job Details`)}
+                  </Link>
-                    </Link>
+                </ContentError>
-                  </ContentError>
-                )}
               </Route>,
             ]}
         </Switch>

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

@@ -1,12 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import {
+import { Route, Switch, useParams, useRouteMatch } from 'react-router-dom';
-  Route,
-  Switch,
-  useHistory,
-  useLocation,
-  useParams,
-  useRouteMatch,
-} from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { PageSection } from '@patternfly/react-core';
@@ -17,8 +10,6 @@ import JobList from '../../components/JobList';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
 function Jobs({ i18n }) {
-  const history = useHistory();
-  const location = useLocation();
   const match = useRouteMatch();
   const [breadcrumbConfig, setBreadcrumbConfig] = useState({
     '/jobs': i18n._(t`Jobs`),
@@ -63,11 +54,7 @@ function Jobs({ i18n }) {
           <TypeRedirect view="output" />
         </Route>
         <Route path={`${match.path}/:type/:id`}>
-          <Job
+          <Job setBreadcrumb={buildBreadcrumbConfig} />
-            history={history}
-            location={location}
-            setBreadcrumb={buildBreadcrumbConfig}
-          />
         </Route>
         <Route path={`${match.path}/:id`}>
           <TypeRedirect />