[AC-2924] Remove GroupsComponentRefactor flag (#10259)

* Remove feature flag and old component

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

@@ -1,7 +1,7 @@
 <app-header>
   <bit-search
     [placeholder]="'searchGroups' | i18n"
-    [(ngModel)]="searchText"
+    [formControl]="searchControl"
     class="tw-w-80"
   ></bit-search>
   <button bitButton type="button" buttonType="primary" (click)="add()">
@@ -18,95 +18,92 @@
   ></i>
   <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
-<ng-container *ngIf="!loading && visibleGroups">
+<ng-container *ngIf="!loading">
-  <p *ngIf="!visibleGroups.length">{{ "noGroupsInList" | i18n }}</p>
+  <p *ngIf="!dataSource.filteredData.length">{{ "noGroupsInList" | i18n }}</p>
-  <bit-table
+  <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
-    *ngIf="visibleGroups.length"
+  from overflowing the <main> element. -->
-    infinite-scroll
+  <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
-    [infiniteScrollDistance]="1"
+    <bit-table *ngIf="dataSource.filteredData.length" [dataSource]="dataSource">
-    [infiniteScrollDisabled]="!isPaging()"
+      <ng-container header>
-    (scrolled)="loadMore()"
+        <tr>
-  >
+          <th bitCell class="tw-w-20">
-    <ng-container header>
+            <input
-      <tr>
+              type="checkbox"
-        <th bitCell class="tw-w-20">
+              bitCheckbox
-          <input
+              class="tw-mr-2"
-            type="checkbox"
+              (change)="toggleAllVisible($event)"
-            bitCheckbox
+              id="selectAll"
-            class="tw-mr-2"
+            />
-            (change)="toggleAllVisible($event)"
+            <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
-            id="selectAll"
+              "all" | i18n
-          />
+            }}</label>
-          <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
+          </th>
-            "all" | i18n
+          <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
-          }}</label>
+          <th bitCell>{{ "collections" | i18n }}</th>
-        </th>
+          <th bitCell class="tw-w-10">
-        <th bitCell>{{ "name" | i18n }}</th>
+            <button
-        <th bitCell>{{ "collections" | i18n }}</th>
+              [bitMenuTriggerFor]="headerMenu"
-        <th bitCell class="tw-w-10">
+              type="button"
-          <button
+              bitIconButton="bwi-ellipsis-v"
-            [bitMenuTriggerFor]="headerMenu"
+              size="small"
-            type="button"
+              appA11yTitle="{{ 'options' | i18n }}"
-            bitIconButton="bwi-ellipsis-v"
+            ></button>
-            size="small"
-            appA11yTitle="{{ 'options' | i18n }}"
-          ></button>
 
-          <bit-menu #headerMenu>
+            <bit-menu #headerMenu>
-            <button type="button" bitMenuItem (click)="deleteAllSelected()">
+              <button type="button" bitMenuItem (click)="deleteAllSelected()">
-              <span class="tw-text-danger"
+                <span class="tw-text-danger"
-                ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
+                  ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
-              >
+                >
+              </button>
+            </bit-menu>
+          </th>
+        </tr>
+      </ng-container>
+      <ng-template body let-rows$>
+        <tr bitRow *cdkVirtualFor="let g of rows$" [ngClass]="rowHeightClass">
+          <td bitCell (click)="check(g)" class="tw-cursor-pointer">
+            <input type="checkbox" bitCheckbox [(ngModel)]="g.checked" />
+          </td>
+          <td bitCell class="tw-cursor-pointer tw-font-bold" (click)="edit(g)">
+            <button type="button" bitLink>
+              {{ g.details.name }}
             </button>
-          </bit-menu>
+          </td>
-        </th>
+          <td bitCell (click)="edit(g, ModalTabType.Collections)" class="tw-cursor-pointer">
-      </tr>
+            <bit-badge-list
-    </ng-container>
+              [items]="g.collectionNames"
-    <ng-template body>
+              [maxItems]="3"
-      <tr bitRow *ngFor="let g of visibleGroups">
+              variant="secondary"
-        <td bitCell (click)="check(g)" class="tw-cursor-pointer">
+            ></bit-badge-list>
-          <input type="checkbox" bitCheckbox [(ngModel)]="g.checked" />
+          </td>
-        </td>
+          <td bitCell>
-        <td bitCell class="tw-cursor-pointer tw-font-bold" (click)="edit(g)">
+            <button
-          <button type="button" bitLink>
+              [bitMenuTriggerFor]="rowMenu"
-            {{ g.details.name }}
+              type="button"
-          </button>
+              bitIconButton="bwi-ellipsis-v"
-        </td>
+              size="small"
-        <td bitCell (click)="edit(g, ModalTabType.Collections)" class="tw-cursor-pointer">
+              appA11yTitle="{{ 'options' | i18n }}"
-          <bit-badge-list
+            ></button>
-            [items]="g.collectionNames"
-            [maxItems]="3"
-            variant="secondary"
-          ></bit-badge-list>
-        </td>
-        <td bitCell>
-          <button
-            [bitMenuTriggerFor]="rowMenu"
-            type="button"
-            bitIconButton="bwi-ellipsis-v"
-            size="small"
-            appA11yTitle="{{ 'options' | i18n }}"
-          ></button>
 
-          <bit-menu #rowMenu>
+            <bit-menu #rowMenu>
-            <button type="button" bitMenuItem (click)="edit(g)">
+              <button type="button" bitMenuItem (click)="edit(g)">
-              <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editInfo" | i18n }}
+                <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editInfo" | i18n }}
-            </button>
+              </button>
-            <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Members)">
+              <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Members)">
-              <i aria-hidden="true" class="bwi bwi-user"></i> {{ "members" | i18n }}
+                <i aria-hidden="true" class="bwi bwi-user"></i> {{ "members" | i18n }}
-            </button>
+              </button>
-            <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Collections)">
+              <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Collections)">
-              <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
+                <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
-            </button>
+              </button>
-            <button type="button" bitMenuItem (click)="delete(g)">
+              <button type="button" bitMenuItem (click)="delete(g)">
-              <span class="tw-text-danger"
+                <span class="tw-text-danger"
-                ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
+                  ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
-              >
+                >
-            </button>
+              </button>
-          </bit-menu>
+            </bit-menu>
-        </td>
+          </td>
-      </tr>
+        </tr>
-    </ng-template>
+      </ng-template>
-  </bit-table>
+    </bit-table>
+  </cdk-virtual-scroll-viewport>
 </ng-container>
-<ng-template #addEdit></ng-template>

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

@@ -1,4 +1,6 @@
-import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormControl } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import {
   BehaviorSubject,
@@ -7,21 +9,15 @@ import {
   from,
   lastValueFrom,
   map,
-  Subject,
   switchMap,
-  takeUntil,
   tap,
 } from "rxjs";
-import { first } from "rxjs/operators";
+import { debounceTime, first } from "rxjs/operators";
 
-import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { ListResponse } from "@bitwarden/common/models/response/list.response";
 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";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { CollectionData } from "@bitwarden/common/vault/models/data/collection.data";
 import { Collection } from "@bitwarden/common/vault/models/domain/collection";
@@ -30,7 +26,7 @@ import {
   CollectionResponse,
 } from "@bitwarden/common/vault/models/response/collection.response";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, TableDataSource, ToastService } from "@bitwarden/components";
 
 import { InternalGroupService as GroupService, GroupView } from "../core";
 
@@ -40,21 +36,7 @@ import {
   openGroupAddEditDialog,
 } from "./group-add-edit.component";
 
-type CollectionViewMap = {
-  [id: string]: CollectionView;
-};
-
 type GroupDetailsRow = {
-  /**
-   * Group Id (used for searching)
-   */
-  id: string;
-
-  /**
-   * Group name (used for searching)
-   */
-  name: string;
-
   /**
    * Details used for displaying group information
    */
@@ -72,59 +54,38 @@ type GroupDetailsRow = {
 };
 
 /**
- * @deprecated To be replaced with NewGroupsComponent which significantly refactors this component.
+ * Custom filter predicate that filters the groups table by id and name only.
- * The GroupsComponentRefactor flag switches between the old and new components; this component will be removed when
+ * This is required because the default implementation searches by all properties, which can unintentionally match
- * the feature flag is removed.
+ * with members' names (who are assigned to the group) or collection names (which the group has access to).
  */
+const groupsFilter = (filter: string) => {
+  const transformedFilter = filter.trim().toLowerCase();
+  return (data: GroupDetailsRow) => {
+    const group = data.details;
+
+    return (
+      group.id.toLowerCase().indexOf(transformedFilter) != -1 ||
+      group.name.toLowerCase().indexOf(transformedFilter) != -1
+    );
+  };
+};
+
 @Component({
-  selector: "app-org-groups",
   templateUrl: "groups.component.html",
 })
-export class GroupsComponent implements OnInit, OnDestroy {
+export class GroupsComponent {
-  @ViewChild("addEdit", { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
-  @ViewChild("usersTemplate", { read: ViewContainerRef, static: true })
-  usersModalRef: ViewContainerRef;
-
   loading = true;
   organizationId: string;
-  groups: GroupDetailsRow[];
 
-  protected didScroll = false;
+  protected dataSource = new TableDataSource<GroupDetailsRow>();
-  protected pageSize = 100;
+  protected searchControl = new FormControl("");
+
+  // Fixed sizes used for cdkVirtualScroll
+  protected rowHeight = 46;
+  protected rowHeightClass = `tw-h-[46px]`;
+
   protected ModalTabType = GroupAddEditTabType;
-
-  private pagedGroupsCount = 0;
-  private pagedGroups: GroupDetailsRow[];
-  private searchedGroups: GroupDetailsRow[];
-  private _searchText$ = new BehaviorSubject<string>("");
-  private destroy$ = new Subject<void>();
   private refreshGroups$ = new BehaviorSubject<void>(null);
-  private isSearching: boolean = false;
-
-  get searchText() {
-    return this._searchText$.value;
-  }
-  set searchText(value: string) {
-    this._searchText$.next(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(): GroupDetailsRow[] {
-    if (this.isPaging()) {
-      return this.pagedGroups;
-    }
-    if (this.isSearching) {
-      return this.searchedGroups;
-    }
-    return this.groups;
-  }
 
   constructor(
     private apiService: ApiService,
@@ -132,14 +93,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private i18nService: I18nService,
     private dialogService: DialogService,
-    private platformUtilsService: PlatformUtilsService,
-    private searchService: SearchService,
     private logService: LogService,
     private collectionService: CollectionService,
-    private searchPipe: SearchPipe,
+    private toastService: ToastService,
-  ) {}
+  ) {
-
-  async ngOnInit() {
     this.route.params
       .pipe(
         tap((params) => (this.organizationId = params.organizationId)),
@@ -156,68 +113,31 @@ export class GroupsComponent implements OnInit, OnDestroy {
           ]),
         ),
         map(([collectionMap, groups]) => {
-          return groups
+          return groups.map<GroupDetailsRow>((g) => ({
-            .sort(Utils.getSortFunction(this.i18nService, "name"))
+            id: g.id,
-            .map<GroupDetailsRow>((g) => ({
+            name: g.name,
-              id: g.id,
+            details: g,
-              name: g.name,
+            checked: false,
-              details: g,
+            collectionNames: g.collections
-              checked: false,
+              .map((c) => collectionMap[c.id]?.name)
-              collectionNames: g.collections
+              .sort(this.i18nService.collator?.compare),
-                .map((c) => collectionMap[c.id]?.name)
+          }));
-                .sort(this.i18nService.collator?.compare),
-            }));
         }),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(),
       )
       .subscribe((groups) => {
-        this.groups = groups;
+        this.dataSource.data = groups;
-        this.resetPaging();
-        this.updateSearchedGroups();
         this.loading = false;
       });
 
-    this.route.queryParams
+    // Connect the search input to the table dataSource filter input
-      .pipe(
+    this.searchControl.valueChanges
-        first(),
+      .pipe(debounceTime(200), takeUntilDestroyed())
-        concatMap(async (qParams) => {
+      .subscribe((v) => (this.dataSource.filter = groupsFilter(v)));
-          this.searchText = qParams.search;
-        }),
-        takeUntil(this.destroy$),
-      )
-      .subscribe();
 
-    this._searchText$
+    this.route.queryParams.pipe(first(), takeUntilDestroyed()).subscribe((qParams) => {
-      .pipe(
+      this.searchControl.setValue(qParams.search);
-        switchMap((searchText) => this.searchService.isSearchable(searchText)),
+    });
-        takeUntil(this.destroy$),
-      )
-      .subscribe((isSearchable) => {
-        this.isSearching = isSearchable;
-      });
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  loadMore() {
-    if (!this.groups || this.groups.length <= this.pageSize) {
-      return;
-    }
-    const pagedLength = this.pagedGroups.length;
-    let pagedSize = this.pageSize;
-    if (pagedLength === 0 && this.pagedGroupsCount > this.pageSize) {
-      pagedSize = this.pagedGroupsCount;
-    }
-    if (this.groups.length > pagedLength) {
-      this.pagedGroups = this.pagedGroups.concat(
-        this.groups.slice(pagedLength, pagedLength + pagedSize),
-      );
-    }
-    this.pagedGroupsCount = this.pagedGroups.length;
-    this.didScroll = this.pagedGroups.length > this.pageSize;
   }
 
   async edit(
@@ -237,14 +157,12 @@ export class GroupsComponent implements OnInit, OnDestroy {
     if (result == GroupAddEditDialogResultType.Saved) {
       this.refreshGroups$.next();
     } else if (result == GroupAddEditDialogResultType.Deleted) {
-      this.removeGroup(group.details.id);
+      this.removeGroup(group);
     }
   }
 
-  add() {
+  async add() {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    await this.edit(null);
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.edit(null);
   }
 
   async delete(groupRow: GroupDetailsRow) {
@@ -259,19 +177,19 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
     try {
       await this.groupService.delete(this.organizationId, groupRow.details.id);
-      this.platformUtilsService.showToast(
+      this.toastService.showToast({
-        "success",
+        variant: "success",
-        null,
+        title: null,
-        this.i18nService.t("deletedGroupId", groupRow.details.name),
+        message: this.i18nService.t("deletedGroupId", groupRow.details.name),
-      );
+      });
-      this.removeGroup(groupRow.details.id);
+      this.removeGroup(groupRow);
     } catch (e) {
       this.logService.error(e);
     }
   }
 
   async deleteAllSelected() {
-    const groupsToDelete = this.groups.filter((g) => g.checked);
+    const groupsToDelete = this.dataSource.data.filter((g) => g.checked);
 
     if (groupsToDelete.length == 0) {
       return;
@@ -295,46 +213,31 @@ export class GroupsComponent implements OnInit, OnDestroy {
         this.organizationId,
         groupsToDelete.map((g) => g.details.id),
       );
-      this.platformUtilsService.showToast(
+      this.toastService.showToast({
-        "success",
+        variant: "success",
-        null,
+        title: null,
-        this.i18nService.t("deletedManyGroups", groupsToDelete.length.toString()),
+        message: this.i18nService.t("deletedManyGroups", groupsToDelete.length.toString()),
-      );
+      });
 
-      groupsToDelete.forEach((g) => this.removeGroup(g.details.id));
+      groupsToDelete.forEach((g) => this.removeGroup(g));
     } catch (e) {
       this.logService.error(e);
     }
   }
 
-  resetPaging() {
-    this.pagedGroups = [];
-    this.loadMore();
-  }
-
   check(groupRow: GroupDetailsRow) {
     groupRow.checked = !groupRow.checked;
   }
 
   toggleAllVisible(event: Event) {
-    this.visibleGroups.forEach((g) => (g.checked = (event.target as HTMLInputElement).checked));
+    this.dataSource.filteredData.forEach(
+      (g) => (g.checked = (event.target as HTMLInputElement).checked),
+    );
   }
 
-  isPaging() {
+  private removeGroup(groupRow: GroupDetailsRow) {
-    const searching = this.isSearching;
+    // Assign a new array to dataSource.data to trigger the setters and update the table
-    if (searching && this.didScroll) {
+    this.dataSource.data = this.dataSource.data.filter((g) => g !== groupRow);
-      this.resetPaging();
-    }
-    return !searching && this.groups && this.groups.length > this.pageSize;
-  }
-
-  private removeGroup(id: string) {
-    const index = this.groups.findIndex((g) => g.details.id === id);
-    if (index > -1) {
-      this.groups.splice(index, 1);
-      this.resetPaging();
-      this.updateSearchedGroups();
-    }
   }
 
   private async toCollectionMap(response: ListResponse<CollectionResponse>) {
@@ -344,21 +247,9 @@ export class GroupsComponent implements OnInit, OnDestroy {
     const decryptedCollections = await this.collectionService.decryptMany(collections);
 
     // Convert to an object using collection Ids as keys for faster name lookups
-    const collectionMap: CollectionViewMap = {};
+    const collectionMap: Record<string, CollectionView> = {};
     decryptedCollections.forEach((c) => (collectionMap[c.id] = c));
 
     return collectionMap;
   }
-
-  private updateSearchedGroups() {
-    if (this.isSearching) {
-      // 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,
-        (group) => group.details.name,
-        (group) => group.details.id,
-      );
-    }
-  }
 }

apps/web/src/app/admin-console/organizations/manage/new-groups.component.html

@@ -1,109 +0,0 @@
-<app-header>
-  <bit-search
-    [placeholder]="'searchGroups' | i18n"
-    [formControl]="searchControl"
-    class="tw-w-80"
-  ></bit-search>
-  <button bitButton type="button" buttonType="primary" (click)="add()">
-    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-    {{ "newGroup" | i18n }}
-  </button>
-</app-header>
-
-<ng-container *ngIf="loading">
-  <i
-    class="bwi bwi-spinner bwi-spin text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-</ng-container>
-<ng-container *ngIf="!loading">
-  <p *ngIf="!dataSource.filteredData.length">{{ "noGroupsInList" | i18n }}</p>
-  <!-- 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 *ngIf="dataSource.filteredData.length" [dataSource]="dataSource">
-      <ng-container header>
-        <tr>
-          <th bitCell class="tw-w-20">
-            <input
-              type="checkbox"
-              bitCheckbox
-              class="tw-mr-2"
-              (change)="toggleAllVisible($event)"
-              id="selectAll"
-            />
-            <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
-              "all" | i18n
-            }}</label>
-          </th>
-          <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
-          <th bitCell>{{ "collections" | 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>
-              <button type="button" bitMenuItem (click)="deleteAllSelected()">
-                <span class="tw-text-danger"
-                  ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
-                >
-              </button>
-            </bit-menu>
-          </th>
-        </tr>
-      </ng-container>
-      <ng-template body let-rows$>
-        <tr bitRow *cdkVirtualFor="let g of rows$" [ngClass]="rowHeightClass">
-          <td bitCell (click)="check(g)" class="tw-cursor-pointer">
-            <input type="checkbox" bitCheckbox [(ngModel)]="g.checked" />
-          </td>
-          <td bitCell class="tw-cursor-pointer tw-font-bold" (click)="edit(g)">
-            <button type="button" bitLink>
-              {{ g.details.name }}
-            </button>
-          </td>
-          <td bitCell (click)="edit(g, ModalTabType.Collections)" class="tw-cursor-pointer">
-            <bit-badge-list
-              [items]="g.collectionNames"
-              [maxItems]="3"
-              variant="secondary"
-            ></bit-badge-list>
-          </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)="edit(g)">
-                <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editInfo" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Members)">
-                <i aria-hidden="true" class="bwi bwi-user"></i> {{ "members" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Collections)">
-                <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="delete(g)">
-                <span class="tw-text-danger"
-                  ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
-                >
-              </button>
-            </bit-menu>
-          </td>
-        </tr>
-      </ng-template>
-    </bit-table>
-  </cdk-virtual-scroll-viewport>
-</ng-container>

apps/web/src/app/admin-console/organizations/manage/new-groups.component.ts

@@ -1,255 +0,0 @@
-import { Component } from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { FormControl } from "@angular/forms";
-import { ActivatedRoute } from "@angular/router";
-import {
-  BehaviorSubject,
-  combineLatest,
-  concatMap,
-  from,
-  lastValueFrom,
-  map,
-  switchMap,
-  tap,
-} from "rxjs";
-import { debounceTime, first } from "rxjs/operators";
-
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { ListResponse } from "@bitwarden/common/models/response/list.response";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
-import { CollectionData } from "@bitwarden/common/vault/models/data/collection.data";
-import { Collection } from "@bitwarden/common/vault/models/domain/collection";
-import {
-  CollectionDetailsResponse,
-  CollectionResponse,
-} from "@bitwarden/common/vault/models/response/collection.response";
-import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
-import { DialogService, TableDataSource, ToastService } from "@bitwarden/components";
-
-import { InternalGroupService as GroupService, GroupView } from "../core";
-
-import {
-  GroupAddEditDialogResultType,
-  GroupAddEditTabType,
-  openGroupAddEditDialog,
-} from "./group-add-edit.component";
-
-type GroupDetailsRow = {
-  /**
-   * Details used for displaying group information
-   */
-  details: GroupView;
-
-  /**
-   * True if the group is selected in the table
-   */
-  checked?: boolean;
-
-  /**
-   * A list of collection names the group has access to
-   */
-  collectionNames?: string[];
-};
-
-/**
- * Custom filter predicate that filters the groups table by id and name only.
- * This is required because the default implementation searches by all properties, which can unintentionally match
- * with members' names (who are assigned to the group) or collection names (which the group has access to).
- */
-const groupsFilter = (filter: string) => {
-  const transformedFilter = filter.trim().toLowerCase();
-  return (data: GroupDetailsRow) => {
-    const group = data.details;
-
-    return (
-      group.id.toLowerCase().indexOf(transformedFilter) != -1 ||
-      group.name.toLowerCase().indexOf(transformedFilter) != -1
-    );
-  };
-};
-
-@Component({
-  templateUrl: "new-groups.component.html",
-})
-export class NewGroupsComponent {
-  loading = true;
-  organizationId: string;
-
-  protected dataSource = new TableDataSource<GroupDetailsRow>();
-  protected searchControl = new FormControl("");
-
-  // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 46;
-  protected rowHeightClass = `tw-h-[46px]`;
-
-  protected ModalTabType = GroupAddEditTabType;
-  private refreshGroups$ = new BehaviorSubject<void>(null);
-
-  constructor(
-    private apiService: ApiService,
-    private groupService: GroupService,
-    private route: ActivatedRoute,
-    private i18nService: I18nService,
-    private dialogService: DialogService,
-    private logService: LogService,
-    private collectionService: CollectionService,
-    private toastService: ToastService,
-  ) {
-    this.route.params
-      .pipe(
-        tap((params) => (this.organizationId = params.organizationId)),
-        switchMap(() =>
-          combineLatest([
-            // collectionMap
-            from(this.apiService.getCollections(this.organizationId)).pipe(
-              concatMap((response) => this.toCollectionMap(response)),
-            ),
-            // groups
-            this.refreshGroups$.pipe(
-              switchMap(() => this.groupService.getAll(this.organizationId)),
-            ),
-          ]),
-        ),
-        map(([collectionMap, groups]) => {
-          return groups.map<GroupDetailsRow>((g) => ({
-            id: g.id,
-            name: g.name,
-            details: g,
-            checked: false,
-            collectionNames: g.collections
-              .map((c) => collectionMap[c.id]?.name)
-              .sort(this.i18nService.collator?.compare),
-          }));
-        }),
-        takeUntilDestroyed(),
-      )
-      .subscribe((groups) => {
-        this.dataSource.data = groups;
-        this.loading = false;
-      });
-
-    // Connect the search input to the table dataSource filter input
-    this.searchControl.valueChanges
-      .pipe(debounceTime(200), takeUntilDestroyed())
-      .subscribe((v) => (this.dataSource.filter = groupsFilter(v)));
-
-    this.route.queryParams.pipe(first(), takeUntilDestroyed()).subscribe((qParams) => {
-      this.searchControl.setValue(qParams.search);
-    });
-  }
-
-  async edit(
-    group: GroupDetailsRow,
-    startingTabIndex: GroupAddEditTabType = GroupAddEditTabType.Info,
-  ) {
-    const dialogRef = openGroupAddEditDialog(this.dialogService, {
-      data: {
-        initialTab: startingTabIndex,
-        organizationId: this.organizationId,
-        groupId: group != null ? group.details.id : null,
-      },
-    });
-
-    const result = await lastValueFrom(dialogRef.closed);
-
-    if (result == GroupAddEditDialogResultType.Saved) {
-      this.refreshGroups$.next();
-    } else if (result == GroupAddEditDialogResultType.Deleted) {
-      this.removeGroup(group);
-    }
-  }
-
-  async add() {
-    await this.edit(null);
-  }
-
-  async delete(groupRow: GroupDetailsRow) {
-    const confirmed = await this.dialogService.openSimpleDialog({
-      title: groupRow.details.name,
-      content: { key: "deleteGroupConfirmation" },
-      type: "warning",
-    });
-    if (!confirmed) {
-      return false;
-    }
-
-    try {
-      await this.groupService.delete(this.organizationId, groupRow.details.id);
-      this.toastService.showToast({
-        variant: "success",
-        title: null,
-        message: this.i18nService.t("deletedGroupId", groupRow.details.name),
-      });
-      this.removeGroup(groupRow);
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
-
-  async deleteAllSelected() {
-    const groupsToDelete = this.dataSource.data.filter((g) => g.checked);
-
-    if (groupsToDelete.length == 0) {
-      return;
-    }
-
-    const deleteMessage = groupsToDelete.map((g) => g.details.name).join(", ");
-    const confirmed = await this.dialogService.openSimpleDialog({
-      title: {
-        key: "deleteMultipleGroupsConfirmation",
-        placeholders: [groupsToDelete.length.toString()],
-      },
-      content: deleteMessage,
-      type: "warning",
-    });
-    if (!confirmed) {
-      return false;
-    }
-
-    try {
-      await this.groupService.deleteMany(
-        this.organizationId,
-        groupsToDelete.map((g) => g.details.id),
-      );
-      this.toastService.showToast({
-        variant: "success",
-        title: null,
-        message: this.i18nService.t("deletedManyGroups", groupsToDelete.length.toString()),
-      });
-
-      groupsToDelete.forEach((g) => this.removeGroup(g));
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
-
-  check(groupRow: GroupDetailsRow) {
-    groupRow.checked = !groupRow.checked;
-  }
-
-  toggleAllVisible(event: Event) {
-    this.dataSource.filteredData.forEach(
-      (g) => (g.checked = (event.target as HTMLInputElement).checked),
-    );
-  }
-
-  private removeGroup(groupRow: GroupDetailsRow) {
-    // Assign a new array to dataSource.data to trigger the setters and update the table
-    this.dataSource.data = this.dataSource.data.filter((g) => g !== groupRow);
-  }
-
-  private async toCollectionMap(response: ListResponse<CollectionResponse>) {
-    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
-    const collectionMap: Record<string, CollectionView> = {};
-    decryptedCollections.forEach((c) => (collectionMap[c.id] = c));
-
-    return collectionMap;
-  }
-}

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

@@ -2,7 +2,6 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { authGuard } from "@bitwarden/angular/auth/guards";
-import { featureFlaggedRoute } from "@bitwarden/angular/platform/utils/feature-flagged-route";
 import {
   canAccessOrgAdmin,
   canAccessGroupsTab,
@@ -12,16 +11,15 @@ import {
   canAccessSettingsTab,
 } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
 import { organizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard";
 import { organizationRedirectGuard } from "../../admin-console/organizations/guards/org-redirect.guard";
 import { OrganizationLayoutComponent } from "../../admin-console/organizations/layouts/organization-layout.component";
-import { GroupsComponent } from "../../admin-console/organizations/manage/groups.component";
-import { NewGroupsComponent } from "../../admin-console/organizations/manage/new-groups.component";
 import { deepLinkGuard } from "../../auth/guards/deep-link.guard";
 import { VaultModule } from "../../vault/org-vault/vault.module";
 
+import { GroupsComponent } from "./manage/groups.component";
+
 const routes: Routes = [
   {
     path: ":organizationId",
@@ -49,18 +47,14 @@ const routes: Routes = [
         path: "members",
         loadChildren: () => import("./members").then((m) => m.MembersModule),
       },
-      ...featureFlaggedRoute({
+      {
-        defaultComponent: GroupsComponent,
+        component: GroupsComponent,
-        flaggedComponent: NewGroupsComponent,
+        path: "groups",
-        featureFlag: FeatureFlag.GroupsComponentRefactor,
+        canActivate: [organizationPermissionsGuard(canAccessGroupsTab)],
-        routeOptions: {
+        data: {
-          path: "groups",
+          titleId: "groups",
-          canActivate: [organizationPermissionsGuard(canAccessGroupsTab)],
-          data: {
-            titleId: "groups",
-          },
         },
-      }),
+      },
       {
         path: "reporting",
         loadChildren: () =>

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

@@ -6,7 +6,6 @@ import { LooseComponentsModule } from "../../shared";
 import { CoreOrganizationModule } from "./core";
 import { GroupAddEditComponent } from "./manage/group-add-edit.component";
 import { GroupsComponent } from "./manage/groups.component";
-import { NewGroupsComponent } from "./manage/new-groups.component";
 import { OrganizationsRoutingModule } from "./organization-routing.module";
 import { SharedOrganizationModule } from "./shared";
 import { AccessSelectorModule } from "./shared/components/access-selector";
@@ -20,6 +19,6 @@ import { AccessSelectorModule } from "./shared/components/access-selector";
     LooseComponentsModule,
     ScrollingModule,
   ],
-  declarations: [GroupsComponent, NewGroupsComponent, GroupAddEditComponent],
+  declarations: [GroupsComponent, GroupAddEditComponent],
 })
 export class OrganizationModule {}

libs/common/src/enums/feature-flag.enum.ts

@@ -22,7 +22,6 @@ export enum FeatureFlag {
   TwoFactorComponentRefactor = "two-factor-component-refactor",
   EnableTimeThreshold = "PM-5864-dollar-threshold",
   InlineMenuPositioningImprovements = "inline-menu-positioning-improvements",
-  GroupsComponentRefactor = "groups-component-refactor",
   ProviderClientVaultPrivacyBanner = "ac-2833-provider-client-vault-privacy-banner",
   VaultBulkManagementAction = "vault-bulk-management-action",
   AC2828_ProviderPortalMembersPage = "AC-2828_provider-portal-members-page",
@@ -60,7 +59,6 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.TwoFactorComponentRefactor]: FALSE,
   [FeatureFlag.EnableTimeThreshold]: FALSE,
   [FeatureFlag.InlineMenuPositioningImprovements]: FALSE,
-  [FeatureFlag.GroupsComponentRefactor]: FALSE,
   [FeatureFlag.ProviderClientVaultPrivacyBanner]: FALSE,
   [FeatureFlag.VaultBulkManagementAction]: FALSE,
   [FeatureFlag.AC2828_ProviderPortalMembersPage]: FALSE,