From bed8239c928e7a1be7f941c783d77345a44dae86 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Thu, 16 May 2024 14:30:44 -0500
Subject: [PATCH] [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        |  3 +++
 .../popup/components/pop-out.component.html       | 12 +++++++++++-
 .../popup/components/pop-out.component.ts         | 15 ++++++++++++---
 .../components/vault/vault-v2.component.html      | 14 +++++++++++++-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 828cca3c85..1854f1f6ff 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3148,5 +3148,8 @@
   },
   "errorAssigningTargetFolder": {
     "message": "Error assigning target folder."
+  },
+  "new": {
+    "message": "New"
   }
 }
diff --git a/apps/browser/src/platform/popup/components/pop-out.component.html b/apps/browser/src/platform/popup/components/pop-out.component.html
index 73bf76941d..c3f1f8ca15 100644
--- a/apps/browser/src/platform/popup/components/pop-out.component.html
+++ b/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>
diff --git a/apps/browser/src/platform/popup/components/pop-out.component.ts b/apps/browser/src/platform/popup/components/pop-out.component.ts
index 154bb55a0c..54bed7aa34 100644
--- a/apps/browser/src/platform/popup/components/pop-out.component.ts
+++ b/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()) ||
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
index a653f46332..c36d2d2db9 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/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>