bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00
Code Issues Releases Wiki Activity

[PM-12681] Enable new Send Add/Edit Dialog on web (#13361)

Browse Source 
* Create web-specific new-send-dropdown component

* Create web-specifc Send Add/Edit dialog

* Use new-send-dropdown and replace old Send Add/Edit with new Add/Edit dialog

* Delete old Send Add/Edit component

* Remove unused entries from en/messages.json

* Add cancel button to close dialog

* Remove unused RouterLink

* Fix typechecking issue

* Use observable to show/hide premium badge

* Add documentation

* Move assignment of observable into ctor, as it no longer requires a promise for assignment

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Daniel James Smith
2025-03-04 16:09:37 +01:00
committed by GitHub
parent 0d68d22b98
commit bfbad99fb7
10 changed files with 393 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts Normal file
View File

@@ -0,0 +1,65 @@
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { Router } from "@angular/router";
import { firstValueFrom, Observable, of, switchMap } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
import { BadgeModule, ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
import { DefaultSendFormConfigService } from "@bitwarden/send-ui";
import { SendAddEditComponent } from "../send-add-edit.component";
@Component({
selector: "tools-new-send-dropdown",
templateUrl: "new-send-dropdown.component.html",
standalone: true,
imports: [JslibModule, CommonModule, ButtonModule, MenuModule, BadgeModule],
providers: [DefaultSendFormConfigService],
})
/**
* A dropdown component that allows the user to create a new Send of a specific type.
*/
export class NewSendDropdownComponent {
/** If true, the plus icon will be hidden */
@Input() hideIcon: boolean = false;
/** SendType provided for the markup to pass back the selected type of Send */
protected sendType = SendType;
/** Indicates whether the user can access premium features. */
protected canAccessPremium$: Observable<boolean>;
constructor(
private router: Router,
private billingAccountProfileStateService: BillingAccountProfileStateService,
private accountService: AccountService,
private dialogService: DialogService,
private addEditFormConfigService: DefaultSendFormConfigService,
) {
this.canAccessPremium$ = this.accountService.activeAccount$.pipe(
switchMap((account) =>
account
? this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id)
: of(false),
),
);
}
/**
* Opens the SendAddEditComponent for a new Send with the provided type.
* If has user does not have premium access and the type is File, the user will be redirected to the premium settings page.
* @param type The type of Send to create.
*/
async createSend(type: SendType) {
if (!(await firstValueFrom(this.canAccessPremium$)) && type === SendType.File) {
return await this.router.navigate(["settings/subscription/premium"]);
}
const formConfig = await this.addEditFormConfigService.buildConfig("add", undefined, type);
await SendAddEditComponent.open(this.dialogService, { formConfig });
}
}