From 95913946225fe223911a5527287c1ba445574ad4 Mon Sep 17 00:00:00 2001
From: mgold1234 <mgold@redhat.com>
Date: Thu, 9 Nov 2023 12:21:22 +0200
Subject: [PATCH] fix (InventoryGroup): THEEDGE-3693 implement edge group
 expostion

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                                |  7 +++++-
 src/Utilities/hooks/useEdgeGroups.js         | 24 ++++++++++++++++++
 src/api/api.js                               |  8 ++++++
 src/components/InventoryGroups/EdgeGroups.js | 26 ++++++++++++++++++++
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/Utilities/hooks/useEdgeGroups.js
 create mode 100644 src/components/InventoryGroups/EdgeGroups.js

diff --git a/src/Routes.js b/src/Routes.js
index 88a024200..886dcb9b5 100644
--- a/src/Routes.js
+++ b/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',
diff --git a/src/Utilities/hooks/useEdgeGroups.js b/src/Utilities/hooks/useEdgeGroups.js
new file mode 100644
index 000000000..9f9aa91d9
--- /dev/null
+++ b/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;
diff --git a/src/api/api.js b/src/api/api.js
index bd5d86bc8..8a16e4999 100644
--- a/src/api/api.js
+++ b/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);
+  }
+};
diff --git a/src/components/InventoryGroups/EdgeGroups.js b/src/components/InventoryGroups/EdgeGroups.js
new file mode 100644
index 000000000..f765ba624
--- /dev/null
+++ b/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;