From 94db33fb6f1268271a1d5f8b7bb4d6b747eb3940 Mon Sep 17 00:00:00 2001 From: Aleksandr Voznesenskii <62722417+Fewwy@users.noreply.github.com> Date: Fri, 3 Mar 2023 16:48:55 +0100 Subject: [PATCH] feat(Inventory table): Add static groups column (#1772) This makes the Inventory table always render the groups column if the feature flag is true. --- .../InventoryTable/EntityTable.test.js | 4 + .../InventoryTable/EntityTableToolbar.test.js | 3 - .../InventoryTable/InventoryList.test.js | 2 + .../EntityTableToolbar.test.js.snap | 250 ------------------ .../InventoryTable/hooks/useColumns.js | 11 +- src/store/entities.js | 10 +- 6 files changed, 22 insertions(+), 258 deletions(-) diff --git a/src/components/InventoryTable/EntityTable.test.js b/src/components/InventoryTable/EntityTable.test.js index cf4475a6e..2e095eb59 100644 --- a/src/components/InventoryTable/EntityTable.test.js +++ b/src/components/InventoryTable/EntityTable.test.js @@ -16,6 +16,8 @@ import InsightsDisconnected from '../../Utilities/InsightsDisconnected'; import { defaultColumns } from '../../store/entities'; import { createMemoryHistory } from 'history'; +jest.mock('../../Utilities/useFeatureFlag'); + describe('EntityTable', () => { let initialState; let mockStore; @@ -463,6 +465,7 @@ describe('EntityTable', () => { }); it('should disable just one default column', () => { + jest.mock('../../Utilities/useFeatureFlag'); initialState = { entities: { ...initialState.entities, @@ -530,6 +533,7 @@ describe('EntityTable', () => { }); describe('API', () => { + jest.mock('../../Utilities/useFeatureFlag'); it('should call default onRowClick', () => { const history = createMemoryHistory(); const store = mockStore(initialState); diff --git a/src/components/InventoryTable/EntityTableToolbar.test.js b/src/components/InventoryTable/EntityTableToolbar.test.js index 4e0ea53af..faa09fda1 100644 --- a/src/components/InventoryTable/EntityTableToolbar.test.js +++ b/src/components/InventoryTable/EntityTableToolbar.test.js @@ -10,7 +10,6 @@ import toJson from 'enzyme-to-json'; import { mockTags, mockSystemProfile } from '../../__mocks__/hostApi'; import TitleColumn from './TitleColumn'; import debounce from 'lodash/debounce'; -import useFeatureFlag from '../../Utilities/useFeatureFlag'; jest.mock('lodash/debounce'); jest.mock('../../Utilities/useFeatureFlag'); @@ -94,7 +93,6 @@ describe('EntityTableToolbar', () => { }); describe('DOM', () => { - useFeatureFlag.mockReturnValue(true); it('should render correctly - no data', () => { const store = mockStore({ @@ -393,7 +391,6 @@ describe('EntityTableToolbar', () => { describe('System update method filter', () => { it('Should hide the filter when flag is disabled', () => { - useFeatureFlag.mockReturnValue(false); const store = mockStore(initialState); const wrapper = mount( { const actions = jest.requireActual('../../store/actions'); const { ACTION_TYPES } = jest.requireActual('../../store/action-types'); diff --git a/src/components/InventoryTable/__snapshots__/EntityTableToolbar.test.js.snap b/src/components/InventoryTable/__snapshots__/EntityTableToolbar.test.js.snap index a94ad3847..7a54d42c1 100644 --- a/src/components/InventoryTable/__snapshots__/EntityTableToolbar.test.js.snap +++ b/src/components/InventoryTable/__snapshots__/EntityTableToolbar.test.js.snap @@ -127,31 +127,6 @@ exports[`EntityTableToolbar DOM should render correctly - no data 1`] = ` "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, ], } } @@ -329,31 +304,6 @@ exports[`EntityTableToolbar DOM should render correctly - with children 1`] = ` "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, ], } } @@ -548,31 +498,6 @@ exports[`EntityTableToolbar DOM should render correctly - with custom activeFilt "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, Object { "filterValues": Object { "className": "ins-c-tagfilter", @@ -785,31 +710,6 @@ exports[`EntityTableToolbar DOM should render correctly - with custom filters 1` "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, Object { "filterValues": Object { "isDisabled": false, @@ -1012,31 +912,6 @@ exports[`EntityTableToolbar DOM should render correctly - with customFilters 1`] "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, Object { "filterValues": Object { "className": "ins-c-tagfilter", @@ -1262,31 +1137,6 @@ exports[`EntityTableToolbar DOM should render correctly - with default filters 1 "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, ], } } @@ -1469,31 +1319,6 @@ exports[`EntityTableToolbar DOM should render correctly - with default tag filte "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, ], } } @@ -1692,31 +1517,6 @@ exports[`EntityTableToolbar DOM should render correctly - with no access 1`] = ` "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": true, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, ], } } @@ -1907,31 +1707,6 @@ exports[`EntityTableToolbar DOM should render correctly - with tags 1`] = ` "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, Object { "filterValues": Object { "className": "ins-c-tagfilter", @@ -2152,31 +1927,6 @@ exports[`EntityTableToolbar DOM should render correctly 1`] = ` "type": "checkbox", "value": "rhc-status", }, - Object { - "filterValues": Object { - "isDisabled": false, - "items": Array [ - Object { - "label": "yum", - "value": "yum", - }, - Object { - "label": "dnf", - "value": "dnf", - }, - Object { - "label": "rpm-ostree", - "value": "rpm-ostree", - }, - ], - "onChange": [Function], - "placeholder": "Filter by system update method", - "value": undefined, - }, - "label": "System Update Method", - "type": "checkbox", - "value": "update-method", - }, ], } } diff --git a/src/components/InventoryTable/hooks/useColumns.js b/src/components/InventoryTable/hooks/useColumns.js index 612d8d12c..d2a92e02b 100644 --- a/src/components/InventoryTable/hooks/useColumns.js +++ b/src/components/InventoryTable/hooks/useColumns.js @@ -2,12 +2,14 @@ import { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { mergeArraysByKey } from '@redhat-cloud-services/frontend-components-utilities/helpers/helpers'; import { defaultColumns } from '../../../store/entities'; +import useFeatureFlag from '../../../Utilities/useFeatureFlag'; const isColumnEnabled = (key, disableColumns, showTags) => (key === 'tags' && showTags) || (key !== 'tags' && (Array.isArray(disableColumns) && !(disableColumns).includes(key))); const useColumns = (columnsProp, disableDefaultColumns, showTags, columnsCounter) => { + const groupsEnabled = useFeatureFlag('hbi.ui.inventory-groups'); const columnsRedux = useSelector( ({ entities: { columns } }) => columns, (next, prev) => next.every( @@ -16,13 +18,13 @@ const useColumns = (columnsProp, disableDefaultColumns, showTags, columnsCounter ); const disabledColumns = Array.isArray(disableDefaultColumns) ? disableDefaultColumns : []; const defaultColumnsFiltered = useMemo(() => (disableDefaultColumns === true) ? - [] : defaultColumns().filter(({ key }) => + [] : defaultColumns(groupsEnabled).filter(({ key }) => isColumnEnabled(key, disabledColumns, showTags) - ), [disabledColumns, disableDefaultColumns, showTags]); + ), [disabledColumns, disableDefaultColumns, showTags, groupsEnabled]); return useMemo(() => { if (typeof columnsProp === 'function') { - return columnsProp(defaultColumns()); + return columnsProp(defaultColumns(groupsEnabled)); } else if (columnsProp) { return mergeArraysByKey([ defaultColumnsFiltered, @@ -40,7 +42,8 @@ const useColumns = (columnsProp, disableDefaultColumns, showTags, columnsCounter columnsProp.map(({ key }) => key).join() : typeof columnsProp === 'function' ? 'function' : columnsProp, Array.isArray(columnsRedux) ? columnsRedux.map(({ key }) => key).join() : columnsRedux, - columnsCounter + columnsCounter, + groupsEnabled ]); }; diff --git a/src/store/entities.js b/src/store/entities.js index 554751b1d..c90947e26 100644 --- a/src/store/entities.js +++ b/src/store/entities.js @@ -28,6 +28,7 @@ export const defaultState = { allTagsLoaded: false, operatingSystems: [], operatingSystemsLoaded: false, + groups: [], invConfig: {}, sortBy: { key: 'updated', @@ -35,13 +36,20 @@ export const defaultState = { } }; -export const defaultColumns = () => ([ +export const defaultColumns = (groupsEnabled = false) => ([ { key: 'display_name', sortKey: 'display_name', title: 'Name', renderFunc: TitleColumn }, + ...(groupsEnabled ? [{ + key: 'groups', + sortKey: 'groups', + title: 'Groups', + props: { width: 10 }, + renderFunc: () => N/A + }] : []), { key: 'tags', title: 'Tags',