foreman-tasks 11.0.5 → 11.0.7

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import URI from 'urijs';
 import { getURIsearch } from 'foremanReact/common/urlHelpers';
@@ -8,17 +8,25 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { getURIQuery } from 'foremanReact/common/helpers';
 import ExportButton from 'foremanReact/routes/common/PageLayout/components/ExportButton/ExportButton';
 import { STATUS } from 'foremanReact/constants';
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 import TasksDashboard from '../TasksDashboard';
 import TasksTable from './TasksTable';
 import { getCSVurl, updateURlQuery } from './TasksTableHelpers';
-import ConfirmModal from './Components/ConfirmModal/';
+import {
+  CancelModal,
+  ResumeModal,
+  CancelSelectedModal,
+  ResumeSelectedModal,
+  ForceUnlockModal,
+  ForceUnlockSelectedModal,
+} from './Components/ConfirmModal';
 import {
   TASKS_SEARCH_PROPS,
   CANCEL_SELECTED_MODAL,
   RESUME_SELECTED_MODAL,
   FORCE_UNLOCK_SELECTED_MODAL,
-  CONFIRM_MODAL,
+  CANCEL_MODAL,
+  RESUME_MODAL,
+  FORCE_UNLOCK_MODAL,
 } from './TasksTableConstants';
 import { ActionSelectButton } from './Components/ActionSelectButton';
 import './TasksTablePage.scss';
@@ -48,21 +56,69 @@ const TasksTablePage = ({
       updateURlQuery(newUriQuery, history);
     }
   };
-
-  const { setModalOpen, setModalClosed } = useForemanModal({
-    id: CONFIRM_MODAL,
+  const [modalStates, setModalStates] = useState({
+    [CANCEL_MODAL]: false,
+    [RESUME_MODAL]: false,
+    [CANCEL_SELECTED_MODAL]: false,
+    [RESUME_SELECTED_MODAL]: false,
+    [FORCE_UNLOCK_MODAL]: false,
+    [FORCE_UNLOCK_SELECTED_MODAL]: false,
   });
 
-  const openModal = id => openModalAction(id, setModalOpen);
+  const openModal = id => {
+    setModalStates(prev => ({
+      ...prev,
+      [id]: true,
+    }));
+  };
+
+  const closeModal = id => {
+    setModalStates(prev => ({
+      ...prev,
+      [id]: false,
+    }));
+  };
 
   return (
     <div className="tasks-table-wrapper">
-      <ConfirmModal
-        id={CONFIRM_MODAL}
+      <CancelModal
+        isModalOpen={modalStates[CANCEL_MODAL]}
+        setIsModalOpen={() => closeModal(CANCEL_MODAL)}
+        url={url}
+        parentTaskID={props.parentTaskID}
+      />
+      <ResumeModal
+        isModalOpen={modalStates[RESUME_MODAL]}
+        setIsModalOpen={() => closeModal(RESUME_MODAL)}
+        url={url}
+        parentTaskID={props.parentTaskID}
+      />
+      <CancelSelectedModal
+        isModalOpen={modalStates[CANCEL_SELECTED_MODAL]}
+        setIsModalOpen={() => closeModal(CANCEL_SELECTED_MODAL)}
         url={url}
+        uriQuery={uriQuery}
         parentTaskID={props.parentTaskID}
+      />
+      <ResumeSelectedModal
+        isModalOpen={modalStates[RESUME_SELECTED_MODAL]}
+        setIsModalOpen={() => closeModal(RESUME_SELECTED_MODAL)}
+        url={url}
         uriQuery={uriQuery}
-        setModalClosed={setModalClosed}
+        parentTaskID={props.parentTaskID}
+      />
+      <ForceUnlockModal
+        isModalOpen={modalStates[FORCE_UNLOCK_MODAL]}
+        setIsModalOpen={() => closeModal(FORCE_UNLOCK_MODAL)}
+        url={url}
+        parentTaskID={props.parentTaskID}
+      />
+      <ForceUnlockSelectedModal
+        isModalOpen={modalStates[FORCE_UNLOCK_SELECTED_MODAL]}
+        setIsModalOpen={() => closeModal(FORCE_UNLOCK_SELECTED_MODAL)}
+        url={url}
+        uriQuery={uriQuery}
+        parentTaskID={props.parentTaskID}
       />
       <PageLayout
         searchable

data/webpack/ForemanTasks/Components/TasksTable/__tests__/__snapshots__/TasksTablePage.test.js.snap

@@ -4,10 +4,50 @@ exports[`TasksTablePage rendering render with Breadcrubs and edit permissions 1`
 <div
   className="tasks-table-wrapper"
 >
-  <Connect(ConfirmModal)
-    id="ConfirmModal"
+  <TaskModal
+    isModalOpen={false}
     parentTaskID={null}
-    setModalClosed={[MockFunction]}
+    setIsModalOpen={[Function]}
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <TaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <BulkTaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    uriQuery={
+      Object {
+        "state": "stopped",
+      }
+    }
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <BulkTaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    uriQuery={
+      Object {
+        "state": "stopped",
+      }
+    }
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <TaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <BulkTaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
     uriQuery={
       Object {
         "state": "stopped",
@@ -156,10 +196,50 @@ exports[`TasksTablePage rendering render with minimal props 1`] = `
 <div
   className="tasks-table-wrapper"
 >
-  <Connect(ConfirmModal)
-    id="ConfirmModal"
+  <TaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <TaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <BulkTaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    uriQuery={
+      Object {
+        "state": "stopped",
+      }
+    }
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <BulkTaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    uriQuery={
+      Object {
+        "state": "stopped",
+      }
+    }
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <TaskModal
+    isModalOpen={false}
+    parentTaskID={null}
+    setIsModalOpen={[Function]}
+    url="/foreman_tasks/tasks?action=\\"some-name\\""
+  />
+  <BulkTaskModal
+    isModalOpen={false}
     parentTaskID={null}
-    setModalClosed={[MockFunction]}
+    setIsModalOpen={[Function]}
     uriQuery={
       Object {
         "state": "stopped",

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

@@ -1,44 +1,230 @@
 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(),
-  },
-};
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  ClickConfirmation,
+  UnlockConfirmationModal,
+  ForceUnlockConfirmationModal,
+} from './';
 
 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 });
+  const defaultProps = {
+    title: 'Test Modal',
+    body: 'This is a test modal body',
+    confirmationMessage: 'I understand the consequences',
+    confirmAction: 'Confirm',
+    onClick: jest.fn(),
+    id: 'test-modal',
+    isOpen: true,
+    setModalClosed: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders modal with correct title and content when open', () => {
+      render(<ClickConfirmation {...defaultProps} />);
+
+      expect(screen.getByText('Test Modal')).toBeInTheDocument();
+      expect(screen.getByText('This is a test modal body')).toBeInTheDocument();
+      expect(
+        screen.getByText('I understand the consequences')
+      ).toBeInTheDocument();
+      expect(screen.getByText('Confirm')).toBeInTheDocument();
+    });
+
+    it('does not render modal when isOpen is false', () => {
+      render(<ClickConfirmation {...defaultProps} isOpen={false} />);
+
+      expect(screen.queryByText('Test Modal')).not.toBeInTheDocument();
+    });
+
+    it('renders with warning variant by default', () => {
+      render(<ClickConfirmation {...defaultProps} />);
+
+      const modal = screen.getByRole('dialog');
+      expect(modal).toBeInTheDocument();
+    });
+
+    it('renders with danger variant when specified', () => {
+      render(<ClickConfirmation {...defaultProps} confirmType="danger" />);
+
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+      expect(confirmButton).toHaveClass('pf-m-danger');
+    });
+  });
+
+  describe('Checkbox Interaction', () => {
+    it('starts with checkbox unchecked and confirm button disabled', () => {
+      render(<ClickConfirmation {...defaultProps} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+
+      expect(checkbox).not.toBeChecked();
+      expect(confirmButton).toBeDisabled();
+    });
+
+    it('enables confirm button when checkbox is checked', () => {
+      render(<ClickConfirmation {...defaultProps} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+
+      fireEvent.click(checkbox);
+
+      expect(checkbox).toBeChecked();
+      expect(confirmButton).toBeEnabled();
+    });
+
+    it('disables confirm button when checkbox is unchecked', () => {
+      render(<ClickConfirmation {...defaultProps} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+
+      // Check the checkbox first
+      fireEvent.click(checkbox);
+      expect(confirmButton).toBeEnabled();
+
+      // Uncheck the checkbox
+      fireEvent.click(checkbox);
+      expect(checkbox).not.toBeChecked();
+      expect(confirmButton).toBeDisabled();
+    });
+  });
+
+  describe('Button Actions', () => {
+    it('calls onClick and setModalClosed when confirm button is clicked', () => {
+      const onClick = jest.fn();
+      const setModalClosed = jest.fn();
+
+      render(
+        <ClickConfirmation
+          {...defaultProps}
+          onClick={onClick}
+          setModalClosed={setModalClosed}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox');
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+
+      // Enable the button by checking the checkbox
+      fireEvent.click(checkbox);
+
+      // Click the confirm button
+      fireEvent.click(confirmButton);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(setModalClosed).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls setModalClosed when cancel button is clicked', () => {
+      const setModalClosed = jest.fn();
+
+      render(
+        <ClickConfirmation {...defaultProps} setModalClosed={setModalClosed} />
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+      fireEvent.click(cancelButton);
+
+      expect(setModalClosed).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when confirm button is clicked while disabled', () => {
+      const onClick = jest.fn();
+
+      render(<ClickConfirmation {...defaultProps} onClick={onClick} />);
+
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+
+      // Try to click the disabled button
+      fireEvent.click(confirmButton);
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('UnlockModal', () => {
+  const defaultProps = {
+    onClick: jest.fn(),
+    id: 'unlock-modal',
+    isOpen: true,
+    setModalClosed: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with correct unlock-specific content and warning variant', () => {
+    render(<UnlockConfirmationModal {...defaultProps} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Warning alert: Unlock' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /This will unlock the resources that the task is running against/
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'I understand that this may cause harm and have working database backups of all backend services.'
+      )
+    ).toBeInTheDocument();
+
+    const confirmButton = screen.getByRole('button', { name: 'Unlock' });
+    expect(confirmButton).toBeInTheDocument();
+    expect(confirmButton).toHaveClass('pf-m-primary');
+  });
+});
+
+describe('ForceUnlockModal', () => {
+  const defaultProps = {
+    onClick: jest.fn(),
+    id: 'force-unlock-modal',
+    selectedRowsLen: 3,
+    isOpen: true,
+    setModalClosed: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with correct force unlock-specific content and danger variant', () => {
+    render(<ForceUnlockConfirmationModal {...defaultProps} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Danger alert: Force Unlock' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Resources for 3 task\(s\) will be unlocked/)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'I understand that this may cause harm and have working database backups of all backend services.'
+      )
+    ).toBeInTheDocument();
+
+    const confirmButton = screen.getByRole('button', { name: 'Force Unlock' });
+    expect(confirmButton).toBeInTheDocument();
+    expect(confirmButton).toHaveClass('pf-m-danger');
+  });
+
+  it('displays correct number of tasks in body', () => {
+    render(
+      <ForceUnlockConfirmationModal {...defaultProps} selectedRowsLen={5} />
+    );
+
+    expect(
+      screen.getByText(/Resources for 5 task\(s\) will be unlocked/)
+    ).toBeInTheDocument();
   });
 });

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

@@ -1,10 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-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';
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  Checkbox,
+  TextContent,
+} from '@patternfly/react-core';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import {
+  UNLOCK_MODAL,
+  FORCE_UNLOCK_MODAL,
+} from '../../TaskActions/TaskActionsConstants';
 
 export const ClickConfirmation = ({
   title,
@@ -14,48 +21,57 @@ export const ClickConfirmation = ({
   id,
   confirmAction,
   onClick,
+  isOpen,
+  setModalClosed,
 }) => {
   const [isConfirmed, setConfirm] = useState(false);
-  const { setModalClosed, modalOpen } = useForemanModal({
-    id,
-  });
-  useEffect(() => {
+  const onClose = () => {
     setConfirm(false);
-  }, [modalOpen]);
-  const icon = confirmType === 'warning' ? confirmType : 'exclamation';
-
+    setModalClosed();
+  };
   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>
+    <Modal
+      title={title}
+      titleIconVariant={confirmType}
+      variant={ModalVariant.small}
+      isOpen={isOpen}
+      onClose={onClose}
+      ouiaId={`${id}-modal`}
+      actions={[
         <Button
+          ouiaId={`${id}-cancel-button`}
+          key="cancel"
+          variant="secondary"
+          onClick={onClose}
+        >
+          {__('Cancel')}
+        </Button>,
+        <Button
+          ouiaId={`${id}-confirm-button`}
+          key="confirm"
           className="confirm-button"
+          variant={confirmType === 'danger' ? 'danger' : 'primary'}
           onClick={() => {
             onClick();
-            setModalClosed();
+            onClose();
           }}
-          bsStyle={confirmType}
-          disabled={!isConfirmed}
+          isDisabled={!isConfirmed}
         >
           {confirmAction}
-        </Button>
-        <Button onClick={setModalClosed}>{__('Cancel')}</Button>
-      </ForemanModal.Footer>
-    </ForemanModal>
+        </Button>,
+      ]}
+    >
+      <TextContent>
+        {body}
+        <Checkbox
+          ouiaId={`${id}-confirmation-checkbox`}
+          id={`confirmation-checkbox-${id}`}
+          label={confirmationMessage}
+          isChecked={isConfirmed}
+          onChange={(_e, checked) => setConfirm(checked)}
+        />
+      </TextContent>
+    </Modal>
   );
 };
 
@@ -67,10 +83,93 @@ ClickConfirmation.propTypes = {
   onClick: PropTypes.func.isRequired,
   confirmType: PropTypes.oneOf(['warning', 'danger']),
   id: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool,
+  setModalClosed: PropTypes.func,
 };
 
 ClickConfirmation.defaultProps = {
   confirmType: 'warning',
+  isOpen: false,
+  setModalClosed: () => {},
+};
+
+// Unlock Modal Components
+const confirmationMessage = __(
+  'I understand that this may cause harm and have working database backups of all backend services.'
+);
+
+export const UnlockConfirmationModal = ({
+  onClick,
+  id,
+  isOpen,
+  setModalClosed,
+}) => (
+  <ClickConfirmation
+    id={id}
+    title={__('Unlock')}
+    body={__(
+      "This will unlock the resources that the task is running against. Please note that this might lead to inconsistent state and should be used with caution, after making sure that the task can't be resumed."
+    )}
+    confirmationMessage={confirmationMessage}
+    confirmAction={__('Unlock')}
+    onClick={onClick}
+    confirmType="warning"
+    isOpen={isOpen}
+    setModalClosed={setModalClosed}
+  />
+);
+
+export const ForceUnlockConfirmationModal = ({
+  onClick,
+  id,
+  selectedRowsLen,
+  isOpen,
+  setModalClosed,
+}) => (
+  <ClickConfirmation
+    id={id}
+    title={__('Force Unlock')}
+    body={sprintf(
+      __(
+        `Resources for %s task(s) will be unlocked and will not prevent other tasks from being run. As the task(s) might be still running, it should be avoided to use this unless you are really sure the task(s) got stuck.`
+      ),
+      selectedRowsLen
+    )}
+    confirmationMessage={confirmationMessage}
+    confirmAction={__('Force Unlock')}
+    onClick={onClick}
+    confirmType="danger"
+    isOpen={isOpen}
+    setModalClosed={setModalClosed}
+  />
+);
+
+UnlockConfirmationModal.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  isOpen: PropTypes.bool,
+  setModalClosed: PropTypes.func,
+};
+
+ForceUnlockConfirmationModal.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  selectedRowsLen: PropTypes.number,
+  isOpen: PropTypes.bool,
+  setModalClosed: PropTypes.func,
+};
+
+UnlockConfirmationModal.defaultProps = {
+  id: UNLOCK_MODAL,
+  isOpen: false,
+  setModalClosed: () => {},
+};
+
+ForceUnlockConfirmationModal.defaultProps = {
+  id: FORCE_UNLOCK_MODAL,
+  selectedRowsLen: 1,
+  isOpen: false,
+  setModalClosed: () => {},
 };
 
 export default ClickConfirmation;