foreman-tasks 11.0.7 → 12.0.0

data/webpack/ForemanTasks/Components/TaskDetails/Components/__tests__/__snapshots__/Task.test.js.snap

@@ -15,59 +15,48 @@ exports[`Task rendering render with minimal Props 1`] = `
     selectedRowsLen={1}
     setModalClosed={[Function]}
   />
-  <Grid
-    bsClass="container"
-    componentClass="div"
-    fluid={false}
-  >
-    <Row
-      bsClass="row"
-      componentClass="div"
-    >
-      <TaskButtons
-        action=""
-        canEdit={false}
-        cancelTaskRequest={[Function]}
-        cancellable={false}
-        dynflowEnableConsole={false}
-        externalId=""
-        forceCancelTaskRequest={[Function]}
-        hasSubTasks={false}
-        id="test"
-        parentTask=""
-        resumable={false}
-        resumeTaskRequest={[Function]}
-        setForceUnlockModalOpen={[Function]}
-        setUnlockModalOpen={[Function]}
-        state=""
-        taskProgressToggle={[MockFunction]}
-        taskReload={false}
-        taskReloadStart={[MockFunction]}
-        unlockTaskRequest={[Function]}
-      />
-    </Row>
-    <TaskInfo
-      action=""
-      endedAt=""
-      errors={Array []}
-      forceCancelTaskRequest={[Function]}
-      help=""
-      id="test"
-      output=""
-      progress={0}
-      result="error"
-      startAt=""
-      startBefore=""
-      startedAt=""
-      state=""
-      taskProgressToggle={[MockFunction]}
-      taskReload={false}
-      taskReloadStart={[MockFunction]}
-      unlockTaskRequest={[Function]}
-      username=""
-      usernamePath=""
-    />
-  </Grid>
+  <TaskButtons
+    action=""
+    canEdit={false}
+    cancelTaskRequest={[Function]}
+    cancellable={false}
+    dynflowEnableConsole={false}
+    externalId=""
+    forceCancelTaskRequest={[Function]}
+    hasSubTasks={false}
+    id="test"
+    parentTask=""
+    resumable={false}
+    resumeTaskRequest={[Function]}
+    setForceUnlockModalOpen={[Function]}
+    setUnlockModalOpen={[Function]}
+    state=""
+    taskProgressToggle={[MockFunction]}
+    taskReload={false}
+    taskReloadStart={[MockFunction]}
+    unlockTaskRequest={[Function]}
+  />
+  <TaskInfo
+    action=""
+    endedAt=""
+    errors={Array []}
+    forceCancelTaskRequest={[Function]}
+    help=""
+    id="test"
+    output=""
+    progress={0}
+    result="error"
+    startAt=""
+    startBefore=""
+    startedAt=""
+    state=""
+    taskProgressToggle={[MockFunction]}
+    taskReload={false}
+    taskReloadStart={[MockFunction]}
+    unlockTaskRequest={[Function]}
+    username=""
+    usernamePath=""
+  />
 </Fragment>
 `;
 
@@ -86,64 +75,53 @@ exports[`Task rendering render with some Props 1`] = `
     selectedRowsLen={1}
     setModalClosed={[Function]}
   />
-  <Grid
-    bsClass="container"
-    componentClass="div"
-    fluid={false}
-  >
-    <Row
-      bsClass="row"
-      componentClass="div"
-    >
-      <TaskButtons
-        action=""
-        canEdit={true}
-        cancelTaskRequest={[Function]}
-        cancellable={false}
-        dynflowEnableConsole={true}
-        externalId=""
-        forceCancelTaskRequest={[Function]}
-        hasSubTasks={true}
-        id="test"
-        parentTask="parent-id"
-        resumable={false}
-        resumeTaskRequest={[Function]}
-        setForceUnlockModalOpen={[Function]}
-        setUnlockModalOpen={[Function]}
-        state="paused"
-        status="RESOLVED"
-        taskProgressToggle={[MockFunction]}
-        taskReload={true}
-        taskReloadStart={[MockFunction]}
-        unlockTaskRequest={[Function]}
-      />
-    </Row>
-    <TaskInfo
-      action=""
-      canEdit={true}
-      dynflowEnableConsole={true}
-      endedAt=""
-      errors={Array []}
-      forceCancelTaskRequest={[Function]}
-      hasSubTasks={true}
-      help=""
-      id="test"
-      output=""
-      parentTask="parent-id"
-      progress={0}
-      result="error"
-      startAt=""
-      startBefore=""
-      startedAt=""
-      state="paused"
-      status="RESOLVED"
-      taskProgressToggle={[MockFunction]}
-      taskReload={true}
-      taskReloadStart={[MockFunction]}
-      unlockTaskRequest={[Function]}
-      username=""
-      usernamePath=""
-    />
-  </Grid>
+  <TaskButtons
+    action=""
+    canEdit={true}
+    cancelTaskRequest={[Function]}
+    cancellable={false}
+    dynflowEnableConsole={true}
+    externalId=""
+    forceCancelTaskRequest={[Function]}
+    hasSubTasks={true}
+    id="test"
+    parentTask="parent-id"
+    resumable={false}
+    resumeTaskRequest={[Function]}
+    setForceUnlockModalOpen={[Function]}
+    setUnlockModalOpen={[Function]}
+    state="paused"
+    status="RESOLVED"
+    taskProgressToggle={[MockFunction]}
+    taskReload={true}
+    taskReloadStart={[MockFunction]}
+    unlockTaskRequest={[Function]}
+  />
+  <TaskInfo
+    action=""
+    canEdit={true}
+    dynflowEnableConsole={true}
+    endedAt=""
+    errors={Array []}
+    forceCancelTaskRequest={[Function]}
+    hasSubTasks={true}
+    help=""
+    id="test"
+    output=""
+    parentTask="parent-id"
+    progress={0}
+    result="error"
+    startAt=""
+    startBefore=""
+    startedAt=""
+    state="paused"
+    status="RESOLVED"
+    taskProgressToggle={[MockFunction]}
+    taskReload={true}
+    taskReloadStart={[MockFunction]}
+    unlockTaskRequest={[Function]}
+    username=""
+    usernamePath=""
+  />
 </Fragment>
 `;

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

@@ -9,6 +9,7 @@ import RunningSteps from './Components/RunningSteps';
 import Errors from './Components/Errors';
 import Locks from './Components/Locks';
 import Raw from './Components/Raw';
+import Dependencies from './Components/Dependencies';
 import { getTaskID } from './TasksDetailsHelper';
 import { TaskSkeleton } from './Components/TaskSkeleton';
 
@@ -20,6 +21,8 @@ const TaskDetails = ({
   runningSteps,
   locks,
   links,
+  dependsOn,
+  blocks,
   cancelStep,
   taskReloadStart,
   taskReloadStop,
@@ -90,7 +93,10 @@ const TaskDetails = ({
         <Tab eventKey={4} disabled={isLoading} title={__('Locks')}>
           <Locks locks={locks.concat(links)} />
         </Tab>
-        <Tab eventKey={5} disabled={isLoading} title={__('Raw')}>
+        <Tab eventKey={5} disabled={isLoading} title={__('Dependencies')}>
+          <Dependencies dependsOn={dependsOn} blocks={blocks} />
+        </Tab>
+        <Tab eventKey={6} disabled={isLoading} title={__('Raw')}>
           <Raw
             id={id}
             label={props.label}
@@ -116,9 +122,12 @@ TaskDetails.propTypes = {
   taskReloadStop: PropTypes.func.isRequired,
   taskReloadStart: PropTypes.func.isRequired,
   links: PropTypes.array,
+  dependsOn: PropTypes.array,
+  blocks: PropTypes.array,
   ...Task.propTypes,
   ...Errors.propTypes,
   ...Locks.propTypes,
+  ...Dependencies.propTypes,
   ...Raw.propTypes,
 };
 TaskDetails.defaultProps = {
@@ -127,10 +136,13 @@ TaskDetails.defaultProps = {
   APIerror: null,
   status: STATUS.PENDING,
   links: [],
+  dependsOn: [],
+  blocks: [],
   ...Task.defaultProps,
   ...RunningSteps.defaultProps,
   ...Errors.defaultProps,
   ...Locks.defaultProps,
+  ...Dependencies.defaultProps,
   ...Raw.defaultProps,
 };
 

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

@@ -109,3 +109,9 @@ export const selectAPIError = state =>
 export const selectIsLoading = state =>
   !!selectAPIByKey(state, FOREMAN_TASK_DETAILS).response &&
   selectStatus(state) === STATUS.PENDING;
+
+export const selectDependsOn = state =>
+  selectTaskDetailsResponse(state).depends_on || [];
+
+export const selectBlocks = state =>
+  selectTaskDetailsResponse(state).blocks || [];

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

@@ -58,6 +58,16 @@ exports[`TaskDetails rendering render with loading Props 1`] = `
     <Tab
       disabled={true}
       eventKey={5}
+      title="Dependencies"
+    >
+      <Dependencies
+        blocks={Array []}
+        dependsOn={Array []}
+      />
+    </Tab>
+    <Tab
+      disabled={true}
+      eventKey={6}
       title="Raw"
     >
       <Raw
@@ -136,6 +146,15 @@ exports[`TaskDetails rendering render with min Props 1`] = `
     </Tab>
     <Tab
       eventKey={5}
+      title="Dependencies"
+    >
+      <Dependencies
+        blocks={Array []}
+        dependsOn={Array []}
+      />
+    </Tab>
+    <Tab
+      eventKey={6}
       title="Raw"
     >
       <Raw

data/webpack/ForemanTasks/Components/TaskDetails/index.js

@@ -36,6 +36,8 @@ import {
   selectStatus,
   selectAPIError,
   selectIsLoading,
+  selectDependsOn,
+  selectBlocks,
 } from './TaskDetailsSelectors';
 
 const mapStateToProps = state => ({
@@ -71,6 +73,8 @@ const mapStateToProps = state => ({
   status: selectStatus(state),
   APIerror: selectAPIError(state),
   isLoading: selectIsLoading(state),
+  dependsOn: selectDependsOn(state),
+  blocks: selectBlocks(state),
 });
 
 const mapDispatchToProps = dispatch =>

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/OtherInfo.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { Button, Tooltip, TooltipPosition, Icon } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
@@ -25,8 +25,10 @@ export const OtherInfo = ({ updateQuery, otherCount, query }) => {
         position={TooltipPosition.bottom}
       >
         <span>
-          <InfoCircleIcon className="pficon" />
-          <span>{__('Other:')} </span>
+          <Icon isInline>
+            <InfoCircleIcon />
+          </Icon>{' '}
+          {__('Other:')}
         </span>
       </Tooltip>
       <Button

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/OtherInfo.test.js

@@ -1,14 +1,63 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { OtherInfo } from './OtherInfo';
+import {
+  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS,
+} from '../../../../TasksDashboardConstants';
 
-const fixtures = {
-  render: {
-    updateQuery: jest.fn,
-    otherCount: 7,
-    query: { state: 'STOPPED', result: 'OTHER' },
-  },
+jest.mock('foremanReact/common/I18n', () => ({
+  translate: str => str,
+}));
+
+const { STOPPED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+const { OTHER } = TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS;
+
+const defaultProps = {
+  updateQuery: jest.fn(),
+  otherCount: 7,
+  query: { state: STOPPED, result: OTHER },
 };
 
-describe('OtherInfo', () =>
-  testComponentSnapshotsWithFixtures(OtherInfo, fixtures));
+describe('OtherInfo', () => {
+  beforeEach(() => {
+    defaultProps.updateQuery.mockClear();
+  });
+
+  it('renders Other label, count', () => {
+    render(<OtherInfo {...defaultProps} />);
+    expect(screen.getByText('Other:')).toBeInTheDocument();
+    expect(screen.getByText('7')).toBeInTheDocument();
+  });
+
+  it('calls updateQuery with STOPPED and OTHER when the count button is clicked', () => {
+    render(<OtherInfo {...defaultProps} />);
+    const button = screen.getByRole('button', { name: '7' });
+    fireEvent.click(button);
+    expect(defaultProps.updateQuery).toHaveBeenCalledWith({
+      state: STOPPED,
+      result: OTHER,
+    });
+  });
+
+  it('applies other-active class when query state is STOPPED and result is OTHER', () => {
+    const { container } = render(
+      <OtherInfo {...defaultProps} query={{ state: STOPPED, result: OTHER }} />
+    );
+    const wrapper = container.querySelector('.other-active');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  it('does not apply other-active class when query result is not OTHER', () => {
+    const { container } = render(
+      <OtherInfo
+        {...defaultProps}
+        query={{ state: STOPPED, result: 'error' }}
+      />
+    );
+    const wrapper = container.querySelector('.other-active');
+    expect(wrapper).not.toBeInTheDocument();
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.scss

@@ -1,19 +1,5 @@
 .stopped-tasks-card {
   .stopped-table {
-    width: 100%;
-    border: none;
-    table-layout: fixed;
-
-    thead {
-      background-color: transparent;
-      background-image: none;
-      tr {
-        th {
-          font-weight: bold;
-          border: none;
-        }
-      }
-    }
 
     td,
     th {
@@ -29,12 +15,6 @@
     td {
       &.active {
         font-weight: bold;
-      }
-    }
-    .data-col {
-      &:hover {
-        cursor: pointer;
-        border: 1px solid #d1d1d1;
         background-color: #def3fe;
       }
     }
@@ -43,14 +23,4 @@
   .other-active {
     text-decoration: underline;
   }
-
-  .pficon {
-    margin-right: 5px;
-  }
-
-  .btn-link {
-    font-size: 14px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 }

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.test.js

@@ -1,15 +1,196 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-import { TASKS_DASHBOARD_AVAILABLE_QUERY_STATES } from '../../../../TasksDashboardConstants';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import {
+  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+} from '../../../../TasksDashboardConstants';
 import StoppedTasksCard from './StoppedTasksCard';
 
-const { STOPPED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+const { STOPPED, RUNNING } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+const { LAST } = TASKS_DASHBOARD_AVAILABLE_QUERY_MODES;
+const { WEEK } = TASKS_DASHBOARD_AVAILABLE_TIMES;
 
-const fixtures = {
-  'render with minimal props': {},
-  'render selected': {
-    query: { state: STOPPED },
+const defaultTableData = {
+  results: {
+    error: { total: 9, last: 1 },
+    warning: { total: 8, last: 2 },
+    success: { total: 7, last: 3 },
   },
+  other: 0,
 };
 
-describe('StoppedTasksCard', () =>
-  testComponentSnapshotsWithFixtures(StoppedTasksCard, fixtures));
+describe('StoppedTasksCard', () => {
+  describe('rendering', () => {
+    it('renders card with base classes and id', () => {
+      const { container } = render(<StoppedTasksCard />);
+      const card = container.querySelector('#stopped-tasks-card');
+      expect(screen.getByText('Stopped')).toBeInTheDocument();
+      expect(card).toBeInTheDocument();
+      expect(card).toHaveClass('tasks-donut-card');
+      expect(card).toHaveClass('stopped-tasks-card');
+    });
+
+    it('renders selected state when query.state is STOPPED', () => {
+      const { container } = render(
+        <StoppedTasksCard query={{ state: STOPPED }} />
+      );
+      expect(screen.getByText('Stopped')).toBeInTheDocument();
+      const card = container.querySelector('#stopped-tasks-card');
+      expect(card).toHaveClass('selected-tasks-card');
+    });
+
+    it('renders not-focused state when query.state is not STOPPED', () => {
+      const { container } = render(
+        <StoppedTasksCard query={{ state: RUNNING }} />
+      );
+      const card = container.querySelector('#stopped-tasks-card');
+      expect(card).toHaveClass('not-focused');
+      expect(card).not.toHaveClass('selected-tasks-card');
+    });
+
+    it('renders StoppedTable with Error, Warning, Success labels', () => {
+      render(<StoppedTasksCard />);
+      expect(screen.getByText('Error')).toBeInTheDocument();
+      expect(screen.getByText('Warning')).toBeInTheDocument();
+      expect(screen.getByText('Success')).toBeInTheDocument();
+      expect(screen.getByText('Other:')).toBeInTheDocument();
+    });
+
+    it('renders data counts from props', () => {
+      const data = {
+        results: {
+          error: { total: 5, last: 2 },
+          warning: { total: 3, last: 1 },
+          success: { total: 10, last: 4 },
+        },
+        other: 7,
+      };
+      render(<StoppedTasksCard data={data} />);
+      expect(screen.getByText('5')).toBeInTheDocument();
+      expect(screen.getByText('2')).toBeInTheDocument();
+      expect(screen.getByText('3')).toBeInTheDocument();
+      expect(screen.getByText('1')).toBeInTheDocument();
+      expect(screen.getByText('10')).toBeInTheDocument();
+      expect(screen.getByText('4')).toBeInTheDocument();
+      expect(screen.getByText('7')).toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls updateQuery with state STOPPED when title is clicked', () => {
+      const updateQuery = jest.fn();
+      render(<StoppedTasksCard updateQuery={updateQuery} />);
+      fireEvent.click(screen.getByText('Stopped'));
+      expect(updateQuery).toHaveBeenCalledWith({ state: STOPPED });
+    });
+  });
+
+  describe('StoppedTable (via StoppedTasksCard)', () => {
+    it('renders table with data and time', () => {
+      render(
+        <StoppedTasksCard
+          data={defaultTableData}
+          time={WEEK}
+          query={{}}
+          updateQuery={jest.fn()}
+        />
+      );
+      expect(screen.getByText('Total')).toBeInTheDocument();
+      expect(screen.getByText('week')).toBeInTheDocument();
+    });
+
+    it('applies active class to Total cell when query has state STOPPED and result (total selected)', () => {
+      const { container } = render(
+        <StoppedTasksCard
+          data={defaultTableData}
+          time={WEEK}
+          query={{ state: STOPPED, result: 'error' }}
+          updateQuery={jest.fn()}
+        />
+      );
+      const table = container.querySelector('.stopped-table');
+      expect(table).toBeInTheDocument();
+      const activeCells = table.querySelectorAll('.data-col.active');
+      expect(activeCells).toHaveLength(1);
+      expect(activeCells[0].textContent).toBe('9');
+    });
+
+    ['warning', 'success'].forEach(result => {
+      it(`applies active class to Total cell when result is ${result} (total selected)`, () => {
+        const { container } = render(
+          <StoppedTasksCard
+            data={defaultTableData}
+            time={WEEK}
+            query={{ state: STOPPED, result }}
+            updateQuery={jest.fn()}
+          />
+        );
+        const table = container.querySelector('.stopped-table');
+        const activeCells = table.querySelectorAll('.data-col.active');
+        expect(activeCells.length).toBe(1);
+        const expectedTotal = result === 'warning' ? '8' : '7';
+        expect(activeCells[0].textContent).toBe(expectedTotal);
+      });
+    });
+
+    it('applies active class to Last time cell when query has result, mode LAST and time (last selected)', () => {
+      const { container } = render(
+        <StoppedTasksCard
+          data={defaultTableData}
+          time={WEEK}
+          query={{
+            state: STOPPED,
+            result: 'error',
+            mode: LAST,
+            time: WEEK,
+          }}
+          updateQuery={jest.fn()}
+        />
+      );
+      const table = container.querySelector('.stopped-table');
+      const activeCells = table.querySelectorAll('.data-col.active');
+      expect(activeCells).toHaveLength(1);
+      expect(activeCells[0].textContent).toBe('1');
+    });
+
+    it('calls updateQuery with state and result when Total is clicked', () => {
+      const updateQuery = jest.fn();
+      render(
+        <StoppedTasksCard
+          data={defaultTableData}
+          time={WEEK}
+          query={{}}
+          updateQuery={updateQuery}
+        />
+      );
+      fireEvent.click(screen.getByRole('button', { name: '9' }));
+      expect(updateQuery).toHaveBeenCalledWith({
+        state: STOPPED,
+        result: 'error',
+      });
+    });
+
+    it('calls updateQuery with state, result, mode LAST and time when Last time is clicked', () => {
+      const updateQuery = jest.fn();
+      render(
+        <StoppedTasksCard
+          data={defaultTableData}
+          time={WEEK}
+          query={{}}
+          updateQuery={updateQuery}
+        />
+      );
+      const lastButtons = screen.getAllByRole('button', { name: '1' });
+      fireEvent.click(lastButtons[0]);
+      expect(updateQuery).toHaveBeenCalledWith({
+        state: STOPPED,
+        result: 'error',
+        mode: LAST,
+        time: WEEK,
+      });
+    });
+  });
+});