[PS-1078] Refactor FolderService to use Observables (#3022)

apps/browser/src/background/main.background.ts

@@ -44,6 +44,7 @@ import { ApiService } from "@bitwarden/common/services/api.service";
 import { AppIdService } from "@bitwarden/common/services/appId.service";
 import { AuditService } from "@bitwarden/common/services/audit.service";
 import { AuthService } from "@bitwarden/common/services/auth.service";
+import { BroadcasterService } from "@bitwarden/common/services/broadcaster.service";
 import { CipherService } from "@bitwarden/common/services/cipher.service";
 import { CollectionService } from "@bitwarden/common/services/collection.service";
 import { ConsoleLogService } from "@bitwarden/common/services/consoleLog.service";
@@ -149,6 +150,7 @@ export default class MainBackground {
   vaultFilterService: VaultFilterService;
   usernameGenerationService: UsernameGenerationServiceAbstraction;
   encryptService: EncryptService;
+  broadcasterService: BroadcasterService;
   folderApiService: FolderApiServiceAbstraction;
 
   onUpdatedRan: boolean;
@@ -267,11 +269,13 @@ export default class MainBackground {
       this.logService,
       this.stateService
     );
+    this.broadcasterService = new BroadcasterService();
     this.folderService = new FolderService(
       this.cryptoService,
       this.i18nService,
       this.cipherService,
-      this.stateService
+      this.stateService,
+      this.broadcasterService
     );
     this.folderApiService = new FolderApiService(this.folderService, this.apiService);
     this.collectionService = new CollectionService(

apps/browser/src/background/notification.background.ts

@@ -1,3 +1,5 @@
+import { firstValueFrom } from "rxjs";
+
 import { AuthService } from "@bitwarden/common/abstractions/auth.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
@@ -385,7 +387,7 @@ export default class NotificationBackground {
     model.login = loginModel;
 
     if (!Utils.isNullOrWhitespace(folderId)) {
-      const folders = await this.folderService.getAllDecrypted();
+      const folders = await firstValueFrom(this.folderService.folderViews$);
       if (folders.some((x) => x.id === folderId)) {
         model.folderId = folderId;
       }
@@ -437,7 +439,7 @@ export default class NotificationBackground {
   private async getDataForTab(tab: chrome.tabs.Tab, responseCommand: string) {
     const responseData: any = {};
     if (responseCommand === "notificationBarGetFoldersList") {
-      responseData.folders = await this.folderService.getAllDecrypted();
+      responseData.folders = await firstValueFrom(this.folderService.folderViews$);
     }
 
     await BrowserApi.tabSendMessageData(tab, responseCommand, responseData);

apps/browser/src/popup/services/services.module.ts

@@ -11,6 +11,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AppIdService } from "@bitwarden/common/abstractions/appId.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { AuthService as AuthServiceAbstraction } from "@bitwarden/common/abstractions/auth.service";
+import { BroadcasterService as BroadcasterServiceAbstraction } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -111,6 +112,10 @@ function getBgService<T>(service: keyof MainBackground) {
           : new BrowserMessagingService();
       },
     },
+    {
+      provide: BroadcasterServiceAbstraction,
+      useFactory: getBgService<BroadcasterServiceAbstraction>("broadcasterService"),
+    },
     {
       provide: TwoFactorService,
       useFactory: getBgService<TwoFactorService>("twoFactorService"),

apps/browser/src/popup/settings/folders.component.html

@@ -20,20 +20,20 @@
   </div>
 </header>
 <main tabindex="-1">
-  <div class="box list full-list" *ngIf="folders && folders.length">
+  <div class="box list full-list" *ngIf="(folders$ | async)?.length">
     <div class="box-content">
       <button
         type="button"
         appStopClick
         (click)="folderSelected(f)"
         class="box-content-row padded"
-        *ngFor="let f of folders"
+        *ngFor="let f of folders$ | async"
       >
         {{ f.name }}
       </button>
     </div>
   </div>
-  <div class="no-items" *ngIf="!folders || !folders.length">
+  <div class="no-items" *ngIf="!(folders$ | async)?.length">
     <p>{{ "noFolders" | i18n }}</p>
   </div>
 </main>

apps/browser/src/popup/settings/folders.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { Router } from "@angular/router";
+import { map, Observable } from "rxjs";
 
 import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
 import { FolderView } from "@bitwarden/common/models/view/folderView";
@@ -8,17 +9,19 @@ import { FolderView } from "@bitwarden/common/models/view/folderView";
   selector: "app-folders",
   templateUrl: "folders.component.html",
 })
-export class FoldersComponent implements OnInit {
-  folders: FolderView[];
+export class FoldersComponent {
+  folders$: Observable<FolderView[]>;
 
-  constructor(private folderService: FolderService, private router: Router) {}
+  constructor(private folderService: FolderService, private router: Router) {
+    this.folders$ = this.folderService.folderViews$.pipe(
+      map((folders) => {
+        if (folders.length > 0) {
+          folders = folders.slice(0, folders.length - 1);
+        }
 
-  async ngOnInit() {
-    this.folders = await this.folderService.getAllDecrypted();
-    // Remove "No Folder"
-    if (this.folders.length > 0) {
-      this.folders = this.folders.slice(0, this.folders.length - 1);
-    }
+        return folders;
+      })
+    );
   }
 
   folderSelected(folder: FolderView) {

apps/browser/src/popup/vault/add-edit.component.html

@@ -515,7 +515,7 @@
         <div class="box-content-row" appBoxRow>
           <label for="folder">{{ "folder" | i18n }}</label>
           <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId">
-            <option *ngFor="let f of folders" [ngValue]="f.id">{{ f.name }}</option>
+            <option *ngFor="let f of folders$ | async" [ngValue]="f.id">{{ f.name }}</option>
           </select>
         </div>
         <div class="box-content-row box-content-row-checkbox" appBoxRow>

apps/browser/src/popup/vault/ciphers.component.ts

@@ -120,7 +120,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
         this.searchPlaceholder = this.i18nService.t("searchFolder");
         if (this.folderId != null) {
           this.showOrganizations = false;
-          const folderNode = await this.folderService.getNested(this.folderId);
+          const folderNode = await this.vaultFilterService.getFolderNested(this.folderId);
           if (folderNode != null && folderNode.node != null) {
             this.groupingTitle = folderNode.node.name;
             this.nestedFolders =

apps/browser/src/popup/vault/vault-filter.component.ts

@@ -1,6 +1,7 @@
 import { Location } from "@angular/common";
 import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
 import { first } from "rxjs/operators";
 
 import { VaultFilter } from "@bitwarden/angular/modules/vault-filter/models/vault-filter.model";
@@ -182,9 +183,11 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
   }
 
   async loadFolders() {
-    const allFolders = await this.vaultFilterService.buildFolders(this.selectedOrganization);
+    const allFolders = await firstValueFrom(
+      this.vaultFilterService.buildNestedFolders(this.selectedOrganization)
+    );
     this.folders = allFolders.fullList;
-    this.nestedFolders = await allFolders.nestedList;
+    this.nestedFolders = allFolders.nestedList;
   }
 
   async search(timeout: number = null) {