[PM-6823] Vault Header Refresh (#9197)

* add V2 variant to pop-out component

* Add V2 version of the vault header

* refactor IconButtonModule import

* refactor IconButtonModule import

* use feature flag to drive pop out redesign

* use an anchor rather than a button

* remove VaultFilterService and add todo comment

* remove no-decoration class will be fixed by component library

* bring back constructor

apps/browser/src/_locales/en/messages.json

@@ -3148,5 +3148,8 @@
   },
   "errorAssigningTargetFolder": {
     "message": "Error assigning target folder."
+  },
+  "new": {
+    "message": "New"
   }
 }

apps/browser/src/platform/popup/components/pop-out.component.html

@@ -1,5 +1,15 @@
-<ng-container *ngIf="show">
+<ng-container *ngIf="show && !useRefreshVariant">
   <button type="button" (click)="expand()" appA11yTitle="{{ 'popOutNewWindow' | i18n }}">
     <i class="bwi bwi-external-link bwi-rotate-270 bwi-lg bwi-fw" aria-hidden="true"></i>
   </button>
 </ng-container>
+<ng-container *ngIf="show && useRefreshVariant">
+  <button
+    bitIconButton="bwi-popout"
+    size="small"
+    type="button"
+    appA11yTitle="{{ 'popOutNewWindow' | i18n }}"
+    [title]="'popOutNewWindow' | i18n"
+    (click)="expand()"
+  ></button>
+</ng-container>

apps/browser/src/platform/popup/components/pop-out.component.ts

@@ -2,7 +2,10 @@ import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { IconButtonModule } from "@bitwarden/components";
 
 import BrowserPopupUtils from "../browser-popup-utils";
 
@@ -10,14 +13,20 @@ import BrowserPopupUtils from "../browser-popup-utils";
   selector: "app-pop-out",
   templateUrl: "pop-out.component.html",
   standalone: true,
-  imports: [CommonModule, JslibModule],
+  imports: [CommonModule, JslibModule, IconButtonModule],
 })
 export class PopOutComponent implements OnInit {
   @Input() show = true;
+  useRefreshVariant = false;
 
-  constructor(private platformUtilsService: PlatformUtilsService) {}
+  constructor(
+    private platformUtilsService: PlatformUtilsService,
+    private configService: ConfigService,
+  ) {}
+
+  async ngOnInit() {
+    this.useRefreshVariant = await this.configService.getFeatureFlag(FeatureFlag.ExtensionRefresh);
 
-  ngOnInit() {
     if (this.show) {
       if (
         (BrowserPopupUtils.inSidebar(window) && this.platformUtilsService.isFirefox()) ||

apps/browser/src/vault/popup/components/vault/vault-v2.component.html

@@ -1 +1,13 @@
-<h1>Vault V2 Extension Refresh</h1>
+<popup-page>
+  <popup-header slot="header" [pageTitle]="'vault' | i18n">
+    <ng-container slot="end">
+      <!-- TODO PM-6826: add selectedVault query param -->
+      <a bitButton buttonType="primary" type="button" routerLink="/add-cipher">
+        <i class="bwi bwi-plus-f" aria-hidden="true"></i>
+        {{ "new" | i18n }}
+      </a>
+      <app-pop-out></app-pop-out>
+      <app-current-account></app-current-account>
+    </ng-container>
+  </popup-header>
+</popup-page>