1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 13:53:34 +00:00

[PM-1504] Migrate Dialogs to DialogService (#5013)

This PR introduces a generic `DialogService` which can be used by all the clients. This allows us to decouple dialogs from the `PlatformUtilsHelper`.

The `DialogService` provides a new method, `openSimpleDialog` which is the new interface for that type of dialogs.

This gives us 3 different implementations: 
- Web: DialogService modern dialogs
- Browser: SweetAlert
- Desktop: Native electron based
This commit is contained in:
Oscar Hinton
2023-05-02 18:46:03 +02:00
committed by GitHub
parent 7c4b2c04b9
commit 4e1867682f
144 changed files with 1514 additions and 1212 deletions

View File

@@ -16,26 +16,24 @@ import {
TemplateRef,
} from "@angular/core";
import { NavigationEnd, Router } from "@angular/router";
import { filter, Subject, switchMap, takeUntil } from "rxjs";
import { filter, firstValueFrom, Subject, switchMap, takeUntil } from "rxjs";
import {
DialogServiceAbstraction,
SimpleDialogCloseType,
} from "@bitwarden/angular/services/dialog";
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
import { SimpleDialogOptions } from "./simple-configurable-dialog/models/simple-dialog-options";
import { SimpleDialogOptions } from "../../../angular/src/services/dialog/simple-dialog-options";
import { SimpleConfigurableDialogComponent } from "./simple-configurable-dialog/simple-configurable-dialog.component";
@Injectable()
export class DialogService extends Dialog implements OnDestroy {
export class DialogService extends Dialog implements OnDestroy, DialogServiceAbstraction {
private _destroy$ = new Subject<void>();
private backDropClasses = [
"tw-fixed",
"tw-bg-black",
"tw-bg-opacity-30",
"tw-inset-0",
// CDK dialog panels have a default z-index of 1000. Matching this allows us to easily stack dialogs.
"tw-z-[1000]",
];
private backDropClasses = ["tw-fixed", "tw-bg-black", "tw-bg-opacity-30", "tw-inset-0"];
constructor(
/** Parent class constructor */
@@ -83,16 +81,33 @@ export class DialogService extends Dialog implements OnDestroy {
return super.open(componentOrTemplateRef, config);
}
/**
* Opens a simple dialog, returns true if the user accepted the dialog.
*
* @param {SimpleDialogOptions} simpleDialogOptions - An object containing options for the dialog.
* @returns `boolean` - True if the user accepted the dialog, false otherwise.
*/
async openSimpleDialog(simpleDialogOptions: SimpleDialogOptions): Promise<boolean> {
const dialogRef = this.open(SimpleConfigurableDialogComponent, {
data: simpleDialogOptions,
disableClose: simpleDialogOptions.disableClose,
});
return (await firstValueFrom(dialogRef.closed)) == SimpleDialogCloseType.ACCEPT;
}
/**
* Opens a simple dialog.
*
* @deprecated Use `openSimpleDialog` instead. If you find a use case for the `dialogRef`
* please let #wg-component-library know and we can un-deprecate this method.
*
* @param {SimpleDialogOptions} simpleDialogOptions - An object containing options for the dialog.
* @returns `DialogRef` - The reference to the opened dialog.
* Contains a closed observable which can be subscribed to for determining which button
* a user pressed (see `SimpleDialogCloseType`)
*/
openSimpleDialog(simpleDialogOptions: SimpleDialogOptions): DialogRef {
// Method needs to return dialog reference so devs can sub to closed and get results.
openSimpleDialogRef(simpleDialogOptions: SimpleDialogOptions): DialogRef {
return this.open(SimpleConfigurableDialogComponent, {
data: simpleDialogOptions,
disableClose: simpleDialogOptions.disableClose,