Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-21 11:35:34 +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

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

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

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();
} }