fix(RHINENG-10415): reword groups to workspaces (#2121)

* fix(RHINENG-10415): reword groups to workspaces * fix(RHINENG-10415): put the work behind a flag * chore: place columns into react state to fix column management * chore: remove console.log * chore: use singular nouns, fix lint errors
RedHatInsights · Jun 26, 2024 · 1d1bf5d · 1d1bf5d
1 parent 6bbc904
commit 1d1bf5d
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 41 deletions.
diff --git a/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.js b/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.js
@@ -25,6 +25,7 @@ import AsynComponent from '@redhat-cloud-services/frontend-components/AsyncCompo
 import { useRbac } from '../../../../Helpers/Hooks';
 import messages from '../../../../Messages';
 import PageLoading from '../../../PresentationalComponents/Snippets/PageLoading';
+import useFeatureFlag from '../../../../Utilities/useFeatureFlag';
 
 const ImmutableDevices = ({ intl, cveName, filterRuleValues, inventoryRef, headerFilters }) => {
     const [[canReadHostsInventory], isLoadingInventory] = useRbac([
@@ -40,6 +41,7 @@ const ImmutableDevices = ({ intl, cveName, filterRuleValues, inventoryRef, heade
     const meta = useSelector(({ entities }) => entities?.meta || {});
     const parameters = useSelector(
         ({ ImmutableDevicesStore }) => ImmutableDevicesStore.parameters);
+    const isWorkspaceEnabled = useFeatureFlag('platform.rbac.groups-to-workspaces-rename');
 
     const apply = (params) => dispatch(changeExposedDevicesParameters(params));
 
@@ -122,7 +124,7 @@ const ImmutableDevices = ({ intl, cveName, filterRuleValues, inventoryRef, heade
         showActions={totalItems !== 0}
         hideFilters={{ all: true, hostGroupFilter: meta.enforceEdgeGroups || false, operatingSystem: false }}
         noSystemsTable={<EmptyStateNoSystems />}
-        mergeAppColumns={(defaultColumns) => mergeAppColumns(defaultColumns, meta.enforceEdgeGroups)}
+        mergeAppColumns={(defaultColumns) => mergeAppColumns(defaultColumns, meta.enforceEdgeGroups, isWorkspaceEnabled)}
         filterConfig={{
             items: [
                 searchFilter,

diff --git a/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.test.js b/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.test.js
@@ -33,6 +33,12 @@ jest.mock('react-redux', () => ({
     useSelector: jest.fn((state) => state)
 }));
 
+jest.mock('../../../../Utilities/useFeatureFlag', () => ({
+  ...jest.requireActual('../../../../Utilities/useFeatureFlag'),
+  __esModule: true,
+  default: jest.fn(() => false)
+}));
+
 const defaultRenderOptions = { store: ReducerRegistry.getStore() };
 
 const waitAsyncComponent = async () => {

diff --git a/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/helpers.js b/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/helpers.js
@@ -1,5 +1,5 @@
 import { getAffectedSystemsByCVE, useGetImageData } from '../../../../Helpers/APIHelper';
-import { SYSTEMS_EXPOSED_HEADER, DEFAULT_PAGE_SIZE } from '../../../../Helpers/constants';
+import { DEFAULT_PAGE_SIZE, getSystemsExposedHeader } from '../../../../Helpers/constants';
 import { getSortValue } from '../../../../Helpers/Hooks';
 import ReducerRegistry from '../../../../Utilities/ReducerRegistry';
 import { inventoryEntitiesReducer } from '../../../../Store/Reducers/InventoryEntitiesReducer';
@@ -75,9 +75,10 @@ export const useGetEntities = ({ id, setUrlParams, createRows }) => {
     return getEntities;
 };
 
-export const mergeAppColumns = (defaultColumns, enforcEdgeGroups = false) => {
-    const osColumn = SYSTEMS_EXPOSED_HEADER.find((column) => column.key === 'os');
-    const advisoryColumn = SYSTEMS_EXPOSED_HEADER.find((column) => column.key === 'advisories_list');
+export const mergeAppColumns = (defaultColumns, enforcEdgeGroups = false, isWorkspaceEnabled) => {
+    const systemsExposedColumn = getSystemsExposedHeader(isWorkspaceEnabled);
+    const osColumn = systemsExposedColumn.find((column) => column.key === 'os');
+    const advisoryColumn = systemsExposedColumn.find((column) => column.key === 'advisories_list');
 
     const osIndex = defaultColumns.findIndex(column =>{
         return column.key === 'system_profile';

diff --git a/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/helpers.test.js b/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/helpers.test.js
@@ -1,6 +1,6 @@
 import { useOnLoad, mergeAppColumns } from "./helpers";
 import { renderHook } from '@testing-library/react';
-import { SYSTEMS_EXPOSED_HEADER } from '../../../../Helpers/constants';
+import { getSystemsExposedHeader } from '../../../../Helpers/constants';
 
 jest.mock('../../../../Utilities/ReducerRegistry', () => ({
     __esModule: true,
@@ -49,7 +49,7 @@ const defaultColumns = [
       const osColumn = result.find(
         (column) => column.key === 'os'
       );
-      expect(osColumn).toEqual(SYSTEMS_EXPOSED_HEADER.find((column) => column.key === 'os'));
+      expect(osColumn).toEqual(getSystemsExposedHeader().find((column) => column.key === 'os'));
     });
     test('Should disable sorting when edge groups are enforced  by extending incoming column props from default columns', () => {
         const enforce_edge_groups = true;
@@ -74,6 +74,9 @@ const defaultColumns = [
       const advisories_list = result.find(
         (column) => column.key === 'advisories_list'
       );
-      expect(advisories_list).toEqual(SYSTEMS_EXPOSED_HEADER.find((column) => column.key === 'advisories_list'));
+
+      expect(advisories_list.toString()).toStrictEqual(
+        getSystemsExposedHeader().find((column) => column.key === 'advisories_list').toString()
+      );
     });
 });
diff --git a/src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js b/src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js
@@ -16,11 +16,9 @@ import {
     changeExposedSystemsParameters,
     clearInventoryStore,
     selectRows,
-    changeColumnsCveDetail,
     fetchAffectedSystemIdsByCve
 } from '../../../Store/Actions/Actions';
 import {
-    SYSTEMS_EXPOSED_HEADER,
     SYSTEMS_EXPOSED_ALLOWED_PARAMS,
     PERMISSIONS,
     ANSIBLE_REMEDIATION,
@@ -46,6 +44,8 @@ import useSearchFilter from '../../PresentationalComponents/Filters/PrimaryToolb
 import remediationFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/RemediationFilter';
 import advisoryAvailabilityFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/AdvisoryAvailabilityFilter';
 import PageLoading from '../../PresentationalComponents/Snippets/PageLoading';
+import useFeatureFlag from '../../../Utilities/useFeatureFlag';
+import { getSystemsExposedHeader } from '../../../Helpers/constants';
 
 const SystemsExposedTable = ({
     intl, cveName, cveStatusDetails, filterRuleValues,
@@ -72,16 +72,19 @@ const SystemsExposedTable = ({
         ({ CVEDetailsPageStore }) => CVEDetailsPageStore.parameters,
         shallowEqual
     );
-    const columns = useSelector(
-        ({ CVEDetailsPageStore }) => CVEDetailsPageStore.columns
-    );
+
+    const isWorkspaceEnabled = useFeatureFlag('platform.rbac.groups-to-workspaces-rename');
+
+    //TODO: pass refernce to getSystemsHeader instead of calling
+    // after workspace is enabled on prod.
+    const [columns, setColumns] = useState(getSystemsExposedHeader(isWorkspaceEnabled));
 
     const apply = (params) => dispatch(changeExposedSystemsParameters(params));
 
     const handleSelect = (payload, selecting) => dispatch(selectRows(payload, selecting));
 
     const [ColumnManagementModal, setColumnManagementModalOpen]
-        = useColumnManagement(columns, newColumns => dispatch(changeColumnsCveDetail(newColumns)));
+        = useColumnManagement(columns, setColumns);
 
     useEffect(() => apply(urlParameters), []);
 
@@ -233,7 +236,7 @@ const SystemsExposedTable = ({
                         onLoad={({ mergeWithEntities }) => {
                             ReducerRegistry.register({
                                 ...mergeWithEntities(
-                                    inventoryEntitiesReducer(SYSTEMS_EXPOSED_HEADER),
+                                    inventoryEntitiesReducer(),
                                     {
                                         page: Number(parameters.page || 1),
                                         perPage: DEFAULT_PAGE_SIZE,

diff --git a/src/Components/SmartComponents/SystemsPage/SystemsPage.js b/src/Components/SmartComponents/SystemsPage/SystemsPage.js
@@ -18,7 +18,6 @@ import {
     clearSystemStore,
     clearInventoryStore,
     selectRows,
-    changeColumnsSystemList,
     fetchSystems,
     fetchSystemsIds
 } from '../../../Store/Actions/Actions';
@@ -38,6 +37,8 @@ import useSearchFilter from '../../PresentationalComponents/Filters/PrimaryToolb
 import excludedFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/ExcludedFilter';
 import EdgeDevicesWarning from './EdgeDevicesWarning';
 import PageLoading from '../../PresentationalComponents/Snippets/PageLoading';
+import { getSystemsHeader } from '../../../Helpers/constants';
+import useFeatureFlag from '../../../Utilities/useFeatureFlag';
 
 const SystemsPage = () => {
     const [[
@@ -73,8 +74,11 @@ const SystemsPage = () => {
     }
 
     const { hasError, errorCode } = useSelector(({ SystemsPageStore }) => SystemsPageStore.error);
+    const isWorkspaceEnabled = useFeatureFlag('platform.rbac.groups-to-workspaces-rename');
 
-    const columns = useSelector(({ SystemsPageStore }) => SystemsPageStore.columns);
+    //TODO: pass refernce to getSystemsHeader instead of calling
+    // after workspace is enabled on prod.
+    const [columns, setColumns] = useState(getSystemsHeader(isWorkspaceEnabled));
 
     const mergeColumns = inventoryColumns => {
         return columns
@@ -83,7 +87,7 @@ const SystemsPage = () => {
     };
 
     const [ColumnManagementModal, setColumnManagementModalOpen]
-        = useColumnManagement(columns, newColumns => dispatch(changeColumnsSystemList(newColumns)));
+        = useColumnManagement(columns, setColumns);
 
     useEffect(() => {
         return () => {

diff --git a/src/Helpers/MiscHelper.js b/src/Helpers/MiscHelper.js
@@ -273,3 +273,7 @@ export const translateUrlSortParameter = (value) => {
 
     return { key, direction };
 };
+
+export const groupOrWorkspace = (isWorkspaceEnabled) =>
+    isWorkspaceEnabled ? 'Workspace' : 'Group';
+
diff --git a/src/Helpers/constants.js b/src/Helpers/constants.js
@@ -17,6 +17,7 @@ import NotVulnerableLabel from '../Components/PresentationalComponents/Snippets/
 import { isEmpty } from 'lodash';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { InsightsLink } from '@redhat-cloud-services/frontend-components/InsightsLink';
+import { groupOrWorkspace } from './MiscHelper';
 
 export const SERVICE_NAME = 'Vulnerability';
 export const DEFAULT_PAGE_SIZE = 20;
@@ -614,7 +615,7 @@ export const VULNERABILITIES_HEADER = [
     }
 ];
 
-export const SYSTEMS_EXPOSED_HEADER = [
+export const getSystemsExposedHeader = (isWorkspaceEnabled) => [
     {
         key: 'display_name',
         title: intl.formatMessage(messages.systemsColumnHeaderName),
@@ -641,13 +642,13 @@ export const SYSTEMS_EXPOSED_HEADER = [
     },
     {
         key: 'groups',
-        title: 'Group',
+        title: groupOrWorkspace(isWorkspaceEnabled),
         isShownByDefault: true,
         inventoryGroupsFeatureFlag: true,
         renderFunc: (data, value, { inventory_group: group }) =>
             <span>
                 {isEmpty(group) ?
-                    <span className="pf-v5-u-disabled-color-200">No group</span>
+                    <span className="pf-v5-u-disabled-color-200">No {groupOrWorkspace(groupOrWorkspace).toLowerCase()}</span>
                     : group[0].name} {/* currently, one group at maximum is supported */}
             </span>
     },
@@ -739,7 +740,8 @@ export const SYSTEMS_EXPOSED_HEADER = [
     }
 ];
 
-export const SYSTEMS_HEADER = [
+//TODO: remove feature flag and convert back to static array of objects
+export const getSystemsHeader = (isWorkspaceEnabled) => [
     {
         key: 'display_name',
         title: intl.formatMessage(messages.systemsColumnHeaderName),
@@ -754,13 +756,13 @@ export const SYSTEMS_HEADER = [
     },
     {
         key: 'groups',
-        title: 'Group',
+        title: groupOrWorkspace(isWorkspaceEnabled),
         inventoryGroupsFeatureFlag: true,
         isShownByDefault: true,
         renderFunc: (data, value, { inventory_group: group }) =>
             <span>
                 {isEmpty(group) ?
-                    <span className="pf-v5-u-disabled-color-200">No group</span>
+                    <span className="pf-v5-u-disabled-color-200">No {groupOrWorkspace(isWorkspaceEnabled).toLowerCase()}</span>
                     : group[0].name} {/* currently, one group at maximum is supported */}
             </span>
     },

diff --git a/src/Store/Reducers/CVEDetailsPageStore.js b/src/Store/Reducers/CVEDetailsPageStore.js
@@ -1,7 +1,7 @@
 import Immutable from 'seamless-immutable';
 import * as ActionTypes from '../ActionTypes';
 import { applyGlobalFilter } from './reducersHelper';
-import { DEFAULT_PAGE_SIZE, SYSTEMS_EXPOSED_HEADER } from '../../Helpers/constants';
+import { DEFAULT_PAGE_SIZE } from '../../Helpers/constants';
 
 export const initialState = Immutable({
     parameters: {
@@ -19,8 +19,7 @@ export const initialState = Immutable({
         error: {
             hasError: false
         }
-    },
-    columns: SYSTEMS_EXPOSED_HEADER
+    }
 });
 
 export const CVEDetailsPageStore = (state = initialState, action) => {
@@ -60,10 +59,7 @@ export const CVEDetailsPageStore = (state = initialState, action) => {
             });
             return newState;
         case ActionTypes.CLEAR_CVE_STORE:
-            return Immutable({
-                ...initialState,
-                columns: state.columns
-            });
+            return initialState;
         default:
             return state;
     }

diff --git a/src/Store/Reducers/ImmutableDevicesStore.js b/src/Store/Reducers/ImmutableDevicesStore.js
@@ -1,7 +1,7 @@
 import Immutable from 'seamless-immutable';
 import * as ActionTypes from '../ActionTypes';
 import { applyGlobalFilter } from './reducersHelper';
-import { DEFAULT_PAGE_SIZE, SYSTEMS_EXPOSED_HEADER } from '../../Helpers/constants';
+import { DEFAULT_PAGE_SIZE } from '../../Helpers/constants';
 
 export const initialState = Immutable({
     parameters: {
@@ -17,8 +17,7 @@ export const initialState = Immutable({
         error: {
             hasError: false
         }
-    },
-    columns: SYSTEMS_EXPOSED_HEADER
+    }
 });
 
 export const ImmutableDevicesStore = (state = initialState, action) => {
@@ -55,10 +54,7 @@ export const ImmutableDevicesStore = (state = initialState, action) => {
             });
             return newState;
         case ActionTypes.CLEAR_DEVICES_STORE:
-            return Immutable({
-                ...initialState,
-                columns: state.columns
-            });
+            return initialState;
         default:
             return state;
     }

diff --git a/src/Store/Reducers/SystemsPageStore.js b/src/Store/Reducers/SystemsPageStore.js
@@ -1,6 +1,6 @@
 import * as ActionTypes from '../ActionTypes';
 import { error, applyGlobalFilter } from './reducersHelper';
-import { DEFAULT_PAGE_SIZE, SYSTEMS_DEFAULT_FILTERS, SYSTEMS_HEADER } from './../../Helpers/constants';
+import { DEFAULT_PAGE_SIZE, SYSTEMS_DEFAULT_FILTERS } from './../../Helpers/constants';
 
 export const initialState = {
     isLoading: true,
@@ -18,8 +18,7 @@ export const initialState = {
         ...SYSTEMS_DEFAULT_FILTERS
     },
     timestamp: new Date(),
-    error,
-    columns: SYSTEMS_HEADER
+    error
 };
 
 export const SystemsPageStore = (state = initialState, action) => {