diff --git a/src/components/GroupSystems/GroupSystems.cy.js b/src/components/GroupSystems/GroupSystems.cy.js
index a9286371a..bb778d9d5 100644
--- a/src/components/GroupSystems/GroupSystems.cy.js
+++ b/src/components/GroupSystems/GroupSystems.cy.js
@@ -40,7 +40,7 @@ import _ from 'lodash';
const GROUP_NAME = 'foobar';
const ROOT = 'div[id="group-systems-table"]';
-const TABLE_HEADERS = ['Name', 'Tags', 'OS', 'Update method', 'Last seen'];
+const TABLE_HEADERS = ['Name', 'OS', 'Tags', 'Update method', 'Last seen'];
const SORTABLE_HEADERS = ['Name', 'OS', 'Last seen'];
const DEFAULT_ROW_COUNT = 50;
diff --git a/src/components/GroupSystems/GroupSystems.js b/src/components/GroupSystems/GroupSystems.js
index 16993418c..b5e730b5d 100644
--- a/src/components/GroupSystems/GroupSystems.js
+++ b/src/components/GroupSystems/GroupSystems.js
@@ -33,12 +33,12 @@ export const bulkSelectConfig = (dispatch, selectedNumber, noneSelected, pageSel
checked: selectedNumber > 0 && pageSelected // TODO: support partial selection (dash sign) in FEC BulkSelect
});
-const prepareColumns = (initialColumns) => {
+export const prepareColumns = (initialColumns, hideGroupColumn) => {
// hides the "groups" column
- const columns = initialColumns.filter(({ key }) => key !== 'groups');
+ const columns = hideGroupColumn ? initialColumns.filter(({ key }) => key !== 'groups') : initialColumns;
// additionally insert the "update method" column
- columns.splice(columns.length - 1 /* must be penultimate */, 0, {
+ columns.splice(columns.length - 2 /* must be the 3rd col from the end */, 0, {
key: 'update_method',
title: 'Update method',
sortKey: 'update_method',
@@ -53,15 +53,24 @@ const prepareColumns = (initialColumns) => {
});
columns[columns.findIndex(({ key }) => key === 'display_name')].renderFunc =
- (value, hostId) => (
-
-
- {value}
-
-
- );
+ (value, hostId) => (
+
+
+ {value}
+
+
+ );
- return columns;
+ // map columns to the speicifc order
+ return [
+ 'display_name',
+ 'system_profile',
+ 'tags',
+ 'update_method',
+ 'groups',
+ 'updated'
+ ].map((colKey) => columns.find(({ key }) => key === colKey))
+ .filter(Boolean); // eliminate possible undefined's
};
const GroupSystems = ({ groupName, groupId }) => {
@@ -107,8 +116,8 @@ const GroupSystems = ({ groupName, groupId }) => {
{
!isModalOpen &&
prepareColumns(columns, true)}
hideFilters={{ hostGroupFilter: true }}
- columns={prepareColumns}
getEntities={async (items, config, showTags, defaultGetEntities) =>
await defaultGetEntities(
items,
diff --git a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js
index bc7220c5f..8b6c8cd3b 100644
--- a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js
+++ b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js
@@ -1,6 +1,7 @@
import { mount } from '@cypress/react';
import {
checkTableHeaders,
+ DROPDOWN_ITEM,
MODAL,
ouiaId,
TABLE
@@ -32,6 +33,17 @@ const TABLE_HEADERS = [
'Last seen'
];
+const AVAILABLE_FILTER_NAMES = [
+ 'Name',
+ 'Status',
+ 'Operating System',
+ 'Data Collector',
+ 'RHC status',
+ 'Last seen',
+ 'Group',
+ 'Tags'
+];
+
const ALERT = '[data-ouia-component-type="PF4/Alert"]';
before(() => {
@@ -115,7 +127,7 @@ describe('AddSystemsToGroupModal', () => {
groupDetailInterceptors['successful with hosts']();
mountModal();
- cy.wait('@getHosts');
+ cy.get('table[aria-label="Host inventory"]').should('have.attr', 'data-ouia-safe', 'true');
cy.get('button').contains('Add systems').should('be.disabled');
selectRowN(1);
cy.get('button').contains('Add systems').click();
@@ -133,7 +145,7 @@ describe('AddSystemsToGroupModal', () => {
groupDetailInterceptors['successful with hosts']();
mountModal();
- cy.wait('@getHosts');
+ cy.get('table[aria-label="Host inventory"]').should('have.attr', 'data-ouia-safe', 'true');
const i =
hostsFixtures.results.findIndex(
// eslint-disable-next-line camelcase
@@ -156,4 +168,17 @@ describe('AddSystemsToGroupModal', () => {
host_ids: ['host-1', 'host-2', 'anim commodo'] // sends the merged list of hosts
});
});
+
+ describe('filters', () => {
+ it('has correct list of filters', () => {
+ groupDetailInterceptors['successful with hosts']();
+ mountModal();
+
+ cy.wait('@getHosts');
+ cy.get('button[data-ouia-component-id="ConditionalFilter"]').click();
+ cy.get(DROPDOWN_ITEM).each(($item, i) => {
+ expect($item.text()).to.equal(AVAILABLE_FILTER_NAMES[i]);
+ });
+ });
+ });
});
diff --git a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js
index d239d2b74..5d092d2a6 100644
--- a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js
+++ b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js
@@ -5,49 +5,19 @@ import {
FlexItem,
Modal
} from '@patternfly/react-core';
-import { fitContent, TableVariant } from '@patternfly/react-table';
+import { TableVariant } from '@patternfly/react-table';
import difference from 'lodash/difference';
import map from 'lodash/map';
import PropTypes from 'prop-types';
import React, { useCallback, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchGroupDetail } from '../../../store/inventory-actions';
-import { bulkSelectConfig } from '../../GroupSystems/GroupSystems';
+import { bulkSelectConfig, prepareColumns } from '../../GroupSystems/GroupSystems';
import InventoryTable from '../../InventoryTable/InventoryTable';
import { addHostsToGroupById } from '../utils/api';
import apiWithToast from '../utils/apiWithToast';
import ConfirmSystemsAddModal from './ConfirmSystemsAddModal';
-export const prepareColumns = (initialColumns) => {
- const columns = initialColumns;
-
- // additionally insert the "update method" column
- columns.splice(columns.length - 2 /* must be the 3rd col from the end */, 0, {
- key: 'update_method',
- title: 'Update method',
- sortKey: 'update_method',
- transforms: [fitContent],
- renderFunc: (value, hostId, systemData) =>
- systemData?.system_profile?.system_update_method || 'N/A',
- props: {
- // TODO: remove isStatic when the sorting is supported by API
- isStatic: true,
- width: 10
- }
- });
-
- // map columns to the speicifc order
- return [
- 'display_name',
- 'system_profile',
- 'tags',
- 'update_method',
- 'groups',
- 'updated'
- ].map((colKey) => columns.find(({ key }) => key === colKey))
- .filter(Boolean); // eliminate possible undefined's
-};
-
const AddSystemsToGroupModal = ({
isModalOpen,
setIsModalOpen,
@@ -172,7 +142,7 @@ const AddSystemsToGroupModal = ({
variant="large" // required to accomodate the systems table
>
prepareColumns(columns, false)}
variant={TableVariant.compact} // TODO: this doesn't affect the table variant
tableProps={{
isStickyHeader: false,
@@ -180,6 +150,7 @@ const AddSystemsToGroupModal = ({
}}
bulkSelect={bulkSelectConfig(dispatch, selected.size, noneSelected, pageSelected, rows.length)}
initialLoading={true}
+ showTags
/>
>