foreman-tasks 12.2.3 → 13.0.0

data/webpack/ForemanTasks/Components/TasksDashboard/__tests__/TasksDashboardReducer.test.js

@@ -1,5 +1,3 @@
-import { testReducerSnapshotWithFixtures } from '@theforeman/test';
-
 import {
   FOREMAN_TASKS_DASHBOARD_INIT,
   FOREMAN_TASKS_DASHBOARD_UPDATE_TIME,
@@ -7,52 +5,120 @@ import {
   FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_REQUEST,
   FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_SUCCESS,
   FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_FAILURE,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+  TASKS_SUMMARY_ZERO,
 } from '../TasksDashboardConstants';
 import reducer from '../TasksDashboardReducer';
 
-const fixtures = {
-  'should return the initial state': {},
-  'should handle FOREMAN_TASKS_DASHBOARD_INIT': {
-    action: {
-      type: FOREMAN_TASKS_DASHBOARD_INIT,
-    },
-  },
-  'should handle FOREMAN_TASKS_DASHBOARD_INIT with data': {
-    action: {
-      type: FOREMAN_TASKS_DASHBOARD_INIT,
-      payload: { time: 'some-time', query: 'some-query' },
-    },
-  },
-  'should handle FOREMAN_TASKS_DASHBOARD_UPDATE_TIME': {
-    action: {
-      type: FOREMAN_TASKS_DASHBOARD_UPDATE_TIME,
-      payload: 'some-time',
-    },
-  },
-  'should handle FOREMAN_TASKS_DASHBOARD_UPDATE_QUERY': {
-    action: {
-      type: FOREMAN_TASKS_DASHBOARD_UPDATE_QUERY,
-      payload: 'some-query',
-    },
-  },
-  'should handle FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_REQUEST': {
-    action: {
-      type: FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_REQUEST,
-    },
-  },
-  'should handle FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_SUCCESS': {
-    action: {
-      type: FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_SUCCESS,
-      payload: 'some-payload',
-    },
-  },
-  'should handle FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_FAILURE': {
-    action: {
-      type: FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_FAILURE,
-      payload: new Error('some error'),
-    },
-  },
+const dashboardQuery = {
+  state: TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.RUNNING,
+};
+
+const initialState = {
+  time: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+  isLoadingTasksSummary: false,
+  error: null,
+  tasksSummary: TASKS_SUMMARY_ZERO,
 };
 
-describe('BreadcrumbBar reducer', () =>
-  testReducerSnapshotWithFixtures(reducer, fixtures));
+const runReducer = (state, action) =>
+  reducer(state, action).asMutable({ deep: true });
+
+describe('TasksDashboard reducer', () => {
+  it('should return the initial state', () => {
+    expect(runReducer(undefined, {})).toEqual(initialState);
+  });
+
+  it('should handle FOREMAN_TASKS_DASHBOARD_INIT', () => {
+    expect(
+      runReducer(undefined, {
+        type: FOREMAN_TASKS_DASHBOARD_INIT,
+      })
+    ).toEqual({
+      ...initialState,
+      query: undefined,
+    });
+  });
+
+  it('should handle FOREMAN_TASKS_DASHBOARD_INIT with data', () => {
+    expect(
+      runReducer(undefined, {
+        type: FOREMAN_TASKS_DASHBOARD_INIT,
+        payload: {
+          time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+          query: dashboardQuery,
+        },
+      })
+    ).toEqual({
+      ...initialState,
+      time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+      query: dashboardQuery,
+    });
+  });
+
+  it('should handle FOREMAN_TASKS_DASHBOARD_UPDATE_TIME', () => {
+    expect(
+      runReducer(undefined, {
+        type: FOREMAN_TASKS_DASHBOARD_UPDATE_TIME,
+        payload: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+      })
+    ).toEqual({
+      ...initialState,
+      time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    });
+  });
+
+  it('should handle FOREMAN_TASKS_DASHBOARD_UPDATE_QUERY', () => {
+    expect(
+      runReducer(undefined, {
+        type: FOREMAN_TASKS_DASHBOARD_UPDATE_QUERY,
+        payload: dashboardQuery,
+      })
+    ).toEqual({
+      ...initialState,
+      query: dashboardQuery,
+    });
+  });
+
+  it('should handle FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_REQUEST', () => {
+    expect(
+      runReducer(undefined, {
+        type: FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_REQUEST,
+      })
+    ).toEqual({
+      ...initialState,
+      isLoading: true,
+    });
+  });
+
+  it('should handle FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_SUCCESS', () => {
+    expect(
+      runReducer(undefined, {
+        type: FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_SUCCESS,
+        payload: 'some-payload',
+      })
+    ).toEqual({
+      ...initialState,
+      tasksSummary: 'some-payload',
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  it('should handle FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_FAILURE', () => {
+    const error = new Error('some error');
+
+    expect(
+      runReducer(undefined, {
+        type: FOREMAN_TASKS_DASHBOARD_FETCH_TASKS_SUMMARY_FAILURE,
+        payload: error,
+      })
+    ).toEqual({
+      ...initialState,
+      tasksSummary: TASKS_SUMMARY_ZERO,
+      isLoading: false,
+      error,
+    });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/__tests__/TasksDashboardSelectors.test.js

@@ -1,4 +1,3 @@
-import { testSelectorsSnapshotWithFixtures } from '@theforeman/test';
 import {
   selectTasksDashboard,
   selectTime,
@@ -6,6 +5,7 @@ import {
   selectTasksSummary,
   calcStoppedOther,
 } from '../TasksDashboardSelectors';
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../TasksDashboardConstants';
 
 const stoppedResult = {
   error: {
@@ -55,19 +55,107 @@ const state = {
   },
 };
 
-const fixtures = {
-  'should select tasks-dashboard': () => selectTasksDashboard(state),
-  'should select tasks-dashboard when state is empty': () =>
-    selectTasksDashboard({}),
-  'should select time': () => selectTime(state),
-  'should select time when state is empty': () => selectTime({}),
-  'should select query': () => selectQuery(state),
-  'should select query when state is empty': () => selectQuery({}),
-  'should select tasks-summary': () => selectTasksSummary(state),
-  'should select tasks-summary when state is empty': () =>
-    selectTasksSummary({}),
-  'should calcStoppedOther': () => calcStoppedOther(stoppedResult),
+const emptyTasksSummary = {
+  paused: {
+    last: 0,
+    older: 0,
+  },
+  running: {
+    last: 0,
+    older: 0,
+  },
+  scheduled: 0,
+  stopped: {
+    other: 0,
+    results: {
+      error: {
+        last: 0,
+        total: 0,
+      },
+      success: {
+        last: 0,
+        total: 0,
+      },
+      warning: {
+        last: 0,
+        total: 0,
+      },
+    },
+  },
 };
 
-describe('TasksDashboard - Selectors', () =>
-  testSelectorsSnapshotWithFixtures(fixtures));
+describe('TasksDashboard - Selectors', () => {
+  it('should select tasks-dashboard', () => {
+    expect(selectTasksDashboard(state)).toEqual(
+      state.foremanTasks.tasksDashboard
+    );
+  });
+
+  it('should select tasks-dashboard when state is empty', () => {
+    expect(selectTasksDashboard({})).toEqual({});
+  });
+
+  it('should select time', () => {
+    expect(selectTime(state)).toBe('some-time');
+  });
+
+  it('should select time when state is empty', () => {
+    expect(selectTime({})).toBe(TASKS_DASHBOARD_AVAILABLE_TIMES.H24);
+  });
+
+  it('should select query', () => {
+    const query = { state: 'running' };
+    const stateWithQuery = {
+      ...state,
+      foremanTasks: {
+        ...state.foremanTasks,
+        tasksDashboard: { ...state.foremanTasks.tasksDashboard, query },
+      },
+    };
+
+    expect(selectQuery(stateWithQuery)).toEqual(query);
+  });
+
+  it('should select query when state is empty', () => {
+    expect(selectQuery({})).toEqual({});
+  });
+
+  it('should select tasks-summary', () => {
+    expect(selectTasksSummary(state)).toEqual({
+      paused: {
+        last: 2,
+        older: 7,
+      },
+      running: {
+        last: 3,
+        older: 5,
+      },
+      scheduled: 6,
+      stopped: {
+        other: 16,
+        results: {
+          error: {
+            last: 1,
+            total: 9,
+          },
+          success: {
+            last: 3,
+            total: 7,
+          },
+          warning: {
+            last: 2,
+            total: 8,
+          },
+        },
+      },
+    });
+  });
+
+  it('should select tasks-summary when state is empty', () => {
+    expect(selectTasksSummary({})).toEqual(emptyTasksSummary);
+  });
+
+  it('should calcStoppedOther', () => {
+    expect(calcStoppedOther(stoppedResult)).toBe(16);
+  });
+});

data/webpack/ForemanTasks/Components/TasksTable/TasksTableConstants.js

@@ -5,7 +5,7 @@ export const BULK_RESUME_PATH = 'bulk_resume';
 export const BULK_FORCE_CANCEL_PATH = 'bulk_stop';
 
 export const TASKS_SEARCH_PROPS = {
-  ...getControllerSearchProps('tasks'),
+  ...getControllerSearchProps('/foreman_tasks/tasks'),
   controller: 'foreman_tasks_tasks',
 };
 

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/TaskDetailsPage.js

@@ -0,0 +1,74 @@
+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';
+
+const TaskDetailsPage = props => {
+  const { id } = props.match.params;
+  const action = useSelector(selectAction);
+  const taskState = useSelector(selectState);
+  const taskResult = useSelector(selectResult);
+  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}
+      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,
+};
+
+export default TaskDetailsPage;

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

@@ -0,0 +1,265 @@
+import React from 'react';
+import { render, 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 { 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';
+
+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 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: {
+    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 => ({
+  API: {
+    [FOREMAN_TASK_DETAILS]: {
+      response: { ...baseTaskPayload, ...overrides },
+      status: STATUS.RESOLVED,
+      payload: {},
+    },
+  },
+});
+
+const rootReducer = combineReducers({
+  API: (state = {}, action) => state,
+  intervals: intervalsReducer,
+  breadcrumbBar: breadcrumbBarReducer,
+  foremanTasks: (state = {}, action) => state,
+});
+
+const renderPage = (apiPayloadOverrides = {}, propsOverrides = {}) => {
+  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(
+    {},
+    '',
+    `/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>
+  );
+};
+
+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']));
+  });
+
+  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: /Details of Run job task/,
+        })
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('heading', { name: /Permission denied/i })).not.toBeInTheDocument();
+      expect(mockUseForemanPermissions).toHaveBeenCalled();
+    });
+
+    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();
+    });
+
+    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();
+    });
+  });
+
+
+  const expectToolbarHeadingText = substring => {
+    const headings = breadcrumbTitleHeadings();
+
+    expect(headings.length).toBeGreaterThan(0);
+
+    headings.forEach(heading => {
+      expect(heading).toHaveTextContent(substring);
+    });
+  };
+
+  it('shows generic title and breadcrumb from route id when action is unset', () => {
+    const page = renderPage({});
+    expectToolbarHeadingText('Task Details');
+
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toHaveTextContent(
+      'Tasks'
+    );
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        /task-route-id/
+      )
+    ).toBeInTheDocument();
+
+    const titleRegion = taskDetailsTitleRegion(page.container);
+
+    expect(
+      within(titleRegion).getAllByRole('img', { hidden: true }).length
+    ).toBeGreaterThan(0);
+    expect(titleRegion.querySelector('[class*="danger"]')).toBeNull();
+  });
+
+  it('uses task action for title and breadcrumb when loaded', () => {
+    renderPage({ action: 'Refresh hosts' });
+
+    expectToolbarHeadingText('Details of Refresh hosts task');
+
+    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 styling in the heading when task is stopped with error result', () => {
+    const page = renderPage({
+      action: 'Some action',
+      state: 'stopped',
+      result: 'error',
+    });
+
+    expectToolbarHeadingText('Details of Some action task');
+
+    expect(
+      taskDetailsTitleRegion(page.container).querySelector('[class*="danger"]')
+    ).toBeTruthy();
+
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        'Some action'
+      )
+    ).toBeInTheDocument();
+  });
+});