fix(environment): update page title when no environment selected. (#7606)

* fix(environment): update page title when no environment selected.

* fix(environment): update page title when clearing environment from side bar.

* fix(environment): update page title when clearing environment from a non-environment page.

app/app.js

@@ -10,9 +10,7 @@ export function onStartupAngular($rootScope, $state, $interval, LocalStorage, En
 
   $transitions.onEnter({}, () => {
     const endpoint = EndpointProvider.currentEndpoint();
-    if (endpoint) {
-      document.title = `${defaultTitle} | ${endpoint.Name}`;
-    }
+    document.title = endpoint ? `${defaultTitle} | ${endpoint.Name}` : `${defaultTitle}`;
   });
 
   // Workaround to prevent the loading bar from going backward

app/portainer/services/authentication.js

@@ -50,6 +50,7 @@ angular.module('portainer.app').factory('Authentication', [
       clearSessionStorage();
       StateManager.clean();
       EndpointProvider.clean();
+      EndpointProvider.setCurrentEndpoint(null);
       LocalStorage.cleanAuthData();
       LocalStorage.storeLoginStateUUID('');
       tryAutoLoginExtension();

app/portainer/services/types.ts

@@ -4,6 +4,7 @@ export interface EndpointProvider {
   setEndpointID(id: Environment['Id']): void;
   setEndpointPublicURL(url?: string): void;
   setOfflineModeFromStatus(status: Environment['Status']): void;
+  setCurrentEndpoint(endpoint: Environment | undefined): void;
 }
 
 export interface StateManager {

app/react/sidebar/EnvironmentSidebar.tsx

@@ -2,6 +2,7 @@ import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { useEffect } from 'react';
 import { X, Slash } from 'react-feather';
 import clsx from 'clsx';
+import angular from 'angular';
 
 import {
   PlatformType,
@@ -11,6 +12,7 @@ import {
 import { getPlatformType } from '@/portainer/environments/utils';
 import { useEnvironment } from '@/portainer/environments/queries/useEnvironment';
 import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+import { EndpointProvider } from '@/portainer/services/types';
 
 import { getPlatformIcon } from '../portainer/environments/utils/get-platform-icon';
 
@@ -108,6 +110,16 @@ function useCurrentEnvironment() {
   return { query: useEnvironment(environmentId), clearEnvironment };
 
   function clearEnvironment() {
+    const $injector = angular.element(document).injector();
+    $injector.invoke(
+      /* @ngInject */ (EndpointProvider: EndpointProvider) => {
+        EndpointProvider.setCurrentEndpoint(undefined);
+        if (!params.endpointId) {
+          document.title = 'Portainer';
+        }
+      }
+    );
+
     if (params.endpointId) {
       router.stateService.go('portainer.home');
     }