foreman_rh_cloud 14.1.3 → 14.2.1

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableActions.js

@@ -96,8 +96,7 @@ export const clearAllSelection = () => dispatch => {
 };
 
 export const onTableSort = (columns, index, direction) => {
-  // The checkbox column shifts the data columns by 1;
-  const { sortKey } = columns[index - 1];
+  const { sortKey } = columns[index];
   return fetchInsights({
     sortBy: sortKey,
     sortOrder: direction,

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js

@@ -1,7 +1,6 @@
 /* eslint-disable camelcase */
 import React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
-import { sortable, cellWidth } from '@patternfly/react-table';
+import { DropdownItem } from '@patternfly/react-core';
 import { AnsibeTowerIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
@@ -9,26 +8,23 @@ import DropdownToggle from '../../../common/DropdownToggle';
 import InsightsSection from './InsightsSection';
 import InsightsLabel from './InsightsLabel';
 
-export const totalRiskFormatter = ({ title: totalRisk }) => ({
-  children: (
-    <InsightsSection className="insights-total-risk" type="icon-group">
-      <InsightsLabel value={totalRisk} />
-    </InsightsSection>
-  ),
-});
+export const totalRiskFormatter = totalRisk => (
+  <InsightsSection className="insights-total-risk" type="icon-group">
+    <InsightsLabel value={totalRisk} />
+  </InsightsSection>
+);
 
-export const hasPlaybookFormatter = ({ title: hasPlaybook }) => ({
-  children: hasPlaybook ? (
+export const hasPlaybookFormatter = hasPlaybook =>
+  hasPlaybook ? (
     <span className="td-insights-remediate-playbook">
       <AnsibeTowerIcon />
       {__('Playbook')}
     </span>
   ) : (
     <span className="td-insights-remediate-manual">{__('Manual')}</span>
-  ),
-});
+  );
 
-export const actionsFormatter = (props, { rowData = {} }) => {
+export const actionsFormatter = rowData => {
   const { recommendationUrl, accessRHUrl, isLocalAdvisorEngine } = rowData;
   const dropdownItems = [];
 
@@ -51,9 +47,7 @@ export const actionsFormatter = (props, { rowData = {} }) => {
       </DropdownItem>
     );
 
-  return {
-    children: <DropdownToggle items={dropdownItems} />,
-  };
+  return <DropdownToggle items={dropdownItems} />;
 };
 
 export const columns = [
@@ -61,39 +55,39 @@ export const columns = [
     id: 'hostname',
     sortKey: 'hostname',
     title: __('Hostname'),
-    transforms: [cellWidth(20), sortable],
+    width: 20,
   },
   {
     id: 'recommendation',
     sortKey: 'title',
     title: __('Recommendation'),
-    transforms: [cellWidth(50), sortable],
+    width: 50,
   },
   {
-    id: 'total risk',
+    id: 'total_risk',
     sortKey: 'total_risk',
     title: __('Total risk'),
-    transforms: [cellWidth(15), sortable],
-    cellTransforms: [totalRiskFormatter],
+    width: 15,
+    formatter: totalRiskFormatter,
   },
   {
-    id: 'remediate',
+    id: 'has_playbook',
     title: __('Remediate'),
-    transforms: [cellWidth(10)],
-    cellTransforms: [hasPlaybookFormatter],
+    width: 10,
+    formatter: hasPlaybookFormatter,
   },
   {
     id: 'actions',
     title: '',
-    transforms: [cellWidth(5)],
-    cellTransforms: [actionsFormatter],
+    width: 5,
+    formatter: actionsFormatter,
   },
 ];
 
 export const getColumnsWithoutHostname = () => {
-  const nextCols = columns.slice(1);
-  nextCols[0].transforms = [cellWidth(70), sortable];
-  return nextCols;
+  return columns
+    .slice(1)
+    .map(col => (col.id === 'recommendation' ? { ...col, width: 70 } : col));
 };
 
 export const paginationTitles = {

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableHelpers.js

@@ -6,7 +6,6 @@ export const modifySelectedRows = (
   hits,
   selectedIds,
   showSelectAllAlert,
-  hideHost,
   isLocalAdvisorEngine
 ) => {
   if (hits.length === 0) return [];
@@ -24,12 +23,13 @@ export const modifySelectedRows = (
         solution_url,
       }) => {
         const disableCheckbox = !has_playbook;
-        const cells = [hostname, title, total_risk, has_playbook, results_url];
-        if (hideHost) cells.shift();
         return {
-          cells,
           disableCheckbox,
           id,
+          hostname,
+          recommendation: title,
+          total_risk,
+          has_playbook,
           /** The main table checkbox will be seen as selected only if all rows are selected,
            * in this case we need to select also the disabled once and hide it with css */
           selected: selectedIds[id] || (disableCheckbox && showSelectAllAlert),
@@ -45,8 +45,7 @@ export const getSortColumnIndex = (columns, sortBy) => {
   let colIndex = 0;
   columns.forEach((col, index) => {
     if (col.sortKey === sortBy) {
-      // The checkbox column shifts the data columns by 1;
-      colIndex = index + 1;
+      colIndex = index;
     }
   });
   return colIndex;

data/webpack/InsightsCloudSync/Components/InsightsTable/__tests__/InsightsTable.test.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import Immutable from 'seamless-immutable';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { SortByDirection } from '@patternfly/react-table';
 import InsightsTable from '../InsightsTable';
 import { tableProps } from './fixtures';
 
@@ -17,6 +19,36 @@ const buildProps = (overrides = {}) => ({
   ...overrides,
 });
 
+const selectableHits = Immutable([
+  {
+    id: 16,
+    hostname: 'foo.example.com',
+    title: 'Decreased security: Yum GPG verification disabled',
+    total_risk: 1,
+    has_playbook: true,
+    results_url: 'https://cloud.redhat.com/foo',
+    solution_url: '',
+  },
+  {
+    id: 17,
+    hostname: 'bar.example.com',
+    title: 'Installation of packages across major releases is not supported',
+    total_risk: 2,
+    has_playbook: false,
+    results_url: 'https://cloud.redhat.com/bar',
+    solution_url: 'https://access.redhat.com/node/54483',
+  },
+  {
+    id: 18,
+    hostname: 'baz.example.com',
+    title: 'Kernel package is old',
+    total_risk: 3,
+    has_playbook: true,
+    results_url: 'https://cloud.redhat.com/baz',
+    solution_url: '',
+  },
+]);
+
 describe('InsightsTable', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -36,9 +68,7 @@ describe('InsightsTable', () => {
     const props = buildProps();
     render(<InsightsTable {...props} />);
 
-    expect(
-      screen.getByRole('grid', { name: /Recommendations Table/ })
-    ).toBeTruthy();
+    expect(screen.getByLabelText(/Recommendations Table/)).toBeTruthy();
   });
 
   it('re-fetches when hostname changes', () => {
@@ -46,9 +76,7 @@ describe('InsightsTable', () => {
     const { rerender } = render(<InsightsTable {...props} />);
 
     props.fetchInsights.mockClear();
-    rerender(
-      <InsightsTable {...props} hostname="host2.example.com" />
-    );
+    rerender(<InsightsTable {...props} hostname="host2.example.com" />);
 
     expect(props.fetchInsights).toHaveBeenCalledTimes(1);
   });
@@ -57,6 +85,163 @@ describe('InsightsTable', () => {
     const props = buildProps({ hits: [], status: 'RESOLVED' });
     const { container } = render(<InsightsTable {...props} />);
 
-    expect(container.querySelector('.rh-cloud-recommendations-table')).toBeTruthy();
+    expect(
+      container.querySelector('.rh-cloud-recommendations-table')
+    ).toBeTruthy();
+  });
+
+  it('selects all enabled rows via header checkbox', () => {
+    const props = buildProps({ hits: selectableHits, selectedIds: {} });
+    render(<InsightsTable {...props} />);
+
+    const headerCheckbox = screen.getByLabelText(/Select all rows/i);
+    fireEvent.click(headerCheckbox);
+
+    expect(props.onTableSelect).toHaveBeenCalledTimes(1);
+    const [
+      isSelected,
+      rowId,
+      rowsArg,
+      selectedIdsArg,
+    ] = props.onTableSelect.mock.calls[0];
+
+    expect(isSelected).toBe(true);
+    expect(rowId).toBe(-1);
+    expect(selectedIdsArg).toEqual({});
+    expect(rowsArg).toHaveLength(selectableHits.length);
+    expect(rowsArg.map(row => row.id)).toEqual(
+      selectableHits.map(hit => hit.id)
+    );
+
+    const disabledRows = rowsArg.filter(row => row.disableCheckbox);
+    expect(disabledRows).toHaveLength(1);
+    expect(disabledRows[0].id).toBe(17);
+    expect(disabledRows[0].selected).toBe(false);
+
+    const enabledRows = rowsArg.filter(row => !row.disableCheckbox);
+    expect(enabledRows).toHaveLength(2);
+    enabledRows.forEach(row => {
+      expect(row.selected).toBe(false);
+    });
+  });
+
+  it('selects an individual row via row checkbox', () => {
+    const props = buildProps({ hits: selectableHits, selectedIds: {} });
+    render(<InsightsTable {...props} />);
+
+    const rowCheckboxes = screen.getAllByRole('checkbox').slice(1);
+    const firstSelectableCheckbox = rowCheckboxes.find(
+      checkbox => !checkbox.disabled
+    );
+    expect(firstSelectableCheckbox).toBeTruthy();
+    fireEvent.click(firstSelectableCheckbox);
+
+    expect(props.onTableSelect).toHaveBeenCalledTimes(1);
+    expect(props.onTableSelect).toHaveBeenCalledWith(
+      true,
+      0,
+      expect.any(Array),
+      {}
+    );
+  });
+
+  it('renders disabled checkbox rows as disabled', () => {
+    const props = buildProps({ hits: selectableHits, selectedIds: {} });
+    render(<InsightsTable {...props} />);
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    const rowCheckboxes = checkboxes.slice(1);
+    const disabledRowCheckboxes = rowCheckboxes.filter(
+      checkbox => checkbox.disabled
+    );
+    const enabledRowCheckboxes = rowCheckboxes.filter(
+      checkbox => !checkbox.disabled
+    );
+
+    expect(disabledRowCheckboxes).toHaveLength(1);
+    expect(enabledRowCheckboxes).toHaveLength(2);
+  });
+
+  it('reflects partial/all header checkbox state from selected ids', () => {
+    const props = buildProps({
+      hits: selectableHits,
+      selectedIds: { 16: true },
+    });
+    const { rerender } = render(<InsightsTable {...props} />);
+
+    let [headerCheckbox] = screen.getAllByRole('checkbox');
+    expect(headerCheckbox.checked).toBe(false);
+
+    rerender(<InsightsTable {...props} selectedIds={{ 16: true, 18: true }} />);
+    [headerCheckbox] = screen.getAllByRole('checkbox');
+    expect(headerCheckbox.checked).toBe(true);
+  });
+
+  it('passes normalized sort index when selection column is present', () => {
+    const props = buildProps({
+      hits: selectableHits,
+      sortBy: '',
+      sortOrder: SortByDirection.asc,
+    });
+    render(<InsightsTable {...props} />);
+
+    fireEvent.click(screen.getByRole('button', { name: /Recommendation/i }));
+
+    expect(props.onTableSort).toHaveBeenCalledTimes(1);
+    expect(props.onTableSort).toHaveBeenCalledWith(
+      expect.any(Array),
+      1,
+      expect.stringMatching(/asc|desc/)
+    );
+  });
+
+  it('passes base sort index when selection column is absent', () => {
+    const props = buildProps({
+      hits: Immutable([
+        {
+          id: 16,
+          hostname: 'foo.example.com',
+          title: 'Decreased security: Yum GPG verification disabled',
+          total_risk: 1,
+          has_playbook: false,
+          results_url: 'https://cloud.redhat.com/foo',
+          solution_url: '',
+        },
+      ]),
+      sortBy: '',
+      sortOrder: SortByDirection.asc,
+    });
+    render(<InsightsTable {...props} />);
+
+    fireEvent.click(screen.getByRole('button', { name: /Hostname/i }));
+
+    expect(props.onTableSort).toHaveBeenCalledTimes(1);
+    expect(props.onTableSort).toHaveBeenCalledWith(
+      expect.any(Array),
+      0,
+      expect.stringMatching(/asc|desc/)
+    );
+  });
+
+  it('does not trigger sort for non-sortable Actions column', () => {
+    const props = buildProps({ hits: selectableHits });
+    render(<InsightsTable {...props} />);
+
+    const actionsHeader = screen.getByText(/Actions/i).closest('th');
+    expect(actionsHeader).toBeTruthy();
+    fireEvent.click(actionsHeader);
+
+    expect(props.onTableSort).not.toHaveBeenCalled();
+  });
+
+  it('does not apply sort aria state for invalid sortOrder', () => {
+    const props = buildProps({
+      hits: selectableHits,
+      sortBy: 'total_risk',
+      sortOrder: 'INVALID_DIRECTION',
+    });
+    const { container } = render(<InsightsTable {...props} />);
+
+    expect(container.querySelector('[aria-sort]')).toBeNull();
   });
 });

data/webpack/InsightsCloudSync/Components/InsightsTable/__tests__/InsightsTableActions.test.js

@@ -16,7 +16,10 @@ import {
 } from '../InsightsTableConstants';
 
 jest.mock('connected-react-router', () => ({
-  push: jest.fn(args => ({ type: '@@router/CALL_HISTORY_METHOD', payload: args })),
+  push: jest.fn(args => ({
+    type: '@@router/CALL_HISTORY_METHOD',
+    payload: args,
+  })),
 }));
 
 const buildGetState = (queryOverrides = {}) => () => ({

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationHelpers.js

@@ -29,8 +29,7 @@ export const modifyRows = (
     // For IoP:
     // All of the values will be plain strings
     // {
-    // eslint-disable-next-line spellcheck/spell-checker
-    //  hit_id: "c7c6727e-2966-4f7c-87f1-20ef14db7a2d", <-- this refers to a host by insights ID
+    //  hit_id: "sample-insights-host-id", <-- this refers to a host by insights ID
     //  rule_id: "hardening_ssh_client_alive|OPENSSH_HARDENING_CLIENT_ALIVE",
     //  resolution_type: "less_secure",
     //  resolution_id:"hardening_ssh_client_alive|OPENSSH_HARDENING_CLIENT_ALIVE_less_secure", <-- joined rule id and resolution type
@@ -48,9 +47,10 @@ export const modifyRows = (
       resolution_id: getResolutionId(selectedResolution, id, isIop),
     });
     return {
-      cells: [
-        hostname,
-        title,
+      id,
+      hostname,
+      recommendation: title,
+      resolution: (
         <div>
           <Resolutions
             hit_id={isIop ? host_id : id}
@@ -59,10 +59,9 @@ export const modifyRows = (
             selectedResolution={selectedResolution}
             isIop={isIop}
           />
-        </div>,
-        reboot,
-      ],
-      id,
+        </div>
+      ),
+      reboot,
     };
   });
 

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js

@@ -2,11 +2,7 @@
 import React, { useEffect } from 'react';
 import Immutable from 'seamless-immutable';
 import PropTypes from 'prop-types';
-import {
-  Table,
-  TableHeader,
-  TableBody,
-} from '@patternfly/react-table/deprecated';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 import { isEmpty, noop } from 'lodash';
 import { STATUS } from 'foremanReact/constants';
@@ -21,8 +17,7 @@ import { useIopConfig } from '../../../common/Hooks/ConfigHooks';
 // Sample iopData:
 // const iopTestData = Immutable([
 //   {
-//     eslint-disable-next-line spellcheck/spell-checker
-//     hostid: 'c7c6727e-2966-4f7c-87f1-20ef14db7a2d',
+//     hostid: 'sample-insights-host-id',
 //     host_name: 'advisor-test.local',
 //     rulename: 'hardening_cryptopol_krb5|NO_CPOL_KRB5',
 //     resolutions: [
@@ -37,8 +32,7 @@ import { useIopConfig } from '../../../common/Hooks/ConfigHooks';
 //     description: 'Decreased security: krb5 crypto-policies overridden',
 //   },
 //   {
-//     eslint-disable-next-line spellcheck/spell-checker
-//     hostid: 'c7c6727e-2966-4f7c-87f1-20ef14db7a2d',
+//     hostid: 'sample-insights-host-id',
 //     host_name: 'advisor-test.local',
 //     rulename: 'hardening_logging_auditd|HARDENING_LOGGING_5_AUDITD',
 //     resolutions: [
@@ -133,11 +127,30 @@ const RemediationModal = ({
           className="remediations-table"
           ouiaId="remediations-table"
           aria-label="remediations Table"
-          cells={columns}
-          rows={rows}
         >
-          <TableHeader />
-          <TableBody />
+          <Thead>
+            <Tr ouiaId="remediations-table-head-row">
+              {columns.map(column => (
+                <Th key={column.id} width={column.width}>
+                  {column.title}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map(row => (
+              <Tr key={row.id} ouiaId={`remediations-row-${row.id}`}>
+                {columns.map(column => {
+                  const value = row[column.id];
+                  return (
+                    <Td key={`${row.id}-${column.id}`}>
+                      {column.formatter ? column.formatter(value) : value}
+                    </Td>
+                  );
+                })}
+              </Tr>
+            ))}
+          </Tbody>
         </Table>
         <TableEmptyState
           status={status}

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationTableConstants.js

@@ -1,38 +1,40 @@
 import React from 'react';
-import { cellWidth } from '@patternfly/react-table';
 import { Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
 
-export const rebootFormatter = ({ title: reboot }) => ({
-  children: reboot ? (
+export const rebootFormatter = reboot =>
+  reboot ? (
     <Icon color="green">
       <CheckCircleIcon />
     </Icon>
   ) : (
     __('No')
-  ),
-});
+  );
 
 export const columns = [
   {
+    id: 'hostname',
     sortKey: 'hostname',
     title: __('Hostname'),
-    transforms: [cellWidth(20)],
+    width: 20,
   },
   {
+    id: 'recommendation',
     title: __('Recommendation'),
-    transforms: [cellWidth(35)],
+    width: 35,
   },
   {
+    id: 'resolution',
     title: __('Resolution'),
-    transforms: [cellWidth(30)],
+    width: 30,
   },
   {
+    id: 'reboot',
     title: __('Reboot Required'),
-    transforms: [cellWidth(15)],
-    cellTransforms: [rebootFormatter],
+    width: 15,
+    formatter: rebootFormatter,
   },
 ];
 

data/webpack/InsightsCloudSync/Components/ToolbarDropdown.js

@@ -4,9 +4,10 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import {
   Dropdown,
   DropdownItem,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+  DropdownList,
+  MenuToggle,
+} from '@patternfly/react-core';
+import { EllipsisVIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { redHatAdvisorSystems } from '../InsightsCloudSyncHelpers';
 import { useIopConfig } from '../../common/Hooks/ConfigHooks';
 
@@ -44,13 +45,24 @@ const ToolbarDropdown = ({ onRecommendationSync }) => {
       className="title-dropdown"
       ouiaId="title-dropdown"
       onSelect={() => setIsDropdownOpen(false)}
-      toggle={
-        <KebabToggle onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)} />
-      }
+      onOpenChange={setIsDropdownOpen}
+      toggle={toggleRef => (
+        <MenuToggle
+          ref={toggleRef}
+          variant="plain"
+          aria-label={__('Recommendations actions')}
+          onClick={() => setIsDropdownOpen(prev => !prev)}
+          isExpanded={isDropdownOpen}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
       isOpen={isDropdownOpen}
-      isPlain
-      dropdownItems={dropdownItems}
-    />
+      shouldFocusToggleOnSelect
+      popperProps={{ position: 'right' }}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
 

data/webpack/InsightsCloudSync/InsightsCloudSync.test.js

@@ -15,16 +15,15 @@ jest.mock('./Components/InsightsTable', () => () => null);
 jest.mock('./Components/RemediationModal', () => () => null);
 jest.mock('./Components/InsightsTable/Pagination', () => () => null);
 jest.mock('./Components/InsightsSettings', () => () => null);
-jest.mock('foremanReact/routes/common/PageLayout/PageLayout', () => ({
-  children,
-  header,
-  toolbarButtons,
-}) => (
-  <div data-testid="page-layout" data-header={header}>
-    {toolbarButtons}
-    {children}
-  </div>
-));
+jest.mock(
+  'foremanReact/routes/common/PageLayout/PageLayout',
+  () => ({ children, header, toolbarButtons }) => (
+    <div data-testid="page-layout" data-header={header}>
+      {toolbarButtons}
+      {children}
+    </div>
+  )
+);
 jest.mock('@scalprum/react-core', () => ({
   ScalprumComponent: () => <div data-testid="scalprum-component" />,
   ScalprumProvider: ({ children }) => <div>{children}</div>,
@@ -47,9 +46,7 @@ describe('RecommendationsPage', () => {
 
   describe('non-IOP mode', () => {
     it('renders with rh-cloud-insights class and correct header', () => {
-      const { container } = render(
-        <RecommendationsPage {...defaultProps} />
-      );
+      const { container } = render(<RecommendationsPage {...defaultProps} />);
 
       expect(container.querySelector('.rh-cloud-insights')).toBeTruthy();
       expect(
@@ -58,9 +55,7 @@ describe('RecommendationsPage', () => {
     });
 
     it('does not render IOP advisor view', () => {
-      const { container } = render(
-        <RecommendationsPage {...defaultProps} />
-      );
+      const { container } = render(<RecommendationsPage {...defaultProps} />);
 
       expect(container.querySelector('.advisor')).toBeNull();
     });
@@ -72,9 +67,7 @@ describe('RecommendationsPage', () => {
     });
 
     it('renders advisor view instead of insights page', () => {
-      const { container } = render(
-        <RecommendationsPage {...defaultProps} />
-      );
+      const { container } = render(<RecommendationsPage {...defaultProps} />);
 
       expect(container.querySelector('.advisor')).toBeTruthy();
       expect(container.querySelector('.rh-cloud-insights')).toBeNull();

data/webpack/InsightsCloudSync/__tests__/InsightsCloudSyncActions.test.js

@@ -1,7 +1,6 @@
 import { syncInsights } from '../InsightsCloudSyncActions';
 import { INSIGHTS_CLOUD_SYNC } from '../InsightsCloudSyncConstants';
 
-
 jest.mock('../../common/ForemanTasks');
 
 describe('InsightsCloudSync actions', () => {