fix(ESSNTL-3728): Fix links, show missing tags filter (#1824)

Fixes https://issues.redhat.com/browse/ESSNTL-3728. * Remove prepareColumns duplicate, use correct links * Show Tags filter in the filters dropdown * Fix AddSystemsToGroupModal tests
RedHatInsights · Apr 3, 2023 · ebfad9c · ebfad9c
1 parent 1794010
commit ebfad9c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 48 deletions.
diff --git 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
@@ -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) =>  (
-          <div className="sentry-mask data-hj-suppress">
-              <Link to={`/${hostId}`}>
-                  {value}
-              </Link>
-          </div>
-      );
+    (value, hostId) =>  (
+        <div className="sentry-mask data-hj-suppress">
+            <Link to={`/${hostId}`}>
+                {value}
+            </Link>
+        </div>
+    );
 
-    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 &&
                 <InventoryTable
+                    columns={(columns) => 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
@@ -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
@@ -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,14 +142,15 @@ const AddSystemsToGroupModal = ({
                     variant="large" // required to accomodate the systems table
                 >
                     <InventoryTable
-                        columns={prepareColumns}
+                        columns={(columns) => prepareColumns(columns, false)}
                         variant={TableVariant.compact} // TODO: this doesn't affect the table variant
                         tableProps={{
                             isStickyHeader: false,
                             canSelectAll: false
                         }}
                         bulkSelect={bulkSelectConfig(dispatch, selected.size, noneSelected, pageSelected, rows.length)}
                         initialLoading={true}
+                        showTags
                     />
                 </Modal>
             </>