foreman-tasks 11.0.7 → 12.0.0

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

@@ -2,7 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { capitalize } from 'lodash';
 import classNames from 'classnames';
-import { Icon, Button } from 'patternfly-react';
+import { Icon, Button } from '@patternfly/react-core';
+import {
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  CheckIcon,
+} from '@patternfly/react-icons';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
   TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
@@ -15,9 +21,21 @@ import {
 } from '../../../../TasksDashboardPropTypes';
 
 const resultIcons = {
-  error: <Icon type="pf" name="error-circle-o" />,
-  warning: <Icon type="pf" name="warning-triangle-o" />,
-  success: <Icon type="pf" name="ok" />,
+  error: (
+    <Icon status="danger" size="sm">
+      <ExclamationCircleIcon />
+    </Icon>
+  ),
+  warning: (
+    <Icon status="warning" size="sm">
+      <ExclamationTriangleIcon />
+    </Icon>
+  ),
+  success: (
+    <Icon status="success" size="sm">
+      <CheckIcon />
+    </Icon>
+  ),
 };
 
 const StoppedTableCells = (data, query, time, updateQuery) =>
@@ -35,51 +53,68 @@ const StoppedTableCells = (data, query, time, updateQuery) =>
       state && !(state === STOPPED && !query.result) && !activeLast;
 
     return (
-      <tr key={result}>
-        <td>
-          {resultIcons[result]}
-          {capitalize(result)}
-        </td>
-        <td
+      <Tr key={result} ouiaId={`stopped-table-row-${result}`}>
+        <Td dataLabel={__('Result')}>
+          {resultIcons[result]} {capitalize(result)}
+        </Td>
+        <Td
+          dataLabel={__('Total')}
           className={classNames('data-col', {
             active: active && mode !== LAST,
             'not-focused': notFocusedTotal,
           })}
-          onClick={() => updateQuery({ state: STOPPED, result })}
         >
-          <Button bsStyle="link">{total}</Button>
-        </td>
-        <td
+          <Button
+            ouiaId={`stopped-table-button-${result}-total`}
+            variant="link"
+            onClick={() => updateQuery({ state: STOPPED, result })}
+          >
+            {total}
+          </Button>
+        </Td>
+        <Td
+          dataLabel={getQueryValueText(time)}
           className={classNames('data-col', {
             active: activeLast,
             'not-focused': notFocusedLast,
           })}
-          onClick={() =>
-            updateQuery({
-              state: STOPPED,
-              result,
-              mode: LAST,
-              time,
-            })
-          }
         >
-          <Button bsStyle="link">{last}</Button>
-        </td>
-      </tr>
+          <Button
+            ouiaId={`stopped-table-button-${result}-${time}`}
+            onClick={() =>
+              updateQuery({
+                state: STOPPED,
+                result,
+                mode: LAST,
+                time,
+              })
+            }
+            variant="link"
+          >
+            {last}
+          </Button>
+        </Td>
+      </Tr>
     );
   });
 
 export const StoppedTable = ({ data, query, time, updateQuery }) => (
-  <table className="table table-bordered table-striped stopped-table">
-    <thead>
-      <tr>
-        <th />
-        <th>{__('Total')}</th>
-        <th>{getQueryValueText(time)}</th>
-      </tr>
-    </thead>
-    <tbody>{StoppedTableCells(data, query, time, updateQuery)}</tbody>
-  </table>
+  <Table
+    ouiaId="stopped-table"
+    className="stopped-table"
+    variant="compact"
+    isStriped
+    aria-label={__('Stopped tasks by result')}
+  >
+    <Thead>
+      <Tr ouiaId="stopped-table-header">
+        <Th aria-label={__('Result')} />
+        <Th aria-label={__('Total')}>{__('Total')}</Th>
+        <Th aria-label={getQueryValueText(time)}>{getQueryValueText(time)}</Th>
+      </Tr>
+    </Thead>
+    <Tbody>{StoppedTableCells(data, query, time, updateQuery)}</Tbody>
+  </Table>
 );
 
 StoppedTable.propTypes = {

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/TasksLabelsRow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Button, Label } from 'patternfly-react';
+import { Label, LabelGroup } from '@patternfly/react-core';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -24,23 +24,18 @@ const TasksLabelsRow = ({ query, updateQuery }) => {
   const queryEntries = Object.entries(query);
 
   return (
-    <Row className="tasks-labels-row">
-      <span className="title">{__('Active Filters:')}</span>
+    <LabelGroup
+      className="tasks-labels-row"
+      categoryName={__('Active Filters')}
+      isClosable
+      onClick={() => updateQuery({})}
+    >
       {queryEntries.map(([key, value]) => (
-        <Label
-          bsStyle="info"
-          key={key}
-          onRemoveClick={() => onDeleteClick(key)}
-        >
+        <Label color="blue" key={key} onClose={() => onDeleteClick(key)}>
           {getLabelText(key, value)}
         </Label>
       ))}
-      {queryEntries.length > 0 && (
-        <Button bsStyle="link" onClick={() => updateQuery({})}>
-          {__('Clear All Filters')}
-        </Button>
-      )}
-    </Row>
+    </LabelGroup>
   );
 };
 

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/TasksLabelsRow.scss

@@ -1,26 +1,6 @@
-@import 'foremanReact/common/variables';
-
 .tasks-labels-row {
-  margin: 0;
-  padding: 0 10px;
-  .title {
-    font-weight: 600;
-    font-size: 13px;
-  }
-  .label {
-    font-size: 100%;
-
-    margin-left: 5px;
-    margin-right: 5px;
-    a {
-      padding-left: 10px;
-    }
-  }
-  .pficon-close {
-    color: $color-pf-white;
-  }
-  .compound-label-pf {
-    margin-left: 0;
-    margin: 10px;
+  align-items: center;
+  ul {
+    margin: 0;
   }
 }

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/TasksLabelsRow.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { testComponentSnapshotsWithFixtures, shallow } from '@theforeman/test';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { getQueryKeyText, getQueryValueText } from '../../TasksDashboardHelper';
 import TasksLabelsRow from './TasksLabelsRow';
@@ -9,46 +10,52 @@ jest.mock('../../TasksDashboardHelper');
 getQueryKeyText.mockImplementation(val => val);
 getQueryValueText.mockImplementation(val => val);
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with props': {
-    query: { some: 'query' },
-    updateQuery: jest.fn(),
-  },
-};
-
 describe('TasksLabelsRow', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(TasksLabelsRow, fixtures));
+  describe('rendering', () => {
+    it('renders nothing when query is empty', () => {
+      render(<TasksLabelsRow />);
+      expect(screen.queryByText('Active Filters')).not.toBeInTheDocument();
+    });
+
+    it('renders Active Filters category and label when query has entries', () => {
+      render(
+        <TasksLabelsRow query={{ some: 'query' }} updateQuery={jest.fn()} />
+      );
+      expect(screen.getByText('Active Filters')).toBeInTheDocument();
+      expect(screen.getByText('some = query')).toBeInTheDocument();
+    });
+  });
 
   describe('triggering', () => {
-    it('should trigger updateQuery when label delete-click', () => {
+    it('calls updateQuery with remaining query when a label close button is clicked', () => {
       const updateQuery = jest.fn();
       const query = { some: 'query', someOther: 'some-query' };
 
-      const component = shallow(
-        <TasksLabelsRow query={query} updateQuery={updateQuery} />
-      );
-      const labels = component.find('Label');
-
-      const firstLabel = labels.first();
-      const secondLabel = labels.at(1);
+      render(<TasksLabelsRow query={query} updateQuery={updateQuery} />);
 
-      firstLabel.simulate('removeClick');
+      const firstLabelCloseButton = screen.getByRole('button', {
+        name: /close some = query/i,
+      });
+      fireEvent.click(firstLabelCloseButton);
       expect(updateQuery).toHaveBeenCalledWith({ someOther: 'some-query' });
 
-      secondLabel.simulate('removeClick');
+      const secondLabelCloseButton = screen.getByRole('button', {
+        name: /close someOther = some-query/i,
+      });
+      fireEvent.click(secondLabelCloseButton);
       expect(updateQuery).toHaveBeenCalledWith({ some: 'query' });
     });
 
-    it('should trigger updateQuery when -clear-all- click', () => {
+    it('calls updateQuery with empty object when close label group button is clicked', () => {
       const updateQuery = jest.fn();
       const query = { some: 'query', someOther: 'some-query' };
 
-      const component = shallow(
-        <TasksLabelsRow query={query} updateQuery={updateQuery} />
-      );
-      component.find('Button').simulate('click');
+      render(<TasksLabelsRow query={query} updateQuery={updateQuery} />);
+
+      const closeGroupButton = screen.getByRole('button', {
+        name: /close label group/i,
+      });
+      fireEvent.click(closeGroupButton);
 
       expect(updateQuery).toHaveBeenCalledWith({});
     });

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { DropdownButton, MenuItem } from 'patternfly-react';
 import PropTypes from 'prop-types';
+import { SimpleDropdown } from '@patternfly/react-templates';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 export const ActionSelectButton = ({
@@ -8,35 +9,35 @@ export const ActionSelectButton = ({
   onResume,
   onForceCancel,
   disabled,
-}) => (
-  <DropdownButton
-    title={__('Select Action')}
-    disabled={disabled}
-    id="selcted-action-type"
-  >
-    <MenuItem
-      title={__('Cancel selected tasks')}
-      onClick={onCancel}
-      eventKey="1"
-    >
-      {__('Cancel Selected')}
-    </MenuItem>
-    <MenuItem
-      title={__('Resume selected tasks')}
-      onClick={onResume}
-      eventKey="2"
-    >
-      {__('Resume Selected')}
-    </MenuItem>
-    <MenuItem
-      title={__('Force Cancel selected tasks')}
-      onClick={onForceCancel}
-      eventKey="3"
-    >
-      {__('Force Cancel Selected')}
-    </MenuItem>
-  </DropdownButton>
-);
+}) => {
+  const buttons = [
+    {
+      content: __('Cancel Selected'),
+      onClick: onCancel,
+      value: 1,
+    },
+    {
+      content: __('Resume Selected'),
+      onClick: onResume,
+      value: 2,
+    },
+    {
+      content: __('Force Cancel Selected'),
+      onClick: onForceCancel,
+      value: 3,
+    },
+  ];
+  return (
+    <SimpleDropdown
+      isDisabled={disabled}
+      ouiaId="tasks-table-action-select-dropdown"
+      toggleVariant="plain"
+      popperProps={{ position: 'right' }}
+      initialItems={buttons}
+      toggleContent={<EllipsisVIcon aria-hidden="true" />}
+    />
+  );
+};
 
 ActionSelectButton.propTypes = {
   disabled: PropTypes.bool,

data/webpack/ForemanTasks/Components/TasksTable/Components/__test__/ActionSelectButton.test.js

@@ -1,14 +1,81 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { ActionSelectButton } from '../ActionSelectButton';
 
-const fixtures = {
-  'renders with minimal props': {
-    onCancel: jest.fn(),
-    onResume: jest.fn(),
-    onForceCancel: jest.fn(),
-  },
-};
+const mockOnCancel = jest.fn();
+const mockOnResume = jest.fn();
+const mockOnForceCancel = jest.fn();
+
+describe('ActionSelectButton', () => {
+  const renderComponent = (props = {}) => {
+    const defaultProps = {
+      onCancel: mockOnCancel,
+      onResume: mockOnResume,
+      onForceCancel: mockOnForceCancel,
+      disabled: false,
+    };
+    return render(<ActionSelectButton {...defaultProps} {...props} />);
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with minimal props', () => {
+    renderComponent();
+
+    const toggle = screen.getByRole('button');
+    expect(toggle).toBeInTheDocument();
+    expect(toggle).not.toBeDisabled();
+  });
+
+  it('renders disabled when disabled prop is true', () => {
+    renderComponent({ disabled: true });
+
+    const toggle = screen.getByRole('button');
+    expect(toggle).toBeDisabled();
+  });
+
+  it('opens dropdown and shows action options when toggle is clicked', async () => {
+    renderComponent();
+    const toggle = screen.getByRole('button');
+    fireEvent.click(toggle);
+
+    await waitFor(() => {
+      expect(screen.getByText('Cancel Selected')).toBeInTheDocument();
+      expect(screen.getByText('Resume Selected')).toBeInTheDocument();
+      expect(screen.getByText('Force Cancel Selected')).toBeInTheDocument();
+    });
+  });
+
+  it('calls onCancel when Cancel Selected is clicked', async () => {
+    renderComponent();
+    fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => {
+      expect(screen.getByText('Cancel Selected')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Cancel Selected'));
+    expect(mockOnCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onResume when Resume Selected is clicked', async () => {
+    renderComponent();
+    fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => {
+      expect(screen.getByText('Resume Selected')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Resume Selected'));
+    expect(mockOnResume).toHaveBeenCalledTimes(1);
+  });
 
-describe('ActionSelectButton', () =>
-  testComponentSnapshotsWithFixtures(ActionSelectButton, fixtures));
+  it('calls onForceCancel when Force Cancel Selected is clicked', async () => {
+    renderComponent();
+    fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => {
+      expect(screen.getByText('Force Cancel Selected')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Force Cancel Selected'));
+    expect(mockOnForceCancel).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import URI from 'urijs';
 import { getURIsearch } from 'foremanReact/common/urlHelpers';
-import { Spinner, Button, Icon } from 'patternfly-react';
+import { Button, ToolbarItem, Spinner } from '@patternfly/react-core';
+import { RedoIcon } from '@patternfly/react-icons';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 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 TasksDashboard from '../TasksDashboard';
 import TasksTable from './TasksTable';
@@ -127,25 +127,44 @@ const TasksTablePage = ({
         header={createHeader(props.actionName)}
         breadcrumbOptions={getBreadcrumbs(props.actionName)}
         toolbarButtons={
-          <React.Fragment>
-            <Button onClick={() => props.reloadPage(url, props.parentTaskID)}>
-              <Icon type="fa" name="refresh" /> {__('Refresh Data')}
-            </Button>
-            {props.status === STATUS.PENDING && <Spinner size="md" loading />}
-            <ExportButton
-              url={getCSVurl(history.location.pathname, uriQuery)}
-              title={__('Export All')}
-            />
-            <ActionSelectButton
-              disabled={
-                !props.permissions.edit ||
-                !(props.selectedRows.length || props.allRowsSelected)
-              }
-              onCancel={() => openModal(CANCEL_SELECTED_MODAL)}
-              onResume={() => openModal(RESUME_SELECTED_MODAL)}
-              onForceCancel={() => openModal(FORCE_UNLOCK_SELECTED_MODAL)}
-            />
-          </React.Fragment>
+          <>
+            <ToolbarItem>
+              <Button
+                ouiaId="tasks-table-refresh-data"
+                variant="primary"
+                onClick={() => props.reloadPage(url, props.parentTaskID)}
+                icon={<RedoIcon />}
+              >
+                {__('Refresh Data')}
+              </Button>
+            </ToolbarItem>
+            {props.status === STATUS.PENDING && (
+              <ToolbarItem>
+                <Spinner size="lg" />
+              </ToolbarItem>
+            )}
+            <ToolbarItem>
+              <Button
+                ouiaId="tasks-table-export-all"
+                variant="secondary"
+                component="a"
+                href={getCSVurl(history.location.pathname, uriQuery)}
+              >
+                {__('Export All')}
+              </Button>
+            </ToolbarItem>
+            <ToolbarItem>
+              <ActionSelectButton
+                disabled={
+                  !props.permissions.edit ||
+                  !(props.selectedRows.length || props.allRowsSelected)
+                }
+                onCancel={() => openModal(CANCEL_SELECTED_MODAL)}
+                onResume={() => openModal(RESUME_SELECTED_MODAL)}
+                onForceCancel={() => openModal(FORCE_UNLOCK_SELECTED_MODAL)}
+              />
+            </ToolbarItem>
+          </>
         }
         searchQuery={getURIsearch()}
         beforeToolbarComponent={