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

Author: pondrejk

webpack/JobInvocationDetail/JobInvocationEmptyState.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PageSection, PageSectionVariants } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl, visit } from 'foremanReact/common/helpers';
+import ResourceLoadFailedEmptyState from 'foremanReact/components/common/EmptyState/ResourceLoadFailedEmptyState';
+
+const jobInvocationsIndexPath = '/job_invocations';
+
+const JobInvocationEmptyState = ({
+  jobInvocationId,
+  httpStatus,
+  errorMessage,
+}) => (
+  <PageSection variant={PageSectionVariants.light}>
+    <ResourceLoadFailedEmptyState
+      resourceLabel={__('job invocation')}
+      resourceId={jobInvocationId}
+      httpStatus={httpStatus}
+      errorMessage={errorMessage}
+      viewPermissions={['view_job_invocations']}
+      requiredPermissions={['view_job_invocations']}
+      primaryAction={{
+        label: __('Go to job invocations'),
+        onClick: () => visit(foremanUrl(jobInvocationsIndexPath)),
+        ouiaId: 'job-invocation-empty-state-go-to-job-invocations-button',
+      }}
+      secondaryActions={[
+        {
+          label: __('Create a new job invocation'),
+          onClick: () => visit(foremanUrl('/job_invocations/new')),
+          ouiaId: 'job-invocation-empty-state-create-new-job-invocation-button',
+        },
+      ]}
+      ouiaIdPrefix="job-invocation-empty-state"
+    />
+  </PageSection>
+);
+
+JobInvocationEmptyState.propTypes = {
+  jobInvocationId: PropTypes.string.isRequired,
+  httpStatus: PropTypes.number,
+  errorMessage: PropTypes.string,
+};
+
+JobInvocationEmptyState.defaultProps = {
+  httpStatus: null,
+  errorMessage: null,
+};
+
+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

@@ -5,19 +5,26 @@ import {
   PageSectionVariants,
   Skeleton,
 } from '@patternfly/react-core';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 import { useDispatch, useSelector } from 'react-redux';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 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 {
+  selectAPIErrorMessage,
+  selectAPIHttpStatus,
+  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 +58,28 @@ 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 jobInvocationErrorMessage = useSelector(state =>
+    selectAPIErrorMessage(state, JOB_INVOCATION_KEY)
+  );
+  const permissionsErrorMessage = useSelector(state =>
+    selectAPIErrorMessage(state, CURRENT_PERMISSIONS)
+  );
+  const jobInvocationHttpStatus = useSelector(state =>
+    selectAPIHttpStatus(state, JOB_INVOCATION_KEY)
+  );
+  const permissionsHttpStatus = useSelector(state =>
+    selectAPIHttpStatus(state, CURRENT_PERMISSIONS)
+  );
   const [selectedFilter, setSelectedFilter] = useState('');
 
   const handleFilterChange = newFilter => {
@@ -88,6 +114,47 @@ const JobInvocationDetailPage = ({
     }
   }, [dispatch, taskId]);
 
+  const apiFailed =
+    permissionsApiStatus === API_STATUS.ERROR ||
+    jobInvocationApiStatus === API_STATUS.ERROR;
+
+  const backendErrorMessage = useMemo(() => {
+    const parts = [];
+    if (jobInvocationApiStatus === API_STATUS.ERROR) {
+      const msg = jobInvocationErrorMessage;
+      if (msg) {
+        parts.push(msg);
+      }
+    }
+    if (permissionsApiStatus === API_STATUS.ERROR) {
+      const msg = permissionsErrorMessage;
+      if (msg) {
+        parts.push(msg);
+      }
+    }
+    return parts.length ? parts.join('\n\n') : null;
+  }, [
+    jobInvocationApiStatus,
+    permissionsApiStatus,
+    jobInvocationErrorMessage,
+    permissionsErrorMessage,
+  ]);
+
+  const httpStatus =
+    jobInvocationApiStatus === API_STATUS.ERROR
+      ? jobInvocationHttpStatus
+      : permissionsHttpStatus;
+
+  if (apiFailed) {
+    return (
+      <JobInvocationEmptyState
+        jobInvocationId={id}
+        httpStatus={httpStatus}
+        errorMessage={backendErrorMessage}
+      />
+    );
+  }
+
   const pageStatus =
     items.id === undefined
       ? STATUS_UPPERCASE.PENDING

webpack/__mocks__/foremanReact/common/helpers.js

@@ -1 +1,5 @@
 export const foremanUrl = path => `foreman${path}`;
+
+export const visit = jest.fn(url => {
+  global.window.location.href = url;
+});