foreman-tasks 13.0.0 → 13.1.0

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

@@ -1,18 +1,32 @@
 import React from 'react';
-import { render, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
 
-import breadcrumbBarReducer from 'foremanReact/components/BreadcrumbBar/BreadcrumbBarReducer';
+import { rtlHelpers } from 'foremanReact/common/testHelpers';
 import { STATUS } from 'foremanReact/constants';
-import intervalsReducer from 'foremanReact/redux/middlewares/IntervalMiddleware/IntervalReducer';
 
-import { FOREMAN_TASK_DETAILS, VIEW_FOREMAN_TASKS } from '../../../Components/TaskDetails/TaskDetailsConstants';
-import TaskDetailsPage from '../TaskDetailsPage';
+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'])
@@ -23,8 +37,6 @@ jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
   useForemanPermissions: (...args) => mockUseForemanPermissions(...args),
 }));
 
-const TASK_DETAILS_TITLE_ROW_OUIA_ID = 'foreman-tasks-task-details-title-row';
-
 const routerPropsBase = {
   history: { push: jest.fn(), replace: jest.fn(), go: jest.fn() },
   location: {
@@ -57,36 +69,37 @@ const baseTaskPayload = {
   result: '',
 };
 
-const createStoreForTaskPayload = overrides => ({
+const createStoreForTaskPayload = (overrides, apiStatus = STATUS.RESOLVED) => ({
   API: {
     [FOREMAN_TASK_DETAILS]: {
       response: { ...baseTaskPayload, ...overrides },
-      status: STATUS.RESOLVED,
+      status: apiStatus,
       payload: {},
     },
   },
 });
 
-const rootReducer = combineReducers({
-  API: (state = {}, action) => state,
-  intervals: intervalsReducer,
-  breadcrumbBar: breadcrumbBarReducer,
-  foremanTasks: (state = {}, action) => state,
-});
+const expectHeaderActionsHidden = () => {
+  expect(
+    screen.queryByRole('button', { name: /cancel/i })
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole('button', { name: /^task actions$/i })
+  ).not.toBeInTheDocument();
+};
 
-const renderPage = (apiPayloadOverrides = {}, propsOverrides = {}) => {
+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}`],
   });
-  const store = configureStore({
-    reducer: rootReducer,
-    preloadedState: createStoreForTaskPayload(apiPayloadOverrides),
-    middleware: getDefaultMiddleware =>
-      getDefaultMiddleware({
-        immutableCheck: false,
-        serializableCheck: false,
-      }),
-  });
 
   window.history.pushState(
     {},
@@ -94,43 +107,30 @@ const renderPage = (apiPayloadOverrides = {}, propsOverrides = {}) => {
     `/foreman_tasks/tasks/${matchDefault.params.id}`
   );
 
-  return render(
-    <Router history={history}>
-      <Provider store={store}>
-        <IntlProvider locale="en">
-          <TaskDetailsPage
-            {...routerPropsBase}
-            history={history}
-            match={matchDefault}
-            {...propsOverrides}
-          />
-        </IntlProvider>
-      </Provider>
-    </Router>
+  return renderWithStore(
+    <IntlProvider locale="en">
+      <Router history={history}>
+        <TaskDetailsPage
+          {...routerPropsBase}
+          history={history}
+          match={matchDefault}
+          {...propsOverrides}
+        />
+      </Router>
+    </IntlProvider>,
+    createStoreForTaskPayload(apiPayloadOverrides, apiStatus)
   );
 };
 
-const breadcrumbTitleHeadings = () =>
-  screen.getAllByRole('heading', { level: 1 }).filter(
-    heading => heading.getAttribute('data-ouia-component-id') === 'breadcrumb_title'
-  );
-
-/**
- * Title row (`customHeader` root `Flex`): same OUIA pattern as `Locks.test.js`.
- */
-const taskDetailsTitleRegion = container => {
-  const el = container.querySelector(
-    `[data-ouia-component-id="${TASK_DETAILS_TITLE_ROW_OUIA_ID}"]`
-  );
-
-  expect(el).toBeTruthy();
-
-  return el;
-};
-
 describe('TaskDetailsPage', () => {
   beforeEach(() => {
-    mockUseForemanPermissions.mockImplementation(() => new Set(['view_foreman_tasks']));
+    mockUseForemanPermissions.mockImplementation(
+      () => new Set(['view_foreman_tasks'])
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
   describe('permissions', () => {
@@ -147,11 +147,12 @@ describe('TaskDetailsPage', () => {
       expect(
         screen.getByRole('heading', {
           level: 1,
-          name: /Details of Run job task/,
+          name: 'Run job',
         })
       ).toBeInTheDocument();
-      expect(screen.queryByRole('heading', { name: /Permission denied/i })).not.toBeInTheDocument();
-      expect(mockUseForemanPermissions).toHaveBeenCalled();
+      expect(
+        screen.queryByRole('heading', { name: /Permission denied/i })
+      ).not.toBeInTheDocument();
     });
 
     it(`shows ResourceLoadFailedEmptyState and lists ${VIEW_FOREMAN_TASKS} when it is absent`, () => {
@@ -174,7 +175,10 @@ describe('TaskDetailsPage', () => {
       expect(
         screen.getByRole('navigation', { name: 'Breadcrumb' })
       ).toBeInTheDocument();
-      expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('tab', { name: /^task$/i })
+      ).not.toBeInTheDocument();
+      expectHeaderActionsHidden();
     });
 
     it('denies access when user only has edit_foreman_tasks without view', () => {
@@ -191,24 +195,28 @@ describe('TaskDetailsPage', () => {
       expect(
         screen.getByRole('navigation', { name: 'Breadcrumb' })
       ).toBeInTheDocument();
-      expect(screen.queryByRole('tab', { name: /^task$/i })).not.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);
 
-  const expectToolbarHeadingText = substring => {
-    const headings = breadcrumbTitleHeadings();
-
-    expect(headings.length).toBeGreaterThan(0);
-
-    headings.forEach(heading => {
-      expect(heading).toHaveTextContent(substring);
+      expect(
+        screen.getByRole('heading', { name: /unable to load task/i })
+      ).toBeInTheDocument();
+      expectHeaderActionsHidden();
     });
-  };
+  });
 
-  it('shows generic title and breadcrumb from route id when action is unset', () => {
-    const page = renderPage({});
-    expectToolbarHeadingText('Task Details');
+  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'
@@ -219,18 +227,21 @@ describe('TaskDetailsPage', () => {
       )
     ).toBeInTheDocument();
 
-    const titleRegion = taskDetailsTitleRegion(page.container);
+    const titleArea = getHeaderTitleArea('Task Details');
 
-    expect(
-      within(titleRegion).getAllByRole('img', { hidden: true }).length
-    ).toBeGreaterThan(0);
-    expect(titleRegion.querySelector('[class*="danger"]')).toBeNull();
+    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' });
 
-    expectToolbarHeadingText('Details of Refresh hosts task');
+    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',
@@ -243,18 +254,19 @@ describe('TaskDetailsPage', () => {
     ).toBeInTheDocument();
   });
 
-  it('shows error status styling in the heading when task is stopped with error result', () => {
-    const page = renderPage({
+  it('shows error status icon when task is stopped with error result', () => {
+    renderPage({
       action: 'Some action',
       state: 'stopped',
       result: 'error',
     });
 
-    expectToolbarHeadingText('Details of Some action task');
-
     expect(
-      taskDetailsTitleRegion(page.container).querySelector('[class*="danger"]')
-    ).toBeTruthy();
+      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(

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,
@@ -39,9 +37,11 @@ import {
   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),
@@ -50,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),
@@ -82,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,6 +1,6 @@
 import React from 'react';
 import TasksTableIndexPage from '../ForemanTasks/Components/TasksTable/TasksIndexPage';
-import TaskDetailsPage from '../ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage';
+import TaskDetailsPage from '../ForemanTasks/Routes/ShowTaskDetails';
 
 const ForemanTasksRoutes = [
   {

data/webpack/Routes/routes.test.js

@@ -13,7 +13,7 @@ jest.mock(
 );
 
 jest.mock(
-  '../ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage',
+  '../ForemanTasks/Routes/ShowTaskDetails',
   () =>
     function TaskDetailsPageStub() {
       return <div data-testid="task-details-page-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,
-});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman-tasks
 version: !ruby/object:Gem::Version
-  version: 13.0.0
+  version: 13.1.0
 platform: ruby
 authors:
 - Ivan Nečas
@@ -378,6 +378,7 @@ files:
 - webpack/ForemanTasks/Components/TaskDetails/Components/RunningSteps.js
 - webpack/ForemanTasks/Components/TaskDetails/Components/Task.js
 - webpack/ForemanTasks/Components/TaskDetails/Components/TaskButtons.js
+- webpack/ForemanTasks/Components/TaskDetails/Components/TaskButtons.scss
 - webpack/ForemanTasks/Components/TaskDetails/Components/TaskHelper.js
 - webpack/ForemanTasks/Components/TaskDetails/Components/TaskInfo.js
 - webpack/ForemanTasks/Components/TaskDetails/Components/TaskSkeleton.js
@@ -390,17 +391,18 @@ files:
 - webpack/ForemanTasks/Components/TaskDetails/Components/__tests__/TaskButtons.test.js
 - webpack/ForemanTasks/Components/TaskDetails/Components/__tests__/TaskHelper.test.js
 - webpack/ForemanTasks/Components/TaskDetails/Components/__tests__/TaskInfo.test.js
+- webpack/ForemanTasks/Components/TaskDetails/ExecutionDetails.js
 - webpack/ForemanTasks/Components/TaskDetails/TaskDetails.js
 - webpack/ForemanTasks/Components/TaskDetails/TaskDetails.scss
 - webpack/ForemanTasks/Components/TaskDetails/TaskDetailsActions.js
 - webpack/ForemanTasks/Components/TaskDetails/TaskDetailsConstants.js
 - webpack/ForemanTasks/Components/TaskDetails/TaskDetailsSelectors.js
 - webpack/ForemanTasks/Components/TaskDetails/TasksDetailsHelper.js
+- webpack/ForemanTasks/Components/TaskDetails/__tests__/ExecutionDetails.test.js
 - webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.fixtures.js
 - webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.test.js
 - webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetailsActions.test.js
 - webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetailsSelectors.test.js
-- webpack/ForemanTasks/Components/TaskDetails/index.js
 - webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.js
 - webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.test.js
 - webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/RunningTasksCard/RunningTasksCard.js
@@ -477,8 +479,12 @@ files:
 - webpack/ForemanTasks/Components/common/urlHelpers.js
 - webpack/ForemanTasks/ForemanTasksReducers.js
 - webpack/ForemanTasks/ForemanTasksSelectors.js
+- webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsHeader.js
+- webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsHeader.scss
 - webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage.js
+- webpack/ForemanTasks/Routes/ShowTaskDetails/__tests__/TaskDetailsHeader.test.js
 - webpack/ForemanTasks/Routes/ShowTaskDetails/__tests__/TaskDetailsPage.test.js
+- webpack/ForemanTasks/Routes/ShowTaskDetails/index.js
 - webpack/Routes/routes.js
 - webpack/Routes/routes.test.js
 - webpack/global_index.js