From b2beec4a83853c30f62c72b4b9fb146d3b6b9416 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20Dombya?=
 <135591453+hervedombya@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:06:08 +0100
Subject: [PATCH] Refactor to useShellHooks for improved context integration
 across components

---
 ui/src/FederableApp.tsx                  | 5 +++--
 ui/src/components/DashboardInventory.tsx | 5 +++--
 ui/src/containers/AlertProvider.tsx      | 9 +++++----
 ui/src/containers/ConfigProvider.tsx     | 8 ++++++--
 ui/src/containers/IntlProvider.tsx       | 4 +++-
 ui/src/containers/NodePage.tsx           | 1 -
 ui/src/containers/PrivateRoute.tsx       | 3 ++-
 7 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/ui/src/FederableApp.tsx b/ui/src/FederableApp.tsx
index b3bf0d889f..074bdff63b 100644
--- a/ui/src/FederableApp.tsx
+++ b/ui/src/FederableApp.tsx
@@ -16,7 +16,7 @@ import { setHistory as setReduxHistory } from './ducks/history';
 import { setApiConfigAction } from './ducks/config';
 import { authErrorAction } from './ducks/app/authError';
 import { AuthError } from './services/errorhandler';
-import { ShellHooksProvider } from './ShellHooksContext';
+import { ShellHooksProvider, useShellHooks } from './ShellHooksContext';
 const composeEnhancers =
   // @ts-expect-error - FIXME when you are working on it
   typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -88,7 +88,8 @@ type Config = {
 };
 export const useConfig = () => {
   const { name } = useCurrentApp();
-  const runtimeConfiguration = window.shellHooks.useConfig<Config>({
+  const { useConfig } = useShellHooks();
+  const runtimeConfiguration = useConfig({
     configType: 'run',
     name,
   });
diff --git a/ui/src/components/DashboardInventory.tsx b/ui/src/components/DashboardInventory.tsx
index 5b6a585053..d0e70a582f 100644
--- a/ui/src/components/DashboardInventory.tsx
+++ b/ui/src/components/DashboardInventory.tsx
@@ -73,6 +73,7 @@ const DashboardInventory = () => {
     getNodesCountQuery(config || '', getToken),
   );
   const history = useHistory();
+
   return (
     <InventoryContainer>
       <PageSubtitle aria-label="inventory">
@@ -108,7 +109,7 @@ const DashboardInventory = () => {
                   </StatusWrapper>
                 </InventoryIcon>
                 <InventoryValue aria-label={`${nodesCount} nodes`}>
-                  {nodesCount}
+                  {nodesCount as number}
                 </InventoryValue>
               </Card.Body>
             </Card.BodyContainer>
@@ -143,7 +144,7 @@ const DashboardInventory = () => {
                   </StatusWrapper>
                 </InventoryIcon>
                 <InventoryValue aria-label={`${volumesCount} volumes`}>
-                  {volumesCount}
+                  {volumesCount as number}
                 </InventoryValue>
               </Card.Body>
             </Card.BodyContainer>
diff --git a/ui/src/containers/AlertProvider.tsx b/ui/src/containers/AlertProvider.tsx
index 1ccdaa38c8..b45381a8bc 100644
--- a/ui/src/containers/AlertProvider.tsx
+++ b/ui/src/containers/AlertProvider.tsx
@@ -17,8 +17,8 @@ export const useHighestSeverityAlerts = (filters: FilterLabels) => {
   return alertHooks.useHighestSeverityAlerts(filters);
 };
 export const useAlertLibrary = () => {
-  const { alertHooks } = useShellAlerts();
-  return alertHooks.alertSelectors;
+  const { alertSelectors } = useShellAlerts();
+  return alertSelectors;
 };
 
 export const highestAlertToStatus = (alerts?: Alert[]): Status => {
@@ -38,10 +38,11 @@ export const highestAlertToStatus = (alerts?: Alert[]): Status => {
 
 const AlertProvider = ({ children }: { children: React.ReactNode }) => {
   const { url_alertmanager } = useConfig();
+  const alerts = useShellAlerts();
   return (
-    <window.shellAlerts.AlertsProvider alertManagerUrl={url_alertmanager}>
+    <alerts.AlertsProvider alertManagerUrl={url_alertmanager}>
       {children}
-    </window.shellAlerts.AlertsProvider>
+    </alerts.AlertsProvider>
   );
 };
 
diff --git a/ui/src/containers/ConfigProvider.tsx b/ui/src/containers/ConfigProvider.tsx
index 919fbf24d4..9cdab20c42 100644
--- a/ui/src/containers/ConfigProvider.tsx
+++ b/ui/src/containers/ConfigProvider.tsx
@@ -1,6 +1,10 @@
+import { useShellHooks } from '../ShellHooksContext';
+
 export function useLinkOpener() {
-  return window.shellHooks.useLinkOpener();
+  const { useLinkOpener } = useShellHooks();
+  return useLinkOpener();
 }
 export function useDiscoveredViews() {
-  return window.shellHooks.useDiscoveredViews();
+  const { useDiscoveredViews } = useShellHooks();
+  return useDiscoveredViews();
 }
diff --git a/ui/src/containers/IntlProvider.tsx b/ui/src/containers/IntlProvider.tsx
index d682b801ef..0bb19af5b0 100644
--- a/ui/src/containers/IntlProvider.tsx
+++ b/ui/src/containers/IntlProvider.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 import { IntlProvider } from 'react-intl';
 import translations_en from '../translations/en.json';
 import translations_fr from '../translations/fr.json';
+import { useShellHooks } from '../ShellHooksContext';
 const messages = {
   EN: translations_en,
   FR: translations_fr,
 };
 
 const FederatedIntlProvider = ({ children }: { children: React.ReactNode }) => {
-  const { language } = window.shellHooks.useLanguage();
+  const { useLanguage } = useShellHooks();
+  const { language } = useLanguage();
   return (
     <IntlProvider locale={language} messages={messages[language.toUpperCase()]}>
       {children}
diff --git a/ui/src/containers/NodePage.tsx b/ui/src/containers/NodePage.tsx
index c4728a2d16..da7df13dab 100644
--- a/ui/src/containers/NodePage.tsx
+++ b/ui/src/containers/NodePage.tsx
@@ -10,7 +10,6 @@ import { useTypedSelector } from '../hooks';
 
 const NodePage = (props) => {
   useRefreshEffect(refreshNodesAction, stopRefreshNodesAction);
-  // @ts-expect-error - FIXME when you are working on it
   const { alerts } = useAlerts();
   const theme = useTheme();
   const nodeTableData = useSelector(
diff --git a/ui/src/containers/PrivateRoute.tsx b/ui/src/containers/PrivateRoute.tsx
index 11bd1c7801..03207264da 100644
--- a/ui/src/containers/PrivateRoute.tsx
+++ b/ui/src/containers/PrivateRoute.tsx
@@ -42,7 +42,8 @@ const PrivateRoute = ({ component, ...rest }: PrivateRouteProps) => {
     (left, right) => left.isAuthError === right.isAuthError,
   );
   const url_support = api?.url_support;
-  const { userData } = window.shellHooks.useAuth();
+  const { useAuth } = useShellHooks();
+  const { userData } = useAuth();
 
   const dispatch = useDispatch();
   const history = useHistory();