Remove v1 account switcher (#12577)

Remove conditional rendering for extensionRefresh feature flag

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

apps/browser/src/auth/popup/account-switching/account-switcher.component.html

@@ -1,182 +1,78 @@
-<ng-container *ngIf="extensionRefreshFlag">
+<popup-page [loading]="loading">
-  <popup-page [loading]="loading">
+  <popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton>
-    <popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton>
+    <ng-container slot="end">
-      <ng-container slot="end">
+      <app-pop-out></app-pop-out>
-        <app-pop-out></app-pop-out>
+      <app-current-account></app-current-account>
-        <app-current-account></app-current-account>
-      </ng-container>
-    </popup-header>
-
-    <ng-container *ngIf="availableAccounts$ | async as availableAccounts">
-      <bit-section [disableMargin]="!enableAccountSwitching">
-        <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
-          <div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }">
-            <auth-account
-              [account]="availableAccount"
-              [extensionRefreshFlag]="extensionRefreshFlag"
-              (loading)="loading = $event"
-            ></auth-account>
-          </div>
-
-          <ng-container *ngIf="enableAccountSwitching">
-            <bit-section-header *ngIf="isFirst">
-              <h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2>
-            </bit-section-header>
-
-            <div *ngIf="!availableAccount.isActive">
-              <auth-account
-                [account]="availableAccount"
-                [extensionRefreshFlag]="extensionRefreshFlag"
-                (loading)="loading = $event"
-              ></auth-account>
-            </div>
-          </ng-container>
-        </ng-container>
-
-        <!--
-          If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of
-          'SPECIAL_ADD_ACCOUNT_ID'. Since we don't want to count this as one of the actual accounts,
-          we check to make sure the 'id' of the last 'availableAccount' is not equal to 'SPECIAL_ADD_ACCOUNT_ID'
-      -->
-        <p
-          class="tw-text-sm tw-text-muted"
-          *ngIf="
-            availableAccounts.length >= accountLimit &&
-            availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId
-          "
-        >
-          {{ "accountLimitReached" | i18n }}
-        </p>
-      </bit-section>
     </ng-container>
+  </popup-header>
 
-    <div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount">
+  <ng-container *ngIf="availableAccounts$ | async as availableAccounts">
-      <bit-section>
+    <bit-section [disableMargin]="!enableAccountSwitching">
-        <bit-section-header>
+      <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
-          <h2 bitTypography="h6" class="tw-font-semibold">
+        <div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }">
-            {{ "options" | i18n }}
+          <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
-          </h2>
+        </div>
-        </bit-section-header>
 
-        <bit-item>
+        <ng-container *ngIf="enableAccountSwitching">
-          <button
+          <bit-section-header *ngIf="isFirst">
-            type="button"
+            <h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2>
-            bit-item-content
+          </bit-section-header>
-            (click)="lock(currentAccount.id)"
-            [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
-            [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
-          >
-            <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
-            {{ "lockNow" | i18n }}
-          </button>
-        </bit-item>
-        <bit-item>
-          <button type="button" bit-item-content (click)="logOut(currentAccount.id)">
-            <i
-              slot="start"
-              class="bwi bwi-sign-out tw-text-2xl tw-text-main"
-              aria-hidden="true"
-            ></i>
-            {{ "logOut" | i18n }}
-          </button>
-        </bit-item>
-        <bit-item *ngIf="showLockAll$ | async">
-          <button type="button" bit-item-content (click)="lockAll()">
-            <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
-            {{ "lockAll" | i18n }}
-          </button>
-        </bit-item>
-      </bit-section>
-    </div>
-  </popup-page>
-</ng-container>
 
-<ng-container *ngIf="!extensionRefreshFlag">
+          <div *ngIf="!availableAccount.isActive">
-  <app-header>
+            <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
-    <div class="left">
+          </div>
-      <button type="button" (click)="back()">{{ "close" | i18n }}</button>
+        </ng-container>
-    </div>
+      </ng-container>
-    <div class="center tw-font-bold">{{ "switchAccounts" | i18n }}</div>
-  </app-header>
 
-  <main
+      <!--
-    *ngIf="loading"
-    class="tw-absolute tw-z-50 tw-box-border tw-flex tw-cursor-not-allowed tw-items-center tw-justify-center tw-bg-background tw-opacity-60"
-  >
-    <i class="bwi bwi-spinner bwi-2x bwi-spin" aria-hidden="true"></i>
-  </main>
-  <main>
-    <div class="tw-p-2">
-      <div *ngIf="availableAccounts$ | async as availableAccounts">
-        <ul class="tw-grid tw-list-none tw-gap-2" role="listbox">
-          <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
-            <li *ngIf="availableAccount.isActive" class="tw-mb-4" role="option">
-              <auth-account
-                [account]="availableAccount"
-                (loading)="loading = $event"
-              ></auth-account>
-            </li>
-            <ng-container *ngIf="enableAccountSwitching">
-              <div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
-                {{ "availableAccounts" | i18n }}
-              </div>
-              <li *ngIf="!availableAccount.isActive" role="option">
-                <auth-account
-                  [account]="availableAccount"
-                  (loading)="loading = $event"
-                ></auth-account>
-              </li>
-            </ng-container>
-          </ng-container>
-        </ul>
-        <!--
           If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of
           'SPECIAL_ADD_ACCOUNT_ID'. Since we don't want to count this as one of the actual accounts,
           we check to make sure the 'id' of the last 'availableAccount' is not equal to 'SPECIAL_ADD_ACCOUNT_ID'
       -->
-        <p
+      <p
-          class="tw-text-sm tw-text-muted"
+        class="tw-text-sm tw-text-muted"
-          *ngIf="
+        *ngIf="
-            availableAccounts.length >= accountLimit &&
+          availableAccounts.length >= accountLimit &&
-            availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId
+          availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId
-          "
+        "
-        >
+      >
-          {{ "accountLimitReached" | i18n }}
+        {{ "accountLimitReached" | i18n }}
-        </p>
+      </p>
-      </div>
+    </bit-section>
+  </ng-container>
 
-      <div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount">
+  <div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount">
-        <div class="tw-mb-2 tw-uppercase tw-text-muted">{{ "options" | i18n }}</div>
+    <bit-section>
-        <div class="tw-grid tw-gap-2">
+      <bit-section-header>
-          <button
+        <h2 bitTypography="h6" class="tw-font-semibold">
-            type="button"
+          {{ "options" | i18n }}
-            class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3 disabled:tw-cursor-not-allowed disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60"
+        </h2>
-            (click)="lock(currentAccount.id)"
+      </bit-section-header>
-            [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
+
-            [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
+      <bit-item>
-          >
+        <button
-            <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
+          type="button"
-            {{ "lockNow" | i18n }}
+          bit-item-content
-          </button>
+          (click)="lock(currentAccount.id)"
-          <button
+          [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
-            type="button"
+          [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
-            class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
+        >
-            (click)="logOut(currentAccount.id)"
+          <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
-          >
+          {{ "lockNow" | i18n }}
-            <i class="bwi bwi-sign-out tw-text-2xl" aria-hidden="true"></i>
+        </button>
-            {{ "logOut" | i18n }}
+      </bit-item>
-          </button>
+      <bit-item>
-          <button
+        <button type="button" bit-item-content (click)="logOut(currentAccount.id)">
-            type="button"
+          <i slot="start" class="bwi bwi-sign-out tw-text-2xl tw-text-main" aria-hidden="true"></i>
-            class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
+          {{ "logOut" | i18n }}
-            (click)="lockAll()"
+        </button>
-            *ngIf="showLockAll$ | async"
+      </bit-item>
-          >
+      <bit-item *ngIf="showLockAll$ | async">
-            <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
+        <button type="button" bit-item-content (click)="lockAll()">
-            {{ "lockAll" | i18n }}
+          <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
-          </button>
+          {{ "lockAll" | i18n }}
-        </div>
+        </button>
-      </div>
+      </bit-item>
-    </div>
+    </bit-section>
-  </main>
+  </div>
-</ng-container>
+</popup-page>

apps/browser/src/auth/popup/account-switching/account-switcher.component.ts

@@ -10,9 +10,7 @@ import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeou
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
   AvatarModule,
@@ -25,7 +23,6 @@ import {
 
 import { enableAccountSwitching } from "../../../platform/flags";
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
-import { HeaderComponent } from "../../../platform/popup/header.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
 
@@ -44,7 +41,6 @@ import { AccountSwitcherService } from "./services/account-switcher.service";
     AvatarModule,
     PopupPageComponent,
     PopupHeaderComponent,
-    HeaderComponent,
     PopOutComponent,
     CurrentAccountComponent,
     AccountComponent,
@@ -58,7 +54,6 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
 
   loading = false;
   activeUserCanLock = false;
-  extensionRefreshFlag = false;
   enableAccountSwitching = true;
 
   constructor(
@@ -70,7 +65,6 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
     private router: Router,
     private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
     private authService: AuthService,
-    private configService: ConfigService,
     private lockService: LockService,
   ) {}
 
@@ -109,9 +103,6 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
 
   async ngOnInit() {
     this.enableAccountSwitching = enableAccountSwitching();
-    this.extensionRefreshFlag = await this.configService.getFeatureFlag(
-      FeatureFlag.ExtensionRefresh,
-    );
 
     const availableVaultTimeoutActions = await firstValueFrom(
       this.vaultTimeoutSettingsService.availableVaultTimeoutActions$(),

apps/browser/src/auth/popup/account-switching/account.component.html

@@ -1,109 +1,44 @@
-<ng-container *ngIf="extensionRefreshFlag">
+<bit-item *ngIf="account.id !== specialAccountAddId">
-  <bit-item *ngIf="account.id !== specialAccountAddId">
+  <button bit-item-content type="button" (click)="selectAccount(account.id)">
-    <button bit-item-content type="button" (click)="selectAccount(account.id)">
+    <bit-avatar
-      <bit-avatar
+      slot="start"
-        slot="start"
+      [id]="account.id"
-        [id]="account.id"
+      [text]="account.name"
-        [text]="account.name"
+      [color]="account.avatarColor"
-        [color]="account.avatarColor"
+      size="small"
-        size="small"
+      aria-hidden="true"
-        aria-hidden="true"
+    ></bit-avatar>
-      ></bit-avatar>
 
-      <span class="tw-sr-only" *ngIf="status.text === 'active'">
+    <span class="tw-sr-only" *ngIf="status.text === 'active'"> {{ "activeAccount" | i18n }}: </span>
-        {{ "activeAccount" | i18n }}:
+    <span class="tw-sr-only" *ngIf="status.text !== 'active'">
-      </span>
+      {{ "switchToAccount" | i18n }}
-      <span class="tw-sr-only" *ngIf="status.text !== 'active'">
+    </span>
-        {{ "switchToAccount" | i18n }}
+    <div class="tw-max-w-64 tw-truncate">
-      </span>
+      {{ account.email }}
-      <div class="tw-max-w-64 tw-truncate">
-        {{ account.email }}
-      </div>
-
-      <ng-container slot="secondary">
-        <div class="tw-max-w-64 tw-truncate tw-text-sm">
-          <span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
-          {{ account.server }}
-        </div>
-
-        <div class="tw-text-sm tw-italic" [attr.aria-hidden]="status.text === 'active'">
-          <span class="tw-sr-only">(</span>
-          <span [ngClass]="status.text === 'active' ? 'tw-font-bold tw-text-success' : ''">{{
-            status.text
-          }}</span>
-          <span class="tw-sr-only">)</span>
-        </div>
-      </ng-container>
-
-      <i slot="end" class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
-    </button>
-  </bit-item>
-
-  <bit-item *ngIf="account.id === specialAccountAddId">
-    <button type="button" bit-item-content (click)="selectAccount(account.id)">
-      <i slot="start" class="bwi bwi-plus tw-text-2xl tw-text-main" aria-hidden="true"></i>
-      {{ account.name | i18n }}
-    </button>
-  </bit-item>
-</ng-container>
-
-<ng-container *ngIf="!extensionRefreshFlag">
-  <button
-    *ngIf="account.id !== specialAccountAddId"
-    type="button"
-    class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
-    (click)="selectAccount(account.id)"
-  >
-    <div class="tw-flex-shrink-0">
-      <bit-avatar
-        [id]="account.id"
-        [text]="account.name"
-        [color]="account.avatarColor"
-        size="small"
-        aria-hidden="true"
-      ></bit-avatar>
     </div>
-    <div class="tw-text-left">
-      <span class="tw-sr-only" *ngIf="status.text === 'active'">
-        {{ "activeAccount" | i18n }}:
-      </span>
-      <span class="tw-sr-only" *ngIf="status.text !== 'active'">
-        {{ "switchToAccount" | i18n }}
-      </span>
-      <div class="tw-max-w-64 tw-truncate">
-        {{ account.email }}
-      </div>
 
-      <div class="account-switcher-row-details tw-max-w-64 tw-truncate tw-text-sm">
+    <ng-container slot="secondary">
+      <div class="tw-max-w-64 tw-truncate tw-text-sm">
         <span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
         {{ account.server }}
       </div>
 
-      <div
+      <div class="tw-text-sm tw-italic" [attr.aria-hidden]="status.text === 'active'">
-        class="account-switcher-row-details tw-text-sm tw-italic"
-        [attr.aria-hidden]="status.text === 'active'"
-      >
         <span class="tw-sr-only">(</span>
         <span [ngClass]="status.text === 'active' ? 'tw-font-bold tw-text-success' : ''">{{
           status.text
         }}</span>
         <span class="tw-sr-only">)</span>
       </div>
-    </div>
+    </ng-container>
-    <div class="tw-ml-auto tw-flex-shrink-0">
-      <i class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
-    </div>
-  </button>
 
-  <button
+    <i slot="end" class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
-    *ngIf="account.id === specialAccountAddId"
-    type="button"
-    class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
-    (click)="selectAccount(account.id)"
-  >
-    <i class="bwi bwi-plus tw-text-2xl" aria-hidden="true"></i>
-    <div>
-      {{ account.name | i18n }}
-    </div>
   </button>
-</ng-container>
+</bit-item>
+
+<bit-item *ngIf="account.id === specialAccountAddId">
+  <button type="button" bit-item-content (click)="selectAccount(account.id)">
+    <i slot="start" class="bwi bwi-plus tw-text-2xl tw-text-main" aria-hidden="true"></i>
+    {{ account.name | i18n }}
+  </button>
+</bit-item>

apps/browser/src/auth/popup/account-switching/account.component.ts

@@ -19,7 +19,6 @@ import { AccountSwitcherService, AvailableAccount } from "./services/account-swi
 })
 export class AccountComponent {
   @Input() account: AvailableAccount;
-  @Input() extensionRefreshFlag: boolean = false;
   @Output() loading = new EventEmitter<boolean>();
 
   constructor(