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

app/assets/css/bootstrap-override.css

@@ -196,6 +196,10 @@ input:checked + .slider:before {
   padding: 1.5%;
 }
 
+.widget .widget-icon .icon {
+  display: flex !important;
+}
+
 .widget .widget-body table thead {
   border-top: 1px solid var(--border-table-color);
 }

app/azure/react/views/index.ts

@@ -5,10 +5,25 @@ import { CreateView } from '@/react/azure/container-instances/CreateView';
 import { ItemView } from '@/react/azure/container-instances/ItemView';
 import { ListView } from '@/react/azure/container-instances/ListView';
 import { DashboardView } from '@/react/azure/DashboardView';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const viewsModule = angular
   .module('portainer.azure.react.views', [])
-  .component('containerInstanceView', r2a(ItemView, []))
-  .component('createContainerInstanceView', r2a(CreateView, []))
-  .component('containerInstancesView', r2a(ListView, []))
-  .component('dashboardView', r2a(DashboardView, [])).name;
+  .component(
+    'containerInstanceView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(ItemView))), [])
+  )
+  .component(
+    'createContainerInstanceView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(CreateView))), [])
+  )
+  .component(
+    'containerInstancesView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(ListView))), [])
+  )
+  .component(
+    'dashboardView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(DashboardView))), [])
+  ).name;

app/docker/react/components/index.ts

@@ -5,12 +5,16 @@ import { StackContainersDatatable } from '@/react/docker/stacks/ItemView/StackCo
 import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
 import { TemplateListDropdownAngular } from '@/react/docker/app-templates/TemplateListDropdown';
 import { TemplateListSortAngular } from '@/react/docker/app-templates/TemplateListSort';
+import { Gpu } from '@/react/docker/containers/CreateView/Gpu';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const componentsModule = angular
   .module('portainer.docker.react.components', [])
   .component(
     'containerQuickActions',
-    r2a(ContainerQuickActions, [
+    r2a(withUIRouter(withCurrentUser(ContainerQuickActions)), [
       'containerId',
       'nodeName',
       'state',
@@ -22,5 +26,12 @@ export const componentsModule = angular
   .component('templateListSort', TemplateListSortAngular)
   .component(
     'stackContainersDatatable',
-    r2a(StackContainersDatatable, ['environment', 'stackName'])
+    r2a(
+      withUIRouter(withReactQuery(withCurrentUser(StackContainersDatatable))),
+      ['environment', 'stackName']
+    )
+  )
+  .component(
+    'gpu',
+    r2a(Gpu, ['values', 'onChange', 'gpus', 'usedGpus', 'usedAllGpus'])
   ).name;

app/docker/react/views/containers.ts

@@ -3,10 +3,16 @@ import angular from 'angular';
 
 import { r2a } from '@/react-tools/react2angular';
 import { ListView } from '@/react/docker/containers/ListView';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const containersModule = angular
   .module('portainer.docker.containers', [])
-  .component('containersView', r2a(ListView, ['endpoint']))
+  .component(
+    'containersView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(ListView))), ['endpoint'])
+  )
 
   .config(config).name;
 

app/docker/react/views/index.ts

@@ -1,15 +1,17 @@
 import angular from 'angular';
-import { Gpu } from 'Docker/react/views/gpu';
 
 import { ItemView as NetworksItemView } from '@/react/docker/networks/ItemView';
 import { r2a } from '@/react-tools/react2angular';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 import { containersModule } from './containers';
 
 export const viewsModule = angular
   .module('portainer.docker.react.views', [containersModule])
+
   .component(
-    'gpu',
-    r2a(Gpu, ['values', 'onChange', 'gpus', 'usedGpus', 'usedAllGpus'])
-  )
-  .component('networkDetailsView', r2a(NetworksItemView, [])).name;
+    'networkDetailsView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(NetworksItemView))), [])
+  ).name;

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesView.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 
 import { useSettings } from '@/portainer/settings/queries';
 import { useGroups } from '@/portainer/environment-groups/queries';
-import { r2a } from '@/react-tools/react2angular';
 
 import { PageHeader } from '@@/PageHeader';
 import { ViewLoading } from '@@/ViewLoading';
@@ -55,5 +54,3 @@ export function EdgeDevicesView() {
     </>
   );
 }
-
-export const EdgeDevicesViewAngular = r2a(EdgeDevicesView, []);

app/edge/EdgeDevices/EdgeDevicesView/index.ts

@@ -1 +1 @@
-export { EdgeDevicesView, EdgeDevicesViewAngular } from './EdgeDevicesView';
+export { EdgeDevicesView } from './EdgeDevicesView';

app/edge/EdgeDevices/WaitingRoomView/WaitingRoomView.tsx

@@ -1,7 +1,6 @@
 import { useRouter } from '@uirouter/react';
 
 import { useEnvironmentList } from '@/portainer/environments/queries/useEnvironmentList';
-import { r2a } from '@/react-tools/react2angular';
 import { EdgeTypes } from '@/portainer/environments/types';
 
 import { InformationPanel } from '@@/InformationPanel';
@@ -58,5 +57,3 @@ export function WaitingRoomView() {
     </>
   );
 }
-
-export const WaitingRoomViewAngular = r2a(WaitingRoomView, []);

app/edge/EdgeDevices/WaitingRoomView/index.ts

@@ -1 +1 @@
-export { WaitingRoomView, WaitingRoomViewAngular } from './WaitingRoomView';
+export { WaitingRoomView } from './WaitingRoomView';

app/edge/__module.js

@@ -1,15 +1,17 @@
 import angular from 'angular';
 
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { r2a } from '@/react-tools/react2angular';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 import edgeStackModule from './views/edge-stacks';
 import { componentsModule } from './components';
-import { WaitingRoomViewAngular } from './EdgeDevices/WaitingRoomView';
+import { WaitingRoomView } from './EdgeDevices/WaitingRoomView';
 import { reactModule } from './react';
-import { EdgeDevicesViewAngular } from './EdgeDevices/EdgeDevicesView';
 
 angular
   .module('portainer.edge', [edgeStackModule, componentsModule, reactModule])
-  .component('waitingRoomView', WaitingRoomViewAngular)
-  .component('edgeDevicesView', EdgeDevicesViewAngular)
+  .component('waitingRoomView', r2a(withUIRouter(withReactQuery(withCurrentUser(WaitingRoomView))), []))
   .config(function config($stateRegistryProvider) {
     const edge = {
       name: 'edge',

app/edge/components/EdgeCheckInIntervalField.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { useSettings } from '@/portainer/settings/queries';
 import { r2a } from '@/react-tools/react2angular';
+import { withReactQuery } from '@/react-tools/withReactQuery';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Select } from '@@/form-components/Input';
@@ -58,14 +59,10 @@ export function EdgeCheckinIntervalField({
   );
 }
 
-export const EdgeCheckinIntervalFieldAngular = r2a(EdgeCheckinIntervalField, [
-  'value',
-  'onChange',
-  'isDefaultHidden',
-  'tooltip',
-  'label',
-  'readonly',
-]);
+export const EdgeCheckinIntervalFieldAngular = r2a(
+  withReactQuery(EdgeCheckinIntervalField),
+  ['value', 'onChange', 'isDefaultHidden', 'tooltip', 'label', 'readonly']
+);
 
 function useOptions(isDefaultHidden: boolean) {
   const [options, setOptions] = useState(checkinIntervalOptions);

app/edge/components/index.ts

@@ -2,6 +2,7 @@ import angular from 'angular';
 
 import { r2a } from '@/react-tools/react2angular';
 import { EdgeScriptForm } from '@/react/edge/components/EdgeScriptForm';
+import { withReactQuery } from '@/react-tools/withReactQuery';
 
 import { EdgeCheckinIntervalFieldAngular } from './EdgeCheckInIntervalField';
 
@@ -9,6 +10,10 @@ export const componentsModule = angular
   .module('app.edge.components', [])
   .component(
     'edgeScriptForm',
-    r2a(EdgeScriptForm, ['edgeInfo', 'commands', 'isNomadTokenVisible'])
+    r2a(withReactQuery(EdgeScriptForm), [
+      'edgeInfo',
+      'commands',
+      'isNomadTokenVisible',
+    ])
   )
   .component('edgeCheckinIntervalField', EdgeCheckinIntervalFieldAngular).name;

app/edge/react/views/index.ts

@@ -1,6 +1,14 @@
 import angular from 'angular';
 
-export const viewsModule = angular.module(
-  'portainer.edge.react.views',
-  []
-).name;
+import { EdgeDevicesView } from '@/edge/EdgeDevices/EdgeDevicesView';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { r2a } from '@/react-tools/react2angular';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+
+export const viewsModule = angular
+  .module('portainer.edge.react.views', [])
+  .component(
+    'edgeDevicesView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(EdgeDevicesView))), [])
+  ).name;

app/portainer/__module.js

@@ -6,7 +6,6 @@ import settingsModule from './settings';
 import featureFlagModule from './feature-flags';
 import userActivityModule from './user-activity';
 import servicesModule from './services';
-import homeModule from './home';
 import { reactModule } from './react';
 import { sidebarModule } from './react/views/sidebar';
 import environmentsModule from './environments';
@@ -29,7 +28,6 @@ async function initAuthentication(authManager, Authentication, $rootScope, $stat
 
 angular
   .module('portainer.app', [
-    homeModule,
     'portainer.oauth',
     'portainer.rbac',
     componentsModule,

app/portainer/home/HomeView.tsx

@@ -1,8 +1,6 @@
 import { useRouter } from '@uirouter/react';
 import { useState } from 'react';
 
-import { r2a } from '@/react-tools/react2angular';
-
 import { PageHeader } from '@@/PageHeader';
 
 import * as notifications from '../services/notifications';
@@ -73,8 +71,6 @@ export function HomeView() {
   }
 }
 
-export const HomeViewAngular = r2a(HomeView, []);
-
 async function confirmEndpointSnapshot() {
   return confirmAsync({
     title: buildTitle('Are you sure?'),

app/portainer/home/MotdPanel.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 import _ from 'lodash';
 
-import { useUIState } from '@/portainer/hooks/UIStateProvider';
+import { useUIState } from '@/portainer/hooks/useUIState';
 
 import { InformationPanel } from '@@/InformationPanel';
 
@@ -10,9 +10,13 @@ import { getMotd } from './home.service';
 export function MotdPanel() {
   const motd = useMotd();
 
-  const [uiState, setUIState] = useUIState();
+  const uiStateStore = useUIState();
 
-  if (!motd || motd.Message === '' || motd.Hash === uiState.dismissedInfoHash) {
+  if (
+    !motd ||
+    motd.Message === '' ||
+    motd.Hash === uiStateStore.dismissedInfoHash
+  ) {
     return null;
   }
 
@@ -34,10 +38,7 @@ export function MotdPanel() {
   );
 
   function onDismiss(hash: string) {
-    setUIState({
-      ...uiState,
-      dismissedInfoHash: hash,
-    });
+    uiStateStore.dismissMotd(hash);
   }
 }
 

app/portainer/home/index.ts

@@ -1,9 +1 @@
-import angular from 'angular';
-
-import { EnvironmentListAngular } from './EnvironmentList';
-import { HomeViewAngular } from './HomeView';
-
-export default angular
-  .module('portainer.app.home', [])
-  .component('homeView', HomeViewAngular)
-  .component('environmentList', EnvironmentListAngular).name;
+export { HomeView } from './HomeView';

app/portainer/hooks/UIStateProvider.tsx

@@ -1,29 +0,0 @@
-import { createContext, PropsWithChildren, useContext } from 'react';
-
-import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
-
-interface UIState {
-  dismissedInfoPanels: Record<string, string>;
-  dismissedInfoHash: string;
-  dismissedUpdateVersion: string;
-}
-
-type UIStateService = [UIState, (state: UIState) => void];
-
-const Context = createContext<null | UIStateService>(null);
-
-export function useUIState() {
-  const context = useContext(Context);
-
-  if (context == null) {
-    throw new Error('Should be nested under a UIStateProvider component');
-  }
-
-  return context;
-}
-
-export function UIStateProvider({ children }: PropsWithChildren<unknown>) {
-  const service = useLocalStorage<UIState>('UI_STATE', {} as UIState);
-
-  return <Context.Provider value={service}>{children}</Context.Provider>;
-}

app/portainer/hooks/useUIState.tsx

@@ -0,0 +1,37 @@
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import { keyBuilder } from '@/portainer/hooks/useLocalStorage';
+
+interface UIState {
+  dismissedInfoPanels: Record<string, boolean>;
+  dismissInfoPanel(id: string): void;
+
+  dismissedInfoHash: string;
+  dismissMotd(hash: string): void;
+
+  dismissedUpdateVersion: string;
+  dismissUpdateVersion(version: string): void;
+}
+
+export const useUIState = create<UIState>()(
+  persist(
+    (set) => ({
+      dismissedInfoPanels: {},
+      dismissInfoPanel(id: string) {
+        set((state) => ({
+          dismissedInfoPanels: { ...state.dismissedInfoPanels, [id]: true },
+        }));
+      },
+      dismissedInfoHash: '',
+      dismissMotd(hash: string) {
+        set({ dismissedInfoHash: hash });
+      },
+      dismissedUpdateVersion: '',
+      dismissUpdateVersion(version: string) {
+        set({ dismissedUpdateVersion: version });
+      },
+    }),
+    { name: keyBuilder('NEW_UI_STATE') }
+  )
+);

app/portainer/hooks/useUser.tsx

@@ -23,6 +23,7 @@ interface State {
 }
 
 export const UserContext = createContext<State | null>(null);
+UserContext.displayName = 'UserContext';
 
 export function useUser() {
   const context = useContext(UserContext);

app/portainer/react/components/index.ts

@@ -1,10 +1,19 @@
 import angular from 'angular';
-import { react2angular } from 'react2angular';
 
 import { r2a } from '@/react-tools/react2angular';
+import { CreateAccessToken } from '@/react/portainer/account/CreateAccessTokenView';
+import {
+  DefaultRegistryAction,
+  DefaultRegistryDomain,
+  DefaultRegistryName,
+} from '@/react/portainer/registries/ListView/DefaultRegistry';
 import { Icon } from '@/react/components/Icon';
 import { ReactQueryDevtoolsWrapper } from '@/react/components/ReactQueryDevtoolsWrapper';
 import { AccessControlPanel } from '@/react/portainer/access-control';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { withI18nSuspense } from '@/react-tools/withI18nSuspense';
 
 import { PageHeader } from '@@/PageHeader';
 import { TagSelector } from '@@/TagSelector';
@@ -26,22 +35,25 @@ export const componentsModule = angular
   .module('portainer.app.react.components', [customTemplatesModule])
   .component(
     'tagSelector',
-    r2a(TagSelector, ['allowCreate', 'onChange', 'value'])
+    r2a(withReactQuery(TagSelector), ['allowCreate', 'onChange', 'value'])
   )
   .component(
     'portainerTooltip',
-    react2angular(Tooltip, ['message', 'position', 'className'])
+    r2a(Tooltip, ['message', 'position', 'className'])
   )
   .component('fileUploadField', fileUploadField)
   .component('porSwitchField', switchField)
   .component(
     'passwordCheckHint',
-    r2a(PasswordCheckHint, ['forceChangePassword', 'passwordValid'])
+    r2a(withReactQuery(PasswordCheckHint), [
+      'forceChangePassword',
+      'passwordValid',
+    ])
   )
   .component('rdLoading', r2a(Loading, []))
   .component(
     'tableColumnHeader',
-    react2angular(TableColumnHeaderAngular, [
+    r2a(TableColumnHeaderAngular, [
       'colTitle',
       'canSort',
       'isSorted',
@@ -51,13 +63,13 @@ export const componentsModule = angular
   .component('viewLoading', r2a(ViewLoading, ['message']))
   .component(
     'pageHeader',
-    r2a(PageHeader, [
-      'id',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(PageHeader))), [
       'title',
       'breadcrumbs',
       'loading',
       'onReload',
       'reload',
+      'id',
     ])
   )
   .component(
@@ -75,7 +87,7 @@ export const componentsModule = angular
   )
   .component(
     'prIcon',
-    react2angular(Icon, ['className', 'feather', 'icon', 'mode', 'size'])
+    r2a(Icon, ['className', 'feather', 'icon', 'mode', 'size'])
   )
   .component('reactQueryDevTools', r2a(ReactQueryDevtoolsWrapper, []))
   .component(
@@ -86,13 +98,10 @@ export const componentsModule = angular
     'datatableSearchbar',
     r2a(SearchBar, ['data-cy', 'onChange', 'value', 'placeholder'])
   )
-  .component(
-    'boxSelectorBadgeIcon',
-    react2angular(BadgeIcon, ['featherIcon', 'icon'])
-  )
+  .component('boxSelectorBadgeIcon', r2a(BadgeIcon, ['featherIcon', 'icon']))
   .component(
     'accessControlPanel',
-    r2a(AccessControlPanel, [
+    r2a(withReactQuery(withCurrentUser(AccessControlPanel)), [
       'disableOwnershipChange',
       'onUpdateSuccess',
       'resourceControl',
@@ -100,4 +109,23 @@ export const componentsModule = angular
       'resourceType',
       'environmentId',
     ])
+  )
+  .component(
+    'defaultRegistryName',
+    r2a(withReactQuery(DefaultRegistryName), [])
+  )
+  .component(
+    'defaultRegistryAction',
+    r2a(withReactQuery(DefaultRegistryAction), [])
+  )
+  .component(
+    'defaultRegistryDomain',
+    r2a(withReactQuery(DefaultRegistryDomain), [])
+  )
+  .component(
+    'createAccessToken',
+    r2a(withI18nSuspense(withUIRouter(CreateAccessToken)), [
+      'onSubmit',
+      'onError',
+    ])
   ).name;

app/portainer/react/views/index.ts

@@ -1,12 +1,10 @@
 import angular from 'angular';
 
+import { HomeView } from '@/portainer/home';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { r2a } from '@/react-tools/react2angular';
-import { CreateAccessToken } from '@/react/portainer/account/CreateAccessTokenView';
-import {
-  DefaultRegistryAction,
-  DefaultRegistryDomain,
-  DefaultRegistryName,
-} from '@/react/portainer/registries/ListView/DefaultRegistry';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 import { wizardModule } from './wizard';
 import { teamsModule } from './teams';
@@ -18,10 +16,7 @@ export const viewsModule = angular
     teamsModule,
     updateSchedulesModule,
   ])
-  .component('defaultRegistryName', r2a(DefaultRegistryName, []))
-  .component('defaultRegistryAction', r2a(DefaultRegistryAction, []))
-  .component('defaultRegistryDomain', r2a(DefaultRegistryDomain, []))
   .component(
-    'createAccessToken',
-    r2a(CreateAccessToken, ['onSubmit', 'onError'])
+    'homeView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(HomeView))), [])
   ).name;

app/portainer/react/views/sidebar.ts

@@ -3,8 +3,14 @@ import angular from 'angular';
 import { AngularSidebarService } from '@/react/sidebar/useSidebarState';
 import { Sidebar } from '@/react/sidebar/Sidebar';
 import { r2a } from '@/react-tools/react2angular';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const sidebarModule = angular
   .module('portainer.app.sidebar', [])
-  .component('sidebar', r2a(Sidebar, []))
+  .component(
+    'sidebar',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(Sidebar))), [])
+  )
   .factory('SidebarService', AngularSidebarService).name;

app/portainer/react/views/teams.ts

@@ -3,12 +3,21 @@ import { StateRegistry } from '@uirouter/angularjs';
 
 import { ItemView, ListView } from '@/react/portainer/users/teams';
 import { r2a } from '@/react-tools/react2angular';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const teamsModule = angular
   .module('portainer.app.teams', [])
   .config(config)
-  .component('teamView', r2a(ItemView, []))
-  .component('teamsView', r2a(ListView, [])).name;
+  .component(
+    'teamView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(ItemView))), [])
+  )
+  .component(
+    'teamsView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(ListView))), [])
+  ).name;
 
 /* @ngInject */
 function config($stateRegistryProvider: StateRegistry) {

app/portainer/react/views/update-schedules.ts

@@ -7,12 +7,24 @@ import {
   CreateView,
   ItemView,
 } from '@/react/portainer/environments/update-schedules';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
 
 export const updateSchedulesModule = angular
   .module('portainer.edge.updateSchedules', [])
-  .component('updateSchedulesListView', r2a(ListView, []))
-  .component('updateSchedulesCreateView', r2a(CreateView, []))
-  .component('updateSchedulesItemView', r2a(ItemView, []))
+  .component(
+    'updateSchedulesListView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(ListView))), [])
+  )
+  .component(
+    'updateSchedulesCreateView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(CreateView))), [])
+  )
+  .component(
+    'updateSchedulesItemView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(ItemView))), [])
+  )
   .config(config).name;
 
 function config($stateRegistryProvider: StateRegistry) {

app/portainer/react/views/wizard.ts

@@ -7,15 +7,30 @@ import {
   EnvironmentTypeSelectView,
   HomeView,
 } from '@/react/portainer/environments/wizard';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const wizardModule = angular
   .module('portainer.app.react.views.wizard', [])
-  .component('wizardEnvironmentCreationView', r2a(EnvironmentCreationView, []))
+  .component(
+    'wizardEnvironmentCreationView',
+    r2a(
+      withUIRouter(withReactQuery(withCurrentUser(EnvironmentCreationView))),
+      []
+    )
+  )
   .component(
     'wizardEnvironmentTypeSelectView',
-    r2a(EnvironmentTypeSelectView, [])
+    r2a(
+      withUIRouter(withReactQuery(withCurrentUser(EnvironmentTypeSelectView))),
+      []
+    )
+  )
+  .component(
+    'wizardMainView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(HomeView))), [])
   )
-  .component('wizardMainView', r2a(HomeView, []))
   .config(config).name;
 
 function config($stateRegistryProvider: StateRegistry) {

app/portainer/settings/edge-compute/EdgeComputeSettingsView.tsx

@@ -1,4 +1,6 @@
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { r2a } from '@/react-tools/react2angular';
+import { withReactQuery } from '@/react-tools/withReactQuery';
 
 import { Settings } from '../types';
 
@@ -20,7 +22,7 @@ export function EdgeComputeSettingsView({ settings, onSubmit }: Props) {
   );
 }
 
-export const EdgeComputeSettingsViewAngular = r2a(EdgeComputeSettingsView, [
-  'settings',
-  'onSubmit',
-]);
+export const EdgeComputeSettingsViewAngular = r2a(
+  withReactQuery(withCurrentUser(EdgeComputeSettingsView)),
+  ['settings', 'onSubmit']
+);

app/portainer/settings/edge-compute/SettingsFDO/index.ts

@@ -1,6 +1,11 @@
 import { react2angular } from '@/react-tools/react2angular';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 import { SettingsFDO } from './SettingsFDO';
 
-const SettingsFDOAngular = react2angular(SettingsFDO, ['settings', 'onSubmit']);
+const SettingsFDOAngular = react2angular(
+  withUIRouter(withReactQuery(SettingsFDO)),
+  ['settings', 'onSubmit']
+);
 export { SettingsFDO, SettingsFDOAngular };

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

app/react/components/PageHeader/HeaderContainer.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import styles from './HeaderContainer.module.css';
 
 const Context = createContext<null | boolean>(null);
+Context.displayName = 'PageHeaderContext';
 
 export function useHeaderContext() {
   const context = useContext(Context);

app/react/components/Widget/Widget.tsx

@@ -1,6 +1,7 @@
 import { createContext, PropsWithChildren, useContext } from 'react';
 
 const Context = createContext<null | boolean>(null);
+Context.displayName = 'WidgetContext';
 
 export function useWidgetContext() {
   const context = useContext(Context);

app/react/components/datatables/RowContext.tsx

@@ -2,6 +2,7 @@ import { createContext, PropsWithChildren, useContext } from 'react';
 
 export function createRowContext<TContext>() {
   const Context = createContext<TContext | null>(null);
+  Context.displayName = 'RowContext';
 
   return { RowProvider, useRowContext };
 

app/react/components/datatables/useTableSettings.tsx

@@ -19,6 +19,7 @@ interface TableSettingsContextInterface<T> {
 const TableSettingsContext = createContext<TableSettingsContextInterface<
   Record<string, unknown>
 > | null>(null);
+TableSettingsContext.displayName = 'TableSettingsContext';
 
 export function useTableSettings<T>() {
   const Context = getContextType<T>();

app/react/components/datatables/useZustandTableSettings.tsx

@@ -7,6 +7,7 @@ interface TableSettingsContextInterface<T> {
 const TableSettingsContext = createContext<TableSettingsContextInterface<
   Record<string, unknown>
 > | null>(null);
+TableSettingsContext.displayName = 'TableSettingsContext';
 
 export function useTableSettings<T>() {
   const Context = getContextType<T>();

app/react/components/form-components/InputGroup/InputGroup.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { createContext, PropsWithChildren, useContext } from 'react';
 
 const Context = createContext<null | boolean>(null);
+Context.displayName = 'InputGroupContext';
 
 type Size = 'small' | 'large';
 

app/react/sidebar/Footer/UpdateNotifications.tsx

@@ -2,14 +2,14 @@ import { useQuery } from 'react-query';
 import clsx from 'clsx';
 
 import { getVersionStatus } from '@/portainer/services/api/status.service';
-import { useUIState } from '@/portainer/hooks/UIStateProvider';
+import { useUIState } from '@/portainer/hooks/useUIState';
 
 import { Icon } from '@@/Icon';
 
 import styles from './UpdateNotifications.module.css';
 
 export function UpdateNotification() {
-  const [uiState, setUIState] = useUIState();
+  const uiStateStore = useUIState();
   const query = useUpdateNotification();
 
   if (!query.data || !query.data.UpdateAvailable) {
@@ -19,9 +19,9 @@ export function UpdateNotification() {
   const { LatestVersion } = query.data;
 
   if (
-    uiState?.dismissedUpdateVersion?.length > 0 &&
+    !!uiStateStore.dismissedUpdateVersion &&
     LatestVersion?.length > 0 &&
-    uiState?.dismissedUpdateVersion === LatestVersion
+    uiStateStore.dismissedUpdateVersion === LatestVersion
   ) {
     return null;
   }
@@ -63,10 +63,7 @@ export function UpdateNotification() {
   );
 
   function onDismiss(version: string) {
-    setUIState({
-      ...uiState,
-      dismissedUpdateVersion: version,
-    });
+    uiStateStore.dismissUpdateVersion(version);
   }
 }
 

app/react/sidebar/useSidebarState.tsx

@@ -24,6 +24,7 @@ interface State {
 }
 
 export const Context = createContext<State | null>(null);
+Context.displayName = 'SidebarContext';
 
 export function useSidebarState() {
   const context = useContext(Context);