feat(inventroyGroup): THEEDGE-3693- implement edge group expostion

src/Routes.js

@@ -16,10 +16,11 @@ 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';
-
+const InventoryOrEdgeView = lazy(() =>
+  import('./routes/InventoryOrEdgeComponent')
+);
 const InventoryTable = lazy(() => import('./routes/InventoryTable'));
 const InventoryDetail = lazy(() => import('./routes/InventoryDetail'));
-const InventoryGroups = lazy(() => import('./routes/InventoryGroups'));
 const InventoryHostStaleness = lazy(() =>
   import('./routes/InventoryHostStaleness')
 );
@@ -77,7 +78,7 @@ export const Routes = () => {
     { path: '/:inventoryId/:modalId', element: <InventoryDetail /> },
     {
       path: '/groups',
-      element: groupsEnabled ? <InventoryGroups /> : <LostPage />,
+      element: groupsEnabled ? <InventoryOrEdgeView /> : <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(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const edgeParityInventoryGroupsEnabled = useFeatureFlag(
+    'edgeParity.inventory-groups-enabled'
+  );
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        if (edgeParityInventoryGroupsEnabled) {
+          const response = await fetchEdgeEnforceGroups();
+          const enforceEdgeGroups = response?.enforce_edge_groups;
+          setData(enforceEdgeGroups);
+        }
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+  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;

src/routes/InventoryOrEdgeComponent.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import EdgeGroupsView from '../components/InventoryGroups/EdgeGroups';
+import InventoryGroups from '../components/InventoryGroups/InventoryGroups';
+import { inventoryHasConventionalSystems } from '../Utilities/conventional';
+import { inventoryHasEdgeSystems } from '../Utilities/edge';
+import useEdgeGroups from '../Utilities/hooks/useEdgeGroups';
+import useFeatureFlag from '../Utilities/useFeatureFlag';
+import PropTypes from 'prop-types';
+import { Bullseye, Spinner } from '@patternfly/react-core';
+
+const InventoryOrEdgeView = () => {
+  const [enforceEdgeGroups, isLoading] = useEdgeGroups();
+  const [hasConventionalSystems, setHasConventionalSystems] = useState(true);
+  const [hasEdgeDevices, setHasEdgeDevices] = useState(true);
+  const edgeParityInventoryListEnabled = useFeatureFlag(
+    'edgeParity.inventory-list'
+  );
+
+  useEffect(() => {
+    try {
+      (async () => {
+        const hasConventionalSystems = await inventoryHasConventionalSystems();
+        if (edgeParityInventoryListEnabled) {
+          const hasEdgeSystems = await inventoryHasEdgeSystems();
+          setHasConventionalSystems(hasConventionalSystems);
+          setHasEdgeDevices(hasEdgeSystems);
+        }
+      })();
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  const ViewComponent = enforceEdgeGroups ? EdgeGroupsView : InventoryGroups;
+  if (!isLoading) {
+    return (
+      <ViewComponent
+        hasConventionalSystems={hasConventionalSystems}
+        hasEdgeDevices={hasEdgeDevices}
+      />
+    );
+  } else {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+};
+
+InventoryOrEdgeView.prototype = {
+  enforceEdgeGroups: PropTypes.bool,
+  isLoading: PropTypes.bool,
+};
+
+export default InventoryOrEdgeView;