fix(InventoryGroupDetails): THEEDGE-3707 implement edge group details…

… expostion (#2092)

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

* fix(InventoryGroupDetails): THEEDGE-3707 implement edge group details expostion

* fix: Center spinner, console error

---------

Co-authored-by: Georgii Karataev <[email protected]>

src/Routes.js

@@ -16,6 +16,9 @@ import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComp
 import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
 import { inventoryHasEdgeSystems } from './Utilities/edge';
 import { inventoryHasConventionalSystems } from './Utilities/conventional';
+const InventoryOrEdgeGroupDetailsView = lazy(() =>
+  import('./routes/InventoryOrEdgeGroupDetailsComponent')
+);
 const InventoryOrEdgeView = lazy(() =>
   import('./routes/InventoryOrEdgeComponent')
 );
@@ -25,9 +28,6 @@ const InventoryHostStaleness = lazy(() =>
   import('./routes/InventoryHostStaleness')
 );
 
-const InventoryGroupDetail = lazy(() =>
-  import('./routes/InventoryGroupDetail')
-);
 const EdgeInventoryUpdate = lazy(() => import('./routes/SystemUpdate'));
 
 export const routes = {
@@ -82,7 +82,11 @@ export const Routes = () => {
     },
     {
       path: '/groups/:groupId',
-      element: groupsEnabled ? <InventoryGroupDetail /> : <LostPage />,
+      element: groupsEnabled ? (
+        <InventoryOrEdgeGroupDetailsView />
+      ) : (
+        <LostPage />
+      ),
     },
     {
       path: '/:inventoryId/update',

src/Utilities/hooks/useEdgeGroups.js

@@ -4,7 +4,7 @@ import { fetchEdgeEnforceGroups } from '../../api';
 
 const useEdgeGroups = () => {
   const [data, setData] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const edgeParityInventoryGroupsEnabled = useFeatureFlag(
     'edgeParity.inventory-groups-enabled'

src/components/InventoryGroupDetail/EdgeGroupDetails.js

@@ -0,0 +1,27 @@
+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, useParams } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+const EdgeGroupsDetailsView = (props) => {
+  const dispatch = useDispatch();
+  const notificationProp = getNotificationProp(dispatch);
+  return (
+    <AsyncComponent
+      appName="edge"
+      module="./GroupsDetails"
+      ErrorComponent={<ErrorState />}
+      navigateProp={useNavigate}
+      locationProp={useLocation}
+      paramsProp={useParams}
+      notificationProp={notificationProp}
+      pathPrefix={resolveRelPath('')}
+      {...props}
+    />
+  );
+};
+
+export default EdgeGroupsDetailsView;

src/components/InventoryGroups/EdgeGroups.js

@@ -3,7 +3,7 @@ import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComp
 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 { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
 const EdgeGroupsView = (props) => {
@@ -16,6 +16,7 @@ const EdgeGroupsView = (props) => {
       ErrorComponent={<ErrorState />}
       navigateProp={useNavigate}
       locationProp={useLocation}
+      useParams={useParams}
       notificationProp={notificationProp}
       pathPrefix={resolveRelPath('')}
       {...props}

src/routes/InventoryOrEdgeGroupDetailsComponent.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+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';
+import EdgeGroupsDetailsView from '../components/InventoryGroupDetail/EdgeGroupDetails';
+import InventoryGroupDetail from './InventoryGroupDetail';
+
+const InventoryOrEdgeGroupDetailsView = () => {
+  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 GroupsDetailComponents = enforceEdgeGroups
+    ? EdgeGroupsDetailsView
+    : InventoryGroupDetail;
+  if (!isLoading) {
+    return (
+      <GroupsDetailComponents
+        hasConventionalSystems={hasConventionalSystems}
+        hasEdgeDevices={hasEdgeDevices}
+      />
+    );
+  } else {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+};
+
+InventoryOrEdgeGroupDetailsView.prototype = {
+  enforceEdgeGroups: PropTypes.bool,
+  isLoading: PropTypes.bool,
+};
+
+export default InventoryOrEdgeGroupDetailsView;