diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 5cc7c30bfb4c..134029df1e48 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -5830,6 +5830,9 @@ "settingDisabledByPolicy": { "message": "This setting is disabled by your organization's policy.", "description": "This hint text is displayed when a user setting is disabled due to an organization policy." + }, + "importPopoutDialogDesc": { + "message": "To import from a file, you need to pop out the extension to a new window." }, "zipPostalCodeLabel": { "message": "ZIP / Postal code" diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index a36396afa1ab..e3471e89fb22 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -324,7 +324,7 @@ const routes: Routes = [ path: "add-send", component: SendAddEditV2Component, canActivate: [authGuard], - data: { elevation: 1 } satisfies RouteDataProperties, + data: { elevation: 1, doNotSaveUrl: true } satisfies RouteDataProperties, }, { path: "edit-send", diff --git a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts index 1f0d9f2a0c9c..c7ab6f925b08 100644 --- a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts +++ b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, input, OnInit } from "@angular/core"; +import { Component, effect, inject, input, signal, ChangeDetectionStrategy } from "@angular/core"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { SendType } from "@bitwarden/common/tools/send/enums/send-type"; @@ -10,32 +10,39 @@ import { FilePopoutUtilsService } from "../../services/file-popout-utils.service import { SendFilePopoutDialogComponent } from "./send-file-popout-dialog.component"; -// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush -// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, selector: "send-file-popout-dialog-container", templateUrl: "./send-file-popout-dialog-container.component.html", imports: [JslibModule, CommonModule], }) -export class SendFilePopoutDialogContainerComponent implements OnInit { - // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals - // eslint-disable-next-line @angular-eslint/prefer-signals - config = input.required(); - - constructor( - private dialogService: DialogService, - private filePopoutUtilsService: FilePopoutUtilsService, - ) {} - - ngOnInit() { - if ( - this.config().sendType === SendType.File && - this.config().mode === "add" && - this.filePopoutUtilsService.showFilePopoutMessage(window) - ) { - this.dialogService.open(SendFilePopoutDialogComponent, { - positionStrategy: new CenterPositionStrategy(), - }); - } +export class SendFilePopoutDialogContainerComponent { + private readonly dialogService = inject(DialogService); + private readonly filePopoutUtilsService = inject(FilePopoutUtilsService); + + readonly config = input.required(); + + /** + * Tracks if the dialog has already been opened. This prevents multiple dialogs from opening if config is updated. + */ + private readonly dialogOpened = signal(false); + + constructor() { + effect(() => { + if (this.dialogOpened()) { + return; + } + + if ( + this.config().sendType === SendType.File && + this.config().mode === "add" && + this.filePopoutUtilsService.showFilePopoutMessage(window) + ) { + this.dialogService.open(SendFilePopoutDialogComponent, { + positionStrategy: new CenterPositionStrategy(), + }); + this.dialogOpened.set(true); + } + }); } } diff --git a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts index 23fa744995aa..0406ad76cadb 100644 --- a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts +++ b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts @@ -1,5 +1,6 @@ import { CommonModule } from "@angular/common"; import { Component } from "@angular/core"; +import { Router } from "@angular/router"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components"; @@ -14,13 +15,18 @@ import BrowserPopupUtils from "../../../../platform/browser/browser-popup-utils" imports: [JslibModule, CommonModule, DialogModule, ButtonModule, TypographyModule], }) export class SendFilePopoutDialogComponent { - constructor(private dialogService: DialogService) {} + constructor( + private dialogService: DialogService, + private router: Router, + ) {} async popOutWindow() { await BrowserPopupUtils.openCurrentPagePopout(window); } - close() { + // If the user selects "cancel" when presented the dialog, navigate back to the main Send tab + async close() { this.dialogService.closeAll(); + await this.router.navigate(["/tabs/send"]); } } diff --git a/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html b/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html index 5458b46535a1..180b7988ee5a 100644 --- a/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html +++ b/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html @@ -12,6 +12,8 @@ > + + + + + diff --git a/apps/browser/src/tools/popup/settings/import/import-file-popout-dialog.component.ts b/apps/browser/src/tools/popup/settings/import/import-file-popout-dialog.component.ts new file mode 100644 index 000000000000..6ba2c9df3d27 --- /dev/null +++ b/apps/browser/src/tools/popup/settings/import/import-file-popout-dialog.component.ts @@ -0,0 +1,31 @@ +import { CommonModule } from "@angular/common"; +import { Component, ChangeDetectionStrategy } from "@angular/core"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components"; + +import BrowserPopupUtils from "../../../../platform/browser/browser-popup-utils"; +import { PopupRouterCacheService } from "../../../../platform/popup/view-cache/popup-router-cache.service"; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "import-file-popout-dialog", + templateUrl: "./import-file-popout-dialog.component.html", + imports: [JslibModule, CommonModule, DialogModule, ButtonModule, TypographyModule], +}) +export class ImportFilePopoutDialogComponent { + constructor( + private dialogService: DialogService, + private popupRouterCacheService: PopupRouterCacheService, + ) {} + + async popOutWindow() { + await BrowserPopupUtils.openCurrentPagePopout(window); + } + + // If the user selects "cancel" when presented the dialog, navigate back to the main Send tab + async close() { + this.dialogService.closeAll(); + await this.popupRouterCacheService.back(); + } +} diff --git a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts index ff6e9b4065c3..1bd1baf26d76 100644 --- a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts +++ b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts @@ -13,8 +13,6 @@ import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/ciphe import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction"; import { BadgeComponent, ItemModule, ToastOptions, ToastService } from "@bitwarden/components"; -import { BrowserApi } from "../../../platform/browser/browser-api"; -import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils"; import { PopOutComponent } from "../../../platform/popup/components/pop-out.component"; import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component"; import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component"; @@ -77,9 +75,6 @@ export class VaultSettingsV2Component implements OnInit, OnDestroy { async import() { await this.router.navigate(["/import"]); - if (await BrowserApi.isPopupOpen()) { - await BrowserPopupUtils.openCurrentPagePopout(window); - } } async sync() {