Refactor to useShellHooks for improved context integration across com…

…ponents

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,
   });

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>

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>
   );
 };
 

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();
 }

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}

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(

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();