diff --git a/src/Routes.js b/src/Routes.js index 46247d42d..9284e8f98 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -16,6 +16,9 @@ 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 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 ? : , + element: groupsEnabled ? ( + + ) : ( + + ), }, { path: '/:inventoryId/update', diff --git a/src/Utilities/hooks/useEdgeGroups.js b/src/Utilities/hooks/useEdgeGroups.js index 098887c6d..76637a66f 100644 --- a/src/Utilities/hooks/useEdgeGroups.js +++ b/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' diff --git a/src/components/InventoryGroupDetail/EdgeGroupDetails.js b/src/components/InventoryGroupDetail/EdgeGroupDetails.js new file mode 100644 index 000000000..25fa5a893 --- /dev/null +++ b/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 ( + } + navigateProp={useNavigate} + locationProp={useLocation} + paramsProp={useParams} + notificationProp={notificationProp} + pathPrefix={resolveRelPath('')} + {...props} + /> + ); +}; + +export default EdgeGroupsDetailsView; diff --git a/src/components/InventoryGroups/EdgeGroups.js b/src/components/InventoryGroups/EdgeGroups.js index f765ba624..decf10052 100644 --- a/src/components/InventoryGroups/EdgeGroups.js +++ b/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={} navigateProp={useNavigate} locationProp={useLocation} + useParams={useParams} notificationProp={notificationProp} pathPrefix={resolveRelPath('')} {...props} diff --git a/src/routes/InventoryOrEdgeGroupDetailsComponent.js b/src/routes/InventoryOrEdgeGroupDetailsComponent.js new file mode 100644 index 000000000..a33c7c146 --- /dev/null +++ b/src/routes/InventoryOrEdgeGroupDetailsComponent.js @@ -0,0 +1,54 @@ +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 { 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.log(e); + } + }, []); + + const GroupsDetailComponents = enforceEdgeGroups + ? EdgeGroupsDetailsView + : InventoryGroupDetail; + if (!isLoading) { + return ( + + ); + } else { + return ; + } +}; + +InventoryOrEdgeGroupDetailsView.prototype = { + enforceEdgeGroups: PropTypes.bool, + isLoading: PropTypes.bool, +}; + +export default InventoryOrEdgeGroupDetailsView;