foreman-tasks 13.0.0 → 13.1.0

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

@@ -1,4 +1,5 @@
 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';
@@ -7,7 +8,13 @@ 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(
@@ -45,6 +52,10 @@ describe('TaskDetails', () => {
     );
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it(`shows ResourceLoadFailedEmptyState when ${VIEW_FOREMAN_TASKS} is absent`, () => {
     mockUseForemanPermissions.mockImplementation(() => new Set());
 
@@ -111,25 +122,135 @@ describe('TaskDetails', () => {
     expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
   });
 
-  it('shows skeleton while loading on the Task tab', () => {
+  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', () => {
+  it('renders four tabs with expected labels', () => {
     renderTaskDetails();
-    expect(document.getElementById('task-details-tabs')).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /^task$/i })).toBeInTheDocument();
     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/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;
+  }
+}

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

@@ -1,48 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { Flex, FlexItem, TextContent, Text } from '@patternfly/react-core';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import { translate as __, sprintf } from 'foremanReact/common/I18n';
-import TaskDetails from '../../Components/TaskDetails';
-import {
-  selectAction,
-  selectResult,
-  selectState,
-} from '../../Components/TaskDetails/TaskDetailsSelectors';
-import { taskResultIconEl } from '../../Components/common/taskResultIcon';
+import TaskDetails from '../../Components/TaskDetails/TaskDetails';
+import TaskDetailsHeader from './TaskDetailsHeader';
 
 const TaskDetailsPage = props => {
-  const { id } = props.match.params;
-  const action = useSelector(selectAction);
-  const taskState = useSelector(selectState);
-  const taskResult = useSelector(selectResult);
+  const { match, action } = props;
+  const { id } = match.params;
   const headerText = action
     ? sprintf(__('Details of %s task'), action)
     : __('Task Details');
 
-  const header = (
-    <Flex
-      component="span"
-      data-ouia-component-id="foreman-tasks-task-details-title-row"
-      display={{ default: 'inlineFlex' }}
-      alignItems={{ default: 'alignItemsCenter' }}
-      gap={{ default: 'gapSm' }}
-    >
-      <TextContent>
-        <Text ouiaId="breadcrumb_title" component="h1">
-          {headerText}
-        </Text>
-      </TextContent>
-      <FlexItem component="span">
-        {taskResultIconEl(taskState, taskResult)}
-      </FlexItem>
-    </Flex>
-  );
-
   return (
     <PageLayout
-      customHeader={header}
+      customHeader={<TaskDetailsHeader {...props} />}
       header={headerText}
       searchable={false}
       breadcrumbOptions={{
@@ -69,6 +41,11 @@ TaskDetailsPage.propTypes = {
       id: PropTypes.string.isRequired,
     }).isRequired,
   }).isRequired,
+  action: PropTypes.string,
+};
+
+TaskDetailsPage.defaultProps = {
+  action: '',
 };
 
 export default TaskDetailsPage;

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { STATUS } from 'foremanReact/constants';
+
+import TaskDetailsHeader from '../TaskDetailsHeader';
+import { VIEW_FOREMAN_TASKS } from '../../../Components/TaskDetails/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),
+}));
+
+const baseHeaderProps = {
+  id: 'test-id',
+  action: 'Refresh hosts',
+  state: 'running',
+  result: 'pending',
+  taskReload: false,
+  taskReloadStart: jest.fn(),
+  taskReloadStop: jest.fn(),
+  forceCancelTaskRequest: jest.fn(),
+  unlockTaskRequest: jest.fn(),
+  cancelTaskRequest: jest.fn(),
+  resumeTaskRequest: jest.fn(),
+  canEdit: true,
+  dynflowEnableConsole: true,
+  externalId: 'ext-99',
+  executionPlan: {},
+  apiStatus: STATUS.RESOLVED,
+};
+
+const expectHeaderActionsVisible = () => {
+  expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  expect(
+    screen.getByRole('link', { name: /dynflow console/i })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole('button', { name: /^task actions$/i })
+  ).toBeInTheDocument();
+};
+
+const expectHeaderActionsHidden = () => {
+  expect(
+    screen.queryByRole('button', { name: /cancel/i })
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole('link', { name: /dynflow console/i })
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole('button', { name: /^task actions$/i })
+  ).not.toBeInTheDocument();
+};
+
+describe('TaskDetailsHeader', () => {
+  beforeEach(() => {
+    mockUseForemanPermissions.mockImplementation(
+      () => new Set(['view_foreman_tasks'])
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders action heading and exposes cancel, dynflow link, and task actions toggle', () => {
+    render(<TaskDetailsHeader {...baseHeaderProps} />);
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Refresh hosts' })
+    ).toBeInTheDocument();
+    expectHeaderActionsVisible();
+  });
+
+  it('shows running status icon next to the title when task state is running', () => {
+    render(
+      <TaskDetailsHeader
+        {...baseHeaderProps}
+        action="Running job"
+        state="running"
+        result="pending"
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Running job' })
+    ).toBeInTheDocument();
+    expect(screen.getByTitle('Running')).toBeInTheDocument();
+  });
+
+  it('shows error status icon next to the title when task stopped with error', () => {
+    render(
+      <TaskDetailsHeader
+        {...baseHeaderProps}
+        action="Failed job"
+        state="stopped"
+        result="error"
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Failed job' })
+    ).toBeInTheDocument();
+    expect(screen.getByTitle('Error')).toBeInTheDocument();
+  });
+
+  it('uses generic title when action is unset', () => {
+    render(<TaskDetailsHeader {...baseHeaderProps} action="" />);
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Task Details' })
+    ).toBeInTheDocument();
+  });
+
+  it.each([
+    [
+      `${VIEW_FOREMAN_TASKS} is absent`,
+      () => {
+        mockUseForemanPermissions.mockImplementation(() => new Set());
+      },
+      {},
+    ],
+    [
+      'apiStatus is ERROR',
+      () => {},
+      { apiStatus: STATUS.ERROR },
+    ],
+  ])('hides task actions when %s', (_label, setupPermissions, propOverrides) => {
+    setupPermissions();
+
+    render(<TaskDetailsHeader {...baseHeaderProps} {...propOverrides} />);
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Refresh hosts' })
+    ).toBeInTheDocument();
+    expectHeaderActionsHidden();
+  });
+});