foreman-tasks 11.0.6 → 11.0.7

data/webpack/ForemanTasks/Components/TasksTable/Components/ConfirmModal/ConfirmModalSelectors.js

@@ -1,4 +1,3 @@
-import { selectForemanTasks } from '../../../../ForemanTasksSelectors';
 import {
   selectTasksTableQuery,
   selectResults,
@@ -6,15 +5,7 @@ import {
   selectItemCount,
   selectAllRowsSelected,
 } from '../../TasksTableSelectors';
-import { RESUME_MODAL, CANCEL_MODAL } from '../../TasksTableConstants';
-import { FORCE_UNLOCK_MODAL } from '../../../TaskActions/TaskActionsConstants';
 
-export const selectCofirmModal = state =>
-  selectForemanTasks(state).confirmModal || {};
-
-export const selectActionType = state => selectCofirmModal(state).actionType;
-export const selectActionText = state => selectCofirmModal(state).actionText;
-export const selectActionState = state => selectCofirmModal(state).actionState;
 export const selectClicked = state =>
   selectTasksTableQuery(state).clicked || {};
 
@@ -32,13 +23,6 @@ export const selectSelectedTasks = state => {
 };
 
 export const selectSelectedRowsLen = state => {
-  if (
-    [CANCEL_MODAL, RESUME_MODAL, FORCE_UNLOCK_MODAL].includes(
-      selectActionType(state)
-    )
-  ) {
-    return 1;
-  }
   if (selectAllRowsSelected(state)) {
     return selectItemCount(state);
   }

data/webpack/ForemanTasks/Components/TasksTable/Components/ConfirmModal/GenericConfirmModal.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+
+export const GenericConfirmModal = ({
+  isModalOpen,
+  setIsModalOpen,
+  title,
+  message,
+  onConfirm,
+  confirmButtonVariant,
+  ouiaIdPrefix,
+}) => {
+  const dispatch = useDispatch();
+
+  const handleConfirm = () => {
+    const action = onConfirm();
+    if (action) {
+      dispatch(action);
+    }
+    setIsModalOpen(false);
+  };
+
+  return (
+    <Modal
+      title={title}
+      variant={ModalVariant.small}
+      isOpen={isModalOpen}
+      onClose={() => setIsModalOpen(false)}
+      ouiaId={`${ouiaIdPrefix}-modal`}
+      actions={[
+        <Button
+          ouiaId={`${ouiaIdPrefix}-modal-confirm-button`}
+          key="confirm"
+          className="confirm-button"
+          variant={confirmButtonVariant}
+          onClick={handleConfirm}
+        >
+          {__('Yes')}
+        </Button>,
+        <Button
+          ouiaId={`${ouiaIdPrefix}-modal-cancel-button`}
+          key="cancel"
+          variant="secondary"
+          onClick={() => setIsModalOpen(false)}
+        >
+          {__('No')}
+        </Button>,
+      ]}
+    >
+      {message}
+    </Modal>
+  );
+};
+
+GenericConfirmModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  setIsModalOpen: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  confirmButtonVariant: PropTypes.string,
+  ouiaIdPrefix: PropTypes.string.isRequired,
+};
+
+GenericConfirmModal.defaultProps = {
+  confirmButtonVariant: 'primary',
+};

data/webpack/ForemanTasks/Components/TasksTable/Components/ConfirmModal/__test__/ConfirmModalSelectors.test.js

@@ -1,8 +1,6 @@
 import { testSelectorsSnapshotWithFixtures } from '@theforeman/test';
 import {
-  selectActionText,
-  selectActionState,
-  selectActionType,
+  selectClicked,
   selectSelectedTasks,
   selectSelectedRowsLen,
 } from '../ConfirmModalSelectors';
@@ -10,11 +8,6 @@ import { CANCEL_MODAL } from '../../../TasksTableConstants';
 
 const state = {
   foremanTasks: {
-    confirmModal: {
-      actionText: 'some-text',
-      actionState: 'some-state',
-      actionType: 'some-type',
-    },
     tasksTable: {
       tasksTableContent: {
         results: [
@@ -28,26 +21,44 @@ const state = {
         ],
         itemCount: 10,
       },
-      tasksTableQuery: { selectedRows: [1, 2, 3] },
+      tasksTableQuery: {
+        selectedRows: [1, 2, 3],
+        clicked: { taskId: '1', taskName: 'test-task' },
+        allRowsSelected: false,
+      },
     },
   },
 };
 
 const fixtures = {
-  'should select actionText': () => selectActionText(state),
-  'should select actionState': () => selectActionState(state),
-  'should select actionType': () => selectActionType(state),
+  'should select clicked': () => selectClicked(state),
   'should select selectedTasks': () => selectSelectedTasks(state),
   'should select selectedRowsLen 1': () =>
     selectSelectedRowsLen({
       ...state,
-      foremanTasks: { confirmModal: { actionType: CANCEL_MODAL } },
+      foremanTasks: {
+        tasksTable: {
+          ...state.foremanTasks.tasksTable,
+          tasksTableQuery: {
+            ...state.foremanTasks.tasksTable.tasksTableQuery,
+            clicked: { modalType: CANCEL_MODAL },
+          },
+        },
+      },
     }),
   'should select selectedRowsLen all': () => selectSelectedRowsLen(state),
   'should select selectedRowsLen some': () =>
     selectSelectedRowsLen({
       ...state,
-      tasksTable: { tasksTableQuery: { allRowsSelected: true } },
+      foremanTasks: {
+        tasksTable: {
+          ...state.foremanTasks.tasksTable,
+          tasksTableQuery: {
+            ...state.foremanTasks.tasksTable.tasksTableQuery,
+            allRowsSelected: true,
+          },
+        },
+      },
     }),
 };
 

data/webpack/ForemanTasks/Components/TasksTable/Components/ConfirmModal/__test__/__snapshots__/ConfirmModalSelectors.test.js.snap

@@ -1,16 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TasksDashboard - Selectors should select actionState 1`] = `"some-state"`;
-
-exports[`TasksDashboard - Selectors should select actionText 1`] = `"some-text"`;
-
-exports[`TasksDashboard - Selectors should select actionType 1`] = `"some-type"`;
+exports[`TasksDashboard - Selectors should select clicked 1`] = `
+Object {
+  "taskId": "1",
+  "taskName": "test-task",
+}
+`;
 
-exports[`TasksDashboard - Selectors should select selectedRowsLen 1 1`] = `1`;
+exports[`TasksDashboard - Selectors should select selectedRowsLen 1 1`] = `3`;
 
 exports[`TasksDashboard - Selectors should select selectedRowsLen all 1`] = `3`;
 
-exports[`TasksDashboard - Selectors should select selectedRowsLen some 1`] = `3`;
+exports[`TasksDashboard - Selectors should select selectedRowsLen some 1`] = `0`;
 
 exports[`TasksDashboard - Selectors should select selectedTasks 1`] = `
 Array [

data/webpack/ForemanTasks/Components/TasksTable/Components/ConfirmModal/__test__/index.test.js

@@ -0,0 +1,409 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import {
+  CancelModal,
+  ResumeModal,
+  CancelSelectedModal,
+  ResumeSelectedModal,
+  ForceUnlockModal,
+  ForceUnlockSelectedModal,
+} from '../index';
+
+// Mock the action creators
+jest.mock('../../../TasksTableActions', () => ({
+  cancelTask: jest.fn(() => ({ type: 'CANCEL_TASK' })),
+  resumeTask: jest.fn(() => ({ type: 'RESUME_TASK' })),
+}));
+
+jest.mock('../../../TasksBulkActions', () => ({
+  bulkCancelBySearch: jest.fn(() => ({ type: 'BULK_CANCEL_BY_SEARCH' })),
+  bulkCancelById: jest.fn(() => ({ type: 'BULK_CANCEL_BY_ID' })),
+  bulkResumeBySearch: jest.fn(() => ({ type: 'BULK_RESUME_BY_SEARCH' })),
+  bulkResumeById: jest.fn(() => ({ type: 'BULK_RESUME_BY_ID' })),
+  bulkForceUnlockBySearch: jest.fn(() => ({
+    type: 'BULK_FORCE_UNLOCK_BY_SEARCH',
+  })),
+  bulkForceUnlockById: jest.fn(() => ({ type: 'BULK_FORCE_UNLOCK_BY_ID' })),
+}));
+
+// Mock the selectors
+jest.mock('../ConfirmModalSelectors', () => ({
+  selectClicked: jest.fn(() => ({ taskId: '123', taskName: 'Test Task' })),
+  selectSelectedTasks: jest.fn(() => [
+    { id: 1, name: 'Task 1' },
+    { id: 2, name: 'Task 2' },
+  ]),
+  selectSelectedRowsLen: jest.fn(() => 2),
+}));
+
+jest.mock('../../../TasksTableSelectors', () => ({
+  selectAllRowsSelected: jest.fn(() => false),
+}));
+
+// Create a mock store
+const createMockStore = (initialState = {}) => {
+  return configureStore({
+    reducer: {
+      foremanTasks: (state = initialState, action) => state,
+    },
+    preloadedState: {
+      foremanTasks: initialState,
+    },
+  });
+};
+
+// Test wrapper component
+const TestWrapper = ({ children, store }) => (
+  <Provider store={store}>{children}</Provider>
+);
+
+describe('ConfirmModal Components', () => {
+  const defaultProps = {
+    isModalOpen: true,
+    setIsModalOpen: jest.fn(),
+    url: '/api/tasks',
+    parentTaskID: 'parent-123',
+  };
+
+  const mockStore = createMockStore();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('CancelModal', () => {
+    it('renders with correct title and content', () => {
+      render(
+        <TestWrapper store={mockStore}>
+          <CancelModal {...defaultProps} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Cancel Task')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /This will cancel task "Test Task", putting it in the stopped state/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText('No')).toBeInTheDocument();
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('calls setIsModalOpen when cancel button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <CancelModal {...defaultProps} setIsModalOpen={setIsModalOpen} />
+        </TestWrapper>
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'No' });
+      fireEvent.click(cancelButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+
+    it('calls setIsModalOpen when confirm button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <CancelModal {...defaultProps} setIsModalOpen={setIsModalOpen} />
+        </TestWrapper>
+      );
+
+      const confirmButton = screen.getByRole('button', { name: 'Yes' });
+      fireEvent.click(confirmButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+
+    it('does not render when isModalOpen is false', () => {
+      render(
+        <TestWrapper store={mockStore}>
+          <CancelModal {...defaultProps} isModalOpen={false} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByText('Cancel Task')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('ResumeModal', () => {
+    it('renders with correct title and content', () => {
+      render(
+        <TestWrapper store={mockStore}>
+          <ResumeModal {...defaultProps} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Resume Task')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /This will resume task "Test Task", putting it in the running state/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText('No')).toBeInTheDocument();
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('calls setIsModalOpen when cancel button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <ResumeModal {...defaultProps} setIsModalOpen={setIsModalOpen} />
+        </TestWrapper>
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'No' });
+      fireEvent.click(cancelButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+
+    it('calls setIsModalOpen when confirm button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <ResumeModal {...defaultProps} setIsModalOpen={setIsModalOpen} />
+        </TestWrapper>
+      );
+
+      const confirmButton = screen.getByRole('button', { name: 'Yes' });
+      fireEvent.click(confirmButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('CancelSelectedModal', () => {
+    const selectedProps = {
+      ...defaultProps,
+      uriQuery: { search: 'test' },
+    };
+
+    it('renders with correct title and content', () => {
+      render(
+        <TestWrapper store={mockStore}>
+          <CancelSelectedModal {...selectedProps} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Cancel Selected Tasks')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /This will cancel 2 task\(s\), putting them in the stopped state/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText('No')).toBeInTheDocument();
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('calls setIsModalOpen when cancel button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <CancelSelectedModal
+            {...selectedProps}
+            setIsModalOpen={setIsModalOpen}
+          />
+        </TestWrapper>
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'No' });
+      fireEvent.click(cancelButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+
+    it('calls setIsModalOpen when confirm button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <CancelSelectedModal
+            {...selectedProps}
+            setIsModalOpen={setIsModalOpen}
+          />
+        </TestWrapper>
+      );
+
+      const confirmButton = screen.getByRole('button', { name: 'Yes' });
+      fireEvent.click(confirmButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('ResumeSelectedModal', () => {
+    const selectedProps = {
+      ...defaultProps,
+      uriQuery: { search: 'test' },
+    };
+
+    it('renders with correct title and content', () => {
+      render(
+        <TestWrapper store={mockStore}>
+          <ResumeSelectedModal {...selectedProps} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Resume Selected Tasks')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /This will resume 2 task\(s\), putting them in the running state/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText('No')).toBeInTheDocument();
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('calls setIsModalOpen when cancel button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <ResumeSelectedModal
+            {...selectedProps}
+            setIsModalOpen={setIsModalOpen}
+          />
+        </TestWrapper>
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'No' });
+      fireEvent.click(cancelButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('ForceUnlockModal', () => {
+    it('renders with correct title and content', () => {
+      render(
+        <TestWrapper store={mockStore}>
+          <ForceUnlockModal {...defaultProps} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Force Unlock Task')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /This will force unlock task "Test Task". This may cause harm and should be used with caution/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText('No')).toBeInTheDocument();
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('calls setIsModalOpen when cancel button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <ForceUnlockModal {...defaultProps} setIsModalOpen={setIsModalOpen} />
+        </TestWrapper>
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'No' });
+      fireEvent.click(cancelButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('ForceUnlockSelectedModal', () => {
+    const selectedProps = {
+      ...defaultProps,
+      uriQuery: { search: 'test' },
+    };
+
+    it('renders with correct title and content', () => {
+      render(
+        <TestWrapper store={mockStore}>
+          <ForceUnlockSelectedModal {...selectedProps} />
+        </TestWrapper>
+      );
+
+      expect(
+        screen.getByText('Force Unlock Selected Tasks')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /This will force unlock 2 task\(s\). This may cause harm and should be used with caution/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText('No')).toBeInTheDocument();
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('calls setIsModalOpen when cancel button is clicked', () => {
+      const setIsModalOpen = jest.fn();
+
+      render(
+        <TestWrapper store={mockStore}>
+          <ForceUnlockSelectedModal
+            {...selectedProps}
+            setIsModalOpen={setIsModalOpen}
+          />
+        </TestWrapper>
+      );
+
+      const cancelButton = screen.getByRole('button', { name: 'No' });
+      fireEvent.click(cancelButton);
+
+      expect(setIsModalOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes for all modals', () => {
+      const { rerender } = render(
+        <TestWrapper store={mockStore}>
+          <CancelModal {...defaultProps} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'No' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Yes' })).toBeInTheDocument();
+
+      // Test other modals
+      rerender(
+        <TestWrapper store={mockStore}>
+          <ResumeModal {...defaultProps} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'No' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Yes' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Modal Visibility', () => {
+    it('handles modal visibility correctly for all components', () => {
+      const { rerender } = render(
+        <TestWrapper store={mockStore}>
+          <CancelModal {...defaultProps} isModalOpen={false} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+      rerender(
+        <TestWrapper store={mockStore}>
+          <ResumeModal {...defaultProps} isModalOpen={false} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+});

data/webpack/ForemanTasks/Components/TasksTable/Components/ConfirmModal/createBulkTaskModal.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { sprintf } from 'foremanReact/common/I18n';
+import {
+  selectSelectedTasks,
+  selectSelectedRowsLen,
+} from './ConfirmModalSelectors';
+import { selectAllRowsSelected } from '../../TasksTableSelectors';
+import { GenericConfirmModal } from './GenericConfirmModal';
+
+export const createBulkTaskModal = ({
+  bulkActionBySearch,
+  bulkActionById,
+  title,
+  messageTemplate,
+  confirmButtonVariant = 'primary',
+  ouiaIdPrefix,
+}) => {
+  const BulkTaskModal = ({
+    isModalOpen,
+    setIsModalOpen,
+    url,
+    uriQuery,
+    parentTaskID,
+  }) => {
+    const allRowsSelected = useSelector(selectAllRowsSelected);
+    const selectedTasks = useSelector(selectSelectedTasks);
+    const selectedRowsLen = useSelector(selectSelectedRowsLen);
+
+    const handleConfirm = () =>
+      allRowsSelected
+        ? bulkActionBySearch({ query: uriQuery, parentTaskID })
+        : bulkActionById({
+            selected: selectedTasks,
+            url,
+            parentTaskID,
+          });
+
+    return (
+      <GenericConfirmModal
+        isModalOpen={isModalOpen}
+        setIsModalOpen={setIsModalOpen}
+        title={title}
+        message={sprintf(messageTemplate, { number: selectedRowsLen })}
+        onConfirm={handleConfirm}
+        confirmButtonVariant={confirmButtonVariant}
+        ouiaIdPrefix={ouiaIdPrefix}
+      />
+    );
+  };
+
+  BulkTaskModal.propTypes = {
+    isModalOpen: PropTypes.bool.isRequired,
+    setIsModalOpen: PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired,
+    uriQuery: PropTypes.object,
+    parentTaskID: PropTypes.string,
+  };
+
+  BulkTaskModal.defaultProps = {
+    uriQuery: {},
+    parentTaskID: null,
+  };
+
+  return BulkTaskModal;
+};