foreman_remote_execution 16.6.4 → 16.7.0

data/webpack/JobInvocationDetail/JobInvocationSelectors.js

@@ -3,13 +3,11 @@ import {
   selectAPIResponse,
   selectAPIStatus,
 } from 'foremanReact/redux/API/APISelectors';
-import { STATUS as APIStatus } from 'foremanReact/constants';
 import {
   JOB_INVOCATION_KEY,
   GET_TASK,
   GET_TEMPLATE_INVOCATION,
   LIST_TEMPLATE_INVOCATIONS,
-  CURRENT_PERMISSIONS,
 } from './JobInvocationConstants';
 
 export const selectItems = state =>
@@ -29,16 +27,3 @@ export const selectTemplateInvocationStatus = hostID => state =>
 export const selectTemplateInvocationList = state =>
   selectAPIResponse(state, LIST_TEMPLATE_INVOCATIONS)
     ?.template_invocations_task_by_hosts;
-
-export const selectCurrentPermisions = state =>
-  selectAPIResponse(state, CURRENT_PERMISSIONS);
-
-export const selectHasPermission = permissionRequired => state => {
-  const status = selectAPIStatus(state, CURRENT_PERMISSIONS);
-  const selectCurrentPermissions = selectCurrentPermisions(state)?.results;
-  return status === APIStatus.RESOLVED
-    ? selectCurrentPermissions?.some(
-        permission => permission.name === permissionRequired
-      )
-    : false;
-};

data/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js

@@ -1,5 +1,6 @@
+/* eslint-disable max-lines */
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Split, SplitItem } from '@patternfly/react-core';
 import { UndoIcon } from '@patternfly/react-icons';
@@ -12,6 +13,7 @@ import {
 } from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
+import { usePermissions } from 'foremanReact/common/hooks/Permissions/permissionHooks';
 import { get } from 'foremanReact/redux/API';
 import {
   cancelJob,
@@ -23,10 +25,7 @@ import {
   GET_REPORT_TEMPLATES,
   GET_REPORT_TEMPLATE_INPUTS,
 } from './JobInvocationConstants';
-import {
-  selectTaskCancelable,
-  selectHasPermission,
-} from './JobInvocationSelectors';
+import { selectTaskCancelable } from './JobInvocationSelectors';
 
 const JobInvocationToolbarButtons = ({ jobId, data }) => {
   const { succeeded, failed, task, recurrence, permissions } = data;
@@ -38,165 +37,238 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
     ? permissions.edit_recurring_logics
     : false;
   const isTaskCancelable = useSelector(selectTaskCancelable);
-  const useHasPermission = permissionRequired =>
-    useSelector(selectHasPermission(permissionRequired));
+  const canCreateJobInvocations = usePermissions(['create_job_invocations']);
+  const canCancelJobInvocations = usePermissions(['cancel_job_invocations']);
+  const canGenerateReportTemplates = usePermissions([
+    'generate_report_templates',
+  ]);
   const [isActionOpen, setIsActionOpen] = useState(false);
   const [reportTemplateJobId, setReportTemplateJobId] = useState(undefined);
   const [templateInputId, setTemplateInputId] = useState(undefined);
-  const queryParams = new URLSearchParams({
-    [`report_template_report[input_values][${templateInputId}][value]`]: jobId,
-  });
   const dispatch = useDispatch();
+  const reportHref = useMemo(() => {
+    if (reportTemplateJobId === undefined || templateInputId === undefined) {
+      return undefined;
+    }
+    const queryParams = new URLSearchParams({
+      [`report_template_report[input_values][${templateInputId}][value]`]: jobId,
+    });
+    return foremanUrl(
+      `/templates/report_templates/${reportTemplateJobId}/generate?${queryParams.toString()}`
+    );
+  }, [jobId, reportTemplateJobId, templateInputId]);
 
-  const onActionFocus = () => {
+  const onActionFocus = useCallback(() => {
     const element = document.getElementById(
       `toggle-split-button-action-primary-${jobId}`
     );
-    element.focus();
-  };
-  const onActionSelect = () => {
+    if (element) {
+      element.focus();
+    }
+  }, [jobId]);
+  const onActionSelect = useCallback(() => {
     setIsActionOpen(false);
     onActionFocus();
-  };
+  }, [onActionFocus]);
+  const onActionToggle = useCallback((_event, val) => setIsActionOpen(val), []);
 
   useEffect(() => {
+    let isMounted = true;
     dispatch(
       get({
         key: GET_REPORT_TEMPLATES,
         url: '/api/report_templates',
         handleSuccess: ({ data: { results } }) => {
-          setReportTemplateJobId(
-            results.find(result => result.name === 'Job - Invocation Report')
-              ?.id
-          );
+          if (isMounted) {
+            setReportTemplateJobId(
+              results.find(result => result.name === 'Job - Invocation Report')
+                ?.id
+            );
+          }
         },
         handleError: () => {
-          setReportTemplateJobId(undefined);
+          if (isMounted) {
+            setReportTemplateJobId(undefined);
+          }
         },
       })
     );
+    return () => {
+      isMounted = false;
+    };
   }, [dispatch]);
   useEffect(() => {
+    let isMounted = true;
     if (reportTemplateJobId !== undefined) {
       dispatch(
         get({
           key: GET_REPORT_TEMPLATE_INPUTS,
           url: `/api/templates/${reportTemplateJobId}/template_inputs`,
           handleSuccess: ({ data: { results } }) => {
-            setTemplateInputId(
-              results.find(result => result.name === 'job_id')?.id
-            );
+            if (isMounted) {
+              setTemplateInputId(
+                results.find(result => result.name === 'job_id')?.id
+              );
+            }
           },
           handleError: () => {
-            setTemplateInputId(undefined);
+            if (isMounted) {
+              setTemplateInputId(undefined);
+            }
           },
         })
       );
     }
+    return () => {
+      isMounted = false;
+    };
   }, [dispatch, reportTemplateJobId]);
 
-  const recurrenceDropdownItems = recurrence
-    ? [
-        <DropdownSeparator ouiaId="dropdown-separator-1" key="separator-1" />,
-        <DropdownItem
-          ouiaId="change-enabled-recurring-dropdown-item"
-          onClick={() =>
-            dispatch(
-              enableRecurringLogic(recurrence?.id, recurringEnabled, jobId)
-            )
-          }
-          key="change-enabled-recurring"
-          component="button"
-          isDisabled={
-            recurrence?.id === undefined ||
-            recurrence?.state === 'cancelled' ||
-            !canEditRecurringLogic
-          }
-        >
-          {recurringEnabled ? __('Disable recurring') : __('Enable recurring')}
-        </DropdownItem>,
-        <DropdownItem
-          ouiaId="cancel-recurring-dropdown-item"
-          onClick={() => dispatch(cancelRecurringLogic(recurrence?.id, jobId))}
-          key="cancel-recurring"
-          component="button"
-          isDisabled={
-            recurrence?.id === undefined ||
-            recurrence?.state === 'cancelled' ||
-            !canEditRecurringLogic
-          }
-        >
-          {__('Cancel recurring')}
-        </DropdownItem>,
-      ]
-    : [];
+  const recurrenceDropdownItems = useMemo(
+    () =>
+      recurrence
+        ? [
+            <DropdownSeparator
+              ouiaId="dropdown-separator-1"
+              key="separator-1"
+            />,
+            <DropdownItem
+              ouiaId="change-enabled-recurring-dropdown-item"
+              onClick={() =>
+                dispatch(
+                  enableRecurringLogic(recurrence?.id, recurringEnabled, jobId)
+                )
+              }
+              key="change-enabled-recurring"
+              component="button"
+              isDisabled={
+                recurrence?.id === undefined ||
+                recurrence?.state === 'cancelled' ||
+                !canEditRecurringLogic
+              }
+            >
+              {recurringEnabled
+                ? __('Disable recurring')
+                : __('Enable recurring')}
+            </DropdownItem>,
+            <DropdownItem
+              ouiaId="cancel-recurring-dropdown-item"
+              onClick={() =>
+                dispatch(cancelRecurringLogic(recurrence?.id, jobId))
+              }
+              key="cancel-recurring"
+              component="button"
+              isDisabled={
+                recurrence?.id === undefined ||
+                recurrence?.state === 'cancelled' ||
+                !canEditRecurringLogic
+              }
+            >
+              {__('Cancel recurring')}
+            </DropdownItem>,
+          ]
+        : [],
+    [recurrence, recurringEnabled, canEditRecurringLogic, dispatch, jobId]
+  );
+
+  const dropdownItems = useMemo(
+    () => [
+      <DropdownItem
+        ouiaId="rerun-succeeded-dropdown-item"
+        href={foremanUrl(`/job_invocations/${jobId}/rerun?succeeded_only=1`)}
+        key="rerun-succeeded"
+        isDisabled={!canCreateJobInvocations || !(succeeded > 0)}
+        description="Rerun job on successful hosts"
+      >
+        {__('Rerun successful')}
+      </DropdownItem>,
+      <DropdownItem
+        ouiaId="rerun-failed-dropdown-item"
+        href={foremanUrl(`/job_invocations/${jobId}/rerun?failed_only=1`)}
+        key="rerun-failed"
+        isDisabled={!canCreateJobInvocations || !(failed > 0)}
+        description="Rerun job on failed hosts"
+      >
+        {__('Rerun failed')}
+      </DropdownItem>,
+      <DropdownItem
+        ouiaId="view-task-dropdown-item"
+        href={foremanUrl(`/foreman_tasks/tasks/${task?.id}`)}
+        key="view-task"
+        isDisabled={!canViewForemanTasks || task === undefined}
+        description="See details of latest task"
+      >
+        {__('View task')}
+      </DropdownItem>,
+      <DropdownSeparator ouiaId="dropdown-separator-0" key="separator-0" />,
+      <DropdownItem
+        ouiaId="cancel-dropdown-item"
+        onClick={() => dispatch(cancelJob(jobId, false))}
+        key="cancel"
+        component="button"
+        isDisabled={!canCancelJobInvocations || !isTaskCancelable}
+        description="Cancel job gracefully"
+      >
+        {__('Cancel')}
+      </DropdownItem>,
+      <DropdownItem
+        ouiaId="abort-dropdown-item"
+        onClick={() => dispatch(cancelJob(jobId, true))}
+        key="abort"
+        component="button"
+        isDisabled={!canCancelJobInvocations || !isTaskCancelable}
+        description="Cancel job immediately"
+      >
+        {__('Abort')}
+      </DropdownItem>,
+      ...recurrenceDropdownItems,
+      <DropdownSeparator ouiaId="dropdown-separator-2" key="separator-2" />,
+      <DropdownItem
+        ouiaId="legacy-ui-dropdown-item"
+        icon={<UndoIcon />}
+        href={`/legacy/job_invocations/${jobId}`}
+        key="legacy-ui"
+      >
+        {__('Legacy UI')}
+      </DropdownItem>,
+    ],
+    [
+      canCancelJobInvocations,
+      canCreateJobInvocations,
+      canViewForemanTasks,
+      dispatch,
+      failed,
+      isTaskCancelable,
+      jobId,
+      recurrenceDropdownItems,
+      succeeded,
+      task,
+    ]
+  );
 
-  const dropdownItems = [
-    <DropdownItem
-      ouiaId="rerun-succeeded-dropdown-item"
-      href={foremanUrl(`/job_invocations/${jobId}/rerun?succeeded_only=1`)}
-      key="rerun-succeeded"
-      isDisabled={
-        !useHasPermission('create_job_invocations') || !(succeeded > 0)
-      }
-      description="Rerun job on successful hosts"
-    >
-      {__('Rerun successful')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="rerun-failed-dropdown-item"
-      href={foremanUrl(`/job_invocations/${jobId}/rerun?failed_only=1`)}
-      key="rerun-failed"
-      isDisabled={!useHasPermission('create_job_invocations') || !(failed > 0)}
-      description="Rerun job on failed hosts"
-    >
-      {__('Rerun failed')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="view-task-dropdown-item"
-      href={foremanUrl(`/foreman_tasks/tasks/${task?.id}`)}
-      key="view-task"
-      isDisabled={!canViewForemanTasks || task === undefined}
-      description="See details of latest task"
-    >
-      {__('View task')}
-    </DropdownItem>,
-    <DropdownSeparator ouiaId="dropdown-separator-0" key="separator-0" />,
-    <DropdownItem
-      ouiaId="cancel-dropdown-item"
-      onClick={() => dispatch(cancelJob(jobId, false))}
-      key="cancel"
-      component="button"
-      isDisabled={
-        !useHasPermission('cancel_job_invocations') || !isTaskCancelable
-      }
-      description="Cancel job gracefully"
-    >
-      {__('Cancel')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="abort-dropdown-item"
-      onClick={() => dispatch(cancelJob(jobId, true))}
-      key="abort"
-      component="button"
-      isDisabled={
-        !useHasPermission('cancel_job_invocations') || !isTaskCancelable
-      }
-      description="Cancel job immediately"
-    >
-      {__('Abort')}
-    </DropdownItem>,
-    ...recurrenceDropdownItems,
-    <DropdownSeparator ouiaId="dropdown-separator-2" key="separator-2" />,
-    <DropdownItem
-      ouiaId="legacy-ui-dropdown-item"
-      icon={<UndoIcon />}
-      href={`/legacy/job_invocations/${jobId}`}
-      key="legacy-ui"
-    >
-      {__('Legacy UI')}
-    </DropdownItem>,
-  ];
+  const dropdownToggle = useMemo(
+    () => (
+      <DropdownToggle
+        ouiaId="toggle-button-action-primary"
+        id={`toggle-split-button-action-primary-${jobId}`}
+        splitButtonItems={[
+          <Button
+            component="a"
+            ouiaId="button-rerun-all"
+            key="rerun"
+            href={foremanUrl(`/job_invocations/${jobId}/rerun`)}
+            variant="control"
+            isDisabled={!canCreateJobInvocations}
+          >
+            {__(`Rerun all`)}
+          </Button>,
+        ]}
+        splitButtonVariant="action"
+        onToggle={onActionToggle}
+      />
+    ),
+    [canCreateJobInvocations, jobId, onActionToggle]
+  );
 
   return (
     <>
@@ -206,14 +278,12 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             component="a"
             ouiaId="button-create-report"
             className="button-create-report"
-            href={foremanUrl(
-              `/templates/report_templates/${reportTemplateJobId}/generate?${queryParams.toString()}`
-            )}
+            href={reportHref}
             variant="secondary"
             isDisabled={
-              !useHasPermission('generate_report_templates') ||
+              !canGenerateReportTemplates ||
               task?.state === STATUS.PENDING ||
-              templateInputId === undefined
+              reportHref === undefined
             }
           >
             {__(`Create report`)}
@@ -224,26 +294,7 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             ouiaId="job-invocation-global-actions-dropdown"
             onSelect={onActionSelect}
             position={DropdownPosition.right}
-            toggle={
-              <DropdownToggle
-                ouiaId="toggle-button-action-primary"
-                id={`toggle-split-button-action-primary-${jobId}`}
-                splitButtonItems={[
-                  <Button
-                    component="a"
-                    ouiaId="button-rerun-all"
-                    key="rerun"
-                    href={foremanUrl(`/job_invocations/${jobId}/rerun`)}
-                    variant="control"
-                    isDisabled={!useHasPermission('create_job_invocations')}
-                  >
-                    {__(`Rerun all`)}
-                  </Button>,
-                ]}
-                splitButtonVariant="action"
-                onToggle={(_event, val) => setIsActionOpen(val)}
-              />
-            }
+            toggle={dropdownToggle}
             isOpen={isActionOpen}
             dropdownItems={dropdownItems}
           />

data/webpack/JobInvocationDetail/__tests__/JobInvocationDetailEmptyState.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import JobInvocationEmptyState from '../JobInvocationEmptyState';
+import { createForemanContextWrapper } from './foremanTestHelpers';
+
+describe('JobInvocationEmptyState', () => {
+  it('renders the failed load empty state for a job invocation', () => {
+    const jobInvocationId = '99';
+    const errorMessage = 'Record not found';
+    const history = createMemoryHistory();
+    const ForemanContextWrapper = createForemanContextWrapper();
+
+    render(
+      <Router history={history}>
+        <ForemanContextWrapper>
+          <JobInvocationEmptyState
+            jobInvocationId={jobInvocationId}
+            httpStatus={404}
+            errorMessage={errorMessage}
+          />
+        </ForemanContextWrapper>
+      </Router>
+    );
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Unable to load job invocation',
+        level: 5,
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        (_, element) =>
+          element?.tagName === 'P' &&
+          element.textContent?.includes(
+            `The job invocation with id ${jobInvocationId} could not be found. It may have been deleted or may not be available in your current organization or location scope.`
+          )
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(`Server returned: ${errorMessage}`)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Go to job invocations' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Create a new job invocation' })
+    ).toBeInTheDocument();
+  });
+});