From 12b2eecf3e10201185125661c9e46722235c85cc Mon Sep 17 00:00:00 2001
From: Timothy Asir Jeyasingh <tjeyasin@redhat.com>
Date: Thu, 30 May 2024 23:53:38 +0530
Subject: [PATCH] Add seperate provider for context and pass as childern

https://github.com/red-hat-storage/odf-console/issues/672
Signed-off-by: Timothy Asir Jeyasingh <tjeyasin@redhat.com>
---
 .../disaster-recovery/dr-dashboard.tsx        | 30 ++++++++++++++-----
 packages/odf/components/topology/Topology.tsx | 30 +++++++++++++++----
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/packages/mco/components/mco-dashboard/disaster-recovery/dr-dashboard.tsx b/packages/mco/components/mco-dashboard/disaster-recovery/dr-dashboard.tsx
index c19294af3..852bfaf78 100644
--- a/packages/mco/components/mco-dashboard/disaster-recovery/dr-dashboard.tsx
+++ b/packages/mco/components/mco-dashboard/disaster-recovery/dr-dashboard.tsx
@@ -71,7 +71,7 @@ const aggregateAppsMap = (
     return acc;
   }, {});
 
-const MonitoringDashboard: React.FC = () => {
+const CSVStatusesProvider: React.FC = ({ children }) => {
   const [csvData, csvError, csvLoading] = useCustomPrometheusPoll({
     endpoint: 'api/v1/query' as any,
     query: STATUS_QUERIES[StorageDashboard.CSV_STATUS_ALL_WHITELISTED],
@@ -79,6 +79,14 @@ const MonitoringDashboard: React.FC = () => {
     cluster: HUB_CLUSTER_NAME,
   });
 
+  return (
+    <CSVStatusesContext.Provider value={{ csvData, csvError, csvLoading }}>
+      {children}
+    </CSVStatusesContext.Provider>
+  );
+};
+
+const DRResourcesProvider: React.FC = ({ children }) => {
   const [managedClusters, managedClusterLoaded, managedClusterLoadError] =
     useK8sWatchResource<ACMManagedClusterKind[]>(
       getManagedClusterResourceObj()
@@ -122,17 +130,23 @@ const MonitoringDashboard: React.FC = () => {
     loadError,
   };
 
-  // ToDo(Sanjal): combime multiple Context together to make it scalable
-  // refer: https://javascript.plainenglish.io/how-to-combine-context-providers-for-cleaner-react-code-9ed24f20225e
   return (
-    <CSVStatusesContext.Provider value={{ csvData, csvError, csvLoading }}>
-      <DRResourcesContext.Provider value={dRResourcesContext}>
-        <UpperSection />
-      </DRResourcesContext.Provider>
-    </CSVStatusesContext.Provider>
+    <DRResourcesContext.Provider value={dRResourcesContext}>
+      {children}
+    </DRResourcesContext.Provider>
   );
 };
 
+// ToDo(Sanjal): combime multiple Context together to make it scalable
+// refer: https://javascript.plainenglish.io/how-to-combine-context-providers-for-cleaner-react-code-9ed24f20225e
+const MonitoringDashboard: React.FC = () => (
+  <CSVStatusesProvider>
+    <DRResourcesProvider>
+      <UpperSection />
+    </DRResourcesProvider>
+  </CSVStatusesProvider>
+);
+
 const DRDashboard: React.FC = () => {
   const isMonitoringEnabled = useFlag(ACM_OBSERVABILITY_FLAG);
 
diff --git a/packages/odf/components/topology/Topology.tsx b/packages/odf/components/topology/Topology.tsx
index 427500ec9..7b9619e77 100644
--- a/packages/odf/components/topology/Topology.tsx
+++ b/packages/odf/components/topology/Topology.tsx
@@ -18,9 +18,11 @@ import {
   createNode,
   defaultLayoutFactory,
   stylesComponentFactory,
+  TopologyViewLevel,
+} from '@odf/shared/topology';
+import {
   TopologyDataContext,
   TopologySearchContext,
-  TopologyViewLevel,
 } from '@odf/shared/topology';
 import {
   ClusterServiceVersionKind,
@@ -99,6 +101,24 @@ type SideBarProps = {
   isExpanded: boolean;
 };
 
+const TopologyDataProvider: React.FC<{ value: any }> = ({
+  children,
+  value,
+}) => (
+  <TopologyDataContext.Provider value={value}>
+    {children}
+  </TopologyDataContext.Provider>
+);
+
+const TopologySearchProvider: React.FC<{ value: any }> = ({
+  children,
+  value,
+}) => (
+  <TopologySearchContext.Provider value={value}>
+    {children}
+  </TopologySearchContext.Provider>
+);
+
 const Sidebar: React.FC<SideBarProps> = ({ onClose, isExpanded }) => {
   const { selectedElement: element } = React.useContext(TopologyDataContext);
   const data = element?.getData();
@@ -572,7 +592,7 @@ const Topology: React.FC = () => {
   const zones = memoizedNodes.map(getTopologyDomain);
 
   return (
-    <TopologyDataContext.Provider
+    <TopologyDataProvider
       value={{
         nodes: memoizedNodes,
         storageCluster: storageCluster,
@@ -586,7 +606,7 @@ const Topology: React.FC = () => {
         setSelectedElement: setSelectedElement as any,
       }}
     >
-      <TopologySearchContext.Provider
+      <TopologySearchProvider
         value={{ activeItemsUID, setActiveItemsUID, activeItem, setActiveItem }}
       >
         <VisualizationProvider controller={controller}>
@@ -610,8 +630,8 @@ const Topology: React.FC = () => {
             </HandleErrorAndLoading>
           </div>
         </VisualizationProvider>
-      </TopologySearchContext.Provider>
-    </TopologyDataContext.Provider>
+      </TopologySearchProvider>
+    </TopologyDataProvider>
   );
 };