Fixes #39253 - Implement "Not Found" error handling for invalid Job Invocation IDs

Author: pondrejk

webpack/JobInvocationDetail/JobInvocationEmptyState.js

@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import {
+  Bullseye,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  PageSection,
+  PageSectionVariants,
+  EmptyStateVariant,
+  EmptyStateHeader,
+  EmptyStateActions,
+  EmptyStateFooter,
+} from '@patternfly/react-core';
+import { SearchIcon } from '@patternfly/react-icons';
+
+const jobInvocationsIndexPath = '/job_invocations';
+
+const JobInvocationEmptyState = ({ jobInvocationId }) => {
+  const history = useHistory();
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <Bullseye>
+        <EmptyState
+          ouiaId="job-invocation-empty-state"
+          variant={EmptyStateVariant.lg}
+        >
+          <EmptyStateIcon icon={SearchIcon} />
+          <EmptyStateHeader
+            titleText={<>{sprintf(__('Job invocation not found'))}</>}
+            headingLevel="h5"
+          />
+
+          <EmptyStateBody>
+            {sprintf(
+              __(
+                'There is no job invocation with id %s or there are access permissions needed. Please contact your administrator if this issue continues.'
+              ),
+              jobInvocationId
+            )}
+          </EmptyStateBody>
+          <EmptyStateFooter>
+            <EmptyStateActions>
+              <Button
+                ouiaId="job-invocation-empty-state-go-to-job-invocations-button"
+                variant="primary"
+                component="a"
+                href={foremanUrl(jobInvocationsIndexPath)}
+                isInline
+              >
+                {__('Go to job invocations')}
+              </Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+              <Button
+                ouiaId="job-invocation-empty-state-create-new-job-invocation-button"
+                variant="link"
+                component="a"
+                href={foremanUrl('/job_invocations/new')}
+              >
+                {__('Create a new job invocation')}
+              </Button>
+              <Button
+                ouiaId="job-invocation-empty-state-return-to-last-page-button"
+                variant="link"
+                onClick={() => history.goBack()}
+              >
+                {__('Return to the last page')}
+              </Button>
+            </EmptyStateActions>
+          </EmptyStateFooter>
+        </EmptyState>
+      </Bullseye>
+    </PageSection>
+  );
+};
+
+JobInvocationEmptyState.propTypes = {
+  jobInvocationId: PropTypes.string.isRequired,
+};
+
+export default JobInvocationEmptyState;

webpack/JobInvocationDetail/__tests__/MainInformation.test.js

@@ -35,8 +35,11 @@ jest.spyOn(api, 'get');
 const originalToLocaleString = Date.prototype.toLocaleString;
 beforeAll(() => {
   // eslint-disable-next-line no-extend-native
-  Date.prototype.toLocaleString = function (locale, options) {
-    return originalToLocaleString.call(this, locale, { ...options, timeZone: 'UTC' });
+  Date.prototype.toLocaleString = function(locale, options) {
+    return originalToLocaleString.call(this, locale, {
+      ...options,
+      timeZone: 'UTC',
+    });
   };
 });
 afterAll(() => {

webpack/JobInvocationDetail/index.js

@@ -13,11 +13,14 @@ import PropTypes from 'prop-types';
 import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
 import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { STATUS as API_STATUS } from 'foremanReact/constants';
+import { selectAPIStatus } from 'foremanReact/redux/API/APISelectors';
 
 import { JobAdditionInfo } from './JobAdditionInfo';
 import JobInvocationHostTable from './JobInvocationHostTable';
 import JobInvocationOverview from './JobInvocationOverview';
 import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
+import JobInvocationEmptyState from './JobInvocationEmptyState';
 import JobInvocationToolbarButtons from './JobInvocationToolbarButtons';
 import { getJobInvocation, getTask } from './JobInvocationActions';
 import './JobInvocationDetail.scss';
@@ -51,9 +54,16 @@ const JobInvocationDetailPage = ({
     statusLabel === STATUS.SUCCEEDED ||
     statusLabel === STATUS.CANCELLED;
   const autoRefresh = task?.state === STATUS.PENDING || false;
-  useAPI('get', currentPermissionsUrl, {
-    key: CURRENT_PERMISSIONS,
-  });
+  const { status: permissionsApiStatus } = useAPI(
+    'get',
+    currentPermissionsUrl,
+    {
+      key: CURRENT_PERMISSIONS,
+    }
+  );
+  const jobInvocationApiStatus = useSelector(state =>
+    selectAPIStatus(state, JOB_INVOCATION_KEY)
+  );
   const [selectedFilter, setSelectedFilter] = useState('');
 
   const handleFilterChange = newFilter => {
@@ -88,6 +98,14 @@ const JobInvocationDetailPage = ({
     }
   }, [dispatch, taskId]);
 
+  const apiFailed =
+    permissionsApiStatus === API_STATUS.ERROR ||
+    jobInvocationApiStatus === API_STATUS.ERROR;
+
+  if (apiFailed) {
+    return <JobInvocationEmptyState jobInvocationId={id} />;
+  }
+
   const pageStatus =
     items.id === undefined
       ? STATUS_UPPERCASE.PENDING