[BEEEP] [PM-3865] Remove button groups (#6253)

apps/web/src/app/admin-console/organizations/manage/entity-users.component.html

@@ -1,173 +0,0 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
-  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="userAccessTitle">
-          {{ "userAccess" | i18n }}
-          <small>{{ entityName }}</small>
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body" *ngIf="loading || !users">
-        <i
-          class="bwi bwi-spinner bwi-spin text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
-      </div>
-      <cdk-virtual-scroll-viewport
-        itemSize="46"
-        minBufferPx="600"
-        maxBufferPx="1200"
-        [style]="scrollViewportStyle"
-      >
-        <div class="modal-body" *ngIf="!loading && users && searchedUsers">
-          <div class="d-flex">
-            <div class="mr-3">
-              <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-              <input
-                type="search"
-                class="form-control form-control-sm"
-                id="search"
-                placeholder="{{ 'search' | i18n }}"
-                name="SearchText"
-                [(ngModel)]="searchText"
-              />
-            </div>
-            <div class="btn-group btn-group-sm" role="group">
-              <button
-                type="button"
-                class="btn btn-outline-secondary"
-                [ngClass]="{ active: !showSelected }"
-                (click)="filterSelected(false)"
-              >
-                {{ "all" | i18n }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-outline-secondary"
-                [ngClass]="{ active: showSelected }"
-                (click)="filterSelected(true)"
-              >
-                {{ "selected" | i18n }}
-                <span bitBadge badgeType="info" *ngIf="selectedCount">{{ selectedCount }}</span>
-              </button>
-            </div>
-          </div>
-          <ng-container *ngIf="!searchedUsers.length">
-            <hr />
-            {{ "noUsersInList" | i18n }}
-          </ng-container>
-          <table class="table table-hover table-list mb-0" [hidden]="!searchedUsers.length">
-            <thead>
-              <tr>
-                <th>&nbsp;</th>
-                <th>&nbsp;</th>
-                <th>{{ "name" | i18n }}</th>
-                <th *ngIf="entity === 'collection'">&nbsp;</th>
-                <th>{{ "userType" | i18n }}</th>
-                <th width="100" class="text-center" *ngIf="entity === 'collection'">
-                  {{ "hidePasswords" | i18n }}
-                </th>
-                <th width="100" class="text-center" *ngIf="entity === 'collection'">
-                  {{ "readOnly" | i18n }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr *cdkVirtualFor="let u of searchedUsers" class="">
-                <td class="table-list-checkbox" (click)="check(u)">
-                  <input
-                    type="checkbox"
-                    [(ngModel)]="u.checked"
-                    name="{{ u.id.substr(0, 8) }}_Checked"
-                    [disabled]="entity === 'collection' && u.accessAll"
-                    (change)="selectedChanged(u)"
-                    appStopProp
-                  />
-                </td>
-                <td width="30" (click)="check(u)">
-                  <bit-avatar [text]="u | userName" [id]="u.id" size="small"></bit-avatar>
-                </td>
-                <td>
-                  {{ u.email }}
-                  <span
-                    bitBadge
-                    badgeType="secondary"
-                    *ngIf="u.status === organizationUserStatusType.Invited"
-                    >{{ "invited" | i18n }}</span
-                  >
-                  <span
-                    bitBadge
-                    badgeType="warning"
-                    *ngIf="u.status === organizationUserStatusType.Accepted"
-                    >{{ "accepted" | i18n }}</span
-                  >
-                  <small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>
-                </td>
-                <td *ngIf="entity === 'collection'">
-                  <ng-container *ngIf="u.accessAll">
-                    <i
-                      class="bwi bwi-filter"
-                      title="{{ 'userAccessAllItems' | i18n }}"
-                      aria-hidden="true"
-                    ></i>
-                    <span class="sr-only">{{ "userAccessAllItems" | i18n }}</span>
-                  </ng-container>
-                </td>
-                <td>
-                  <span *ngIf="u.type === organizationUserType.Owner">{{ "owner" | i18n }}</span>
-                  <span *ngIf="u.type === organizationUserType.Admin">{{ "admin" | i18n }}</span>
-                  <span *ngIf="u.type === organizationUserType.Manager">{{
-                    "manager" | i18n
-                  }}</span>
-                  <span *ngIf="u.type === organizationUserType.User">{{ "user" | i18n }}</span>
-                  <span *ngIf="u.type === organizationUserType.Custom">{{ "custom" | i18n }}</span>
-                </td>
-                <td class="text-center" *ngIf="entity === 'collection'">
-                  <input
-                    type="checkbox"
-                    [(ngModel)]="u.hidePasswords"
-                    name="{{ u.id.substr(0, 8) }}_HidePasswords"
-                    [disabled]="u.accessAll || !u.checked"
-                  />
-                </td>
-                <td class="text-center" *ngIf="entity === 'collection'">
-                  <input
-                    type="checkbox"
-                    [(ngModel)]="u.readOnly"
-                    name="{{ u.id.substr(0, 8) }}_ReadOnly"
-                    [disabled]="u.accessAll || !u.checked"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </cdk-virtual-scroll-viewport>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "save" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "close" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

apps/web/src/app/admin-console/organizations/manage/entity-users.component.ts

@@ -1,160 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
-
-import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
-import { OrganizationUserUserDetailsResponse } from "@bitwarden/common/abstractions/organization-user/responses";
-import {
-  OrganizationUserStatusType,
-  OrganizationUserType,
-} from "@bitwarden/common/admin-console/enums";
-import { SelectionReadOnlyRequest } from "@bitwarden/common/admin-console/models/request/selection-read-only.request";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-
-@Component({
-  selector: "app-entity-users",
-  templateUrl: "entity-users.component.html",
-  providers: [SearchPipe],
-})
-export class EntityUsersComponent implements OnInit {
-  @Input() entity: "group" | "collection";
-  @Input() entityId: string;
-  @Input() entityName: string;
-  @Input() organizationId: string;
-  @Output() onEditedUsers = new EventEmitter();
-
-  organizationUserType = OrganizationUserType;
-  organizationUserStatusType = OrganizationUserStatusType;
-
-  showSelected = false;
-  loading = true;
-  formPromise: Promise<any>;
-  selectedCount = 0;
-  searchText: string;
-
-  private allUsers: OrganizationUserUserDetailsResponse[] = [];
-
-  constructor(
-    private search: SearchPipe,
-    private apiService: ApiService,
-    private i18nService: I18nService,
-    private platformUtilsService: PlatformUtilsService,
-    private organizationUserService: OrganizationUserService,
-    private logService: LogService
-  ) {}
-
-  async ngOnInit() {
-    await this.loadUsers();
-    this.loading = false;
-  }
-
-  get users() {
-    if (this.showSelected) {
-      return this.allUsers.filter((u) => (u as any).checked);
-    } else {
-      return this.allUsers;
-    }
-  }
-
-  get searchedUsers() {
-    return this.search.transform(this.users, this.searchText, "name", "email", "id");
-  }
-
-  get scrollViewportStyle() {
-    return `min-height: 120px; height: ${120 + this.searchedUsers.length * 46}px`;
-  }
-
-  async loadUsers() {
-    const users = await this.organizationUserService.getAllUsers(this.organizationId);
-    this.allUsers = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, "email"));
-    if (this.entity === "group") {
-      const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId);
-      if (response != null && users.data.length > 0) {
-        response.forEach((s) => {
-          const user = users.data.filter((u) => u.id === s);
-          if (user != null && user.length > 0) {
-            (user[0] as any).checked = true;
-          }
-        });
-      }
-    } else if (this.entity === "collection") {
-      const response = await this.apiService.getCollectionUsers(this.organizationId, this.entityId);
-      if (response != null && users.data.length > 0) {
-        response.forEach((s) => {
-          const user = users.data.filter((u) => !u.accessAll && u.id === s.id);
-          if (user != null && user.length > 0) {
-            (user[0] as any).checked = true;
-            (user[0] as any).readOnly = s.readOnly;
-            (user[0] as any).hidePasswords = s.hidePasswords;
-          }
-        });
-      }
-    }
-
-    this.allUsers.forEach((u) => {
-      if (this.entity === "collection" && u.accessAll) {
-        (u as any).checked = true;
-      }
-      if ((u as any).checked) {
-        this.selectedCount++;
-      }
-    });
-  }
-
-  check(u: OrganizationUserUserDetailsResponse) {
-    if (this.entity === "collection" && u.accessAll) {
-      return;
-    }
-    (u as any).checked = !(u as any).checked;
-    this.selectedChanged(u);
-  }
-
-  selectedChanged(u: OrganizationUserUserDetailsResponse) {
-    if ((u as any).checked) {
-      this.selectedCount++;
-    } else {
-      if (this.entity === "collection") {
-        (u as any).readOnly = false;
-        (u as any).hidePasswords = false;
-      }
-      this.selectedCount--;
-    }
-  }
-
-  filterSelected(showSelected: boolean) {
-    this.showSelected = showSelected;
-  }
-
-  async submit() {
-    try {
-      if (this.entity === "group") {
-        const selections = this.users.filter((u) => (u as any).checked).map((u) => u.id);
-        this.formPromise = this.apiService.putGroupUsers(
-          this.organizationId,
-          this.entityId,
-          selections
-        );
-      } else {
-        const selections = this.users
-          .filter((u) => (u as any).checked && !u.accessAll)
-          .map(
-            (u) =>
-              new SelectionReadOnlyRequest(u.id, !!(u as any).readOnly, !!(u as any).hidePasswords)
-          );
-        this.formPromise = this.apiService.putCollectionUsers(
-          this.organizationId,
-          this.entityId,
-          selections
-        );
-      }
-      await this.formPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("updatedUsers"));
-      this.onEditedUsers.emit();
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
-}

apps/web/src/app/admin-console/organizations/manage/organization-manage.module.ts

@@ -1,12 +0,0 @@
-import { ScrollingModule } from "@angular/cdk/scrolling";
-import { NgModule } from "@angular/core";
-
-import { EntityUsersComponent } from "../../../admin-console/organizations/manage/entity-users.component";
-import { SharedModule } from "../../../shared";
-
-@NgModule({
-  imports: [SharedModule, ScrollingModule],
-  declarations: [EntityUsersComponent],
-  exports: [EntityUsersComponent],
-})
-export class OrganizationManageModule {}

apps/web/src/app/oss.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from "@angular/core";
 
 import { OrganizationCreateModule } from "./admin-console/organizations/create/organization-create.module";
-import { OrganizationManageModule } from "./admin-console/organizations/manage/organization-manage.module";
 import { OrganizationUserModule } from "./admin-console/organizations/users/organization-user.module";
 import { LoginModule } from "./auth/login/login.module";
 import { TrialInitiationModule } from "./auth/trial-initiation/trial-initiation.module";
@@ -16,7 +15,6 @@ import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-f
     TrialInitiationModule,
     VaultFilterModule,
     OrganizationBadgeModule,
-    OrganizationManageModule,
     OrganizationUserModule,
     OrganizationCreateModule,
     LoginModule,

apps/web/src/scss/styles.scss

@@ -20,7 +20,7 @@
 @import "~bootstrap/scss/_buttons";
 @import "~bootstrap/scss/_transitions";
 @import "~bootstrap/scss/_dropdown";
-@import "~bootstrap/scss/_button-group";
+// @import "~bootstrap/scss/_button-group";
 @import "~bootstrap/scss/_input-group";
 // @import "~bootstrap/scss/_custom-forms";
 @import "~bootstrap/scss/_nav";

bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html

@@ -1,48 +1,37 @@
 <div class="page-header d-flex">
   <h1>{{ "people" | i18n }}</h1>
   <div class="ml-auto d-flex">
-    <div class="btn-group btn-group-sm" role="group">
-      <button
-        type="button"
-        class="btn btn-outline-secondary"
-        [ngClass]="{ active: status == null }"
-        (click)="filter(null)"
-      >
+    <bit-toggle-group
+      [selected]="status"
+      (selectedChange)="filter($event)"
+      [attr.aria-label]="'memberStatusFilter' | i18n"
+    >
+      <bit-toggle [value]="null">
         {{ "all" | i18n }}
         <span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary"
-        [ngClass]="{ active: status == userStatusType.Invited }"
-        (click)="filter(userStatusType.Invited)"
-      >
+      </bit-toggle>
+
+      <bit-toggle [value]="userStatusType.Invited">
         {{ "invited" | i18n }}
         <span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary"
-        [ngClass]="{ active: status == userStatusType.Accepted }"
-        (click)="filter(userStatusType.Accepted)"
-      >
+      </bit-toggle>
+
+      <bit-toggle [value]="userStatusType.Accepted">
         {{ "accepted" | i18n }}
         <span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
-      </button>
-    </div>
+      </bit-toggle>
+    </bit-toggle-group>
+
     <div class="ml-3">
-      <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-      <input
-        type="search"
-        class="form-control form-control-sm"
-        id="search"
-        placeholder="{{ 'search' | i18n }}"
+      <bit-search
+        class="tw-grow"
         [(ngModel)]="searchText"
-      />
+        [placeholder]="'search' | i18n"
+      ></bit-search>
     </div>
     <div class="dropdown ml-3" appListDropdown>
       <button
-        class="btn btn-sm btn-outline-secondary dropdown-toggle"
+        class="btn btn-outline-secondary dropdown-toggle"
         type="button"
         id="bulkActionsButton"
         data-toggle="dropdown"
@@ -82,7 +71,7 @@
         </button>
       </div>
     </div>
-    <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
+    <button type="button" class="btn btn-outline-primary ml-3" (click)="invite()">
       <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "inviteUser" | i18n }}
     </button>

bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.ts

@@ -50,6 +50,7 @@ export class PeopleComponent
 
   userType = ProviderUserType;
   userStatusType = ProviderUserStatusType;
+  status: ProviderUserStatusType = null;
   providerId: string;
   accessEvents = false;
 

bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts

@@ -4,6 +4,7 @@ import { FormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { SearchModule } from "@bitwarden/components";
 import { OssModule } from "@bitwarden/web-vault/app/oss.module";
 
 import { AddOrganizationComponent } from "./clients/add-organization.component";
@@ -26,7 +27,14 @@ import { SetupProviderComponent } from "./setup/setup-provider.component";
 import { SetupComponent } from "./setup/setup.component";
 
 @NgModule({
-  imports: [CommonModule, FormsModule, OssModule, JslibModule, ProvidersRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    OssModule,
+    JslibModule,
+    SearchModule,
+    ProvidersRoutingModule,
+  ],
   declarations: [
     AcceptProviderComponent,
     AccountComponent,