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 />