[PM-6194] Refactor injection of services in browser services module (#8380)

* refactored injector of services on the browser service module

* refactored the search and popup serach service to use state provider

* renamed back to default

* removed token service that was readded during merge conflict

* Updated search service construction on the cli

* updated to use user key definition

* Reafctored all components that refernce issearchable

* removed commented variable

* added uncommited code to remove dependencies not needed anymore

* added uncommited code to remove dependencies not needed anymore

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { firstValueFrom } from "rxjs";
-import { first } from "rxjs/operators";
+import { BehaviorSubject, Subject, firstValueFrom, from } from "rxjs";
+import { first, switchMap, takeUntil } from "rxjs/operators";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -39,7 +39,6 @@ const DisallowedPlanTypes = [
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class ClientsComponent implements OnInit {
   providerId: string;
-  searchText: string;
   addableOrganizations: Organization[];
   loading = true;
   manageOrganizations = false;
@@ -57,6 +56,17 @@ export class ClientsComponent implements OnInit {
     FeatureFlag.EnableConsolidatedBilling,
     false,
   );
+  private destroy$ = new Subject<void>();
+  private _searchText$ = new BehaviorSubject<string>("");
+  private isSearching: boolean = false;
+
+  get searchText() {
+    return this._searchText$.value;
+  }
+
+  set searchText(value: string) {
+    this._searchText$.next(value);
+  }
 
   constructor(
     private route: ActivatedRoute,
@@ -77,27 +87,41 @@ export class ClientsComponent implements OnInit {
   ) {}
 
   async ngOnInit() {
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-
     const enableConsolidatedBilling = await firstValueFrom(this.enableConsolidatedBilling$);
 
     if (enableConsolidatedBilling) {
       await this.router.navigate(["../manage-client-organizations"], { relativeTo: this.route });
     } else {
-      // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-      this.route.parent.params.subscribe(async (params) => {
-        this.providerId = params.providerId;
+      this.route.parent.params
+        .pipe(
+          switchMap((params) => {
+            this.providerId = params.providerId;
+            return from(this.load());
+          }),
+          takeUntil(this.destroy$),
+        )
+        .subscribe();
 
-        await this.load();
-
-        /* eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe, rxjs/no-nested-subscribe */
-        this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
-          this.searchText = qParams.search;
-        });
+      this.route.queryParams.pipe(first(), takeUntil(this.destroy$)).subscribe((qParams) => {
+        this.searchText = qParams.search;
       });
+
+      this._searchText$
+        .pipe(
+          switchMap((searchText) => from(this.searchService.isSearchable(searchText))),
+          takeUntil(this.destroy$),
+        )
+        .subscribe((isSearchable) => {
+          this.isSearching = isSearchable;
+        });
     }
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   async load() {
     const response = await this.apiService.getProviderClients(this.providerId);
     this.clients = response.data != null && response.data.length > 0 ? response.data : [];
@@ -118,20 +142,14 @@ export class ClientsComponent implements OnInit {
   }
 
   isPaging() {
-    const searching = this.isSearching();
+    const searching = this.isSearching;
     if (searching && this.didScroll) {
-      // 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.resetPaging();
     }
     return !searching && this.clients && this.clients.length > this.pageSize;
   }
 
-  isSearching() {
-    return this.searchService.isSearchable(this.searchText);
-  }
-
-  async resetPaging() {
+  resetPaging() {
     this.pagedClients = [];
     this.loadMore();
   }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -34,10 +34,7 @@ import { UserAddEditComponent } from "./user-add-edit.component";
   templateUrl: "people.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class PeopleComponent
-  extends BasePeopleComponent<ProviderUserUserDetailsResponse>
-  implements OnInit
-{
+export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetailsResponse> {
   @ViewChild("addEdit", { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
   @ViewChild("groupsTemplate", { read: ViewContainerRef, static: true })
   groupsModalRef: ViewContainerRef;
@@ -119,6 +116,10 @@ export class PeopleComponent
     });
   }
 
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
   getUsers(): Promise<ListResponse<ProviderUserUserDetailsResponse>> {
     return this.apiService.getProviderUsers(this.providerId);
   }

bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-organizations.component.ts

@@ -1,8 +1,8 @@
 import { SelectionModel } from "@angular/cdk/collections";
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { firstValueFrom } from "rxjs";
-import { first } from "rxjs/operators";
+import { BehaviorSubject, Subject, firstValueFrom, from } from "rxjs";
+import { first, switchMap, takeUntil } from "rxjs/operators";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
@@ -23,12 +23,22 @@ import { ManageClientOrganizationSubscriptionComponent } from "./manage-client-o
 })
 
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class ManageClientOrganizationsComponent implements OnInit {
+export class ManageClientOrganizationsComponent implements OnInit, OnDestroy {
   providerId: string;
   loading = true;
   manageOrganizations = false;
 
+  private destroy$ = new Subject<void>();
+  private _searchText$ = new BehaviorSubject<string>("");
+  private isSearching: boolean = false;
+
+  get searchText() {
+    return this._searchText$.value;
+  }
+
   set searchText(search: string) {
+    this._searchText$.value;
+
     this.selection.clear();
     this.dataSource.filter = search;
   }
@@ -67,6 +77,20 @@ export class ManageClientOrganizationsComponent implements OnInit {
         this.searchText = qParams.search;
       });
     });
+
+    this._searchText$
+      .pipe(
+        switchMap((searchText) => from(this.searchService.isSearchable(searchText))),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((isSearchable) => {
+        this.isSearching = isSearchable;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   async load() {
@@ -80,7 +104,7 @@ export class ManageClientOrganizationsComponent implements OnInit {
   }
 
   isPaging() {
-    const searching = this.isSearching();
+    const searching = this.isSearching;
     if (searching && this.didScroll) {
       // 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
@@ -89,10 +113,6 @@ export class ManageClientOrganizationsComponent implements OnInit {
     return !searching && this.clients && this.clients.length > this.pageSize;
   }
 
-  isSearching() {
-    return this.searchService.isSearchable(this.searchText);
-  }
-
   async resetPaging() {
     this.pagedClients = [];
     this.loadMore();