[PM-2347] Refresh configs when environment urls change (#5507)

* [PM-2347] Re fetch feature flags when environment urls change and update UI.

apps/browser/src/background/main.background.ts

@@ -501,7 +501,8 @@ export default class MainBackground {
     this.configService = new ConfigService(
       this.stateService,
       this.configApiService,
-      this.authService
+      this.authService,
+      this.environmentService
     );
 
     const systemUtilsServiceReloadCallback = () => {

apps/browser/src/popup/services/services.module.ts

@@ -489,7 +489,12 @@ function getBgService<T>(service: keyof MainBackground) {
     {
       provide: ConfigServiceAbstraction,
       useClass: BrowserConfigService,
-      deps: [StateServiceAbstraction, ConfigApiServiceAbstraction],
+      deps: [
+        StateServiceAbstraction,
+        ConfigApiServiceAbstraction,
+        AuthServiceAbstraction,
+        EnvironmentService,
+      ],
     },
     {
       provide: DialogServiceAbstraction,

libs/angular/src/auth/components/environment-selector.component.ts

@@ -2,7 +2,7 @@ import { animate, state, style, transition, trigger } from "@angular/animations"
 import { ConnectedPosition } from "@angular/cdk/overlay";
 import { Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
 import { Router } from "@angular/router";
-import { Subject } from "rxjs";
+import { Subject, takeUntil } from "rxjs";
 
 import { ConfigServiceAbstraction } from "@bitwarden/common/abstractions/config/config.service.abstraction";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
@@ -34,11 +34,11 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 })
 export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
   @Output() onOpenSelfHostedSettings = new EventEmitter();
+  euServerFlagEnabled: boolean;
   isOpen = false;
   showingModal = false;
   selectedEnvironment: ServerEnvironment;
   ServerEnvironmentType = ServerEnvironment;
-  euServerFlagEnabled: boolean;
   overlayPostition: ConnectedPosition[] = [
     {
       originX: "start",
@@ -56,9 +56,9 @@ export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
   ) {}
 
   async ngOnInit() {
-    this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
-      FeatureFlag.DisplayEuEnvironmentFlag
-    );
+    this.configService.serverConfig$.pipe(takeUntil(this.componentDestroyed$)).subscribe(() => {
+      this.updateEnvironmentInfo();
+    });
     this.updateEnvironmentInfo();
   }
 
@@ -69,6 +69,9 @@ export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
 
   async toggle(option: ServerEnvironment) {
     this.isOpen = !this.isOpen;
+    if (option === null) {
+      return;
+    }
     if (option === ServerEnvironment.EU) {
       await this.environmentService.setUrls({ base: "https://vault.bitwarden.eu" });
     } else if (option === ServerEnvironment.US) {
@@ -79,7 +82,10 @@ export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
     this.updateEnvironmentInfo();
   }
 
-  updateEnvironmentInfo() {
+  async updateEnvironmentInfo() {
+    this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
+      FeatureFlag.DisplayEuEnvironmentFlag
+    );
     const webvaultUrl = this.environmentService.getWebVaultUrl();
     if (this.environmentService.isSelfHosted()) {
       this.selectedEnvironment = ServerEnvironment.SelfHosted;

libs/angular/src/services/jslib-services.module.ts

@@ -615,7 +615,12 @@ import { AbstractThemingService } from "./theming/theming.service.abstraction";
     {
       provide: ConfigServiceAbstraction,
       useClass: ConfigService,
-      deps: [StateServiceAbstraction, ConfigApiServiceAbstraction, AuthServiceAbstraction],
+      deps: [
+        StateServiceAbstraction,
+        ConfigApiServiceAbstraction,
+        AuthServiceAbstraction,
+        EnvironmentServiceAbstraction,
+      ],
     },
     {
       provide: ConfigApiServiceAbstraction,

libs/common/src/services/config/config.service.ts

@@ -1,8 +1,9 @@
-import { BehaviorSubject, concatMap, timer } from "rxjs";
+import { BehaviorSubject, concatMap, from, timer } from "rxjs";
 
 import { ConfigApiServiceAbstraction } from "../../abstractions/config/config-api.service.abstraction";
 import { ConfigServiceAbstraction } from "../../abstractions/config/config.service.abstraction";
 import { ServerConfig } from "../../abstractions/config/server-config";
+import { EnvironmentService } from "../../abstractions/environment.service";
 import { StateService } from "../../abstractions/state.service";
 import { AuthService } from "../../auth/abstractions/auth.service";
 import { AuthenticationStatus } from "../../auth/enums/authentication-status";
@@ -16,15 +17,18 @@ export class ConfigService implements ConfigServiceAbstraction {
   constructor(
     private stateService: StateService,
     private configApiService: ConfigApiServiceAbstraction,
-    private authService: AuthService
+    private authService: AuthService,
+    private environmentService: EnvironmentService
   ) {
     // Re-fetch the server config every hour
     timer(0, 1000 * 3600)
-      .pipe(
-        concatMap(async () => {
-          return await this.fetchServerConfig();
-        })
-      )
+      .pipe(concatMap(() => from(this.fetchServerConfig())))
+      .subscribe((serverConfig) => {
+        this._serverConfig.next(serverConfig);
+      });
+
+    this.environmentService.urls
+      .pipe(concatMap(() => from(this.fetchServerConfig())))
       .subscribe((serverConfig) => {
         this._serverConfig.next(serverConfig);
       });