Add eslint-plugin-rxjs & rxjs-angular (bitwarden#3373)

.eslintignore

@@ -1,5 +1,6 @@
 **/build
 **/dist
+**/coverage
 .angular
 
 **/node_modules
@@ -21,3 +22,7 @@ apps/web/src/theme.js
 apps/web/tailwind.config.js
 
 apps/cli/config/config.js
+
+tailwind.config.js
+libs/components/tailwind.config.base.js
+libs/components/tailwind.config.js

.eslintrc.json

@@ -4,13 +4,19 @@
     "browser": true,
     "webextensions": true
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "rxjs", "rxjs-angular"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["./tsconfig.eslint.json"],
+    "sourceType": "module"
+  },
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
-    "prettier"
+    "prettier",
+    "plugin:rxjs/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off", // TODO: This should be re-enabled
@@ -50,6 +56,7 @@
         ],
         "pathGroupsExcludedImportTypes": ["builtin"]
       }
-    ]
+    ],
+    "rxjs-angular/prefer-takeuntil": "error"
   }
 }

.gitignore

@@ -39,3 +39,4 @@ coverage
 
 # Storybook
 documentation.json
+.eslintcache

.prettierignore

@@ -3,6 +3,7 @@
 **/dist
 **/coverage
 .angular
+documentation.json
 
 # External libraries / auto synced locales
 apps/browser/src/_locales

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Popout", "Reprompt", "takeuntil"]
+}

apps/browser/src/decorators/session-sync-observable/session-syncer.spec.ts

@@ -29,7 +29,7 @@ describe("session syncer", () => {
   afterEach(() => {
     jest.resetAllMocks();
 
-    behaviorSubject.unsubscribe();
+    behaviorSubject.complete();
   });
 
   describe("constructor", () => {

apps/browser/src/decorators/session-sync-observable/session-syncer.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, Subscription } from "rxjs";
+import { BehaviorSubject, concatMap, Subscription } from "rxjs";
 
 import { Utils } from "@bitwarden/common/misc/utils";
 
@@ -41,13 +41,17 @@ export class SessionSyncer {
     // This may be a memory leak.
     // There is no good time to unsubscribe from this observable. Hopefully Manifest V3 clears memory from temporary
     // contexts. If so, this is handled by destruction of the context.
-    this.subscription = this.behaviorSubject.subscribe(async (next) => {
-      if (this.ignoreNextUpdate) {
-        this.ignoreNextUpdate = false;
-        return;
-      }
-      await this.updateSession(next);
-    });
+    this.subscription = this.behaviorSubject
+      .pipe(
+        concatMap(async (next) => {
+          if (this.ignoreNextUpdate) {
+            this.ignoreNextUpdate = false;
+            return;
+          }
+          await this.updateSession(next);
+        })
+      )
+      .subscribe();
   }
 
   private listenForUpdates() {

apps/browser/src/popup/accounts/two-factor.component.ts

@@ -109,6 +109,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
       }
     }
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
       if (qParams.sso === "true") {
         super.onSuccessfulLogin = () => {

apps/browser/src/popup/app.component.ts

@@ -35,7 +35,7 @@ export class AppComponent implements OnInit, OnDestroy {
   private lastActivity: number = null;
   private activeUserId: string;
 
-  private destroy$: Subject<void> = new Subject<void>();
+  private destroy$ = new Subject<void>();
 
   constructor(
     private toastrService: ToastrService,
@@ -132,6 +132,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
     BrowserApi.messageListener("app.component", (window as any).bitwardenPopupMainMessageListener);
 
+    // eslint-disable-next-line rxjs/no-async-subscribe
     this.router.events.pipe(takeUntil(this.destroy$)).subscribe(async (event) => {
       if (event instanceof NavigationEnd) {
         const url = event.urlAfterRedirects || event.url || "";

apps/browser/src/popup/send/send-add-edit.component.ts

@@ -19,6 +19,7 @@ import { PopupUtilsService } from "../services/popup-utils.service";
   selector: "app-send-add-edit",
   templateUrl: "send-add-edit.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class SendAddEditComponent extends BaseAddEditComponent {
   // Options header
   showOptions = false;
@@ -98,6 +99,7 @@ export class SendAddEditComponent extends BaseAddEditComponent {
     this.isUnsupportedMac =
       this.platformUtilsService.isChrome() && window?.navigator?.appVersion.includes("Mac OS X 11");
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (params.sendId) {
         this.sendId = params.sendId;

apps/browser/src/popup/send/send-type.component.ts

@@ -70,6 +70,7 @@ export class SendTypeComponent extends BaseSendComponent {
   async ngOnInit() {
     // Let super class finish
     await super.ngOnInit();
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (this.applySavedState) {
         this.state = await this.stateService.getBrowserSendTypeComponentState();

apps/browser/src/popup/settings/folder-add-edit.component.ts

@@ -13,6 +13,7 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
   selector: "app-folder-add-edit",
   templateUrl: "folder-add-edit.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class FolderAddEditComponent extends BaseFolderAddEditComponent {
   constructor(
     folderService: FolderService,
@@ -27,6 +28,7 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
   }
 
   async ngOnInit() {
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (params.folderId) {
         this.folderId = params.folderId;

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

@@ -37,6 +37,7 @@ const RateUrls = {
   selector: "app-settings",
   templateUrl: "settings.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class SettingsComponent implements OnInit {
   @ViewChild("vaultTimeoutActionSelect", { read: ElementRef, static: true })
   vaultTimeoutActionSelectRef: ElementRef;
@@ -102,6 +103,7 @@ export class SettingsComponent implements OnInit {
       this.vaultTimeout.setValue(timeout);
     }
     this.previousVaultTimeout = this.vaultTimeout.value;
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.vaultTimeout.valueChanges.subscribe(async (value) => {
       await this.saveVaultTimeout(value);
     });

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

@@ -27,6 +27,7 @@ import { PopupUtilsService } from "../services/popup-utils.service";
   selector: "app-vault-add-edit",
   templateUrl: "add-edit.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class AddEditComponent extends BaseAddEditComponent {
   currentUris: string[];
   showAttachments = true;
@@ -72,6 +73,7 @@ export class AddEditComponent extends BaseAddEditComponent {
   async ngOnInit() {
     await super.ngOnInit();
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (params.cipherId) {
         this.cipherId = params.cipherId;

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

@@ -17,6 +17,7 @@ import { StateService } from "@bitwarden/common/abstractions/state.service";
   selector: "app-vault-attachments",
   templateUrl: "attachments.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class AttachmentsComponent extends BaseAttachmentsComponent {
   openedAttachmentsInPopup: boolean;
 
@@ -46,6 +47,7 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
   }
 
   async ngOnInit() {
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       this.cipherId = params.cipherId;
       await this.init();

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

@@ -80,6 +80,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
     this.searchTypeSearch = !this.platformUtilsService.isSafari();
     this.showOrganizations = await this.organizationService.hasOrganizations();
     this.vaultFilter = this.vaultFilterService.getVaultFilter();
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (this.applySavedState) {
         this.state = await this.stateService.getBrowserCipherComponentState();

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

@@ -14,6 +14,7 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
   selector: "app-vault-collections",
   templateUrl: "collections.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class CollectionsComponent extends BaseCollectionsComponent {
   constructor(
     collectionService: CollectionService,
@@ -28,9 +29,11 @@ export class CollectionsComponent extends BaseCollectionsComponent {
   }
 
   async ngOnInit() {
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     this.onSavedCollections.subscribe(() => {
       this.back();
     });
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       this.cipherId = params.cipherId;
       await this.load();

apps/browser/src/popup/vault/password-history.component.ts

@@ -12,6 +12,7 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
   selector: "app-password-history",
   templateUrl: "password-history.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class PasswordHistoryComponent extends BasePasswordHistoryComponent {
   constructor(
     cipherService: CipherService,
@@ -24,6 +25,7 @@ export class PasswordHistoryComponent extends BasePasswordHistoryComponent {
   }
 
   async ngOnInit() {
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (params.cipherId) {
         this.cipherId = params.cipherId;

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

@@ -14,6 +14,7 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
   selector: "app-vault-share",
   templateUrl: "share.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class ShareComponent extends BaseShareComponent {
   constructor(
     collectionService: CollectionService,
@@ -36,9 +37,11 @@ export class ShareComponent extends BaseShareComponent {
   }
 
   async ngOnInit() {
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     this.onSharedCipher.subscribe(() => {
       this.router.navigate(["view-cipher", { cipherId: this.cipherId }]);
     });
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       this.cipherId = params.cipherId;
       await this.load();

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

@@ -114,6 +114,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     });
 
     const restoredScopeState = await this.restoreState();
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       this.state = await this.browserStateService.getBrowserGroupingComponentState();
       if (this.state?.searchText) {

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

@@ -47,6 +47,7 @@ import { VaultFilterService } from "../../services/vaultFilter.service";
     ]),
   ],
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class VaultSelectComponent implements OnInit {
   @Output() onVaultSelectionChanged = new EventEmitter();
 
@@ -168,6 +169,7 @@ export class VaultSelectComponent implements OnInit {
       this.overlayRef.outsidePointerEvents(),
       this.overlayRef.backdropClick(),
       this.overlayRef.detachments()
+      // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     ).subscribe(() => {
       this.close();
     });

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

@@ -88,6 +88,7 @@ export class ViewComponent extends BaseViewComponent {
 
   ngOnInit() {
     this.inPopout = this.popupUtilsService.inPopout(window);
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (params.cipherId) {
         this.cipherId = params.cipherId;

apps/browser/src/services/folders/folder.service.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject } from "rxjs/internal/BehaviorSubject";
+import { BehaviorSubject } from "rxjs";
 
 import { Folder } from "@bitwarden/common/models/domain/folder";
 import { FolderView } from "@bitwarden/common/models/view/folderView";

apps/desktop/src/app/accounts/lock.component.ts

@@ -69,6 +69,7 @@ export class LockComponent extends BaseLockComponent {
     const forcePasswordReset = await this.stateService.getForcePasswordReset();
     this.successRoute = forcePasswordReset === true ? this.unAuthenicatedUrl : this.authenicatedUrl;
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     this.route.queryParams.subscribe((params) => {
       if (this.supportsBiometric && params.promptBiometric && autoPromptBiometric) {
         setTimeout(async () => {

apps/desktop/src/app/accounts/login.component.ts

@@ -102,13 +102,16 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
       this.environmentModal
     );
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     modal.onShown.subscribe(() => {
       this.showingModal = true;
     });
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     modal.onClosed.subscribe(() => {
       this.showingModal = false;
     });
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     childComponent.onSaved.subscribe(() => {
       modal.close();
     });

apps/desktop/src/app/accounts/settings.component.ts

@@ -24,6 +24,7 @@ import { DeleteAccountComponent } from "./delete-account.component";
   selector: "app-settings",
   templateUrl: "settings.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class SettingsComponent implements OnInit {
   vaultTimeoutAction: string;
   pin: boolean = null;
@@ -178,6 +179,7 @@ export class SettingsComponent implements OnInit {
     this.vaultTimeout.setValue(await this.stateService.getVaultTimeout());
     this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction();
     this.previousVaultTimeout = this.vaultTimeout.value;
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     this.vaultTimeout.valueChanges.pipe(debounceTime(500)).subscribe(() => {
       this.saveVaultTimeoutOptions();
     });

apps/desktop/src/app/accounts/two-factor.component.ts

@@ -21,6 +21,7 @@ import { TwoFactorOptionsComponent } from "./two-factor-options.component";
   selector: "app-two-factor",
   templateUrl: "two-factor.component.html",
 })
+// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class TwoFactorComponent extends BaseTwoFactorComponent {
   @ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
   twoFactorOptionsModal: ViewContainerRef;
@@ -67,18 +68,22 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
       this.twoFactorOptionsModal
     );
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     modal.onShown.subscribe(() => {
       this.showingModal = true;
     });
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     modal.onClosed.subscribe(() => {
       this.showingModal = false;
     });
 
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
       modal.close();
       this.selectedProviderType = provider;
       await this.init();
     });
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     childComponent.onRecoverSelected.subscribe(() => {
       modal.close();
     });