fix(environment-selector): [PM-21214] Extension and desktop server selector have incorrect styling (#15920)

* refactor(environment-selector): [PM-21214] Lib Environment Selector Styling - Make component standalone.

* refactor(environment-selector): [PM-21214] Lib Environment Selector Styling - Convert template to bit-menu.

* refactor(environment-selector): [PM-21214] Lib Environment Selector Styling - Move component to its own folder.

* fix(environment-selector): [PM-21214] Lib Environment Selector Styling - Fix button role redundancy.

* fix(environment-selector): [PM-21214] Lib Environment Selector Styling - Remove unneeded data-testid attributes.

* fix(environment-selector): [PM-21214] Lib Environment Selector Styling - Arrow glyph should not override link styling.

apps/browser/src/popup/app-routing.module.ts

@@ -2,11 +2,7 @@ import { Injectable, NgModule } from "@angular/core";
 import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
 
 import { AuthenticationTimeoutComponent } from "@bitwarden/angular/auth/components/authentication-timeout.component";
-import {
+import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/environment-selector/environment-selector.component";
-  EnvironmentSelectorComponent,
-  EnvironmentSelectorRouteData,
-  ExtensionDefaultOverlayPosition,
-} from "@bitwarden/angular/auth/components/environment-selector.component";
 import {
   activeAuthGuard,
   authGuard,
@@ -400,9 +396,6 @@ const routes: Routes = [
             path: "",
             component: EnvironmentSelectorComponent,
             outlet: "environment-selector",
-            data: {
-              overlayPosition: ExtensionDefaultOverlayPosition,
-            } satisfies EnvironmentSelectorRouteData,
           },
         ],
       },
@@ -425,9 +418,6 @@ const routes: Routes = [
             path: "",
             component: EnvironmentSelectorComponent,
             outlet: "environment-selector",
-            data: {
-              overlayPosition: ExtensionDefaultOverlayPosition,
-            } satisfies EnvironmentSelectorRouteData,
           },
         ],
       },
@@ -474,9 +464,6 @@ const routes: Routes = [
             path: "",
             component: EnvironmentSelectorComponent,
             outlet: "environment-selector",
-            data: {
-              overlayPosition: ExtensionDefaultOverlayPosition,
-            } satisfies EnvironmentSelectorRouteData,
           },
         ],
       },

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

@@ -9,7 +9,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
-import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
 import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
@@ -96,7 +95,6 @@ import "../platform/popup/locales";
     TabsV2Component,
     UserVerificationComponent,
     RemovePasswordComponent,
-    EnvironmentSelectorComponent,
   ],
   exports: [],
   providers: [CurrencyPipe, DatePipe],

apps/desktop/src/app/app-routing.module.ts

@@ -2,10 +2,7 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { AuthenticationTimeoutComponent } from "@bitwarden/angular/auth/components/authentication-timeout.component";
-import {
+import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/environment-selector/environment-selector.component";
-  DesktopDefaultOverlayPosition,
-  EnvironmentSelectorComponent,
-} from "@bitwarden/angular/auth/components/environment-selector.component";
 import {
   authGuard,
   lockGuard,
@@ -174,9 +171,6 @@ const routes: Routes = [
             path: "",
             component: EnvironmentSelectorComponent,
             outlet: "environment-selector",
-            data: {
-              overlayPosition: DesktopDefaultOverlayPosition,
-            },
           },
         ],
       },
@@ -205,9 +199,6 @@ const routes: Routes = [
             path: "",
             component: EnvironmentSelectorComponent,
             outlet: "environment-selector",
-            data: {
-              overlayPosition: DesktopDefaultOverlayPosition,
-            },
           },
         ],
       },
@@ -228,9 +219,6 @@ const routes: Routes = [
             path: "",
             component: EnvironmentSelectorComponent,
             outlet: "environment-selector",
-            data: {
-              overlayPosition: DesktopDefaultOverlayPosition,
-            },
           },
         ],
       },
@@ -265,9 +253,6 @@ const routes: Routes = [
             path: "",
             component: EnvironmentSelectorComponent,
             outlet: "environment-selector",
-            data: {
-              overlayPosition: DesktopDefaultOverlayPosition,
-            },
           },
         ],
       },

apps/desktop/src/auth/login/login.module.ts

@@ -1,13 +1,10 @@
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
-import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component";
-
 import { SharedModule } from "../../app/shared/shared.module";
 
 @NgModule({
   imports: [SharedModule, RouterModule],
-  declarations: [EnvironmentSelectorComponent],
   exports: [],
 })
 export class LoginModule {}

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

@@ -1,84 +0,0 @@
-<ng-container
-  *ngIf="{
-    selectedRegion: selectedRegion$ | async,
-  } as data"
->
-  <div class="tw-text-sm tw-text-muted tw-leading-7 tw-font-normal tw-pl-4">
-    {{ "accessing" | i18n }}:
-    <button
-      type="button"
-      (click)="toggle(null)"
-      cdkOverlayOrigin
-      #trigger="cdkOverlayOrigin"
-      aria-haspopup="dialog"
-      aria-controls="cdk-overlay-container"
-    >
-      <span class="tw-text-primary-600 tw-text-sm tw-font-semibold">
-        <ng-container *ngIf="data.selectedRegion; else fallback">
-          {{ data.selectedRegion.domain }}
-        </ng-container>
-        <ng-template #fallback>
-          {{ "selfHostedServer" | i18n }}
-        </ng-template>
-      </span>
-      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
-    </button>
-  </div>
-
-  <ng-template
-    cdkConnectedOverlay
-    [cdkConnectedOverlayOrigin]="trigger"
-    [cdkConnectedOverlayOpen]="isOpen"
-    [cdkConnectedOverlayPositions]="overlayPosition"
-    [cdkConnectedOverlayHasBackdrop]="true"
-    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
-    (backdropClick)="isOpen = false"
-    (detach)="close()"
-  >
-    <div class="tw-box-content">
-      <div
-        class="tw-bg-background tw-w-full tw-shadow-md tw-p-2 tw-rounded-md"
-        data-testid="environment-selector-dialog"
-        [@transformPanel]="'open'"
-        cdkTrapFocus
-        cdkTrapFocusAutoCapture
-        role="dialog"
-        aria-modal="true"
-      >
-        <ng-container *ngFor="let region of availableRegions; let i = index">
-          <button
-            type="button"
-            class="tw-text-main tw-w-full tw-text-left tw-py-0 tw-border tw-border-transparent tw-transition-all tw-duration-200 tw-ease-in-out tw-pr-2 tw-rounded-md"
-            (click)="toggle(region.key)"
-            [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
-            [attr.data-testid]="'environment-selector-dialog-item-' + i"
-          >
-            <i
-              class="bwi bwi-fw bwi-sm bwi-check"
-              style="padding-bottom: 1px"
-              aria-hidden="true"
-              [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
-            ></i>
-            <span>{{ region.domain }}</span>
-          </button>
-          <br />
-        </ng-container>
-        <button
-          type="button"
-          class="tw-text-main tw-w-full tw-text-left tw-py-0 tw-pr-2 tw-border tw-border-transparent tw-transition-all tw-duration-200 tw-ease-in-out tw-rounded-md"
-          (click)="toggle(ServerEnvironmentType.SelfHosted)"
-          [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
-          data-testid="environment-selector-dialog-item-self-hosted"
-        >
-          <i
-            class="bwi bwi-fw bwi-sm bwi-check"
-            style="padding-bottom: 1px"
-            aria-hidden="true"
-            [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
-          ></i>
-          <span>{{ "selfHostedServer" | i18n }}</span>
-        </button>
-      </div>
-    </div>
-  </ng-template>
-</ng-container>

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

@@ -1,135 +0,0 @@
-import { animate, state, style, transition, trigger } from "@angular/animations";
-import { ConnectedPosition } from "@angular/cdk/overlay";
-import { Component, EventEmitter, Output, Input, OnInit, OnDestroy } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-import { Observable, map, Subject, takeUntil } from "rxjs";
-
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { SelfHostedEnvConfigDialogComponent } from "@bitwarden/auth/angular";
-import {
-  EnvironmentService,
-  Region,
-  RegionConfig,
-} from "@bitwarden/common/platform/abstractions/environment.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { DialogService, ToastService } from "@bitwarden/components";
-
-export const ExtensionDefaultOverlayPosition: ConnectedPosition[] = [
-  {
-    originX: "start",
-    originY: "top",
-    overlayX: "start",
-    overlayY: "bottom",
-  },
-];
-export const DesktopDefaultOverlayPosition: ConnectedPosition[] = [
-  {
-    originX: "start",
-    originY: "top",
-    overlayX: "start",
-    overlayY: "bottom",
-  },
-];
-
-export interface EnvironmentSelectorRouteData {
-  overlayPosition?: ConnectedPosition[];
-}
-
-@Component({
-  selector: "environment-selector",
-  templateUrl: "environment-selector.component.html",
-  animations: [
-    trigger("transformPanel", [
-      state(
-        "void",
-        style({
-          opacity: 0,
-        }),
-      ),
-      transition(
-        "void => open",
-        animate(
-          "100ms linear",
-          style({
-            opacity: 1,
-          }),
-        ),
-      ),
-      transition("* => void", animate("100ms linear", style({ opacity: 0 }))),
-    ]),
-  ],
-  standalone: false,
-})
-export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
-  @Output() onOpenSelfHostedSettings = new EventEmitter<void>();
-  @Input() overlayPosition: ConnectedPosition[] = [
-    {
-      originX: "start",
-      originY: "bottom",
-      overlayX: "start",
-      overlayY: "top",
-    },
-  ];
-
-  protected isOpen = false;
-  protected ServerEnvironmentType = Region;
-  protected availableRegions = this.environmentService.availableRegions();
-  protected selectedRegion$: Observable<RegionConfig | undefined> =
-    this.environmentService.environment$.pipe(
-      map((e) => e.getRegion()),
-      map((r) => this.availableRegions.find((ar) => ar.key === r)),
-    );
-
-  private destroy$ = new Subject<void>();
-
-  constructor(
-    protected environmentService: EnvironmentService,
-    private route: ActivatedRoute,
-    private dialogService: DialogService,
-    private toastService: ToastService,
-    private i18nService: I18nService,
-  ) {}
-
-  ngOnInit() {
-    this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
-      if (data && data["overlayPosition"]) {
-        this.overlayPosition = data["overlayPosition"];
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  async toggle(option: Region) {
-    this.isOpen = !this.isOpen;
-    if (option === null) {
-      return;
-    }
-
-    /**
-     * Opens the self-hosted settings dialog when the self-hosted option is selected.
-     */
-    if (option === Region.SelfHosted) {
-      const dialogResult = await SelfHostedEnvConfigDialogComponent.open(this.dialogService);
-      if (dialogResult) {
-        this.toastService.showToast({
-          variant: "success",
-          title: "",
-          message: this.i18nService.t("environmentSaved"),
-        });
-      }
-      // Don't proceed to setEnvironment when the self-hosted dialog is cancelled
-      return;
-    }
-
-    await this.environmentService.setEnvironment(option);
-  }
-
-  close() {
-    this.isOpen = false;
-  }
-}

libs/angular/src/auth/environment-selector/environment-selector.component.html

@@ -0,0 +1,48 @@
+<ng-container
+  *ngIf="{
+    selectedRegion: selectedRegion$ | async,
+  } as data"
+>
+  <div class="tw-mb-1">
+    <bit-menu #environmentOptions>
+      <button
+        *ngFor="let region of availableRegions; let i = index"
+        bitMenuItem
+        type="button"
+        [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
+        (click)="toggle(region.key)"
+      >
+        <i
+          class="bwi bwi-fw bwi-sm bwi-check"
+          style="padding-bottom: 1px"
+          aria-hidden="true"
+          [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
+        ></i>
+        <span>{{ region.domain }}</span>
+      </button>
+      <button
+        bitMenuItem
+        type="button"
+        [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
+        (click)="toggle(ServerEnvironmentType.SelfHosted)"
+      >
+        <i
+          class="bwi bwi-fw bwi-sm bwi-check"
+          style="padding-bottom: 1px"
+          aria-hidden="true"
+          [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
+        ></i>
+        <span>{{ "selfHostedServer" | i18n }}</span>
+      </button>
+    </bit-menu>
+    <div bitTypography="body2">
+      {{ "accessing" | i18n }}:
+      <button [bitMenuTriggerFor]="environmentOptions" bitLink type="button">
+        <b class="tw-text-primary-600 tw-font-semibold">{{
+          data.selectedRegion?.domain || ("selfHostedServer" | i18n)
+        }}</b>
+        <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</ng-container>

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

@@ -0,0 +1,75 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy } from "@angular/core";
+import { Observable, map, Subject } from "rxjs";
+
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import { SelfHostedEnvConfigDialogComponent } from "@bitwarden/auth/angular";
+import {
+  EnvironmentService,
+  Region,
+  RegionConfig,
+} from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import {
+  DialogService,
+  LinkModule,
+  MenuModule,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+
+@Component({
+  selector: "environment-selector",
+  templateUrl: "environment-selector.component.html",
+  standalone: true,
+  imports: [CommonModule, I18nPipe, MenuModule, LinkModule, TypographyModule],
+})
+export class EnvironmentSelectorComponent implements OnDestroy {
+  protected ServerEnvironmentType = Region;
+  protected availableRegions = this.environmentService.availableRegions();
+  protected selectedRegion$: Observable<RegionConfig | undefined> =
+    this.environmentService.environment$.pipe(
+      map((e) => e.getRegion()),
+      map((r) => this.availableRegions.find((ar) => ar.key === r)),
+    );
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    public environmentService: EnvironmentService,
+    private dialogService: DialogService,
+    private toastService: ToastService,
+    private i18nService: I18nService,
+  ) {}
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  async toggle(option: Region) {
+    if (option === null) {
+      return;
+    }
+
+    /**
+     * Opens the self-hosted settings dialog when the self-hosted option is selected.
+     */
+    if (option === Region.SelfHosted) {
+      const dialogResult = await SelfHostedEnvConfigDialogComponent.open(this.dialogService);
+      if (dialogResult) {
+        this.toastService.showToast({
+          variant: "success",
+          title: "",
+          message: this.i18nService.t("environmentSaved"),
+        });
+      }
+      // Don't proceed to setEnvironment when the self-hosted dialog is cancelled
+      return;
+    }
+
+    await this.environmentService.setEnvironment(option);
+  }
+}