implement edge group expostion

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(false);
   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: <InventoryDetail /> },
     {
       path: '/groups',
-      element: groupsEnabled ? <InventoryGroups /> : <LostPage />,
+      element: groupsEnabled ? <GroupsComponents /> : <LostPage />,
     },
     {
       path: '/groups/:groupId',

src/Utilities/hooks/useEdgeGroups.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import useFeatureFlag from '../useFeatureFlag';
+import { fetchEdgeEnforceGroups } from '../../api';
+
+const useEdgeGroups = (value) => {
+  const [data, setData] = useState(value);
+  const edgeParityInventoryGroupsEnabled = useFeatureFlag(
+    'edgeParity.inventory-groups-enabled'
+  );
+
+  useEffect(() => {
+    if (edgeParityInventoryGroupsEnabled) {
+      (async () => {
+        const response = await fetchEdgeEnforceGroups();
+        const enforceEdgeGroups = response?.enforce_edge_groups;
+        setData(enforceEdgeGroups);
+      })();
+    }
+  }, []);
+
+  return data;
+};
+
+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.log(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;

src/routes/InventoryGroups.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import InventoryGroups from '../components/InventoryGroups';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import {
@@ -7,9 +7,14 @@ import {
 } from '@redhat-cloud-services/frontend-components/PageHeader';
 import { Flex } from '@patternfly/react-core';
 import InventoryGroupsPopover from '../components/InventoryGroups/SmallComponents/Popover';
+import { useLocation } from 'react-router-dom';
+import { getSearchParams } from '../constants';
 
-const Groups = () => {
+const Groups = (props) => {
   const chrome = useChrome();
+  const { search } = useLocation();
+  const searchParams = useMemo(() => getSearchParams(), [search.toString()]);
+  const fullProps = { ...props, ...searchParams };
 
   useEffect(() => {
     chrome?.hideGlobalFilter?.();
@@ -24,7 +29,7 @@ const Groups = () => {
           <InventoryGroupsPopover />
         </Flex>
       </PageHeader>
-      <InventoryGroups />
+      <InventoryGroups {...fullProps} />
     </React.Fragment>
   );
 };