foreman-tasks 12.2.4 → 13.1.0

data/webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.fixtures.js

@@ -1,8 +1,107 @@
 export const minProps = {
+  id: 'a15dd820-32f1-4ced-9ab7-c0fab8234c47',
   cancelStep: jest.fn(),
   taskReload: false,
   taskReloadStop: jest.fn(),
   taskReloadStart: jest.fn(),
   taskProgressToggle: jest.fn(),
-  status: 'RESOLVED',
+  apiStatus: 'RESOLVED',
+};
+
+/** Props for snapshots that exercise the Execution details tab alongside the overview. */
+export const taskDetailsWithExecutionTabDefaults = {
+  ...minProps,
+  locks: [
+    {
+      exclusive: false,
+      resource_type: 'User',
+      resource_id: 4,
+      link: null,
+    },
+  ],
+  links: [],
+  executionPlan: { state: 'stopped', cancellable: false },
+  failedSteps: [],
+  runningSteps: [],
+  dependsOn: [],
+  blocks: [],
+  action: 'Refresh foo',
+  state: 'stopped',
+  result: 'success',
+  progress: 100,
+  startAt: '',
+  startedAt: '',
+  endedAt: '',
+  startBefore: '',
+};
+
+const SAMPLE_FAILED_STEP = {
+  error: {
+    exception_class: 'RuntimeError',
+    message:
+      'Action Actions::Katello::EventQueue::Monitor is already active',
+    backtrace: [
+      "/home/example/gems/dynflow-1.2.3/lib/dynflow/action/singleton.rb:15:in `rescue in singleton_lock!'",
+    ],
+  },
+  action_class: 'Actions::Katello::EventQueue::Monitor',
+  state: 'error',
+  input:
+    '{"locale"=>"en",\n "current_request_id"=>nil,\n "current_user_id"=>4}\n',
+  output: '{}\n',
+};
+
+const SAMPLE_RUNNING_STEP = {
+  cancellable: false,
+  id: 1,
+  action_class: 'Actions::DynflowExample',
+  state: 'running',
+  input: '{}',
+  output: '{}',
+};
+
+const SAMPLE_DEPENDS_ON = [
+  {
+    id: '123',
+    action: 'Actions::FooBar',
+    humanized: 'Foo Bar Action',
+    state: 'stopped',
+    result: 'success',
+  },
+];
+
+export const fixtureFailedExecutionDetail = {
+  ...taskDetailsWithExecutionTabDefaults,
+  result: 'error',
+  state: 'stopped',
+  failedSteps: [SAMPLE_FAILED_STEP],
+};
+
+export const fixtureRunningExecutionDetail = {
+  ...taskDetailsWithExecutionTabDefaults,
+  state: 'running',
+  runningSteps: [SAMPLE_RUNNING_STEP],
+};
+
+export const fixtureWithOverviewMessages = {
+  ...taskDetailsWithExecutionTabDefaults,
+  help: '<strong>See logs</strong> for more.',
+  output: {
+    messages: ['partial output'],
+    result: 'error',
+  },
+};
+
+export const fixtureWithDependencies = {
+  ...taskDetailsWithExecutionTabDefaults,
+  dependsOn: SAMPLE_DEPENDS_ON,
+  blocks: [
+    {
+      id: '789',
+      action: 'Actions::Test',
+      humanized: 'Test Action',
+      state: 'paused',
+      result: 'warning',
+    },
+  ],
 };

data/webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.test.js

@@ -1,48 +1,256 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
 
 import TaskDetails from '../TaskDetails';
-import { minProps } from './TaskDetails.fixtures';
+import {
+  fixtureFailedExecutionDetail,
+  fixtureWithDependencies,
+  fixtureWithOverviewMessages,
+  minProps,
+  taskDetailsWithExecutionTabDefaults,
+} from './TaskDetails.fixtures';
+import { VIEW_FOREMAN_TASKS } from '../TaskDetailsConstants';
+
+const mockUseForemanPermissions = jest.fn(
+  () => new Set(['view_foreman_tasks'])
+);
+
+jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
+  ...jest.requireActual('foremanReact/Root/Context/ForemanContext'),
+  useForemanPermissions: (...args) => mockUseForemanPermissions(...args),
+}));
 
 delete window.location;
 window.location = new URL(
   'https://foreman.com/foreman_tasks/tasks/a15dd820-32f1-4ced-9ab7-c0fab8234c47/'
 );
 
+const store = configureStore({ reducer: state => state || {} });
+
+function renderTaskDetails(props = {}) {
+  const history = createMemoryHistory();
+
+  return render(
+    <Router history={history}>
+      <Provider store={store}>
+        <TaskDetails {...minProps} {...props} />
+      </Provider>
+    </Router>
+  );
+}
+
 describe('TaskDetails', () => {
-  it('shows error message when status is ERROR', () => {
-    render(
-      <TaskDetails
-        {...minProps}
-        status="ERROR"
-        APIerror={{ message: 'some-error' }}
-      />
+  beforeEach(() => {
+    mockUseForemanPermissions.mockImplementation(
+      () => new Set(['view_foreman_tasks'])
     );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it(`shows ResourceLoadFailedEmptyState when ${VIEW_FOREMAN_TASKS} is absent`, () => {
+    mockUseForemanPermissions.mockImplementation(() => new Set());
+
+    renderTaskDetails();
+
+    expect(
+      screen.getByRole('heading', { name: /permission denied/i })
+    ).toBeInTheDocument();
+    expect(screen.getByText(VIEW_FOREMAN_TASKS)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /back to tasks/i })
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+  });
+
+  it('shows ResourceLoadFailedEmptyState when apiStatus is ERROR', () => {
+    renderTaskDetails({
+      apiStatus: 'ERROR',
+      apiErrorMessage: 'some-error',
+    });
+
+    expect(
+      screen.getByRole('heading', { name: /unable to load task/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Server returned: some-error')
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+  });
+
+  it('shows permission denied when apiErrorCode is 403', () => {
+    renderTaskDetails({
+      apiStatus: 'ERROR',
+      apiErrorCode: 403,
+      apiErrorMessage: 'Forbidden',
+    });
+
+    expect(
+      screen.getByRole('heading', { name: /permission denied/i })
+    ).toBeInTheDocument();
+    expect(screen.getByText('view_foreman_tasks')).toBeInTheDocument();
+    expect(
+      screen.getByText('Server returned: Forbidden')
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+  });
+
+  it('shows not found messaging when apiErrorCode is 404', () => {
+    renderTaskDetails({
+      apiStatus: 'ERROR',
+      apiErrorCode: 404,
+      apiErrorMessage: 'Task missing',
+    });
+
     expect(
-      screen.getByText(/could not receive data: some-error/i)
+      screen.getByRole('heading', { name: /unable to load task/i })
     ).toBeInTheDocument();
+    expect(
+      screen.getByText(/could not be found/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Server returned: Task missing')
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
   });
 
-  it('shows skeleton while loading on the Task tab', () => {
-    const { container } = render(<TaskDetails {...minProps} isLoading />);
+  it('shows skeleton in the overview while loading', () => {
+    const { container } = renderTaskDetails({ isLoading: true });
     expect(
       container.querySelector('.react-loading-skeleton')
     ).toBeInTheDocument();
   });
 
-  it('renders six tabs with expected labels', () => {
-    render(<TaskDetails {...minProps} />);
-    expect(document.getElementById('task-details-tabs')).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /^task$/i })).toBeInTheDocument();
+  it('renders four tabs with expected labels', () => {
+    renderTaskDetails();
     expect(
-      screen.getByRole('tab', { name: /running steps/i })
+      screen.getByRole('tab', { name: /execution details/i })
     ).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /errors/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /locks/i })).toBeInTheDocument();
     expect(
       screen.getByRole('tab', { name: /dependencies/i })
     ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /locks/i })).toBeInTheDocument();
     expect(screen.getByRole('tab', { name: /raw/i })).toBeInTheDocument();
   });
+
+  it('exposes stable ouiaIds on tabs for automation', () => {
+    renderTaskDetails();
+
+    expect(
+      document.querySelector(
+        '[data-ouia-component-id="task-details-tab-execution-details"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector(
+        '[data-ouia-component-id="task-details-tab-dependencies"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector(
+        '[data-ouia-component-id="task-details-tab-locks"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-ouia-component-id="task-details-tab-raw"]')
+    ).toBeInTheDocument();
+  });
+
+  it('shows failed step errors on the default execution details tab', () => {
+    renderTaskDetails({
+      ...fixtureFailedExecutionDetail,
+      executionPlan: fixtureFailedExecutionDetail.executionPlan,
+      failedSteps: fixtureFailedExecutionDetail.failedSteps,
+    });
+
+    expect(
+      screen.getByRole('tab', {
+        name: /action actions::katello::eventqueue::monitor is already active/i,
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText(/failed task errors/i)).toBeInTheDocument();
+  });
+
+  it('starts task reload on mount and stops on unmount', () => {
+    const taskReloadStart = jest.fn();
+    const taskReloadStop = jest.fn();
+
+    const { unmount } = renderTaskDetails({
+      ...taskDetailsWithExecutionTabDefaults,
+      taskReloadStart,
+      taskReloadStop,
+    });
+
+    expect(taskReloadStart).toHaveBeenCalledWith(
+      'a15dd820-32f1-4ced-9ab7-c0fab8234c47'
+    );
+    unmount();
+    expect(taskReloadStop).toHaveBeenCalled();
+  });
+
+  it('shows execution details panel on the default tab when loaded', () => {
+    renderTaskDetails({ ...taskDetailsWithExecutionTabDefaults });
+
+    expect(
+      screen.getByRole('heading', { name: /^no errors found$/i })
+    ).toBeInTheDocument();
+  });
+
+  it('disables tabs and hides execution panel while loading', () => {
+    renderTaskDetails({
+      ...taskDetailsWithExecutionTabDefaults,
+      isLoading: true,
+    });
+
+    expect(
+      screen.queryByRole('heading', { name: /^no errors found$/i })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', { name: /execution details/i })
+    ).toBeDisabled();
+    expect(screen.getByRole('tab', { name: /dependencies/i })).toBeDisabled();
+    expect(screen.getByRole('tab', { name: /locks/i })).toBeDisabled();
+    expect(screen.getByRole('tab', { name: /raw/i })).toBeDisabled();
+  });
+
+  it('renders troubleshooting help in overview after expanding details', async () => {
+    renderTaskDetails({ ...fixtureWithOverviewMessages });
+
+    await userEvent.click(
+      screen.getByRole('button', { name: /show more details/i })
+    );
+
+    expect(screen.getByText('Troubleshooting')).toBeInTheDocument();
+    expect(screen.getByText('See logs')).toBeInTheDocument();
+  });
+
+  it('renders raw output when the Raw tab is selected', async () => {
+    renderTaskDetails({ ...fixtureWithOverviewMessages });
+
+    await userEvent.click(screen.getByRole('tab', { name: /raw/i }));
+
+    expect(screen.getByText(/raw output/i)).toBeInTheDocument();
+    expect(screen.getByText(/partial output/i)).toBeInTheDocument();
+  });
+
+  it('renders dependency tables when the Dependencies tab is selected', async () => {
+    renderTaskDetails({ ...fixtureWithDependencies });
+
+    await userEvent.click(screen.getByRole('tab', { name: /dependencies/i }));
+
+    expect(
+      screen.getByRole('link', { name: 'Foo Bar Action' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', { name: 'Test Action' })
+    ).toBeInTheDocument();
+  });
 });

data/webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetailsSelectors.test.js

@@ -0,0 +1,81 @@
+import { STATUS } from 'foremanReact/constants';
+
+import { FOREMAN_TASK_DETAILS } from '../TaskDetailsConstants';
+import {
+  selectAPIError,
+  selectAPIErrorCode,
+  selectAPIErrorMessage,
+} from '../TaskDetailsSelectors';
+
+const axiosErrorWithApiBody = {
+  message: 'Request failed with status code 404',
+  response: {
+    status: 404,
+    data: {
+      error: {
+        message: 'Task not found',
+      },
+    },
+  },
+};
+
+const plainError = {
+  message: 'Network Error',
+};
+
+const forbiddenError = {
+  message: 'Request failed with status code 403',
+  response: {
+    status: 403,
+    data: {
+      error: {
+        message: 'Forbidden',
+      },
+    },
+  },
+};
+
+const buildState = (response, status = STATUS.ERROR) => ({
+  API: {
+    [FOREMAN_TASK_DETAILS]: {
+      payload: {},
+      response,
+      status,
+    },
+  },
+});
+
+describe('TaskDetailsSelectors - API error selectors', () => {
+  it('selectAPIError returns null when API status is not ERROR', () => {
+    expect(selectAPIError(buildState({}, STATUS.RESOLVED))).toBeNull();
+  });
+
+  it('selectAPIError returns the stored response when API status is ERROR', () => {
+    expect(selectAPIError(buildState(plainError))).toEqual(plainError);
+  });
+
+  it('selectAPIErrorMessage prefers the API error body message', () => {
+    expect(
+      selectAPIErrorMessage(buildState(axiosErrorWithApiBody))
+    ).toBe('Task not found');
+  });
+
+  it('selectAPIErrorMessage falls back to the top-level error message', () => {
+    expect(selectAPIErrorMessage(buildState(plainError))).toBe('Network Error');
+  });
+
+  it('selectAPIErrorMessage returns undefined when there is no API error', () => {
+    expect(
+      selectAPIErrorMessage(buildState({}, STATUS.RESOLVED))
+    ).toBeUndefined();
+  });
+
+  it('selectAPIErrorCode returns the HTTP status from the error response', () => {
+    expect(selectAPIErrorCode(buildState(axiosErrorWithApiBody))).toBe(404);
+    expect(selectAPIErrorCode(buildState(forbiddenError))).toBe(403);
+  });
+
+  it('selectAPIErrorCode returns undefined when the error response has no status', () => {
+    expect(selectAPIErrorCode(buildState(plainError))).toBeUndefined();
+  });
+});

data/webpack/ForemanTasks/Components/common/taskResultIcon.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  QuestionCircleIcon,
+} from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+/**
+ * Icon reflecting task state/result (aligned with TaskInfo / tasks table).
+ *
+ * @param {string} state Dynflow task state (e.g. stopped, running).
+ * @param {string} [result] Result when stopped (success, error, warning, …).
+ * @returns {React.ReactElement}
+ */
+export const taskResultIconEl = (state, result) => {
+  if (state && state !== 'stopped') {
+    return (
+      <Icon title={__('Running')}>
+        <QuestionCircleIcon />
+      </Icon>
+    );
+  }
+
+  switch (result) {
+    case 'success':
+      return (
+        <Icon status="success" title={__('Success')}>
+          <CheckCircleIcon />
+        </Icon>
+      );
+    case 'error':
+      return (
+        <Icon status="danger" title={__('Error')}>
+          <ExclamationCircleIcon />
+        </Icon>
+      );
+    case 'warning':
+      return (
+        <Icon status="warning" title={__('Warning')}>
+          <ExclamationTriangleIcon />
+        </Icon>
+      );
+    default:
+      return (
+        <Icon title={__('Unknown')}>
+          <QuestionCircleIcon />
+        </Icon>
+      );
+  }
+};

data/webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsHeader.js

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Flex,
+  FlexItem,
+  Split,
+  SplitItem,
+  Title,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { usePermissions } from 'foremanReact/common/hooks/Permissions/permissionHooks';
+import { TaskButtons } from '../../Components/TaskDetails/Components/TaskButtons';
+import { VIEW_FOREMAN_TASKS } from '../../Components/TaskDetails/TaskDetailsConstants';
+import {
+  ForceUnlockConfirmationModal,
+  UnlockConfirmationModal,
+} from '../../Components/common/ClickConfirmation';
+import { taskResultIconEl } from '../../Components/common/taskResultIcon';
+import './TaskDetailsHeader.scss';
+
+const TitleComponent = ({ action, state, result }) => (
+  <Flex
+    alignItems={{ default: 'alignItemsCenter' }}
+    spaceItems={{ default: 'spaceItemsXs' }}
+  >
+    <FlexItem>
+      <Title
+        headingLevel="h1"
+        className="foreman-tasks-task-details-header__title"
+        ouiaId="task-overview-title"
+      >
+        {action || __('Task Details')}
+      </Title>
+    </FlexItem>
+    <FlexItem>{taskResultIconEl(state, result)}</FlexItem>
+  </Flex>
+);
+
+TitleComponent.propTypes = {
+  action: PropTypes.string,
+  state: PropTypes.string,
+  result: PropTypes.string,
+};
+
+TitleComponent.defaultProps = {
+  action: '',
+  state: '',
+  result: '',
+};
+
+const TaskDetailsHeader = props => {
+  const {
+    taskReload,
+    id,
+    forceCancelTaskRequest,
+    unlockTaskRequest,
+    action,
+    taskReloadStart,
+    taskReloadStop,
+    executionPlan,
+    apiStatus,
+  } = props;
+  const hasViewPermission = usePermissions([VIEW_FOREMAN_TASKS]);
+  const showActions = hasViewPermission && apiStatus !== STATUS.ERROR;
+  const resumable = executionPlan ? executionPlan.state === 'paused' : false;
+  const cancellable = executionPlan ? executionPlan.cancellable : false;
+
+  const forceUnlock = () => {
+    if (!taskReload) {
+      taskReloadStart(id);
+    }
+
+    forceCancelTaskRequest(id, action);
+  };
+
+  const unlock = () => {
+    if (!taskReload) {
+      taskReloadStart(id);
+    }
+
+    unlockTaskRequest(id, action);
+  };
+
+  const taskProgressToggle = () => {
+    if (taskReload) {
+      taskReloadStop();
+    } else {
+      taskReloadStart(id);
+    }
+  };
+
+  const [unlockModalOpen, setUnlockModalOpen] = useState(false);
+  const [forceUnlockModalOpen, setForceUnlockModalOpen] = useState(false);
+
+  return (
+    <React.Fragment>
+      {showActions && (
+        <>
+          <UnlockConfirmationModal
+            onClick={unlock}
+            isOpen={unlockModalOpen}
+            setModalClosed={() => setUnlockModalOpen(false)}
+          />
+          <ForceUnlockConfirmationModal
+            onClick={forceUnlock}
+            isOpen={forceUnlockModalOpen}
+            setModalClosed={() => setForceUnlockModalOpen(false)}
+          />
+        </>
+      )}
+      <Split
+        className="foreman-tasks-task-details-header"
+        hasGutter
+        isWrappable
+        data-ouia-component-id="foreman-tasks-task-details-title-row"
+      >
+        <SplitItem isFilled>
+          <TitleComponent
+            action={props.action}
+            state={props.state}
+            result={props.result}
+          />
+        </SplitItem>
+        {showActions && (
+          <SplitItem>
+            <TaskButtons
+              {...props}
+              taskReloadStart={taskReloadStart}
+              taskProgressToggle={taskProgressToggle}
+              setUnlockModalOpen={setUnlockModalOpen}
+              setForceUnlockModalOpen={setForceUnlockModalOpen}
+              resumable={resumable}
+              cancellable={cancellable}
+            />
+          </SplitItem>
+        )}
+      </Split>
+    </React.Fragment>
+  );
+};
+
+TaskDetailsHeader.propTypes = {
+  taskReload: PropTypes.bool,
+  id: PropTypes.string,
+  forceCancelTaskRequest: PropTypes.func,
+  unlockTaskRequest: PropTypes.func,
+  action: PropTypes.string,
+  state: PropTypes.string,
+  result: PropTypes.string,
+  taskReloadStart: PropTypes.func,
+  taskReloadStop: PropTypes.func,
+  executionPlan: PropTypes.shape({
+    state: PropTypes.string,
+    cancellable: PropTypes.bool,
+  }),
+  apiStatus: PropTypes.oneOf(Object.keys(STATUS)),
+};
+
+TaskDetailsHeader.defaultProps = {
+  taskReload: false,
+  id: '',
+  forceCancelTaskRequest: () => null,
+  unlockTaskRequest: () => null,
+  action: '',
+  state: '',
+  result: '',
+  taskReloadStart: () => null,
+  taskReloadStop: () => null,
+  executionPlan: {},
+  apiStatus: STATUS.RESOLVED,
+};
+
+export default TaskDetailsHeader;

data/webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsHeader.scss

@@ -0,0 +1,5 @@
+.foreman-tasks-task-details-header {
+  .foreman-tasks-task-details-header__title {
+    margin: 0;
+  }
+}