feat(THEEDGE-3693): Implement edge groups exposition (#2086)

Implements https://issues.redhat.com/browse/THEEDGE-3693.

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,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;