foreman-tasks 12.2.4 → 13.1.0

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import TaskDetails from '../../Components/TaskDetails/TaskDetails';
+import TaskDetailsHeader from './TaskDetailsHeader';
+
+const TaskDetailsPage = props => {
+  const { match, action } = props;
+  const { id } = match.params;
+  const headerText = action
+    ? sprintf(__('Details of %s task'), action)
+    : __('Task Details');
+
+  return (
+    <PageLayout
+      customHeader={<TaskDetailsHeader {...props} />}
+      header={headerText}
+      searchable={false}
+      breadcrumbOptions={{
+        breadcrumbItems: [
+          { caption: __('Tasks'), url: '/foreman_tasks/tasks' },
+          { caption: action || id },
+        ],
+        isSwitchable: true,
+        resource: {
+          nameField: 'action',
+          resourceUrl: '/foreman_tasks/api/tasks',
+          switcherItemUrl: '/foreman_tasks/tasks/:id',
+        },
+      }}
+    >
+      <TaskDetails {...props} />
+    </PageLayout>
+  );
+};
+
+TaskDetailsPage.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      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();
+  });
+});

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

@@ -0,0 +1,277 @@
+import React from 'react';
+import { screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+
+import { rtlHelpers } from 'foremanReact/common/testHelpers';
+import { STATUS } from 'foremanReact/constants';
+
+import {
+  FOREMAN_TASK_DETAILS,
+  VIEW_FOREMAN_TASKS,
+} from '../../../Components/TaskDetails/TaskDetailsConstants';
+import TaskDetailsPage from '../index';
+
+const { renderWithStore } = rtlHelpers;
+
+jest.mock('../../../Components/TaskDetails/TaskDetailsActions', () => {
+  const actual = jest.requireActual(
+    '../../../Components/TaskDetails/TaskDetailsActions'
+  );
+
+  return {
+    ...actual,
+    taskReloadStart: jest.fn(() => () => undefined),
+    taskReloadStop: jest.fn(() => () => undefined),
+  };
+});
+
+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 routerPropsBase = {
+  history: { push: jest.fn(), replace: jest.fn(), go: jest.fn() },
+  location: {
+    pathname: '/foreman_tasks/tasks/task-route-id',
+    search: '',
+    hash: '',
+    state: undefined,
+  },
+};
+
+const matchDefault = {
+  params: { id: 'task-route-id' },
+  path: '/foreman_tasks/tasks/:id',
+  url: '/foreman_tasks/tasks/task-route-id',
+  isExact: true,
+};
+
+const baseTaskPayload = {
+  action: '',
+  input: [],
+  output: {},
+  locks: [],
+  links: [],
+  depends_on: [],
+  blocks: [],
+  failed_steps: [],
+  running_steps: [],
+  execution_plan: {},
+  state: 'running',
+  result: '',
+};
+
+const createStoreForTaskPayload = (overrides, apiStatus = STATUS.RESOLVED) => ({
+  API: {
+    [FOREMAN_TASK_DETAILS]: {
+      response: { ...baseTaskPayload, ...overrides },
+      status: apiStatus,
+      payload: {},
+    },
+  },
+});
+
+const expectHeaderActionsHidden = () => {
+  expect(
+    screen.queryByRole('button', { name: /cancel/i })
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole('button', { name: /^task actions$/i })
+  ).not.toBeInTheDocument();
+};
+
+const getHeaderTitleArea = title =>
+  screen.getByRole('heading', { level: 1, name: title }).parentElement
+    .parentElement;
+
+const renderPage = (
+  apiPayloadOverrides = {},
+  propsOverrides = {},
+  apiStatus = STATUS.RESOLVED
+) => {
+  const history = createMemoryHistory({
+    initialEntries: [`/foreman_tasks/tasks/${matchDefault.params.id}`],
+  });
+
+  window.history.pushState(
+    {},
+    '',
+    `/foreman_tasks/tasks/${matchDefault.params.id}`
+  );
+
+  return renderWithStore(
+    <IntlProvider locale="en">
+      <Router history={history}>
+        <TaskDetailsPage
+          {...routerPropsBase}
+          history={history}
+          match={matchDefault}
+          {...propsOverrides}
+        />
+      </Router>
+    </IntlProvider>,
+    createStoreForTaskPayload(apiPayloadOverrides, apiStatus)
+  );
+};
+
+describe('TaskDetailsPage', () => {
+  beforeEach(() => {
+    mockUseForemanPermissions.mockImplementation(
+      () => new Set(['view_foreman_tasks'])
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('permissions', () => {
+    it(`renders the task details chrome when ${VIEW_FOREMAN_TASKS} is present`, () => {
+      mockUseForemanPermissions.mockImplementation(
+        () => new Set(['edit_foreman_tasks', VIEW_FOREMAN_TASKS])
+      );
+
+      renderPage({ action: 'Run job' });
+
+      expect(
+        screen.getByRole('navigation', { name: 'Breadcrumb' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('heading', {
+          level: 1,
+          name: 'Run job',
+        })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('heading', { name: /Permission denied/i })
+      ).not.toBeInTheDocument();
+    });
+
+    it(`shows ResourceLoadFailedEmptyState and lists ${VIEW_FOREMAN_TASKS} when it is absent`, () => {
+      mockUseForemanPermissions.mockImplementation(() => new Set());
+
+      renderPage({ action: 'Hidden task' });
+
+      expect(
+        screen.getByRole('heading', { name: /Permission denied/i })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /You do not have permission to view the task with id task-route-id/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText(VIEW_FOREMAN_TASKS)).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /Back to tasks/i })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('navigation', { name: 'Breadcrumb' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('tab', { name: /^task$/i })
+      ).not.toBeInTheDocument();
+      expectHeaderActionsHidden();
+    });
+
+    it('denies access when user only has edit_foreman_tasks without view', () => {
+      mockUseForemanPermissions.mockImplementation(
+        () => new Set(['edit_foreman_tasks'])
+      );
+
+      renderPage({});
+
+      expect(
+        screen.getByRole('heading', { name: /Permission denied/i })
+      ).toBeInTheDocument();
+      expect(screen.getByText(VIEW_FOREMAN_TASKS)).toBeInTheDocument();
+      expect(
+        screen.getByRole('navigation', { name: 'Breadcrumb' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('tab', { name: /^task$/i })
+      ).not.toBeInTheDocument();
+      expectHeaderActionsHidden();
+    });
+
+    it('hides header actions when the task API returns an error', () => {
+      renderPage({ action: 'Failed load' }, {}, STATUS.ERROR);
+
+      expect(
+        screen.getByRole('heading', { name: /unable to load task/i })
+      ).toBeInTheDocument();
+      expectHeaderActionsHidden();
+    });
+  });
+
+  it('shows running status icon when action is unset', () => {
+    renderPage({});
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Task Details' })
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toHaveTextContent(
+      'Tasks'
+    );
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        /task-route-id/
+      )
+    ).toBeInTheDocument();
+
+    const titleArea = getHeaderTitleArea('Task Details');
+
+    expect(within(titleArea).getByTitle('Running')).toBeInTheDocument();
+    expect(within(titleArea).queryByTitle('Error')).not.toBeInTheDocument();
+  });
+
+  it('uses task action for title and breadcrumb when loaded', () => {
+    renderPage({ action: 'Refresh hosts' });
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Refresh hosts' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /cancel/i })
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole('link', { name: /^Tasks$/ })).toHaveAttribute(
+      'href',
+      '/foreman_tasks/tasks'
+    );
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        'Refresh hosts'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('shows error status icon when task is stopped with error result', () => {
+    renderPage({
+      action: 'Some action',
+      state: 'stopped',
+      result: 'error',
+    });
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Some action' })
+    ).toBeInTheDocument();
+    expect(
+      within(getHeaderTitleArea('Some action')).getByTitle('Error')
+    ).toBeInTheDocument();
+
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        'Some action'
+      )
+    ).toBeInTheDocument();
+  });
+});

data/webpack/ForemanTasks/{Components/TaskDetails → Routes/ShowTaskDetails}/index.js

@@ -1,8 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import TaskDetails from './TaskDetails';
-import * as taskDetailsActions from './TaskDetailsActions';
-import * as taskActions from '../TaskActions';
+import * as taskDetailsActions from '../../Components/TaskDetails/TaskDetailsActions';
+import * as taskActions from '../../Components/TaskActions';
 import {
   selectEndedAt,
   selectStartAt,
@@ -15,7 +14,6 @@ import {
   selectResumable,
   selectCancellable,
   selectHelp,
-  selectErrors,
   selectProgress,
   selectUsername,
   selectLabel,
@@ -33,14 +31,17 @@ import {
   selectExternalId,
   selectDynflowEnableConsole,
   selectCanEdit,
-  selectStatus,
-  selectAPIError,
+  selectAPIStatus,
+  selectAPIErrorMessage,
+  selectAPIErrorCode,
   selectIsLoading,
   selectDependsOn,
   selectBlocks,
-} from './TaskDetailsSelectors';
+} from '../../Components/TaskDetails/TaskDetailsSelectors';
+import TaskDetailsPage from './TaskDetailsPage';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state, ownProps) => ({
+  id: ownProps.match.params.id,
   startAt: selectStartAt(state),
   startBefore: selectStartBefore(state),
   startedAt: selectStartedAt(state),
@@ -49,7 +50,6 @@ const mapStateToProps = state => ({
   output: selectOutput(state),
   resumable: selectResumable(state),
   cancellable: selectCancellable(state),
-  errors: selectErrors(state),
   progress: selectProgress(state),
   username: selectUsername(state),
   label: selectLabel(state),
@@ -70,8 +70,9 @@ const mapStateToProps = state => ({
   externalId: selectExternalId(state),
   dynflowEnableConsole: selectDynflowEnableConsole(state),
   canEdit: selectCanEdit(state),
-  status: selectStatus(state),
-  APIerror: selectAPIError(state),
+  apiStatus: selectAPIStatus(state),
+  apiErrorMessage: selectAPIErrorMessage(state),
+  apiErrorCode: selectAPIErrorCode(state),
   isLoading: selectIsLoading(state),
   dependsOn: selectDependsOn(state),
   blocks: selectBlocks(state),
@@ -80,4 +81,4 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch =>
   bindActionCreators({ ...taskActions, ...taskDetailsActions }, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(TaskDetails);
+export default connect(mapStateToProps, mapDispatchToProps)(TaskDetailsPage);

data/webpack/Routes/routes.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import TasksTableIndexPage from '../ForemanTasks/Components/TasksTable/TasksIndexPage';
+import TaskDetailsPage from '../ForemanTasks/Routes/ShowTaskDetails';
 
 const ForemanTasksRoutes = [
   {
@@ -7,6 +8,11 @@ const ForemanTasksRoutes = [
     exact: true,
     render: props => <TasksTableIndexPage {...props} />,
   },
+  {
+    path: '/foreman_tasks/tasks/:id',
+    exact: true,
+    render: props => <TaskDetailsPage {...props} />,
+  },
   {
     path: '/foreman_tasks/tasks/:id/sub_tasks',
     exact: true,

data/webpack/Routes/routes.test.js

@@ -12,6 +12,14 @@ jest.mock(
     }
 );
 
+jest.mock(
+  '../ForemanTasks/Routes/ShowTaskDetails',
+  () =>
+    function TaskDetailsPageStub() {
+      return <div data-testid="task-details-page-stub" />;
+    }
+);
+
 const routerProps = {
   history: { push: jest.fn(), replace: jest.fn(), go: jest.fn() },
   location: {
@@ -34,6 +42,7 @@ describe('ForemanTasks routes', () => {
       ForemanTasksRoutes.map(({ path, exact }) => ({ path, exact }))
     ).toEqual([
       { path: '/foreman_tasks/tasks', exact: true },
+      { path: '/foreman_tasks/tasks/:id', exact: true },
       { path: '/foreman_tasks/tasks/:id/sub_tasks', exact: true },
     ]);
   });
@@ -53,9 +62,9 @@ describe('ForemanTasks routes', () => {
         ...routerProps,
         match: {
           ...routerProps.match,
-          params: { id: '7' },
-          path: '/foreman_tasks/tasks/:id/sub_tasks',
-          url: '/foreman_tasks/tasks/7/sub_tasks',
+          params: { id: '99' },
+          path: '/foreman_tasks/tasks/:id',
+          url: '/foreman_tasks/tasks/99',
         },
       },
     ];
@@ -63,8 +72,10 @@ describe('ForemanTasks routes', () => {
     ForemanTasksRoutes.forEach((route, index) => {
       const { unmount } = render(route.render(propsByIndex[index]));
 
-      if (index === 2) {
-        expect(screen.getByTestId('show-task-stub')).toBeInTheDocument();
+      if (index === 1) {
+        expect(
+          screen.getByTestId('task-details-page-stub')
+        ).toBeInTheDocument();
       } else {
         expect(
           screen.getByTestId('tasks-table-index-stub')

data/webpack/index.js

@@ -3,13 +3,8 @@
 /* eslint-disable import/extensions */
 import componentRegistry from 'foremanReact/components/componentRegistry';
 import TasksDashboard from './ForemanTasks/Components/TasksDashboard';
-import TaskDetails from './ForemanTasks/Components/TaskDetails';
 
 componentRegistry.register({
   name: 'TasksDashboard',
   type: TasksDashboard,
 });
-componentRegistry.register({
-  name: 'TaskDetails',
-  type: TaskDetails,
-});