foreman-tasks 1.1.3 → 1.2.0

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

@@ -13,9 +13,9 @@ import {
   selectSort,
   selectActionName,
   selectSelectedRows,
-  selectClicked,
   selectAllRowsSelected,
   selectShowSelectAll,
+  selectModalID,
 } from './TasksTableSelectors';
 
 const mapStateToProps = state => ({
@@ -27,9 +27,9 @@ const mapStateToProps = state => ({
   itemCount: selectItemCount(state),
   actionName: selectActionName(state),
   selectedRows: selectSelectedRows(state),
-  clicked: selectClicked(state),
   allRowsSelected: selectAllRowsSelected(state),
   showSelectAll: selectShowSelectAll(state),
+  modalID: selectModalID(state),
 });
 
 const mapDispatchToProps = dispatch =>

data/webpack/ForemanTasks/Components/common/ActionButtons/ActionButton.js

@@ -1,27 +1,53 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CancelButton } from './CancelButton';
-import { ResumeButton } from './ResumeButton';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { ActionButtons } from 'foremanReact/components/common/ActionButtons/ActionButtons';
 
-export const ActionButton = ({ id, name, availableActions, taskActions }) => {
-  const isResume = availableActions.resumable;
-  if (isResume) {
-    return (
-      <ResumeButton
-        id={id}
-        name={name}
-        onClick={taskActions.resumeTask}
-        disabled={false}
-      />
-    );
+export const ActionButton = ({
+  id,
+  name,
+  availableActions: { resumable, cancellable, stoppable },
+  taskActions,
+}) => {
+  const buttons = [];
+  const isTitle = !(resumable || cancellable || stoppable);
+  const title = isTitle ? __('Task cannot be canceled') : undefined;
+  if (resumable) {
+    buttons.push({
+      title: __('Resume'),
+      action: {
+        disabled: !resumable,
+        onClick: () => taskActions.resumeTask(id, name),
+        id: `task-resume-button-${id}`,
+      },
+    });
+  }
+  if (cancellable || (!stoppable && !resumable)) {
+    // Cancel is the default button that should be shown if no task action can be done
+    buttons.push({
+      title: __('Cancel'),
+      action: {
+        disabled: !cancellable,
+        onClick: () => taskActions.cancelTask(id, name),
+        id: `task-cancel-button-${id}`,
+      },
+    });
+  }
+
+  if (stoppable) {
+    buttons.push({
+      title: __('Force Cancel'),
+      action: {
+        disabled: !stoppable,
+        onClick: () => taskActions.forceCancelTask(id, name),
+        id: `task-force-cancel-button-${id}`,
+      },
+    });
   }
   return (
-    <CancelButton
-      id={id}
-      name={name}
-      disabled={!availableActions.cancellable}
-      onClick={taskActions.cancelTask}
-    />
+    <span title={title}>
+      <ActionButtons buttons={buttons} />
+    </span>
   );
 };
 
@@ -31,9 +57,11 @@ ActionButton.propTypes = {
   availableActions: PropTypes.shape({
     cancellable: PropTypes.bool,
     resumable: PropTypes.bool,
+    stoppable: PropTypes.bool,
   }).isRequired,
   taskActions: PropTypes.shape({
     cancelTask: PropTypes.func,
     resumeTask: PropTypes.func,
+    forceCancelTask: PropTypes.func,
   }).isRequired,
 };

data/webpack/ForemanTasks/Components/common/ActionButtons/ActionButton.test.js

@@ -1,17 +1,19 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { testComponentSnapshotsWithFixtures, shallow } from '@theforeman/test';
 
 import { ActionButton } from './ActionButton';
 
+const resumeTask = jest.fn();
+const cancelTask = jest.fn();
+const forceCancelTask = jest.fn();
+const taskActions = { resumeTask, cancelTask, forceCancelTask };
 const fixtures = {
   'render with cancellable true props': {
     availableActions: {
       cancellable: true,
       resumable: false,
     },
-    taskActions: {
-      cancel: jest.fn(),
-      resume: jest.fn(),
-    },
+    taskActions,
     id: 'id',
     name: 'some-name',
   },
@@ -20,10 +22,16 @@ const fixtures = {
       cancellable: false,
       resumable: true,
     },
-    taskActions: {
-      cancel: jest.fn(),
-      resume: jest.fn(),
+    taskActions,
+    id: 'id',
+    name: 'some-name',
+  },
+  'render with stoppable and cancellable true props': {
+    availableActions: {
+      cancellable: true,
+      stoppable: true,
     },
+    taskActions,
     id: 'id',
     name: 'some-name',
   },
@@ -32,14 +40,53 @@ const fixtures = {
       cancellable: false,
       resumable: false,
     },
-    taskActions: {
-      cancel: jest.fn(),
-      resume: jest.fn(),
-    },
+    taskActions,
     id: 'id',
     name: 'some-name',
   },
 };
 
-describe('ActionButton', () =>
-  testComponentSnapshotsWithFixtures(ActionButton, fixtures));
+describe('ActionButton', () => {
+  describe('snapshot test', () =>
+    testComponentSnapshotsWithFixtures(ActionButton, fixtures));
+  describe('click test', () => {
+    const id = 'some-id';
+    const name = 'some-name';
+    it('cancel', () => {
+      const component = shallow(
+        <ActionButton
+          id={id}
+          name={name}
+          availableActions={{ cancellable: true }}
+          taskActions={taskActions}
+        />
+      ).children();
+      component.props().buttons[0].action.onClick();
+      expect(cancelTask).toHaveBeenCalledWith(id, name);
+    });
+    it('resume', () => {
+      const component = shallow(
+        <ActionButton
+          id={id}
+          name={name}
+          availableActions={{ resumable: true }}
+          taskActions={taskActions}
+        />
+      ).children();
+      component.props().buttons[0].action.onClick();
+      expect(resumeTask).toHaveBeenCalledWith(id, name);
+    });
+    it('force cancel', () => {
+      const component = shallow(
+        <ActionButton
+          id={id}
+          name={name}
+          availableActions={{ stoppable: true }}
+          taskActions={taskActions}
+        />
+      ).children();
+      component.props().buttons[0].action.onClick();
+      expect(cancelTask).toHaveBeenCalledWith(id, name);
+    });
+  });
+});

data/webpack/ForemanTasks/Components/common/ActionButtons/__snapshots__/ActionButton.test.js.snap

@@ -1,28 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ActionButton render with cancellable false props 1`] = `
-<CancelButton
-  disabled={true}
-  id="id"
-  name="some-name"
-  onClick={[Function]}
-/>
+exports[`ActionButton snapshot test render with cancellable false props 1`] = `
+<span
+  title="Task cannot be canceled"
+>
+  <ActionButtons
+    buttons={
+      Array [
+        Object {
+          "action": Object {
+            "disabled": true,
+            "id": "task-cancel-button-id",
+            "onClick": [Function],
+          },
+          "title": "Cancel",
+        },
+      ]
+    }
+  />
+</span>
 `;
 
-exports[`ActionButton render with cancellable true props 1`] = `
-<CancelButton
-  disabled={false}
-  id="id"
-  name="some-name"
-  onClick={[Function]}
-/>
+exports[`ActionButton snapshot test render with cancellable true props 1`] = `
+<span>
+  <ActionButtons
+    buttons={
+      Array [
+        Object {
+          "action": Object {
+            "disabled": false,
+            "id": "task-cancel-button-id",
+            "onClick": [Function],
+          },
+          "title": "Cancel",
+        },
+      ]
+    }
+  />
+</span>
 `;
 
-exports[`ActionButton render with resumable true props 1`] = `
-<ResumeButton
-  disabled={false}
-  id="id"
-  name="some-name"
-  onClick={[Function]}
-/>
+exports[`ActionButton snapshot test render with resumable true props 1`] = `
+<span>
+  <ActionButtons
+    buttons={
+      Array [
+        Object {
+          "action": Object {
+            "disabled": false,
+            "id": "task-resume-button-id",
+            "onClick": [Function],
+          },
+          "title": "Resume",
+        },
+      ]
+    }
+  />
+</span>
+`;
+
+exports[`ActionButton snapshot test render with stoppable and cancellable true props 1`] = `
+<span>
+  <ActionButtons
+    buttons={
+      Array [
+        Object {
+          "action": Object {
+            "disabled": false,
+            "id": "task-cancel-button-id",
+            "onClick": [Function],
+          },
+          "title": "Cancel",
+        },
+        Object {
+          "action": Object {
+            "disabled": false,
+            "id": "task-force-cancel-button-id",
+            "onClick": [Function],
+          },
+          "title": "Force Cancel",
+        },
+      ]
+    }
+  />
+</span>
 `;

data/webpack/ForemanTasks/Components/common/ClickConfirmation/ClickConfirmation.scss

@@ -0,0 +1,9 @@
+.confirmation-check {
+  margin-top: 1em;
+  input {
+    vertical-align: text-top;
+  }
+  span {
+    vertical-align: middle;
+  }
+}

data/webpack/ForemanTasks/Components/common/ClickConfirmation/ClickConfirmation.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { testComponentSnapshotsWithFixtures, mount } from '@theforeman/test';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import { ClickConfirmation } from './';
+
+const fixtures = {
+  render: {
+    title: 'some-title',
+    confirmType: 'danger',
+    body: 'some-body',
+    confirmationMessage: 'some-message',
+    id: 'some-id',
+    confirmAction: 'some-confirm',
+    onClick: jest.fn(),
+  },
+};
+
+describe('ClickConfirmation', () => {
+  testComponentSnapshotsWithFixtures(ClickConfirmation, fixtures);
+  it('enable button on checkbox click', () => {
+    const component = mount(<ClickConfirmation {...fixtures.render} />);
+    const getButton = () => component.find('.confirm-button').at(0);
+    expect(getButton().props().disabled).toBeTruthy();
+    const checkbox = component.find('input').at(0);
+    checkbox.simulate('change', { target: { checked: true } });
+    expect(getButton().props().disabled).toBeFalsy();
+  });
+
+  it('click test', () => {
+    const setModalClosed = jest.fn();
+    useForemanModal.mockImplementation(id => ({
+      setModalClosed: () => setModalClosed(id),
+    }));
+    const onClick = jest.fn();
+    const props = { ...fixtures.render, onClick };
+    const component = mount(<ClickConfirmation {...props} />);
+    const getButton = () => component.find('.confirm-button').at(0);
+    const checkbox = component.find('input').at(0);
+    checkbox.simulate('change', { target: { checked: true } });
+    getButton().simulate('click');
+    expect(onClick).toBeCalled();
+    expect(setModalClosed).toBeCalledWith({ id: fixtures.render.id });
+  });
+});

data/webpack/ForemanTasks/Components/common/ClickConfirmation/__snapshots__/ClickConfirmation.test.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClickConfirmation render 1`] = `
+<ForemanModal
+  id="some-id"
+>
+  <Component>
+    <span
+      className="glyphicon glyphicon-exclamation-sign"
+    />
+     some-title
+  </Component>
+  <span>
+    some-body
+  </span>
+  <div
+    className="confirmation-check"
+  >
+    <input
+      checked={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <span>
+       some-message
+    </span>
+  </div>
+  <Component>
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="danger"
+      className="confirm-button"
+      disabled={true}
+      onClick={[Function]}
+    >
+      some-confirm
+    </Button>
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="default"
+      disabled={false}
+      onClick={[MockFunction]}
+    >
+      Cancel
+    </Button>
+  </Component>
+</ForemanModal>
+`;

data/webpack/ForemanTasks/Components/common/ClickConfirmation/index.js

@@ -1,82 +1,75 @@
-import { Modal, Button } from 'patternfly-react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Button } from 'patternfly-react';
+import ForemanModal from 'foremanReact/components/ForemanModal';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import './ClickConfirmation.scss';
 
-export class ClickConfirmation extends React.Component {
-  state = { disableConfirm: true };
-  render() {
-    const { disableConfirm } = this.state;
-    const {
-      title,
-      body,
-      confirmationMessage,
-      confirmAction,
-      path,
-      confirmType,
-      closeModal,
-      showModal,
-    } = this.props;
-    const icon = confirmType === 'warning' ? confirmType : 'exclamation';
-    return (
-      <Modal show={showModal} onHide={closeModal}>
-        <Modal.Header>
-          <Button
-            className="close"
-            onClick={closeModal}
-            aria-hidden="true"
-            aria-label="Close"
-          >
-            &times;
-          </Button>
-          <Modal.Title>
-            <span className={`glyphicon glyphicon-${icon}-sign`} />
-            {` ${title}`}
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          {body}
-          <div>
-            <input
-              onChange={e => {
-                this.setState({
-                  disableConfirm: !e.target.checked,
-                });
-              }}
-              type="checkbox"
-            />
-            {` ${confirmationMessage}`}
-          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={closeModal}>{__('Cancel')}</Button>
-          <Button
-            href={path}
-            data-method="post"
-            bsStyle={confirmType}
-            disabled={disableConfirm}
-          >
-            {confirmAction}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
+export const ClickConfirmation = ({
+  title,
+  confirmType,
+  body,
+  confirmationMessage,
+  id,
+  confirmAction,
+  onClick,
+}) => {
+  const [isConfirmed, setConfirm] = useState(false);
+  const { setModalClosed, modalOpen } = useForemanModal({
+    id,
+  });
+  useEffect(() => {
+    setConfirm(false);
+  }, [modalOpen]);
+  const icon = confirmType === 'warning' ? confirmType : 'exclamation';
+
+  return (
+    <ForemanModal id={id}>
+      <ForemanModal.Header>
+        <span className={`glyphicon glyphicon-${icon}-sign`} />
+        {` ${title}`}
+      </ForemanModal.Header>
+      <span>{body}</span>
+      <div className="confirmation-check">
+        <input
+          onChange={e => {
+            setConfirm(e.target.checked);
+          }}
+          checked={isConfirmed}
+          type="checkbox"
+        />
+        <span>{` ${confirmationMessage}`}</span>
+      </div>
+      <ForemanModal.Footer>
+        <Button
+          className="confirm-button"
+          onClick={() => {
+            onClick();
+            setModalClosed();
+          }}
+          bsStyle={confirmType}
+          disabled={!isConfirmed}
+        >
+          {confirmAction}
+        </Button>
+        <Button onClick={setModalClosed}>{__('Cancel')}</Button>
+      </ForemanModal.Footer>
+    </ForemanModal>
+  );
+};
 
 ClickConfirmation.propTypes = {
-  showModal: PropTypes.bool,
   title: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   confirmationMessage: PropTypes.string.isRequired,
   confirmAction: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
   confirmType: PropTypes.oneOf(['warning', 'danger']),
-  closeModal: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 ClickConfirmation.defaultProps = {
-  showModal: false,
   confirmType: 'warning',
 };