[PM-8457] [PM-8608] Members page - remove paging logic / fix search (#9515)

* update admin console members page to use Component Library
  components and tools, including virtual scroll and table filtering

* temporarily duplicate the base component to avoid impacting
  other subclasses

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

@@ -1,3 +1,4 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
 import { NgModule } from "@angular/core";
 
 import { PasswordCalloutComponent } from "@bitwarden/auth/angular";
@@ -22,6 +23,7 @@ import { PeopleComponent } from "./people.component";
     MembersRoutingModule,
     UserDialogModule,
     PasswordCalloutComponent,
+    ScrollingModule,
   ],
   declarations: [
     BulkConfirmComponent,

apps/web/src/app/admin-console/organizations/members/people.component.html

@@ -37,7 +37,7 @@
     </bit-toggle>
   </bit-toggle-group>
 </div>
-<ng-container *ngIf="loading">
+<ng-container *ngIf="!firstLoaded">
   <i
     class="bwi bwi-spinner bwi-spin text-muted"
     title="{{ 'loading' | i18n }}"
@@ -45,16 +45,9 @@
   ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
-<ng-container
-  *ngIf="
-    !loading &&
-    ((isPaging$ | async)
-      ? pagedUsers
-      : (users | search: searchControl.value : 'name' : 'email' : 'id')) as searchedUsers
-  "
->
-  <p *ngIf="!searchedUsers.length">{{ "noMembersInList" | i18n }}</p>
-  <ng-container *ngIf="searchedUsers.length">
+<ng-container *ngIf="firstLoaded">
+  <p *ngIf="!dataSource.filteredData.length">{{ "noMembersInList" | i18n }}</p>
+  <ng-container *ngIf="dataSource.filteredData.length">
     <app-callout
       type="info"
       title="{{ 'confirmUsers' | i18n }}"
@@ -63,256 +56,262 @@
     >
       {{ "usersNeedConfirmed" | i18n }}
     </app-callout>
-    <bit-table
-      infinite-scroll
-      [infiniteScrollDistance]="1"
-      [infiniteScrollDisabled]="!(isPaging$ | async)"
-      (scrolled)="loadMore()"
-    >
-      <ng-container header>
-        <tr>
-          <th bitCell class="tw-w-20">
-            <input
-              type="checkbox"
-              bitCheckbox
-              class="tw-mr-1"
-              (change)="selectAll($any($event.target).checked)"
-              id="selectAll"
-            />
-            <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
-              "all" | i18n
-            }}</label>
-          </th>
-          <th bitCell>{{ "name" | i18n }}</th>
-          <th bitCell>{{ (organization.useGroups ? "groups" : "collections") | i18n }}</th>
-          <th bitCell>{{ "role" | i18n }}</th>
-          <th bitCell>{{ "policies" | i18n }}</th>
-          <th bitCell class="tw-w-10">
-            <button
-              [bitMenuTriggerFor]="headerMenu"
-              type="button"
-              bitIconButton="bwi-ellipsis-v"
-              size="small"
-              appA11yTitle="{{ 'options' | i18n }}"
-            ></button>
-
-            <bit-menu #headerMenu>
-              <ng-container *ngIf="canUseSecretsManager$ | async">
-                <button type="button" bitMenuItem (click)="bulkEnableSM()">
-                  {{ "activateSecretsManager" | i18n }}
-                </button>
-                <bit-menu-divider></bit-menu-divider>
-              </ng-container>
-              <button type="button" bitMenuItem (click)="bulkReinvite()">
-                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-                {{ "reinviteSelected" | i18n }}
-              </button>
+    <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
+    from overflowing the <main> element. -->
+    <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
+      <bit-table [dataSource]="dataSource">
+        <ng-container header>
+          <tr>
+            <th bitCell class="tw-w-20">
+              <input
+                type="checkbox"
+                bitCheckbox
+                class="tw-mr-1"
+                (change)="selectAll($any($event.target).checked)"
+                id="selectAll"
+              />
+              <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
+                "all" | i18n
+              }}</label>
+            </th>
+            <th bitCell bitSortable="email" default>{{ "name" | i18n }}</th>
+            <th bitCell>{{ (organization.useGroups ? "groups" : "collections") | i18n }}</th>
+            <th bitCell bitSortable="type">{{ "role" | i18n }}</th>
+            <th bitCell>{{ "policies" | i18n }}</th>
+            <th bitCell class="tw-w-10">
               <button
+                [bitMenuTriggerFor]="headerMenu"
                 type="button"
-                bitMenuItem
-                (click)="bulkConfirm()"
-                *ngIf="showBulkConfirmUsers"
-              >
-                <span class="tw-text-success">
-                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
-                  {{ "confirmSelected" | i18n }}
-                </span>
-              </button>
-              <button type="button" bitMenuItem (click)="bulkRestore()">
-                <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
-                {{ "restoreAccess" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="bulkRevoke()">
-                <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
-                {{ "revokeAccess" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="bulkRemove()">
-                <span class="tw-text-danger">
-                  <i aria-hidden="true" class="bwi bwi-close"></i>
-                  {{ "remove" | i18n }}
-                </span>
-              </button>
-            </bit-menu>
-          </th>
-        </tr>
-      </ng-container>
-      <ng-template body>
-        <tr bitRow *ngFor="let u of searchedUsers" alignContent="middle">
-          <td bitCell (click)="checkUser(u)">
-            <input type="checkbox" bitCheckbox [(ngModel)]="$any(u).checked" />
-          </td>
-          <td bitCell (click)="edit(u)" class="tw-cursor-pointer">
-            <div class="tw-flex tw-items-center">
-              <bit-avatar
+                bitIconButton="bwi-ellipsis-v"
                 size="small"
-                [text]="u | userName"
-                [id]="u.userId"
-                [color]="u.avatarColor"
-                class="tw-mr-3"
-              ></bit-avatar>
-              <div class="tw-flex tw-flex-col">
-                <div>
-                  <button type="button" bitLink>
-                    {{ u.name ?? u.email }}
+                appA11yTitle="{{ 'options' | i18n }}"
+              ></button>
+
+              <bit-menu #headerMenu>
+                <ng-container *ngIf="canUseSecretsManager$ | async">
+                  <button type="button" bitMenuItem (click)="bulkEnableSM()">
+                    {{ "activateSecretsManager" | i18n }}
                   </button>
-                  <span
-                    bitBadge
-                    class="tw-text-xs"
-                    variant="secondary"
-                    *ngIf="u.status === userStatusType.Invited"
-                    >{{ "invited" | i18n }}</span
-                  >
-                  <span
-                    bitBadge
-                    class="tw-text-xs"
-                    variant="warning"
-                    *ngIf="u.status === userStatusType.Accepted"
-                    >{{ "needsConfirmation" | i18n }}</span
-                  >
-                  <span
-                    bitBadge
-                    class="tw-text-xs"
-                    variant="secondary"
-                    *ngIf="u.status === userStatusType.Revoked"
-                    >{{ "revoked" | i18n }}</span
-                  >
-                </div>
-                <div class="tw-text-sm tw-text-muted" *ngIf="u.name">
-                  {{ u.email }}
+                  <bit-menu-divider></bit-menu-divider>
+                </ng-container>
+                <button type="button" bitMenuItem (click)="bulkReinvite()">
+                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                  {{ "reinviteSelected" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="bulkConfirm()"
+                  *ngIf="showBulkConfirmUsers"
+                >
+                  <span class="tw-text-success">
+                    <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                    {{ "confirmSelected" | i18n }}
+                  </span>
+                </button>
+                <button type="button" bitMenuItem (click)="bulkRestore()">
+                  <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+                  {{ "restoreAccess" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="bulkRevoke()">
+                  <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
+                  {{ "revokeAccess" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="bulkRemove()">
+                  <span class="tw-text-danger">
+                    <i aria-hidden="true" class="bwi bwi-close"></i>
+                    {{ "remove" | i18n }}
+                  </span>
+                </button>
+              </bit-menu>
+            </th>
+          </tr>
+        </ng-container>
+        <ng-template body let-rows$>
+          <tr
+            bitRow
+            *cdkVirtualFor="let u of rows$"
+            alignContent="middle"
+            [ngClass]="rowHeightClass"
+          >
+            <td bitCell (click)="checkUser(u)">
+              <input type="checkbox" bitCheckbox [(ngModel)]="$any(u).checked" />
+            </td>
+            <td bitCell (click)="edit(u)" class="tw-cursor-pointer">
+              <div class="tw-flex tw-items-center">
+                <bit-avatar
+                  size="small"
+                  [text]="u | userName"
+                  [id]="u.userId"
+                  [color]="u.avatarColor"
+                  class="tw-mr-3"
+                ></bit-avatar>
+                <div class="tw-flex tw-flex-col">
+                  <div>
+                    <button type="button" bitLink>
+                      {{ u.name ?? u.email }}
+                    </button>
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="secondary"
+                      *ngIf="u.status === userStatusType.Invited"
+                      >{{ "invited" | i18n }}</span
+                    >
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="warning"
+                      *ngIf="u.status === userStatusType.Accepted"
+                      >{{ "needsConfirmation" | i18n }}</span
+                    >
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="secondary"
+                      *ngIf="u.status === userStatusType.Revoked"
+                      >{{ "revoked" | i18n }}</span
+                    >
+                  </div>
+                  <div class="tw-text-sm tw-text-muted" *ngIf="u.name">
+                    {{ u.email }}
+                  </div>
                 </div>
               </div>
-            </div>
-          </td>
+            </td>
 
-          <td
-            bitCell
-            (click)="edit(u, organization.useGroups ? memberTab.Groups : memberTab.Collections)"
-            class="tw-cursor-pointer"
-          >
-            <bit-badge-list
-              [items]="organization.useGroups ? u.groupNames : u.collectionNames"
-              [maxItems]="3"
-              variant="secondary"
-            ></bit-badge-list>
-          </td>
+            <td
+              bitCell
+              (click)="edit(u, organization.useGroups ? memberTab.Groups : memberTab.Collections)"
+              class="tw-cursor-pointer"
+            >
+              <bit-badge-list
+                [items]="organization.useGroups ? u.groupNames : u.collectionNames"
+                [maxItems]="3"
+                variant="secondary"
+              ></bit-badge-list>
+            </td>
 
-          <td
-            bitCell
-            (click)="edit(u, memberTab.Role)"
-            class="tw-cursor-pointer tw-text-sm tw-text-muted"
-          >
-            {{ u.type | userType }}
-          </td>
+            <td
+              bitCell
+              (click)="edit(u, memberTab.Role)"
+              class="tw-cursor-pointer tw-text-sm tw-text-muted"
+            >
+              {{ u.type | userType }}
+            </td>
 
-          <td bitCell class="tw-text-muted">
-            <ng-container *ngIf="u.twoFactorEnabled">
-              <i
-                class="bwi bwi-lock"
-                title="{{ 'userUsingTwoStep' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "userUsingTwoStep" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="showEnrolledStatus($any(u))">
-              <i
-                class="bwi bwi-key"
-                title="{{ 'enrolledAccountRecovery' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "enrolledAccountRecovery" | i18n }}</span>
-            </ng-container>
-          </td>
-          <td bitCell>
-            <button
-              [bitMenuTriggerFor]="rowMenu"
-              type="button"
-              bitIconButton="bwi-ellipsis-v"
-              size="small"
-              appA11yTitle="{{ 'options' | i18n }}"
-            ></button>
+            <td bitCell class="tw-text-muted">
+              <ng-container *ngIf="u.twoFactorEnabled">
+                <i
+                  class="bwi bwi-lock"
+                  title="{{ 'userUsingTwoStep' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "userUsingTwoStep" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="showEnrolledStatus($any(u))">
+                <i
+                  class="bwi bwi-key"
+                  title="{{ 'enrolledAccountRecovery' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "enrolledAccountRecovery" | i18n }}</span>
+              </ng-container>
+            </td>
+            <td bitCell>
+              <button
+                [bitMenuTriggerFor]="rowMenu"
+                type="button"
+                bitIconButton="bwi-ellipsis-v"
+                size="small"
+                appA11yTitle="{{ 'options' | i18n }}"
+              ></button>
 
-            <bit-menu #rowMenu>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="reinvite(u)"
-                *ngIf="u.status === userStatusType.Invited"
-              >
-                <i aria-hidden="true" class="bwi bwi-envelope"></i>
-                {{ "resendInvitation" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="confirm(u)"
-                *ngIf="u.status === userStatusType.Accepted"
-              >
-                <span class="tw-text-success">
-                  <i aria-hidden="true" class="bwi bwi-check"></i> {{ "confirm" | i18n }}
-                </span>
-              </button>
-              <bit-menu-divider
-                *ngIf="u.status === userStatusType.Accepted || u.status === userStatusType.Invited"
-              ></bit-menu-divider>
-              <button type="button" bitMenuItem (click)="edit(u, memberTab.Role)">
-                <i aria-hidden="true" class="bwi bwi-user"></i> {{ "memberRole" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="edit(u, memberTab.Groups)"
-                *ngIf="organization.useGroups"
-              >
-                <i aria-hidden="true" class="bwi bwi-users"></i> {{ "groups" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="edit(u, memberTab.Collections)">
-                <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
-              </button>
-              <bit-menu-divider></bit-menu-divider>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="events(u)"
-                *ngIf="organization.useEvents && u.status === userStatusType.Confirmed"
-              >
-                <i aria-hidden="true" class="bwi bwi-file-text"></i> {{ "eventLogs" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="resetPassword(u)"
-                *ngIf="allowResetPassword(u)"
-              >
-                <i aria-hidden="true" class="bwi bwi-key"></i> {{ "recoverAccount" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="restore(u)"
-                *ngIf="u.status === userStatusType.Revoked"
-              >
-                <i aria-hidden="true" class="bwi bwi-plus-circle"></i>
-                {{ "restoreAccess" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="revoke(u)"
-                *ngIf="u.status !== userStatusType.Revoked"
-              >
-                <i aria-hidden="true" class="bwi bwi-minus-circle"></i>
-                {{ "revokeAccess" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="remove(u)">
-                <span class="tw-text-danger">
-                  <i aria-hidden="true" class="bwi bwi-close"></i> {{ "remove" | i18n }}
-                </span>
-              </button>
-            </bit-menu>
-          </td>
-        </tr>
-      </ng-template>
-    </bit-table>
+              <bit-menu #rowMenu>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="reinvite(u)"
+                  *ngIf="u.status === userStatusType.Invited"
+                >
+                  <i aria-hidden="true" class="bwi bwi-envelope"></i>
+                  {{ "resendInvitation" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="confirm(u)"
+                  *ngIf="u.status === userStatusType.Accepted"
+                >
+                  <span class="tw-text-success">
+                    <i aria-hidden="true" class="bwi bwi-check"></i> {{ "confirm" | i18n }}
+                  </span>
+                </button>
+                <bit-menu-divider
+                  *ngIf="
+                    u.status === userStatusType.Accepted || u.status === userStatusType.Invited
+                  "
+                ></bit-menu-divider>
+                <button type="button" bitMenuItem (click)="edit(u, memberTab.Role)">
+                  <i aria-hidden="true" class="bwi bwi-user"></i> {{ "memberRole" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="edit(u, memberTab.Groups)"
+                  *ngIf="organization.useGroups"
+                >
+                  <i aria-hidden="true" class="bwi bwi-users"></i> {{ "groups" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="edit(u, memberTab.Collections)">
+                  <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
+                </button>
+                <bit-menu-divider></bit-menu-divider>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="openEventsDialog(u)"
+                  *ngIf="organization.useEvents && u.status === userStatusType.Confirmed"
+                >
+                  <i aria-hidden="true" class="bwi bwi-file-text"></i> {{ "eventLogs" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="resetPassword(u)"
+                  *ngIf="allowResetPassword(u)"
+                >
+                  <i aria-hidden="true" class="bwi bwi-key"></i> {{ "recoverAccount" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="restore(u)"
+                  *ngIf="u.status === userStatusType.Revoked"
+                >
+                  <i aria-hidden="true" class="bwi bwi-plus-circle"></i>
+                  {{ "restoreAccess" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="revoke(u)"
+                  *ngIf="u.status !== userStatusType.Revoked"
+                >
+                  <i aria-hidden="true" class="bwi bwi-minus-circle"></i>
+                  {{ "revokeAccess" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="remove(u)">
+                  <span class="tw-text-danger">
+                    <i aria-hidden="true" class="bwi bwi-close"></i> {{ "remove" | i18n }}
+                  </span>
+                </button>
+              </bit-menu>
+            </td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    </cdk-virtual-scroll-viewport>
   </ng-container>
 </ng-container>
 <ng-template #addEdit></ng-template>

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

@@ -1,4 +1,5 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Router } from "@angular/router";
 import {
   combineLatest,
@@ -9,16 +10,12 @@ import {
   map,
   Observable,
   shareReplay,
-  Subject,
   switchMap,
-  takeUntil,
 } from "rxjs";
 
-import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { OrganizationManagementPreferencesService } from "@bitwarden/common/admin-console/abstractions/organization-management-preferences/organization-management-preferences.service";
@@ -50,7 +47,7 @@ import { CollectionDetailsResponse } from "@bitwarden/common/vault/models/respon
 import { DialogService, SimpleDialogOptions } from "@bitwarden/components";
 
 import { openEntityEventsDialog } from "../../../admin-console/organizations/manage/entity-events.component";
-import { BasePeopleComponent } from "../../common/base.people.component";
+import { NewBasePeopleComponent } from "../../common/new-base.people.component";
 import { GroupService } from "../core";
 import { OrganizationUserView } from "../core/views/organization-user.view";
 
@@ -70,7 +67,7 @@ import { ResetPasswordComponent } from "./components/reset-password.component";
   selector: "app-org-people",
   templateUrl: "people.component.html",
 })
-export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
+export class PeopleComponent extends NewBasePeopleComponent<OrganizationUserView> {
   @ViewChild("groupsTemplate", { read: ViewContainerRef, static: true })
   groupsModalRef: ViewContainerRef;
   @ViewChild("confirmTemplate", { read: ViewContainerRef, static: true })
@@ -95,7 +92,9 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
 
   protected canUseSecretsManager$: Observable<boolean>;
 
-  private destroy$ = new Subject<void>();
+  // Fixed sizes used for cdkVirtualScroll
+  protected rowHeight = 62;
+  protected rowHeightClass = `tw-h-[62px]`;
 
   constructor(
     apiService: ApiService,
@@ -104,12 +103,10 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
     modalService: ModalService,
     platformUtilsService: PlatformUtilsService,
     cryptoService: CryptoService,
-    searchService: SearchService,
     validationService: ValidationService,
     private policyService: PolicyService,
     private policyApiService: PolicyApiService,
     logService: LogService,
-    searchPipe: SearchPipe,
     userNamePipe: UserNamePipe,
     private syncService: SyncService,
     private organizationService: OrganizationService,
@@ -124,21 +121,17 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
   ) {
     super(
       apiService,
-      searchService,
       i18nService,
       platformUtilsService,
       cryptoService,
       validationService,
       modalService,
       logService,
-      searchPipe,
       userNamePipe,
       dialogService,
       organizationManagementPreferencesService,
     );
-  }
 
-  async ngOnInit() {
     const organization$ = this.route.params.pipe(
       concatMap((params) => this.organizationService.get$(params.organizationId)),
       shareReplay({ refCount: true, bufferSize: 1 }),
@@ -198,29 +191,19 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
           await this.load();
 
           this.searchControl.setValue(qParams.search);
+
           if (qParams.viewEvents != null) {
-            const user = this.users.filter((u) => u.id === qParams.viewEvents);
+            const user = this.dataSource.data.filter((u) => u.id === qParams.viewEvents);
             if (user.length > 0 && user[0].status === OrganizationUserStatusType.Confirmed) {
-              // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              this.events(user[0]);
+              this.openEventsDialog(user[0]);
             }
           }
         }),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(),
       )
       .subscribe();
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  async load() {
-    await super.load();
-  }
-
   async getUsers(): Promise<OrganizationUserView[]> {
     let groupsPromise: Promise<Map<string, string>>;
     let collectionsPromise: Promise<Map<string, string>>;
@@ -593,8 +576,8 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
     await this.load();
   }
 
-  async events(user: OrganizationUserView) {
-    await openEntityEventsDialog(this.dialogService, {
+  openEventsDialog(user: OrganizationUserView) {
+    openEntityEventsDialog(this.dialogService, {
       data: {
         name: this.userNamePipe.transform(user),
         organizationId: this.organization.id,