fix(InventoryGroup): THEEDGE-3693 implement edge group expostion

this fixes story add support for important customer that will navigate
to group screen and show edge group instead of inventory group.
this pr expose Groups component from edge and check if user should see inventory
or edge groups

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,20 +55,27 @@ export const Routes = () => {
   const edgeParityInventoryListEnabled = useFeatureFlag(
     'edgeParity.inventory-list'
   );
+  const { enforceEdgeGroups, isLoading } = useEdgeGroups();
+
   useEffect(() => {
     try {
-      (async () => {
-        const hasConventionalSystems = await inventoryHasConventionalSystems();
-        if (edgeParityInventoryListEnabled) {
-          const hasEdgeSystems = await inventoryHasEdgeSystems();
-          setHasConventionalSystems(hasConventionalSystems);
-          setHasEdgeDevices(hasEdgeSystems);
-        }
-      })();
+      if (!isLoading) {
+        (async () => {
+          const hasConventionalSystems =
+            await inventoryHasConventionalSystems();
+          if (edgeParityInventoryListEnabled) {
+            const hasEdgeSystems = await inventoryHasEdgeSystems();
+            setHasConventionalSystems(hasConventionalSystems);
+            setHasEdgeDevices(hasEdgeSystems);
+          }
+        })();
+      }
     } catch (e) {
       console.log(e);
     }
-  }, []);
+  }, [isLoading, edgeParityInventoryListEnabled]);
+
+  const GroupsComponents = enforceEdgeGroups ? EdgeGroupsView : InventoryGroups;
 
   let element = useRoutes([
     {
@@ -77,7 +86,7 @@ export const Routes = () => {
     { path: '/:inventoryId/:modalId', element: <InventoryDetail /> },
     {
       path: '/groups',
-      element: groupsEnabled ? <InventoryGroups /> : <LostPage />,
+      element: groupsEnabled ? <GroupsComponents /> : <LostPage />,
     },
     {
       path: '/groups/:groupId',

src/Utilities/hooks/useEdgeGroups.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import useFeatureFlag from '../useFeatureFlag';
+import { fetchEdgeEnforceGroups } from '../../api';
+
+const useEdgeGroups = () => {
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const edgeParityInventoryGroupsEnabled = useFeatureFlag(
+    'edgeParity.inventory-groups-enabled'
+  );
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        if (edgeParityInventoryGroupsEnabled) {
+          const response = await fetchEdgeEnforceGroups();
+          const enforceEdgeGroups = response?.enforce_edge_groups;
+          setData(enforceEdgeGroups);
+        }
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [edgeParityInventoryGroupsEnabled]);
+
+  return { data, isLoading };
+};
+
+export default useEdgeGroups;

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.error(err);
+  }
+};

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 (
+    <AsyncComponent
+      appName="edge"
+      module="./Groups"
+      ErrorComponent={<ErrorState />}
+      navigateProp={useNavigate}
+      locationProp={useLocation}
+      notificationProp={notificationProp}
+      pathPrefix={resolveRelPath('')}
+      {...props}
+    />
+  );
+};
+
+export default EdgeGroupsView;