feat(app): clear env when log out [EE-4791] (#8218)

app/app.js

@@ -1,14 +1,8 @@
 import $ from 'jquery';
 
 /* @ngInject */
-export function onStartupAngular($rootScope, $state, LocalStorage, cfpLoadingBar, $transitions, HttpRequestHelper, EndpointProvider) {
+export function onStartupAngular($rootScope, $state, LocalStorage, cfpLoadingBar, $transitions, HttpRequestHelper) {
   $rootScope.$state = $state;
-  const defaultTitle = document.title;
-
-  $transitions.onEnter({}, () => {
-    const endpoint = EndpointProvider.currentEndpoint();
-    document.title = endpoint ? `${defaultTitle} | ${endpoint.Name}` : `${defaultTitle}`;
-  });
 
   // Workaround to prevent the loading bar from going backward
   // https://github.com/chieffancypants/angular-loading-bar/issues/273

app/portainer/services/endpointProvider.ts

@@ -1,4 +1,5 @@
 import { ping } from '@/docker/services/ping';
+import { environmentStore } from '@/react/hooks/current-environment-store';
 import {
   Environment,
   EnvironmentType,
@@ -9,6 +10,8 @@ interface State {
   pingInterval: NodeJS.Timer | null;
 }
 
+const DEFAULT_TITLE = 'Portainer';
+
 /* @ngInject */
 export function EndpointProvider() {
   const state: State = {
@@ -16,6 +19,12 @@ export function EndpointProvider() {
     pingInterval: null,
   };
 
+  environmentStore.subscribe((state) => {
+    if (!state.environmentId) {
+      setCurrentEndpoint(null);
+    }
+  });
+
   return { endpointID, setCurrentEndpoint, currentEndpoint, clean };
 
   function endpointID() {
@@ -40,6 +49,10 @@ export function EndpointProvider() {
         JSON.stringify(undefined)
       );
     }
+
+    document.title = endpoint
+      ? `${DEFAULT_TITLE} | ${endpoint.Name}`
+      : `${DEFAULT_TITLE}`;
   }
 
   function currentEndpoint() {
@@ -48,6 +61,7 @@ export function EndpointProvider() {
 
   function clean() {
     setCurrentEndpoint(null);
+    environmentStore.getState().clear();
   }
 }
 

app/react/sidebar/EnvironmentSidebar.tsx

@@ -2,7 +2,6 @@ import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { useEffect } from 'react';
 import { X, Slash } from 'lucide-react';
 import clsx from 'clsx';
-import angular from 'angular';
 import { useStore } from 'zustand';
 
 import {
@@ -13,7 +12,6 @@ import {
 import { getPlatformType } from '@/react/portainer/environments/utils';
 import { useEnvironment } from '@/react/portainer/environments/queries/useEnvironment';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
-import { EndpointProviderInterface } from '@/portainer/services/endpointProvider';
 import { environmentStore } from '@/react/hooks/current-environment-store';
 
 import { Icon } from '@@/Icon';
@@ -112,16 +110,6 @@ function useCurrentEnvironment() {
   return { query: useEnvironment(envStore.environmentId), clearEnvironment };
 
   function clearEnvironment() {
-    const $injector = angular.element(document).injector();
-    $injector.invoke(
-      /* @ngInject */ (EndpointProvider: EndpointProviderInterface) => {
-        EndpointProvider.setCurrentEndpoint(null);
-        if (!params.endpointId && !params.environmentId) {
-          document.title = 'Portainer';
-        }
-      }
-    );
-
     if (params.endpointId || params.environmentId) {
       router.stateService.go('portainer.home');
     }