From 2f5c1393388f46eb1ca294f2254dd89de8e2819d Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Thu, 15 Sep 2022 18:16:13 -0700 Subject: [PATCH] [EC-16] Update Group tab to use table component and show collections. --- .../manage/groups.component.html | 157 ++++++++++++------ .../organizations/manage/groups.component.ts | 143 ++++++++++++++-- apps/web/src/app/shared/shared.module.ts | 14 +- apps/web/src/locales/en/messages.json | 18 ++ libs/common/src/abstractions/api.service.ts | 6 +- libs/common/src/services/api.service.ts | 20 ++- libs/components/src/index.ts | 1 + 7 files changed, 286 insertions(+), 73 deletions(-) diff --git a/apps/web/src/app/organizations/manage/groups.component.html b/apps/web/src/app/organizations/manage/groups.component.html index 72c6c2ee115..5bc999e7fce 100644 --- a/apps/web/src/app/organizations/manage/groups.component.html +++ b/apps/web/src/app/organizations/manage/groups.component.html @@ -1,18 +1,21 @@

{{ "groups" | i18n }}

-
-
- - +
+
+ +
+ + +
- @@ -26,53 +29,105 @@ > {{ "loading" | i18n }} - -

{{ "noGroupsInList" | i18n }}

- +

{{ "noGroupsInList" | i18n }}

+ - - - - + + + + + + + + + + + + - -
- {{ g.name }} - -
-
+ + + {{ "name" | i18n }}{{ "collections" | i18n }} + + + + -
- - - {{ "users" | i18n }} - - - - {{ "delete" | i18n }} - -
- + +
+ + + + + + {{ cName }} , + + + {{ "plusNMore" | i18n: (g.collectionNames.length - maxCollections).toString() }} + + + + + + + + + +
+ + diff --git a/apps/web/src/app/organizations/manage/groups.component.ts b/apps/web/src/app/organizations/manage/groups.component.ts index 109c9c89746..9f94b04679a 100644 --- a/apps/web/src/app/organizations/manage/groups.component.ts +++ b/apps/web/src/app/organizations/manage/groups.component.ts @@ -3,18 +3,34 @@ import { ActivatedRoute } from "@angular/router"; import { concatMap, Subject, takeUntil } from "rxjs"; import { first } from "rxjs/operators"; +import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe"; import { ModalService } from "@bitwarden/angular/services/modal.service"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { CollectionService } from "@bitwarden/common/abstractions/collection.service"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { LogService } from "@bitwarden/common/abstractions/log.service"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; import { SearchService } from "@bitwarden/common/abstractions/search.service"; import { Utils } from "@bitwarden/common/misc/utils"; -import { GroupResponse } from "@bitwarden/common/models/response/groupResponse"; +import { CollectionData } from "@bitwarden/common/models/data/collectionData"; +import { Collection } from "@bitwarden/common/models/domain/collection"; +import { OrganizationUserBulkRequest } from "@bitwarden/common/models/request/organizationUserBulkRequest"; +import { CollectionDetailsResponse } from "@bitwarden/common/models/response/collectionResponse"; +import { GroupDetailsResponse } from "@bitwarden/common/models/response/groupResponse"; +import { CollectionView } from "@bitwarden/common/models/view/collectionView"; import { EntityUsersComponent } from "./entity-users.component"; import { GroupAddEditComponent } from "./group-add-edit.component"; +type CollectionViewMap = { + [id: string]: CollectionView; +}; + +type GroupDetailsView = Partial & { + checked?: boolean; + collectionNames?: string[]; +}; + @Component({ selector: "app-org-groups", templateUrl: "groups.component.html", @@ -26,16 +42,45 @@ export class GroupsComponent implements OnInit, OnDestroy { loading = true; organizationId: string; - groups: GroupResponse[]; - pagedGroups: GroupResponse[]; - searchText: string; + groups: GroupDetailsView[]; + collectionMap: CollectionViewMap = {}; + selectAll = false; protected didScroll = false; protected pageSize = 100; + protected maxCollections = 2; private pagedGroupsCount = 0; + private pagedGroups: GroupDetailsView[]; + private searchedGroups: GroupDetailsView[]; + private _searchText: string; private destroy$ = new Subject(); + get searchText() { + return this._searchText; + } + set searchText(value: string) { + this._searchText = value; + // Manually update as we are not using the search pipe in the template + this.updateSearchedGroups(); + } + + /** + * The list of groups that should be visible in the table. + * This is needed as there are two modes (paging/searching) and + * we need a reference to the currently visible groups for + * the Select All checkbox + */ + get visibleGroups() { + if (this.isPaging()) { + return this.pagedGroups; + } + if (this.isSearching()) { + return this.searchedGroups; + } + return this.groups; + } + constructor( private apiService: ApiService, private route: ActivatedRoute, @@ -43,7 +88,9 @@ export class GroupsComponent implements OnInit, OnDestroy { private modalService: ModalService, private platformUtilsService: PlatformUtilsService, private searchService: SearchService, - private logService: LogService + private logService: LogService, + private collectionService: CollectionService, + private searchPipe: SearchPipe ) {} async ngOnInit() { @@ -51,6 +98,7 @@ export class GroupsComponent implements OnInit, OnDestroy { .pipe( concatMap(async (params) => { this.organizationId = params.organizationId; + await this.loadCollections(); await this.load(); }), takeUntil(this.destroy$) @@ -76,12 +124,38 @@ export class GroupsComponent implements OnInit, OnDestroy { async load() { const response = await this.apiService.getGroups(this.organizationId); const groups = response.data != null && response.data.length > 0 ? response.data : []; - groups.sort(Utils.getSortFunction(this.i18nService, "name")); - this.groups = groups; + this.groups = groups + .sort(Utils.getSortFunction(this.i18nService, "name")) + .map((g) => ({ + ...g, + checked: false, + collectionNames: g.collections + .map((c) => this.collectionMap[c.id]?.name) + .sort(this.i18nService.collator?.compare), + })); this.resetPaging(); + this.updateSearchedGroups(); this.loading = false; } + private updateSearchedGroups() { + if (this.searchService.isSearchable(this.searchText)) { + // Making use of the pipe in the component as we need know which groups where filtered + this.searchedGroups = this.searchPipe.transform(this.groups, this.searchText, "name", "id"); + } + } + + async loadCollections() { + const response = await this.apiService.getCollections(this.organizationId); + const collections = response.data.map( + (r) => new Collection(new CollectionData(r as CollectionDetailsResponse)) + ); + const decryptedCollections = await this.collectionService.decryptMany(collections); + + // Convert to an object using collection Ids as keys for faster name lookups + decryptedCollections.forEach((c) => (this.collectionMap[c.id] = c)); + } + loadMore() { if (!this.groups || this.groups.length <= this.pageSize) { return; @@ -100,7 +174,7 @@ export class GroupsComponent implements OnInit, OnDestroy { this.didScroll = this.pagedGroups.length > this.pageSize; } - async edit(group: GroupResponse) { + async edit(group: GroupDetailsResponse) { const [modal] = await this.modalService.openViewRef( GroupAddEditComponent, this.addEditModalRef, @@ -113,7 +187,7 @@ export class GroupsComponent implements OnInit, OnDestroy { }); comp.onDeletedGroup.pipe(takeUntil(this.destroy$)).subscribe(() => { modal.close(); - this.removeGroup(group); + this.removeGroup(group.id); }); } ); @@ -123,7 +197,7 @@ export class GroupsComponent implements OnInit, OnDestroy { this.edit(null); } - async delete(group: GroupResponse) { + async delete(group: GroupDetailsResponse) { const confirmed = await this.platformUtilsService.showDialog( this.i18nService.t("deleteGroupConfirmation"), group.name, @@ -142,13 +216,45 @@ export class GroupsComponent implements OnInit, OnDestroy { null, this.i18nService.t("deletedGroupId", group.name) ); - this.removeGroup(group); + this.removeGroup(group.id); } catch (e) { this.logService.error(e); } } - async users(group: GroupResponse) { + async deleteAllSelected() { + const groupsToDelete = this.groups.filter((g) => g.checked); + + if (groupsToDelete.length == 0) { + return; + } + + const deleteMessage = groupsToDelete.map((g) => g.name).join(", "); + const confirmed = await this.platformUtilsService.showDialog( + deleteMessage, + this.i18nService.t("deleteMultipleGroupsConfirmation", groupsToDelete.length.toString()), + this.i18nService.t("yes"), + this.i18nService.t("no"), + "warning" + ); + if (!confirmed) { + return false; + } + + try { + const result = await this.apiService.deleteManyGroups( + this.organizationId, + new OrganizationUserBulkRequest(groupsToDelete.map((g) => g.id)) + ); + this.platformUtilsService.showToast("success", null, `Delete ${result.data.length} groups!`); + + groupsToDelete.forEach((g) => this.removeGroup(g.id)); + } catch (e) { + this.logService.error(e); + } + } + + async users(group: GroupDetailsResponse) { const [modal] = await this.modalService.openViewRef( EntityUsersComponent, this.usersModalRef, @@ -174,6 +280,14 @@ export class GroupsComponent implements OnInit, OnDestroy { return this.searchService.isSearchable(this.searchText); } + check(group: GroupDetailsView) { + group.checked = !group.checked; + } + + toggleAllVisible(event: Event) { + this.visibleGroups.forEach((g) => (g.checked = (event.target as HTMLInputElement).checked)); + } + isPaging() { const searching = this.isSearching(); if (searching && this.didScroll) { @@ -182,11 +296,12 @@ export class GroupsComponent implements OnInit, OnDestroy { return !searching && this.groups && this.groups.length > this.pageSize; } - private removeGroup(group: GroupResponse) { - const index = this.groups.indexOf(group); + private removeGroup(id: string) { + const index = this.groups.findIndex((g) => g.id === id); if (index > -1) { this.groups.splice(index, 1); this.resetPaging(); + this.updateSearchedGroups(); } } } diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts index 7db6a1911cb..4d9c6904714 100644 --- a/apps/web/src/app/shared/shared.module.ts +++ b/apps/web/src/app/shared/shared.module.ts @@ -1,5 +1,5 @@ import { DragDropModule } from "@angular/cdk/drag-drop"; -import { DatePipe, CommonModule } from "@angular/common"; +import { CommonModule, DatePipe } from "@angular/common"; import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { RouterModule } from "@angular/router"; @@ -12,10 +12,12 @@ import { ButtonModule, CalloutModule, FormFieldModule, - SubmitButtonModule, - MenuModule, - TabsModule, IconModule, + LinkModule, + MenuModule, + SubmitButtonModule, + TableModule, + TabsModule, } from "@bitwarden/components"; // Register the locales for the application @@ -48,6 +50,8 @@ import "./locales"; SubmitButtonModule, IconModule, TabsModule, + TableModule, + LinkModule, ], exports: [ CommonModule, @@ -68,6 +72,8 @@ import "./locales"; SubmitButtonModule, IconModule, TabsModule, + TableModule, + LinkModule, ], providers: [DatePipe], bootstrap: [], diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 68ff1271c8a..6e48be4c8be 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -2326,6 +2326,15 @@ "deleteGroupConfirmation": { "message": "Are you sure you want to delete this group?" }, + "deleteMultipleGroupsConfirmation": { + "message": "Are you sure you want to delete the following $QUANTITY$ group(s)?", + "placeholders": { + "quantity": { + "content": "$1", + "example": "3" + } + } + }, "removeUserConfirmation": { "message": "Are you sure you want to remove this user?" }, @@ -5370,5 +5379,14 @@ }, "numberOfUsers": { "message": "Number of users" + }, + "plusNMore": { + "message": "+ $QUANTITY$ more", + "placeholders": { + "quantity": { + "content": "$1", + "example": "5" + } + } } } diff --git a/libs/common/src/abstractions/api.service.ts b/libs/common/src/abstractions/api.service.ts index 3a661274cc8..252ba5834a6 100644 --- a/libs/common/src/abstractions/api.service.ts +++ b/libs/common/src/abstractions/api.service.ts @@ -334,12 +334,16 @@ export abstract class ApiService { ) => Promise; getGroupDetails: (organizationId: string, id: string) => Promise; - getGroups: (organizationId: string) => Promise>; + getGroups: (organizationId: string) => Promise>; getGroupUsers: (organizationId: string, id: string) => Promise; postGroup: (organizationId: string, request: GroupRequest) => Promise; putGroup: (organizationId: string, id: string, request: GroupRequest) => Promise; putGroupUsers: (organizationId: string, id: string, request: string[]) => Promise; deleteGroup: (organizationId: string, id: string) => Promise; + deleteManyGroups: ( + organizationId: string, + request: OrganizationUserBulkRequest + ) => Promise>; deleteGroupUser: (organizationId: string, id: string, organizationUserId: string) => Promise; getOrganizationUser: ( diff --git a/libs/common/src/services/api.service.ts b/libs/common/src/services/api.service.ts index b1254b1213c..0c05e6f23b6 100644 --- a/libs/common/src/services/api.service.ts +++ b/libs/common/src/services/api.service.ts @@ -161,8 +161,8 @@ import { TwoFactorEmailResponse } from "../models/response/twoFactorEmailRespons import { TwoFactorProviderResponse } from "../models/response/twoFactorProviderResponse"; import { TwoFactorRecoverResponse } from "../models/response/twoFactorRescoverResponse"; import { - TwoFactorWebAuthnResponse, ChallengeResponse, + TwoFactorWebAuthnResponse, } from "../models/response/twoFactorWebAuthnResponse"; import { TwoFactorYubiKeyResponse } from "../models/response/twoFactorYubiKeyResponse"; import { UserKeyResponse } from "../models/response/userKeyResponse"; @@ -916,7 +916,7 @@ export class ApiService implements ApiServiceAbstraction { return new GroupDetailsResponse(r); } - async getGroups(organizationId: string): Promise> { + async getGroups(organizationId: string): Promise> { const r = await this.send( "GET", "/organizations/" + organizationId + "/groups", @@ -924,7 +924,7 @@ export class ApiService implements ApiServiceAbstraction { true, true ); - return new ListResponse(r, GroupResponse); + return new ListResponse(r, GroupDetailsResponse); } async getGroupUsers(organizationId: string, id: string): Promise { @@ -984,6 +984,20 @@ export class ApiService implements ApiServiceAbstraction { ); } + async deleteManyGroups( + organizationId: string, + request: OrganizationUserBulkRequest + ): Promise> { + const r = await this.send( + "DELETE", + "/organizations/" + organizationId + "/groups", + request, + true, + true + ); + return new ListResponse(r, GroupResponse); + } + deleteGroupUser(organizationId: string, id: string, organizationUserId: string): Promise { return this.send( "DELETE", diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index 2acd60765fd..6896c856077 100644 --- a/libs/components/src/index.ts +++ b/libs/components/src/index.ts @@ -9,5 +9,6 @@ export * from "./dialog"; export * from "./submit-button"; export * from "./link"; export * from "./tabs"; +export * from "./table"; export * from "./toggle-group"; export * from "./utils/i18n-mock.service";