Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

PM-2051 Update Bulk Remove Dialog (#8724)

Browse Source 
* PM-2051 Update Bulk Remove Dialog

* PM-2051 Addressed review comments
This commit is contained in:
KiruthigaManivannan 2024-05-21 18:41:07 +05:30 committed by GitHub
parent c05a2a0d07
commit 7384a5051e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 116 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html
View File

@ -1,20 +1,5 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle"> <bit-dialog dialogSize="large" [title]="'removeUsers' | i18n">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document"> <ng-container bitDialogContent>
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="bulkTitle">
{{ "removeUsers" | i18n }}
</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<app-callout type="danger" *ngIf="users.length <= 0"> <app-callout type="danger" *ngIf="users.length <= 0">
{{ "noSelectedUsersApplicable" | i18n }} {{ "noSelectedUsersApplicable" | i18n }}
</app-callout> </app-callout>
@ -23,28 +8,29 @@
</app-callout> </app-callout>
<ng-container *ngIf="!done"> <ng-container *ngIf="!done">
<app-callout type="warning" *ngIf="users.length > 0 && !error"> <app-callout type="warning" *ngIf="users.length > 0 && !error">
<p>{{ removeUsersWarning }}</p> <p bitTypography="body1">{{ removeUsersWarning }}</p>
<p *ngIf="this.showNoMasterPasswordWarning"> <p *ngIf="this.showNoMasterPasswordWarning" bitTypography="body1">
{{ "removeMembersWithoutMasterPasswordWarning" | i18n }} {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
</p> </p>
</app-callout> </app-callout>
<table class="table table-hover table-list"> <bit-table>
<thead> <ng-container header>
<tr> <tr>
<th colspan="2">{{ "user" | i18n }}</th> <th bitCell colspan="2">{{ "user" | i18n }}</th>
<th *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th> <th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
</tr> </tr>
</thead> </ng-container>
<tr *ngFor="let user of users"> <ng-template body>
<td width="30"> <tr bitRow *ngFor="let user of users">
<td bitCell class="tw-w-5">
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar> <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td> </td>
<td> <td bitCell>
{{ user.email }} {{ user.email }}
<small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small> <small class="tw-text-muted tw-block" *ngIf="user.name">{{ user.name }}</small>
</td> </td>
<td *ngIf="this.showNoMasterPasswordWarning"> <td bitCell *ngIf="this.showNoMasterPasswordWarning">
<span class="text-muted d-block tw-lowercase"> <span class="tw-text-muted tw-block tw-lowercase">
<ng-container *ngIf="user.hasMasterPassword === true"> - </ng-container> <ng-container *ngIf="user.hasMasterPassword === true"> - </ng-container>
<ng-container *ngIf="user.hasMasterPassword === false"> <ng-container *ngIf="user.hasMasterPassword === false">
<i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i> <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
@ -53,49 +39,50 @@
</span> </span>
</td> </td>
</tr> </tr>
</table> </ng-template>
</bit-table>
</ng-container> </ng-container>
<ng-container *ngIf="done"> <ng-container *ngIf="done">
<table class="table table-hover table-list"> <bit-table>
<thead> <ng-container header>
<tr> <tr>
<th colspan="2">{{ "user" | i18n }}</th> <th bitCell colspan="2">{{ "user" | i18n }}</th>
<th>{{ "status" | i18n }}</th> <th bitCell>{{ "status" | i18n }}</th>
</tr> </tr>
</thead> </ng-container>
<tr *ngFor="let user of users"> <ng-template body>
<td width="30"> <tr bitRow *ngFor="let user of users">
<td bitCell class="tw-w-5">
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar> <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td> </td>
<td> <td bitCell>
{{ user.email }} {{ user.email }}
<small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small> <small class="tw-text-muted tw-block" *ngIf="user.name">{{ user.name }}</small>
</td> </td>
<td *ngIf="statuses.has(user.id)"> <td *ngIf="statuses.has(user.id)" bitCell>
{{ statuses.get(user.id) }} {{ statuses.get(user.id) }}
</td> </td>
<td *ngIf="!statuses.has(user.id)"> <td *ngIf="!statuses.has(user.id)" bitCell>
{{ "bulkFilteredMessage" | i18n }} {{ "bulkFilteredMessage" | i18n }}
</td> </td>
</tr> </tr>
</table> </ng-template>
</bit-table>
</ng-container> </ng-container>
</div> </ng-container>
<div class="modal-footer"> <ng-container bitDialogFooter>
<button <button
type="submit"
class="btn btn-primary btn-submit"
*ngIf="!done && users.length > 0" *ngIf="!done && users.length > 0"
bitButton
type="submit"
buttonType="primary"
[disabled]="loading" [disabled]="loading"
(click)="submit()" [bitAction]="submit"
> >
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i> {{ "removeUsers" | i18n }}
<span>{{ "removeUsers" | i18n }}</span>
</button> </button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> <button bitButton type="button" buttonType="secondary" bitDialogClose>
{{ "close" | i18n }} {{ "close" | i18n }}
</button> </button>
</div> </ng-container>
</div> </bit-dialog>
</div>
</div>

41
apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.ts
View File

@ -1,30 +1,26 @@
import { Component, Input } from "@angular/core"; import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { OrganizationUserService } from "@bitwarden/common/admin-console/abstractions/organization-user/organization-user.service"; import { OrganizationUserService } from "@bitwarden/common/admin-console/abstractions/organization-user/organization-user.service";
import { OrganizationUserStatusType } from "@bitwarden/common/admin-console/enums"; import { OrganizationUserStatusType } from "@bitwarden/common/admin-console/enums";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { DialogService } from "@bitwarden/components";
import { BulkUserDetails } from "./bulk-status.component"; import { BulkUserDetails } from "./bulk-status.component";
type BulkRemoveDialogData = {
organizationId: string;
users: BulkUserDetails[];
};
@Component({ @Component({
selector: "app-bulk-remove", selector: "app-bulk-remove",
templateUrl: "bulk-remove.component.html", templateUrl: "bulk-remove.component.html",
}) })
export class BulkRemoveComponent { export class BulkRemoveComponent {
@Input() organizationId: string; organizationId: string;
@Input() set users(value: BulkUserDetails[]) { users: BulkUserDetails[];
this._users = value;
this.showNoMasterPasswordWarning = this._users.some(
(u) => u.status > OrganizationUserStatusType.Invited && u.hasMasterPassword === false,
);
}
get users(): BulkUserDetails[] {
return this._users;
}
private _users: BulkUserDetails[];
statuses: Map<string, string> = new Map(); statuses: Map<string, string> = new Map();
@ -34,12 +30,19 @@ export class BulkRemoveComponent {
showNoMasterPasswordWarning = false; showNoMasterPasswordWarning = false;
constructor( constructor(
@Inject(DIALOG_DATA) protected data: BulkRemoveDialogData,
protected apiService: ApiService, protected apiService: ApiService,
protected i18nService: I18nService, protected i18nService: I18nService,
private organizationUserService: OrganizationUserService, private organizationUserService: OrganizationUserService,
) {} ) {
this.organizationId = data.organizationId;
this.users = data.users;
this.showNoMasterPasswordWarning = this.users.some(
(u) => u.status > OrganizationUserStatusType.Invited && u.hasMasterPassword === false,
);
}
async submit() { submit = async () => {
this.loading = true; this.loading = true;
try { try {
const response = await this.deleteUsers(); const response = await this.deleteUsers();
@ -54,7 +57,7 @@ export class BulkRemoveComponent {
} }
this.loading = false; this.loading = false;
} };
protected async deleteUsers() { protected async deleteUsers() {
return await this.organizationUserService.deleteManyOrganizationUsers( return await this.organizationUserService.deleteManyOrganizationUsers(
@ -66,4 +69,8 @@ export class BulkRemoveComponent {
protected get removeUsersWarning() { protected get removeUsersWarning() {
return this.i18nService.t("removeOrgUsersConfirmation"); return this.i18nService.t("removeOrgUsersConfirmation");
} }
static open(dialogService: DialogService, config: DialogConfig<BulkRemoveDialogData>) {
return dialogService.open(BulkRemoveComponent, config);
}
} }

15
apps/web/src/app/admin-console/organizations/members/people.component.ts
View File

@ -481,16 +481,13 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
return; return;
} }
const [modal] = await this.modalService.openViewRef( const dialogRef = BulkRemoveComponent.open(this.dialogService, {
BulkRemoveComponent, data: {
this.bulkRemoveModalRef, organizationId: this.organization.id,
(comp) => { users: this.getCheckedUsers(),
comp.organizationId = this.organization.id;
comp.users = this.getCheckedUsers();
}, },
); });
await lastValueFrom(dialogRef.closed);
await modal.onClosedPromise();
await this.load(); await this.load();
} }