diff --git a/src/Routes.js b/src/Routes.js
index 88a024200..e03151a28 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -16,6 +16,8 @@ import AsynComponent from '@redhat-cloud-services/frontend-components/AsyncCompo
import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
import { inventoryHasEdgeSystems } from './Utilities/edge';
import { inventoryHasConventionalSystems } from './Utilities/conventional';
+import useEdgeGroups from './Utilities/hooks/useEdgeGroups';
+import EdgeGroupsView from './components/InventoryGroups/EdgeGroups';
const InventoryTable = lazy(() => import('./routes/InventoryTable'));
const InventoryDetail = lazy(() => import('./routes/InventoryDetail'));
@@ -53,6 +55,7 @@ export const Routes = () => {
const edgeParityInventoryListEnabled = useFeatureFlag(
'edgeParity.inventory-list'
);
+ const edgeGroupsUse = useEdgeGroups();
useEffect(() => {
try {
(async () => {
@@ -68,6 +71,8 @@ export const Routes = () => {
}
}, []);
+ const GroupsComponents = edgeGroupsUse ? EdgeGroupsView : InventoryGroups;
+
let element = useRoutes([
{
path: '/',
@@ -77,7 +82,7 @@ export const Routes = () => {
{ path: '/:inventoryId/:modalId', element: },
{
path: '/groups',
- element: groupsEnabled ? : ,
+ element: groupsEnabled ? : ,
},
{
path: '/groups/:groupId',
diff --git a/src/Utilities/hooks/useEdgeGroups.js b/src/Utilities/hooks/useEdgeGroups.js
new file mode 100644
index 000000000..e07e7eda3
--- /dev/null
+++ b/src/Utilities/hooks/useEdgeGroups.js
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import useFeatureFlag from '../useFeatureFlag';
+import { fetchEdgeEnforceGroups } from '../../api';
+
+const useEdgeGroups = () => {
+ const [data, setData] = useState(false);
+ const edgeParityInventoryGroupsEnabled = useFeatureFlag(
+ 'edgeParity.inventory-groups-enabled'
+ );
+
+ useEffect(() => {
+ edgeParityInventoryGroupsEnabled &&
+ (async () => {
+ const response = await fetchEdgeEnforceGroups();
+ const enforceEdgeGroups = response?.enforce_edge_groups;
+ setData(enforceEdgeGroups);
+ })();
+ }, [edgeParityInventoryGroupsEnabled]);
+
+ return data;
+};
+
+export default useEdgeGroups;
diff --git a/src/api/api.js b/src/api/api.js
index bd5d86bc8..8a16e4999 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -399,3 +399,11 @@ export const fetchEdgeSystem = () => {
console.log(err);
}
};
+
+export const fetchEdgeEnforceGroups = () => {
+ try {
+ return instance.get(`${EDGE_API_BASE}/device-groups/enforce-edge-groups`);
+ } catch (err) {
+ console.log(err);
+ }
+};
diff --git a/src/components/InventoryGroups/EdgeGroups.js b/src/components/InventoryGroups/EdgeGroups.js
new file mode 100644
index 000000000..f765ba624
--- /dev/null
+++ b/src/components/InventoryGroups/EdgeGroups.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
+import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
+import { resolveRelPath } from '../../Utilities/path';
+import { getNotificationProp } from '../../Utilities/edge';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+const EdgeGroupsView = (props) => {
+ const dispatch = useDispatch();
+ const notificationProp = getNotificationProp(dispatch);
+ return (
+ }
+ navigateProp={useNavigate}
+ locationProp={useLocation}
+ notificationProp={notificationProp}
+ pathPrefix={resolveRelPath('')}
+ {...props}
+ />
+ );
+};
+
+export default EdgeGroupsView;