refactor(ui): remove global providers [EE-4128] (#7578)

app/react-tools/RootProvider.tsx

@@ -1,24 +0,0 @@
-import { QueryClientProvider } from 'react-query';
-import { UIRouterContextComponent } from '@uirouter/react-hybrid';
-import { PropsWithChildren, StrictMode } from 'react';
-
-import { UserProvider } from '@/portainer/hooks/useUser';
-import { UIStateProvider } from '@/portainer/hooks/UIStateProvider';
-
-import { createQueryClient } from './react-query';
-
-const queryClient = createQueryClient();
-
-export function RootProvider({ children }: PropsWithChildren<unknown>) {
-  return (
-    <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <UIStateProvider>
-          <UIRouterContextComponent>
-            <UserProvider>{children}</UserProvider>
-          </UIRouterContextComponent>
-        </UIStateProvider>
-      </QueryClientProvider>
-    </StrictMode>
-  );
-}

app/react-tools/react-query.ts

@@ -93,3 +93,5 @@ function handleError(error: unknown, errorMeta?: unknown) {
     notifyError(title, error as Error, message);
   }
 }
+
+export const queryClient = createQueryClient();

app/react-tools/react2angular.tsx

@@ -1,10 +1,8 @@
 import ReactDOM from 'react-dom';
 import { IComponentOptions, IController } from 'angular';
-import { Suspense } from 'react';
+import { StrictMode } from 'react';
 import _ from 'lodash';
 
-import { RootProvider } from './RootProvider';
-
 function toProps(
   propNames: string[],
   controller: IController,
@@ -54,20 +52,29 @@ export function react2angular<T, U extends PropNames<T>[]>(
     $element: HTMLElement[],
     $q: ng.IQService
   ) {
+    let isDestroyed = false;
     const el = $element[0];
+
     this.$onChanges = () => {
-      const props = toProps(propNames, this, $q);
-      ReactDOM.render(
-        <Suspense fallback="loading translations">
-          <RootProvider>
+      if (!isDestroyed) {
+        const props = toProps(propNames, this, $q);
+        ReactDOM.render(
+          <StrictMode>
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
             <Component {...(props as T)} />
-          </RootProvider>
-        </Suspense>,
-        el
-      );
+          </StrictMode>,
+
+          el
+        );
+      }
+    };
+
+    this.$onDestroy = () => {
+      if (!isDestroyed) {
+        isDestroyed = true;
+        ReactDOM.unmountComponentAtNode(el);
+      }
     };
-    this.$onDestroy = () => ReactDOM.unmountComponentAtNode(el);
   }
 }
 

app/react-tools/withCurrentUser.tsx

@@ -0,0 +1,24 @@
+import { ComponentType } from 'react';
+
+import { UserProvider } from '@/portainer/hooks/useUser';
+
+export function withCurrentUser<T>(
+  WrappedComponent: ComponentType<T>
+): ComponentType<T> {
+  // Try to create a nice displayName for React Dev Tools.
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || 'Component';
+
+  function WrapperComponent(props: T) {
+    return (
+      <UserProvider>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <WrappedComponent {...props} />
+      </UserProvider>
+    );
+  }
+
+  WrapperComponent.displayName = displayName;
+
+  return WrapperComponent;
+}

app/react-tools/withI18nSuspense.tsx

@@ -0,0 +1,22 @@
+import { ComponentType, Suspense } from 'react';
+
+export function withI18nSuspense<T>(
+  WrappedComponent: ComponentType<T>
+): ComponentType<T> {
+  // Try to create a nice displayName for React Dev Tools.
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || 'Component';
+
+  function WrapperComponent(props: T) {
+    return (
+      <Suspense fallback="Loading translations...">
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <WrappedComponent {...props} />
+      </Suspense>
+    );
+  }
+
+  WrapperComponent.displayName = displayName;
+
+  return WrapperComponent;
+}

app/react-tools/withReactQuery.tsx

@@ -0,0 +1,26 @@
+import { ComponentType } from 'react';
+import { QueryClientProvider } from 'react-query';
+
+import { queryClient as defaultQueryClient } from './react-query';
+
+export function withReactQuery<T>(
+  WrappedComponent: ComponentType<T>,
+  queryClient = defaultQueryClient
+): ComponentType<T> {
+  // Try to create a nice displayName for React Dev Tools.
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || 'Component';
+
+  function WrapperComponent(props: T) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <WrappedComponent {...props} />
+      </QueryClientProvider>
+    );
+  }
+
+  WrapperComponent.displayName = displayName;
+
+  return WrapperComponent;
+}

app/react-tools/withUIRouter.tsx

@@ -0,0 +1,23 @@
+import { ComponentType } from 'react';
+import { UIRouterContextComponent } from '@uirouter/react-hybrid';
+
+export function withUIRouter<T>(
+  WrappedComponent: ComponentType<T>
+): ComponentType<T> {
+  // Try to create a nice displayName for React Dev Tools.
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || 'Component';
+
+  function WrapperComponent(props: T) {
+    return (
+      <UIRouterContextComponent>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <WrappedComponent {...props} />
+      </UIRouterContextComponent>
+    );
+  }
+
+  WrapperComponent.displayName = displayName;
+
+  return WrapperComponent;
+}