[PS-1092] Organization Service Observables (#3462)

* Update imports * Implement observables in a few places * Add tests * Get all clients working * Use _destroy * Address PR feedback * Address PR feedback * Address feedback
2025-12-14 23:33:31 +00:00 · 2022-09-27 16:25:19 -04:00
parent 2c68518f87
commit c6dccc354c
100 changed files with 1225 additions and 813 deletions
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -16,7 +16,7 @@ import { KeyConnectorService as KeyConnectorServiceAbstraction } from "@bitwarde
 import { LogService as LogServiceAbstraction } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService as MessagingServiceAbstraction } from "@bitwarden/common/abstractions/messaging.service";
 import { NotificationsService as NotificationsServiceAbstraction } from "@bitwarden/common/abstractions/notifications.service";
-import { OrganizationService as OrganizationServiceAbstraction } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService as OrganizationServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordGenerationService as PasswordGenerationServiceAbstraction } from "@bitwarden/common/abstractions/passwordGeneration.service";
 import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/abstractions/policy/policy-api.service.abstraction";
@@ -27,6 +27,7 @@ import { SendService as SendServiceAbstraction } from "@bitwarden/common/abstrac
 import { SettingsService as SettingsServiceAbstraction } from "@bitwarden/common/abstractions/settings.service";
 import { AbstractStorageService } from "@bitwarden/common/abstractions/storage.service";
 import { SyncService as SyncServiceAbstraction } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
+import { SyncNotifierService as SyncNotifierServiceAbstraction } from "@bitwarden/common/abstractions/sync/syncNotifier.service.abstraction";
 import { SystemService as SystemServiceAbstraction } from "@bitwarden/common/abstractions/system.service";
 import { TokenService as TokenServiceAbstraction } from "@bitwarden/common/abstractions/token.service";
 import { TotpService as TotpServiceAbstraction } from "@bitwarden/common/abstractions/totp.service";
@@ -58,7 +59,7 @@ import { FolderApiService } from "@bitwarden/common/services/folder/folder-api.s
 import { KeyConnectorService } from "@bitwarden/common/services/keyConnector.service";
 import { MemoryStorageService } from "@bitwarden/common/services/memoryStorage.service";
 import { NotificationsService } from "@bitwarden/common/services/notifications.service";
-import { OrganizationService } from "@bitwarden/common/services/organization.service";
+import { OrganizationService } from "@bitwarden/common/services/organization/organization.service";
 import { PasswordGenerationService } from "@bitwarden/common/services/passwordGeneration.service";
 import { PolicyApiService } from "@bitwarden/common/services/policy/policy-api.service";
 import { PolicyService } from "@bitwarden/common/services/policy/policy.service";
@@ -68,6 +69,7 @@ import { SendService } from "@bitwarden/common/services/send.service";
 import { SettingsService } from "@bitwarden/common/services/settings.service";
 import { StateMigrationService } from "@bitwarden/common/services/stateMigration.service";
 import { SyncService } from "@bitwarden/common/services/sync/sync.service";
+import { SyncNotifierService } from "@bitwarden/common/services/sync/syncNotifier.service";
 import { SystemService } from "@bitwarden/common/services/system.service";
 import { TokenService } from "@bitwarden/common/services/token.service";
 import { TotpService } from "@bitwarden/common/services/totp.service";
@@ -158,6 +160,7 @@ export default class MainBackground {
  folderApiService: FolderApiServiceAbstraction;
  policyApiService: PolicyApiServiceAbstraction;
  userVerificationApiService: UserVerificationApiServiceAbstraction;
+  syncNotifierService: SyncNotifierServiceAbstraction;

  // Passed to the popup for Safari to workaround issues with theming, downloading, etc.
  backgroundWindow = window;
@@ -298,7 +301,8 @@ export default class MainBackground {
      this.cryptoFunctionService,
      this.stateService
    );
-    this.organizationService = new OrganizationService(this.stateService);
+    this.syncNotifierService = new SyncNotifierService();
+    this.organizationService = new OrganizationService(this.stateService, this.syncNotifierService);
    this.policyService = new PolicyService(this.stateService, this.organizationService);
    this.policyApiService = new PolicyApiService(
      this.policyService,
@@ -388,9 +392,9 @@ export default class MainBackground {
      this.logService,
      this.keyConnectorService,
      this.stateService,
-      this.organizationService,
      this.providerService,
      this.folderApiService,
+      this.syncNotifierService,
      logoutCallback
    );
    this.eventService = new EventService(
--- a/apps/browser/src/background/service_factories/organization-service.factory.ts
+++ b/apps/browser/src/background/service_factories/organization-service.factory.ts
@@ -1,12 +1,17 @@
-import { OrganizationService as AbstractOrganizationService } from "@bitwarden/common/abstractions/organization.service";
-import { OrganizationService } from "@bitwarden/common/services/organization.service";
+import { OrganizationService as AbstractOrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/services/organization/organization.service";

 import { FactoryOptions, CachedServices, factory } from "./factory-options";
 import { stateServiceFactory, StateServiceInitOptions } from "./state-service.factory";
+import {
+  syncNotifierServiceFactory,
+  SyncNotifierServiceInitOptions,
+} from "./sync-notifier-service.factory";

 type OrganizationServiceFactoryOptions = FactoryOptions;

 export type OrganizationServiceInitOptions = OrganizationServiceFactoryOptions &
+  SyncNotifierServiceInitOptions &
  StateServiceInitOptions;

 export function organizationServiceFactory(
@@ -17,6 +22,10 @@ export function organizationServiceFactory(
    cache,
    "organizationService",
    opts,
-    async () => new OrganizationService(await stateServiceFactory(cache, opts))
+    async () =>
+      new OrganizationService(
+        await stateServiceFactory(cache, opts),
+        await syncNotifierServiceFactory(cache, opts)
+      )
  );
 }
--- a/apps/browser/src/background/service_factories/sync-notifier-service.factory.ts
+++ b/apps/browser/src/background/service_factories/sync-notifier-service.factory.ts
@@ -0,0 +1,17 @@
+import { SyncNotifierService as AbstractSyncNotifierService } from "@bitwarden/common/abstractions/sync/syncNotifier.service.abstraction";
+import { SyncNotifierService } from "@bitwarden/common/services/sync/syncNotifier.service";
+
+import { FactoryOptions, CachedServices, factory } from "./factory-options";
+
+type SyncNotifierServiceFactoryOptions = FactoryOptions;
+
+export type SyncNotifierServiceInitOptions = SyncNotifierServiceFactoryOptions;
+
+export function syncNotifierServiceFactory(
+  cache: { syncNotifierService?: AbstractSyncNotifierService } & CachedServices,
+  opts: SyncNotifierServiceInitOptions
+): Promise<AbstractSyncNotifierService> {
+  return factory(cache, "syncNotifierService", opts, () =>
+    Promise.resolve(new SyncNotifierService())
+  );
+}
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -26,7 +26,7 @@ import { KeyConnectorService } from "@bitwarden/common/abstractions/keyConnector
 import { LogService as LogServiceAbstraction } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
 import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
--- a/apps/browser/src/popup/vault/add-edit.component.ts
+++ b/apps/browser/src/popup/vault/add-edit.component.ts
@@ -12,7 +12,7 @@ import { FolderService } from "@bitwarden/common/abstractions/folder/folder.serv
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
--- a/apps/browser/src/popup/vault/ciphers.component.ts
+++ b/apps/browser/src/popup/vault/ciphers.component.ts
@@ -10,7 +10,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { CipherType } from "@bitwarden/common/enums/cipherType";
@@ -78,7 +78,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On

  async ngOnInit() {
    this.searchTypeSearch = !this.platformUtilsService.isSafari();
-    this.showOrganizations = await this.organizationService.hasOrganizations();
+    this.showOrganizations = 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) => {
--- a/apps/browser/src/popup/vault/current-tab.component.ts
+++ b/apps/browser/src/popup/vault/current-tab.component.ts
@@ -4,7 +4,7 @@ import { Router } from "@angular/router";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
@@ -219,7 +219,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
    const otherTypes: CipherType[] = [];
    const dontShowCards = await this.stateService.getDontShowCardsCurrentTab();
    const dontShowIdentities = await this.stateService.getDontShowIdentitiesCurrentTab();
-    this.showOrganizations = await this.organizationService.hasOrganizations();
+    this.showOrganizations = this.organizationService.hasOrganizations();
    if (!dontShowCards) {
      otherTypes.push(CipherType.Card);
    }
--- a/apps/browser/src/popup/vault/share.component.html
+++ b/apps/browser/src/popup/vault/share.component.html
@@ -1,70 +1,76 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
-  <header>
-    <div class="left">
-      <button type="button" (click)="cancel()">{{ "cancel" | i18n }}</button>
-    </div>
-    <h1 class="center">
-      <span class="title">{{ "moveToOrganization" | i18n }}</span>
-    </h1>
-    <div class="right">
-      <button
-        type="submit"
-        [disabled]="form.loading || !canSave"
-        *ngIf="organizations && organizations.length"
-      >
-        <span [hidden]="form.loading">{{ "move" | i18n }}</span>
-        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
-      </button>
-    </div>
-  </header>
-  <main tabindex="-1">
-    <div class="box">
-      <div class="box-content" *ngIf="!organizations || !organizations.length">
-        <div class="box-content-row padded no-hover">
-          {{ "noOrganizationsList" | i18n }}
-        </div>
+  <ng-container *ngIf="organizations$ | async as organizations">
+    <header>
+      <div class="left">
+        <button type="button" (click)="cancel()">{{ "cancel" | i18n }}</button>
      </div>
-      <div class="box-content" *ngIf="organizations && organizations.length">
-        <div class="box-content-row" appBoxRow>
-          <label for="organization">{{ "organization" | i18n }}</label>
-          <select
-            id="organization"
-            name="OrganizationId"
-            [(ngModel)]="organizationId"
-            (change)="filterCollections()"
-          >
-            <option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
-          </select>
-        </div>
-      </div>
-      <div class="box-footer">
-        {{ "moveToOrgDesc" | i18n }}
-      </div>
-    </div>
-    <div class="box" *ngIf="organizations && organizations.length">
-      <h2 class="box-header">
-        {{ "collections" | i18n }}
-      </h2>
-      <div class="box-content" *ngIf="!collections || !collections.length">
-        <div class="box-content-row padded no-hover">
-          {{ "noCollectionsInList" | i18n }}
-        </div>
-      </div>
-      <div class="box-content" *ngIf="collections && collections.length">
-        <div
-          class="box-content-row box-content-row-checkbox"
-          *ngFor="let c of collections; let i = index"
-          appBoxRow
+      <h1 class="center">
+        <span class="title">{{ "moveToOrganization" | i18n }}</span>
+      </h1>
+      <div class="right">
+        <button
+          type="submit"
+          [disabled]="form.loading || !canSave"
+          *ngIf="organizations && organizations.length"
        >
-          <label for="collection_{{ i }}">{{ c.name }}</label>
-          <input
-            id="collection_{{ i }}"
-            type="checkbox"
-            [(ngModel)]="c.checked"
-            name="Collection[{{ i }}].Checked"
-          />
+          <span [hidden]="form.loading">{{ "move" | i18n }}</span>
+          <i
+            class="bwi bwi-spinner bwi-lg bwi-spin"
+            [hidden]="!form.loading"
+            aria-hidden="true"
+          ></i>
+        </button>
+      </div>
+    </header>
+    <main tabindex="-1">
+      <div class="box">
+        <div class="box-content" *ngIf="!organizations || !organizations.length">
+          <div class="box-content-row padded no-hover">
+            {{ "noOrganizationsList" | i18n }}
+          </div>
+        </div>
+        <div class="box-content" *ngIf="organizations && organizations.length">
+          <div class="box-content-row" appBoxRow>
+            <label for="organization">{{ "organization" | i18n }}</label>
+            <select
+              id="organization"
+              name="OrganizationId"
+              [(ngModel)]="organizationId"
+              (change)="filterCollections()"
+            >
+              <option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="box-footer">
+          {{ "moveToOrgDesc" | i18n }}
        </div>
      </div>
-    </div>
-  </main>
+      <div class="box" *ngIf="organizations && organizations.length">
+        <h2 class="box-header">
+          {{ "collections" | i18n }}
+        </h2>
+        <div class="box-content" *ngIf="!collections || !collections.length">
+          <div class="box-content-row padded no-hover">
+            {{ "noCollectionsInList" | i18n }}
+          </div>
+        </div>
+        <div class="box-content" *ngIf="collections && collections.length">
+          <div
+            class="box-content-row box-content-row-checkbox"
+            *ngFor="let c of collections; let i = index"
+            appBoxRow
+          >
+            <label for="collection_{{ i }}">{{ c.name }}</label>
+            <input
+              id="collection_{{ i }}"
+              type="checkbox"
+              [(ngModel)]="c.checked"
+              name="Collection[{{ i }}].Checked"
+            />
+          </div>
+        </div>
+      </div>
+    </main>
+  </ng-container>
 </form>
--- a/apps/browser/src/popup/vault/share.component.ts
+++ b/apps/browser/src/popup/vault/share.component.ts
@@ -7,7 +7,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";

@Component({
--- a/apps/browser/src/popup/vault/vault-select.component.html
+++ b/apps/browser/src/popup/vault/vault-select.component.html
@@ -1,71 +1,70 @@
-<div class="content org-filter-content" *ngIf="loaded && show">
-  <button
-    #toggleVaults
-    class="org-filter"
-    (click)="openOverlay()"
-    aria-haspopup="menu"
-    aria-controls="cdk-overlay-container"
-    [attr.aria-expanded]="isOpen"
-    [attr.aria-label]="vaultFilterDisplay"
-  >
-    {{ vaultFilterDisplay | ellipsis: 45 }}&nbsp;
-    <i
-      class="bwi bwi-sm"
-      aria-hidden="true"
-      [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
-    ></i>
-  </button>
-  <ng-template class="vault-select-container" #vaultSelectorTemplate>
-    <div
-      class="vault-select"
-      [@transformPanel]="'open'"
-      cdkTrapFocus
-      cdkTrapFocusAutoCapture
-      role="dialog"
-      aria-modal="true"
-    >
+<ng-container *ngIf="loaded && organizations$ | async as organizations">
+  <div class="content org-filter-content" *ngIf="loaded && shouldShow(organizations)">
+    <ng-container *ngIf="selectedVault$ | async as vaultFilterDisplay">
      <button
-        appStopClick
-        (click)="selectAllVaults()"
-        [ngClass]="{ active: !myVaultOnly && !selectOrganizationId }"
-        appA11yTitle="{{ 'vault' | i18n }}: {{ 'allVaults' | i18n }}"
-      >
-        <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>
-        &nbsp;{{ "allVaults" | i18n }}
-      </button>
-      <button
-        *ngIf="!enforcePersonalOwnwership"
-        appStopClick
-        (click)="selectMyVault()"
-        appA11yTitle="{{ 'vault' | i18n }}: {{ 'myVault' | i18n }}"
-      >
-        <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-        &nbsp;{{ "myVault" | i18n }}
-      </button>
-      <button
-        *ngFor="let organization of organizations"
-        appStopClick
-        (click)="selectOrganization(organization)"
-        appA11yTitle="{{ 'vault' | i18n }}: {{ organization.name }}"
+        #toggleVaults
+        class="org-filter"
+        (click)="openOverlay()"
+        aria-haspopup="menu"
+        aria-controls="cdk-overlay-container"
+        [attr.aria-expanded]="isOpen"
+        [attr.aria-label]="vaultFilterDisplay"
      >
+        {{ vaultFilterDisplay | ellipsis: 45 }}&nbsp;
        <i
-          *ngIf="organization.planProductType !== 1"
-          class="bwi bwi-fw bwi-business"
+          class="bwi bwi-sm"
          aria-hidden="true"
-        ></i>
-        <i
-          *ngIf="organization.planProductType === 1"
-          class="bwi bwi-fw bwi-family"
-          aria-hidden="true"
-        ></i>
-        <span>&nbsp;{{ organization.name | ellipsis: (organization.enabled ? 21 : 18):true }}</span>
-        <i
-          *ngIf="!organization.enabled"
-          class="bwi bwi-fw bwi-exclamation-triangle text-danger"
-          aria-label="{{ 'organizationIsDisabled' | i18n }}"
-          appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+          [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
        ></i>
      </button>
-    </div>
-  </ng-template>
-</div>
+    </ng-container>
+    <ng-template class="vault-select-container" #vaultSelectorTemplate>
+      <div
+        class="vault-select"
+        [@transformPanel]="'open'"
+        cdkTrapFocus
+        cdkTrapFocusAutoCapture
+        role="dialog"
+        aria-modal="true"
+      >
+        <button
+          appStopClick
+          (click)="selectAllVaults()"
+          [ngClass]="{ active: !myVaultOnly && !selectOrganizationId }"
+        >
+          <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>
+          &nbsp;{{ "allVaults" | i18n }}
+        </button>
+        <button *ngIf="!enforcePersonalOwnwership" appStopClick (click)="selectMyVault()">
+          <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+          &nbsp;{{ "myVault" | i18n }}
+        </button>
+        <button
+          *ngFor="let organization of organizations"
+          appStopClick
+          (click)="selectOrganization(organization)"
+        >
+          <i
+            *ngIf="organization.planProductType !== 1"
+            class="bwi bwi-fw bwi-business"
+            aria-hidden="true"
+          ></i>
+          <i
+            *ngIf="organization.planProductType === 1"
+            class="bwi bwi-fw bwi-family"
+            aria-hidden="true"
+          ></i>
+          <span
+            >&nbsp;{{ organization.name | ellipsis: (organization.enabled ? 21 : 18):true }}</span
+          >
+          <i
+            *ngIf="!organization.enabled"
+            class="bwi bwi-fw bwi-exclamation-triangle text-danger"
+            aria-label="{{ 'organizationIsDisabled' | i18n }}"
+            appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+          ></i>
+        </button>
+      </div>
+    </ng-template>
+  </div>
+</ng-container>
--- a/apps/browser/src/popup/vault/vault-select.component.ts
+++ b/apps/browser/src/popup/vault/vault-select.component.ts
@@ -5,19 +5,19 @@ import {
  Component,
  ElementRef,
  EventEmitter,
-  NgZone,
  OnInit,
  Output,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
  HostListener,
+  OnDestroy,
 } from "@angular/core";
-import { merge } from "rxjs";
+import { BehaviorSubject, concatMap, map, merge, Observable, Subject, takeUntil } from "rxjs";

 import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
-import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { Organization } from "@bitwarden/common/models/domain/organization";

@@ -47,20 +47,22 @@ import { VaultFilterService } from "../../services/vaultFilter.service";
    ]),
  ],
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class VaultSelectComponent implements OnInit {
+export class VaultSelectComponent implements OnInit, OnDestroy {
  @Output() onVaultSelectionChanged = new EventEmitter();

  @ViewChild("toggleVaults", { read: ElementRef })
  buttonRef: ElementRef<HTMLButtonElement>;
  @ViewChild("vaultSelectorTemplate", { read: TemplateRef }) templateRef: TemplateRef<HTMLElement>;

+  private _selectedVault = new BehaviorSubject<string>(null);
+
  isOpen = false;
  loaded = false;
-  organizations: Organization[];
+  organizations$: Observable<Organization[]>;
+  selectedVault$: Observable<string> = this._selectedVault.asObservable();
+
  vaultFilter: VaultFilter = new VaultFilter();
-  vaultFilterDisplay = "";
-  enforcePersonalOwnwership = false;
+  enforcePersonalOwnership = false;
  overlayPostition: ConnectedPosition[] = [
    {
      originX: "start",
@@ -71,22 +73,22 @@ export class VaultSelectComponent implements OnInit {
  ];

  private overlayRef: OverlayRef;
+  private _destroy = new Subject<void>();

-  get show() {
+  shouldShow(organizations: Organization[]): boolean {
    return (
-      (this.organizations.length > 0 && !this.enforcePersonalOwnwership) ||
-      (this.organizations.length > 1 && this.enforcePersonalOwnwership)
+      (organizations.length > 0 && !this.enforcePersonalOwnership) ||
+      (organizations.length > 1 && this.enforcePersonalOwnership)
    );
  }

  constructor(
    private vaultFilterService: VaultFilterService,
    private i18nService: I18nService,
-    private ngZone: NgZone,
-    private broadcasterService: BroadcasterService,
    private overlay: Overlay,
    private viewContainerRef: ViewContainerRef,
-    private platformUtilsService: PlatformUtilsService
+    private platformUtilsService: PlatformUtilsService,
+    private organizationService: OrganizationService
  ) {}

  @HostListener("document:keydown.escape", ["$event"])
@@ -98,46 +100,45 @@ export class VaultSelectComponent implements OnInit {
  }

  async ngOnInit() {
-    await this.load();
-    this.broadcasterService.subscribe(this.constructor.name, (message: any) => {
-      this.ngZone.run(async () => {
-        switch (message.command) {
-          case "syncCompleted":
-            await this.load();
-            break;
-          default:
-            break;
-        }
-      });
-    });
+    this.organizations$ = this.organizationService.organizations$
+      .pipe(takeUntil(this._destroy))
+      .pipe(map((orgs) => orgs.sort((a, b) => a.name.localeCompare(b.name))));
+
+    this.organizations$
+      .pipe(
+        concatMap(async (organizations) => {
+          this.enforcePersonalOwnership =
+            await this.vaultFilterService.checkForPersonalOwnershipPolicy();
+
+          if (this.shouldShow(organizations)) {
+            if (this.enforcePersonalOwnership && !this.vaultFilter.myVaultOnly) {
+              const firstOrganization = organizations[0];
+              this._selectedVault.next(firstOrganization.name);
+              this.vaultFilterService.setVaultFilter(firstOrganization.id);
+              this.vaultFilter.selectedOrganizationId = firstOrganization.id;
+            } else if (this.vaultFilter.myVaultOnly) {
+              this._selectedVault.next(this.i18nService.t(this.vaultFilterService.myVault));
+            } else if (this.vaultFilter.selectedOrganizationId != null) {
+              const selectedOrganization = organizations.find(
+                (o) => o.id === this.vaultFilter.selectedOrganizationId
+              );
+              this._selectedVault.next(selectedOrganization.name);
+            } else {
+              this._selectedVault.next(this.i18nService.t(this.vaultFilterService.allVaults));
+            }
+          }
+        })
+      )
+      .pipe(takeUntil(this._destroy))
+      .subscribe();
+
+    this.loaded = true;
  }

-  async load() {
-    this.vaultFilter = this.vaultFilterService.getVaultFilter();
-    this.organizations = (await this.vaultFilterService.buildOrganizations()).sort((a, b) =>
-      a.name.localeCompare(b.name)
-    );
-    this.enforcePersonalOwnwership =
-      await this.vaultFilterService.checkForPersonalOwnershipPolicy();
-
-    if (this.show) {
-      if (this.enforcePersonalOwnwership && !this.vaultFilter.myVaultOnly) {
-        this.vaultFilterService.setVaultFilter(this.organizations[0].id);
-        this.vaultFilter.selectedOrganizationId = this.organizations[0].id;
-        this.vaultFilterDisplay = this.organizations.find(
-          (o) => o.id === this.vaultFilter.selectedOrganizationId
-        ).name;
-      } else if (this.vaultFilter.myVaultOnly) {
-        this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.myVault);
-      } else if (this.vaultFilter.selectedOrganizationId != null) {
-        this.vaultFilterDisplay = this.organizations.find(
-          (o) => o.id === this.vaultFilter.selectedOrganizationId
-        ).name;
-      } else {
-        this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.allVaults);
-      }
-    }
-    this.loaded = true;
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._selectedVault.complete();
  }

  openOverlay() {
@@ -191,20 +192,20 @@ export class VaultSelectComponent implements OnInit {
        this.i18nService.t("disabledOrganizationFilterError")
      );
    } else {
-      this.vaultFilterDisplay = organization.name;
+      this._selectedVault.next(organization.name);
      this.vaultFilterService.setVaultFilter(organization.id);
      this.onVaultSelectionChanged.emit();
      this.close();
    }
  }
  selectAllVaults() {
-    this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.allVaults);
+    this._selectedVault.next(this.i18nService.t(this.vaultFilterService.allVaults));
    this.vaultFilterService.setVaultFilter(this.vaultFilterService.allVaults);
    this.onVaultSelectionChanged.emit();
    this.close();
  }
  selectMyVault() {
-    this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.myVault);
+    this._selectedVault.next(this.i18nService.t(this.vaultFilterService.myVault));
    this.vaultFilterService.setVaultFilter(this.vaultFilterService.myVault);
    this.onVaultSelectionChanged.emit();
    this.close();
--- a/apps/browser/src/services/vaultFilter.service.ts
+++ b/apps/browser/src/services/vaultFilter.service.ts
@@ -3,7 +3,7 @@ import { VaultFilterService as BaseVaultFilterService } from "@bitwarden/angular
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { CipherView } from "@bitwarden/common/models/view/cipherView";
--- a/apps/cli/src/bw.ts
+++ b/apps/cli/src/bw.ts
@@ -30,8 +30,8 @@ import { ImportService } from "@bitwarden/common/services/import.service";
 import { KeyConnectorService } from "@bitwarden/common/services/keyConnector.service";
 import { MemoryStorageService } from "@bitwarden/common/services/memoryStorage.service";
 import { NoopMessagingService } from "@bitwarden/common/services/noopMessaging.service";
-import { OrganizationService } from "@bitwarden/common/services/organization.service";
 import { OrganizationApiService } from "@bitwarden/common/services/organization/organization-api.service";
+import { OrganizationService } from "@bitwarden/common/services/organization/organization.service";
 import { PasswordGenerationService } from "@bitwarden/common/services/passwordGeneration.service";
 import { PolicyService } from "@bitwarden/common/services/policy/policy.service";
 import { ProviderService } from "@bitwarden/common/services/provider.service";
@@ -41,6 +41,7 @@ import { SettingsService } from "@bitwarden/common/services/settings.service";
 import { StateService } from "@bitwarden/common/services/state.service";
 import { StateMigrationService } from "@bitwarden/common/services/stateMigration.service";
 import { SyncService } from "@bitwarden/common/services/sync/sync.service";
+import { SyncNotifierService } from "@bitwarden/common/services/sync/syncNotifier.service";
 import { TokenService } from "@bitwarden/common/services/token.service";
 import { TotpService } from "@bitwarden/common/services/totp.service";
 import { TwoFactorService } from "@bitwarden/common/services/twoFactor.service";
@@ -113,6 +114,7 @@ export class Main {
  folderApiService: FolderApiService;
  userVerificationApiService: UserVerificationApiService;
  organizationApiService: OrganizationApiServiceAbstraction;
+  syncNotifierService: SyncNotifierService;

  constructor() {
    let p = null;
@@ -191,7 +193,9 @@ export class Main {
      customUserAgent
    );

-    this.organizationApiService = new OrganizationApiService(this.apiService);
+    this.syncNotifierService = new SyncNotifierService();
+
+    this.organizationApiService = new OrganizationApiService(this.apiService, this.syncService);

    this.containerService = new ContainerService(this.cryptoService, this.encryptService);

@@ -231,7 +235,7 @@ export class Main {

    this.providerService = new ProviderService(this.stateService);

-    this.organizationService = new OrganizationService(this.stateService);
+    this.organizationService = new OrganizationService(this.stateService, this.syncNotifierService);

    this.policyService = new PolicyService(this.stateService, this.organizationService);

@@ -311,9 +315,9 @@ export class Main {
      this.logService,
      this.keyConnectorService,
      this.stateService,
-      this.organizationService,
      this.providerService,
      this.folderApiService,
+      this.syncNotifierService,
      async (expired: boolean) => await this.logout()
    );

--- a/apps/cli/src/commands/convertToKeyConnector.command.ts
+++ b/apps/cli/src/commands/convertToKeyConnector.command.ts
@@ -74,7 +74,6 @@ export class ConvertToKeyConnectorCommand {
    } else if (answer.convert === "leave") {
      await this.organizationApiService.leave(organization.id);
      await this.keyConnectorService.removeConvertAccountRequired();
-      await this.syncService.fullSync(true);
      return Response.success();
    } else {
      await this.logout();
--- a/apps/cli/src/commands/get.command.ts
+++ b/apps/cli/src/commands/get.command.ts
@@ -4,7 +4,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { TotpService } from "@bitwarden/common/abstractions/totp.service";
--- a/apps/cli/src/commands/import.command.ts
+++ b/apps/cli/src/commands/import.command.ts
@@ -2,7 +2,7 @@ import * as program from "commander";
 import * as inquirer from "inquirer";

 import { ImportService } from "@bitwarden/common/abstractions/import.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { ImportType } from "@bitwarden/common/enums/importOptions";
 import { Importer } from "@bitwarden/common/importers/importer";
 import { Response } from "@bitwarden/node/cli/models/response";
--- a/apps/cli/src/commands/list.command.ts
+++ b/apps/cli/src/commands/list.command.ts
@@ -2,7 +2,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { Utils } from "@bitwarden/common/misc/utils";
 import { CollectionData } from "@bitwarden/common/models/data/collectionData";
--- a/apps/desktop/src/app/vault/add-edit.component.ts
+++ b/apps/desktop/src/app/vault/add-edit.component.ts
@@ -11,7 +11,7 @@ import { FolderService } from "@bitwarden/common/abstractions/folder/folder.serv
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
--- a/apps/desktop/src/app/vault/share.component.html
+++ b/apps/desktop/src/app/vault/share.component.html
@@ -1,78 +1,80 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="moveToOrgTitle">
  <div class="modal-dialog" role="document">
    <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
-      <div class="modal-body">
-        <div class="box">
-          <h1 class="box-header" id="moveToOrgTitle">
-            {{ "moveToOrganization" | i18n }}
-          </h1>
-          <div class="box-content" *ngIf="!organizations || !organizations.length">
-            <div class="box-content-row">
-              {{ "noOrganizationsList" | i18n }}
+      <ng-container *ngIf="organizations$ | async as organizations">
+        <div class="modal-body">
+          <div class="box">
+            <h1 class="box-header" id="moveToOrgTitle">
+              {{ "moveToOrganization" | i18n }}
+            </h1>
+            <div class="box-content" *ngIf="!organizations || !organizations.length">
+              <div class="box-content-row">
+                {{ "noOrganizationsList" | i18n }}
+              </div>
+            </div>
+            <div class="box-content" *ngIf="organizations && organizations.length">
+              <div class="box-content-row" appBoxRow>
+                <label for="organization">{{ "organization" | i18n }}</label>
+                <select
+                  id="organization"
+                  name="OrganizationId"
+                  [(ngModel)]="organizationId"
+                  (change)="filterCollections()"
+                >
+                  <option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
+                </select>
+              </div>
+            </div>
+            <div class="box-footer">
+              {{ "moveToOrgDesc" | i18n }}
            </div>
          </div>
-          <div class="box-content" *ngIf="organizations && organizations.length">
-            <div class="box-content-row" appBoxRow>
-              <label for="organization">{{ "organization" | i18n }}</label>
-              <select
-                id="organization"
-                name="OrganizationId"
-                [(ngModel)]="organizationId"
-                (change)="filterCollections()"
+          <div class="box" *ngIf="organizations && organizations.length">
+            <h2 class="box-header">
+              {{ "collections" | i18n }}
+            </h2>
+            <div class="box-content" *ngIf="!collections || !collections.length">
+              {{ "noCollectionsInList" | i18n }}
+            </div>
+            <div class="box-content" *ngIf="collections && collections.length">
+              <div
+                class="box-content-row box-content-row-checkbox"
+                *ngFor="let c of collections; let i = index"
+                appBoxRow
              >
-                <option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
-              </select>
-            </div>
-          </div>
-          <div class="box-footer">
-            {{ "moveToOrgDesc" | i18n }}
-          </div>
-        </div>
-        <div class="box" *ngIf="organizations && organizations.length">
-          <h2 class="box-header">
-            {{ "collections" | i18n }}
-          </h2>
-          <div class="box-content" *ngIf="!collections || !collections.length">
-            {{ "noCollectionsInList" | i18n }}
-          </div>
-          <div class="box-content" *ngIf="collections && collections.length">
-            <div
-              class="box-content-row box-content-row-checkbox"
-              *ngFor="let c of collections; let i = index"
-              appBoxRow
-            >
-              <label for="collection_{{ i }}">{{ c.name }}</label>
-              <input
-                id="collection_{{ i }}"
-                type="checkbox"
-                [(ngModel)]="c.checked"
-                name="Collection[{{ i }}].Checked"
-              />
+                <label for="collection_{{ i }}">{{ c.name }}</label>
+                <input
+                  id="collection_{{ i }}"
+                  type="checkbox"
+                  [(ngModel)]="c.checked"
+                  name="Collection[{{ i }}].Checked"
+                />
+              </div>
            </div>
          </div>
        </div>
-      </div>
-      <div class="modal-footer">
-        <button
-          type="submit"
-          class="primary"
-          appA11yTitle="{{ 'save' | i18n }}"
-          [disabled]="form.loading || !canSave"
-          *ngIf="organizations && organizations.length"
-        >
-          <i
-            class="bwi bwi-save-changes bwi-lg bwi-fw"
-            [hidden]="form.loading"
-            aria-hidden="true"
-          ></i>
-          <i
-            class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
-            [hidden]="!form.loading"
-            aria-hidden="true"
-          ></i>
-        </button>
-        <button type="button" data-dismiss="modal">{{ "cancel" | i18n }}</button>
-      </div>
+        <div class="modal-footer">
+          <button
+            type="submit"
+            class="primary"
+            appA11yTitle="{{ 'save' | i18n }}"
+            [disabled]="form.loading || !canSave"
+            *ngIf="organizations && organizations.length"
+          >
+            <i
+              class="bwi bwi-save-changes bwi-lg bwi-fw"
+              [hidden]="form.loading"
+              aria-hidden="true"
+            ></i>
+            <i
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
+              [hidden]="!form.loading"
+              aria-hidden="true"
+            ></i>
+          </button>
+          <button type="button" data-dismiss="modal">{{ "cancel" | i18n }}</button>
+        </div>
+      </ng-container>
    </form>
  </div>
 </div>
--- a/apps/desktop/src/app/vault/share.component.ts
+++ b/apps/desktop/src/app/vault/share.component.ts
@@ -5,7 +5,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";

@Component({
--- a/apps/web/src/app/accounts/trial-initiation/billing.component.ts
+++ b/apps/web/src/app/accounts/trial-initiation/billing.component.ts
@@ -7,8 +7,8 @@ import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
--- a/apps/web/src/app/common/base.people.component.ts
+++ b/apps/web/src/app/common/base.people.component.ts
@@ -126,7 +126,12 @@ export abstract class BasePeopleComponent<
    }

    this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
-    this.allUsers.sort(Utils.getSortFunction(this.i18nService, "email"));
+    this.allUsers.sort(
+      Utils.getSortFunction<ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse>(
+        this.i18nService,
+        "email"
+      )
+    );
    this.allUsers.forEach((u) => {
      if (!this.statusMap.has(u.status)) {
        this.statusMap.set(u.status, [u]);
--- a/apps/web/src/app/components/organization-switcher.component.html
+++ b/apps/web/src/app/components/organization-switcher.component.html
@@ -45,7 +45,11 @@

  <bit-menu #orgPickerMenu>
    <ul aria-labelledby="pickerButton" class="tw-m-0 tw-p-0">
-      <li *ngFor="let org of organizations" class="tw-flex tw-list-none tw-flex-col" role="none">
+      <li
+        *ngFor="let org of organizations$ | async"
+        class="tw-flex tw-list-none tw-flex-col"
+        role="none"
+      >
        <a bitMenuItem [routerLink]="['/organizations', org.id]">
          <i
            class="bwi bwi-check mr-2"
--- a/apps/web/src/app/components/organization-switcher.component.ts
+++ b/apps/web/src/app/components/organization-switcher.component.ts
@@ -1,12 +1,13 @@
 import { Component, Input, OnInit } from "@angular/core";
+import { Observable } from "rxjs";

 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
-import { Utils } from "@bitwarden/common/misc/utils";
+import {
+  canAccessAdmin,
+  OrganizationService,
+} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/models/domain/organization";

-import { canAccessOrgAdmin } from "../organizations/navigation-permissions";
-
@Component({
  selector: "app-organization-switcher",
  templateUrl: "organization-switcher.component.html",
@@ -15,19 +16,14 @@ export class OrganizationSwitcherComponent implements OnInit {
  constructor(private organizationService: OrganizationService, private i18nService: I18nService) {}

  @Input() activeOrganization: Organization = null;
-  organizations: Organization[] = [];
+  organizations$: Observable<Organization[]>;

  loaded = false;

  async ngOnInit() {
-    await this.load();
-  }
-
-  async load() {
-    const orgs = await this.organizationService.getAll();
-    this.organizations = orgs
-      .filter(canAccessOrgAdmin)
-      .sort(Utils.getSortFunction(this.i18nService, "name"));
+    this.organizations$ = this.organizationService.organizations$.pipe(
+      canAccessAdmin(this.i18nService)
+    );

    this.loaded = true;
  }
--- a/apps/web/src/app/layouts/navbar.component.html
+++ b/apps/web/src/app/layouts/navbar.component.html
@@ -17,8 +17,12 @@
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/reports">{{ "reports" | i18n }}</a>
        </li>
-        <li *ngIf="organizations.length >= 1" class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/organizations', organizations[0].id]">{{
+        <li
+          *ngIf="(organizations$ | async)?.length >= 1"
+          class="nav-item"
+          routerLinkActive="active"
+        >
+          <a class="nav-link" [routerLink]="['/organizations', (organizations$ | async)[0].id]">{{
            "organizations" | i18n
          }}</a>
        </li>
--- a/apps/web/src/app/layouts/navbar.component.ts
+++ b/apps/web/src/app/layouts/navbar.component.ts
@@ -1,19 +1,19 @@
-import { Component, NgZone, OnInit } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";

-import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import {
+  canAccessAdmin,
+  OrganizationService,
+} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { ProviderService } from "@bitwarden/common/abstractions/provider.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { TokenService } from "@bitwarden/common/abstractions/token.service";
-import { Utils } from "@bitwarden/common/misc/utils";
 import { Organization } from "@bitwarden/common/models/domain/organization";
 import { Provider } from "@bitwarden/common/models/domain/provider";

-import { canAccessOrgAdmin } from "../organizations/navigation-permissions";
-
@Component({
  selector: "app-navbar",
  templateUrl: "navbar.component.html",
@@ -24,7 +24,7 @@ export class NavbarComponent implements OnInit {
  name: string;
  email: string;
  providers: Provider[] = [];
-  organizations: Organization[] = [];
+  organizations$: Observable<Organization[]>;

  constructor(
    private messagingService: MessagingService,
@@ -33,9 +33,7 @@ export class NavbarComponent implements OnInit {
    private providerService: ProviderService,
    private syncService: SyncService,
    private organizationService: OrganizationService,
-    private i18nService: I18nService,
-    private broadcasterService: BroadcasterService,
-    private ngZone: NgZone
+    private i18nService: I18nService
  ) {
    this.selfHosted = this.platformUtilsService.isSelfHost();
  }
@@ -53,24 +51,9 @@ export class NavbarComponent implements OnInit {
    }
    this.providers = await this.providerService.getAll();

-    this.organizations = await this.buildOrganizations();
-
-    this.broadcasterService.subscribe(this.constructor.name, async (message: any) => {
-      this.ngZone.run(async () => {
-        switch (message.command) {
-          case "organizationCreated":
-            if (this.organizations.length < 1) {
-              this.organizations = await this.buildOrganizations();
-            }
-            break;
-        }
-      });
-    });
-  }
-
-  async buildOrganizations() {
-    const allOrgs = await this.organizationService.getAll();
-    return allOrgs.filter(canAccessOrgAdmin).sort(Utils.getSortFunction(this.i18nService, "name"));
+    this.organizations$ = this.organizationService.organizations$.pipe(
+      canAccessAdmin(this.i18nService)
+    );
  }

  lock() {
--- a/apps/web/src/app/organizations/guards/org-permissions.guard.spec.ts
+++ b/apps/web/src/app/organizations/guards/org-permissions.guard.spec.ts
@@ -7,7 +7,7 @@ import {
 import { mock, MockProxy } from "jest-mock-extended";

 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType";
@@ -57,7 +57,7 @@ describe("Organization Permissions Guard", () => {
  });

  it("blocks navigation if organization does not exist", async () => {
-    organizationService.get.mockResolvedValue(null);
+    organizationService.get.mockReturnValue(null);

    const actual = await organizationPermissionsGuard.canActivate(route, state);

@@ -66,7 +66,7 @@ describe("Organization Permissions Guard", () => {

  it("permits navigation if no permissions are specified", async () => {
    const org = orgFactory();
-    organizationService.get.calledWith(org.id).mockResolvedValue(org);
+    organizationService.get.calledWith(org.id).mockReturnValue(org);

    const actual = await organizationPermissionsGuard.canActivate(route, state);

@@ -81,7 +81,7 @@ describe("Organization Permissions Guard", () => {
    };

    const org = orgFactory();
-    organizationService.get.calledWith(org.id).mockResolvedValue(org);
+    organizationService.get.calledWith(org.id).mockReturnValue(org);

    const actual = await organizationPermissionsGuard.canActivate(route, state);

@@ -104,7 +104,7 @@ describe("Organization Permissions Guard", () => {
      });

      const org = orgFactory();
-      organizationService.get.calledWith(org.id).mockResolvedValue(org);
+      organizationService.get.calledWith(org.id).mockReturnValue(org);

      const actual = await organizationPermissionsGuard.canActivate(route, state);

@@ -124,7 +124,7 @@ describe("Organization Permissions Guard", () => {
        }),
      });
      const org = orgFactory();
-      organizationService.get.calledWith(org.id).mockResolvedValue(org);
+      organizationService.get.calledWith(org.id).mockReturnValue(org);

      const actual = await organizationPermissionsGuard.canActivate(route, state);

@@ -141,7 +141,7 @@ describe("Organization Permissions Guard", () => {
        type: OrganizationUserType.Admin,
        enabled: false,
      });
-      organizationService.get.calledWith(org.id).mockResolvedValue(org);
+      organizationService.get.calledWith(org.id).mockReturnValue(org);

      const actual = await organizationPermissionsGuard.canActivate(route, state);

@@ -153,7 +153,7 @@ describe("Organization Permissions Guard", () => {
        type: OrganizationUserType.Owner,
        enabled: false,
      });
-      organizationService.get.calledWith(org.id).mockResolvedValue(org);
+      organizationService.get.calledWith(org.id).mockReturnValue(org);

      const actual = await organizationPermissionsGuard.canActivate(route, state);

--- a/apps/web/src/app/organizations/guards/org-permissions.guard.ts
+++ b/apps/web/src/app/organizations/guards/org-permissions.guard.ts
@@ -2,13 +2,14 @@ import { Injectable } from "@angular/core";
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";

 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import {
+  canAccessOrgAdmin,
+  OrganizationService,
+} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { Organization } from "@bitwarden/common/models/domain/organization";

-import { canAccessOrgAdmin } from "../navigation-permissions";
-
@Injectable({
  providedIn: "root",
 })
@@ -27,7 +28,7 @@ export class OrganizationPermissionsGuard implements CanActivate {
      await this.syncService.fullSync(false);
    }

-    const org = await this.organizationService.get(route.params.organizationId);
+    const org = this.organizationService.get(route.params.organizationId);
    if (org == null) {
      return this.router.createUrlTree(["/"]);
    }
--- a/apps/web/src/app/organizations/layouts/organization-layout.component.html
+++ b/apps/web/src/app/organizations/layouts/organization-layout.component.html
@@ -1,39 +1,49 @@
 <app-navbar></app-navbar>
-<div class="org-nav" *ngIf="organization">
-  <div class="container d-flex">
-    <div class="d-flex flex-column">
-      <app-organization-switcher
-        class="my-auto pl-1"
-        [activeOrganization]="organization"
-      ></app-organization-switcher>
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <a class="nav-link" routerLink="vault" routerLinkActive="active">
-            <i class="bwi bwi-lock" aria-hidden="true"></i>
-            {{ "vault" | i18n }}
-          </a>
-        </li>
-        <li class="nav-item" *ngIf="showManageTab">
-          <a class="nav-link" [routerLink]="manageRoute" routerLinkActive="active">
-            <i class="bwi bwi-sliders" aria-hidden="true"></i>
-            {{ "manage" | i18n }}
-          </a>
-        </li>
-        <li class="nav-item" *ngIf="showToolsTab">
-          <a class="nav-link" [routerLink]="toolsRoute" routerLinkActive="active">
-            <i class="bwi bwi-wrench" aria-hidden="true"></i>
-            {{ "tools" | i18n }}
-          </a>
-        </li>
-        <li class="nav-item" *ngIf="showSettingsTab">
-          <a class="nav-link" routerLink="settings" routerLinkActive="active">
-            <i class="bwi bwi-cogs" aria-hidden="true"></i>
-            {{ "settings" | i18n }}
-          </a>
-        </li>
-      </ul>
+<ng-container *ngIf="organization$ | async as organization">
+  <div class="org-nav" *ngIf="organization">
+    <div class="container d-flex">
+      <div class="d-flex flex-column">
+        <app-organization-switcher
+          class="my-auto pl-1"
+          [activeOrganization]="organization"
+        ></app-organization-switcher>
+        <ul class="nav nav-tabs">
+          <li class="nav-item">
+            <a class="nav-link" routerLink="vault" routerLinkActive="active">
+              <i class="bwi bwi-lock" aria-hidden="true"></i>
+              {{ "vault" | i18n }}
+            </a>
+          </li>
+          <li class="nav-item" *ngIf="canShowManageTab(organization)">
+            <a
+              class="nav-link"
+              [routerLink]="getManageRoute(organization)"
+              routerLinkActive="active"
+            >
+              <i class="bwi bwi-sliders" aria-hidden="true"></i>
+              {{ "manage" | i18n }}
+            </a>
+          </li>
+          <li class="nav-item" *ngIf="canShowToolsTab(organization)">
+            <a
+              class="nav-link"
+              [routerLink]="getToolsRoute(organization)"
+              routerLinkActive="active"
+            >
+              <i class="bwi bwi-wrench" aria-hidden="true"></i>
+              {{ "tools" | i18n }}
+            </a>
+          </li>
+          <li class="nav-item" *ngIf="canShowSettingsTab(organization)">
+            <a class="nav-link" routerLink="settings" routerLinkActive="active">
+              <i class="bwi bwi-cogs" aria-hidden="true"></i>
+              {{ "settings" | i18n }}
+            </a>
+          </li>
+        </ul>
+      </div>
    </div>
  </div>
-</div>
+</ng-container>
 <router-outlet></router-outlet>
 <app-footer></app-footer>
--- a/apps/web/src/app/organizations/layouts/organization-layout.component.ts
+++ b/apps/web/src/app/organizations/layouts/organization-layout.component.ts
@@ -1,100 +1,86 @@
-import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-
-import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
-import { Organization } from "@bitwarden/common/models/domain/organization";
+import { map, mergeMap, Observable, Subject, takeUntil } from "rxjs";

 import {
+  OrganizationService,
+  getOrganizationById,
  canAccessManageTab,
  canAccessSettingsTab,
  canAccessToolsTab,
-} from "../navigation-permissions";
-
-const BroadcasterSubscriptionId = "OrganizationLayoutComponent";
+} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/models/domain/organization";

@Component({
  selector: "app-organization-layout",
  templateUrl: "organization-layout.component.html",
 })
 export class OrganizationLayoutComponent implements OnInit, OnDestroy {
-  organization: Organization;
-  businessTokenPromise: Promise<any>;
-  private organizationId: string;
+  organization$: Observable<Organization>;
+  businessTokenPromise: Promise<void>;

-  constructor(
-    private route: ActivatedRoute,
-    private organizationService: OrganizationService,
-    private broadcasterService: BroadcasterService,
-    private ngZone: NgZone
-  ) {}
+  private _destroy = new Subject<void>();
+
+  constructor(private route: ActivatedRoute, private organizationService: OrganizationService) {}

  ngOnInit() {
    document.body.classList.remove("layout_frontend");
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-    this.route.params.subscribe(async (params: any) => {
-      this.organizationId = params.organizationId;
-      await this.load();
-    });
-    this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
-      this.ngZone.run(async () => {
-        switch (message.command) {
-          case "updatedOrgLicense":
-            await this.load();
-            break;
-        }
-      });
-    });
+
+    this.organization$ = this.route.params
+      .pipe(takeUntil(this._destroy))
+      .pipe<string>(map((p) => p.organizationId))
+      .pipe(
+        mergeMap((id) => {
+          return this.organizationService.organizations$
+            .pipe(takeUntil(this._destroy))
+            .pipe(getOrganizationById(id));
+        })
+      );
  }

  ngOnDestroy() {
-    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+    this._destroy.next();
+    this._destroy.complete();
  }

-  async load() {
-    this.organization = await this.organizationService.get(this.organizationId);
+  canShowManageTab(organization: Organization): boolean {
+    return canAccessManageTab(organization);
  }

-  get showManageTab(): boolean {
-    return canAccessManageTab(this.organization);
+  canShowToolsTab(organization: Organization): boolean {
+    return canAccessToolsTab(organization);
  }

-  get showToolsTab(): boolean {
-    return canAccessToolsTab(this.organization);
+  canShowSettingsTab(organization: Organization): boolean {
+    return canAccessSettingsTab(organization);
  }

-  get showSettingsTab(): boolean {
-    return canAccessSettingsTab(this.organization);
+  getToolsRoute(organization: Organization): string {
+    return organization.canAccessImportExport ? "tools/import" : "tools/exposed-passwords-report";
  }

-  get toolsRoute(): string {
-    return this.organization.canAccessImportExport
-      ? "tools/import"
-      : "tools/exposed-passwords-report";
-  }
-
-  get manageRoute(): string {
+  getManageRoute(organization: Organization): string {
    let route: string;
    switch (true) {
-      case this.organization.canManageUsers:
+      case organization.canManageUsers:
        route = "manage/people";
        break;
-      case this.organization.canViewAssignedCollections || this.organization.canViewAllCollections:
+      case organization.canViewAssignedCollections || organization.canViewAllCollections:
        route = "manage/collections";
        break;
-      case this.organization.canManageGroups:
+      case organization.canManageGroups:
        route = "manage/groups";
        break;
-      case this.organization.canManagePolicies:
+      case organization.canManagePolicies:
        route = "manage/policies";
        break;
-      case this.organization.canManageSso:
+      case organization.canManageSso:
        route = "manage/sso";
        break;
-      case this.organization.canManageScim:
+      case organization.canManageScim:
        route = "manage/scim";
        break;
-      case this.organization.canAccessEventLogs:
+      case organization.canAccessEventLogs:
        route = "manage/events";
        break;
    }
--- a/apps/web/src/app/organizations/manage/collection-add-edit.component.ts
+++ b/apps/web/src/app/organizations/manage/collection-add-edit.component.ts
@@ -4,7 +4,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { Utils } from "@bitwarden/common/misc/utils";
 import { EncString } from "@bitwarden/common/models/domain/encString";
--- a/apps/web/src/app/organizations/manage/collections.component.ts
+++ b/apps/web/src/app/organizations/manage/collections.component.ts
@@ -7,7 +7,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { CollectionData } from "@bitwarden/common/models/data/collectionData";
--- a/apps/web/src/app/organizations/manage/events.component.ts
+++ b/apps/web/src/app/organizations/manage/events.component.ts
@@ -7,7 +7,7 @@ import { ExportService } from "@bitwarden/common/abstractions/export.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { ProviderService } from "@bitwarden/common/abstractions/provider.service";
 import { Organization } from "@bitwarden/common/models/domain/organization";
--- a/apps/web/src/app/organizations/manage/manage.component.ts
+++ b/apps/web/src/app/organizations/manage/manage.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";

-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/models/domain/organization";

@Component({
--- a/apps/web/src/app/organizations/manage/people.component.ts
+++ b/apps/web/src/app/organizations/manage/people.component.ts
@@ -10,8 +10,8 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/abstractions/policy/policy-api.service.abstraction";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
--- a/apps/web/src/app/organizations/manage/policies.component.ts
+++ b/apps/web/src/app/organizations/manage/policies.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";

 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/enums/policyType";
 import { Organization } from "@bitwarden/common/models/domain/organization";
--- a/apps/web/src/app/organizations/navigation-permissions.ts
+++ b/apps/web/src/app/organizations/navigation-permissions.ts
@@ -1,29 +0,0 @@
-import { Organization } from "@bitwarden/common/models/domain/organization";
-
-export function canAccessToolsTab(org: Organization): boolean {
-  return org.canAccessImportExport || org.canAccessReports;
-}
-
-export function canAccessSettingsTab(org: Organization): boolean {
-  return org.isOwner;
-}
-
-export function canAccessManageTab(org: Organization): boolean {
-  return (
-    org.canCreateNewCollections ||
-    org.canEditAnyCollection ||
-    org.canDeleteAnyCollection ||
-    org.canEditAssignedCollections ||
-    org.canDeleteAssignedCollections ||
-    org.canAccessEventLogs ||
-    org.canManageGroups ||
-    org.canManageUsers ||
-    org.canManagePolicies ||
-    org.canManageSso ||
-    org.canManageScim
-  );
-}
-
-export function canAccessOrgAdmin(org: Organization): boolean {
-  return canAccessToolsTab(org) || canAccessSettingsTab(org) || canAccessManageTab(org);
-}
--- a/apps/web/src/app/organizations/organization-routing.module.ts
+++ b/apps/web/src/app/organizations/organization-routing.module.ts
@@ -2,6 +2,12 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";

 import { AuthGuard } from "@bitwarden/angular/guards/auth.guard";
+import {
+  canAccessOrgAdmin,
+  canAccessManageTab,
+  canAccessSettingsTab,
+  canAccessToolsTab,
+} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/models/domain/organization";

 import { OrganizationPermissionsGuard } from "./guards/org-permissions.guard";
@@ -12,12 +18,6 @@ import { GroupsComponent } from "./manage/groups.component";
 import { ManageComponent } from "./manage/manage.component";
 import { PeopleComponent } from "./manage/people.component";
 import { PoliciesComponent } from "./manage/policies.component";
-import {
-  canAccessOrgAdmin,
-  canAccessManageTab,
-  canAccessSettingsTab,
-  canAccessToolsTab,
-} from "./navigation-permissions";
 import { AccountComponent } from "./settings/account.component";
 import { OrganizationBillingComponent } from "./settings/organization-billing.component";
 import { OrganizationSubscriptionComponent } from "./settings/organization-subscription.component";
--- a/apps/web/src/app/organizations/policies/master-password.component.ts
+++ b/apps/web/src/app/organizations/policies/master-password.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";

 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PolicyType } from "@bitwarden/common/enums/policyType";

 import { BasePolicy, BasePolicyComponent } from "./base-policy.component";
--- a/apps/web/src/app/organizations/policies/reset-password.component.ts
+++ b/apps/web/src/app/organizations/policies/reset-password.component.ts
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";

-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PolicyType } from "@bitwarden/common/enums/policyType";
 import { Organization } from "@bitwarden/common/models/domain/organization";

--- a/apps/web/src/app/organizations/settings/account.component.ts
+++ b/apps/web/src/app/organizations/settings/account.component.ts
@@ -2,14 +2,12 @@ import { Component, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";

 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { OrganizationKeysRequest } from "@bitwarden/common/models/request/organizationKeysRequest";
 import { OrganizationUpdateRequest } from "@bitwarden/common/models/request/organizationUpdateRequest";
 import { OrganizationResponse } from "@bitwarden/common/models/response/organizationResponse";
@@ -41,17 +39,15 @@ export class AccountComponent {
  loading = true;
  canUseApi = false;
  org: OrganizationResponse;
-  formPromise: Promise<boolean>;
+  formPromise: Promise<OrganizationResponse>;
  taxFormPromise: Promise<unknown>;

  private organizationId: string;

  constructor(
    private modalService: ModalService,
-    private apiService: ApiService,
    private i18nService: I18nService,
    private route: ActivatedRoute,
-    private syncService: SyncService,
    private platformUtilsService: PlatformUtilsService,
    private cryptoService: CryptoService,
    private logService: LogService,
@@ -66,9 +62,7 @@ export class AccountComponent {
    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
    this.route.parent.parent.params.subscribe(async (params) => {
      this.organizationId = params.organizationId;
-      this.canManageBilling = (
-        await this.organizationService.get(this.organizationId)
-      ).canManageBilling;
+      this.canManageBilling = this.organizationService.get(this.organizationId).canManageBilling;
      try {
        this.org = await this.organizationApiService.get(this.organizationId);
        this.canUseApi = this.org.useApi;
@@ -94,9 +88,7 @@ export class AccountComponent {
        request.keys = new OrganizationKeysRequest(orgKeys[0], orgKeys[1].encryptedString);
      }

-      this.formPromise = this.organizationApiService.save(this.organizationId, request).then(() => {
-        return this.syncService.fullSync(true);
-      });
+      this.formPromise = this.organizationApiService.save(this.organizationId, request);
      await this.formPromise;
      this.platformUtilsService.showToast(
        "success",
--- a/apps/web/src/app/organizations/settings/delete-organization.component.ts
+++ b/apps/web/src/app/organizations/settings/delete-organization.component.ts
@@ -3,8 +3,8 @@ import { Component, EventEmitter, OnInit, Output } from "@angular/core";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
 import { CipherType } from "@bitwarden/common/enums/cipherType";
--- a/apps/web/src/app/organizations/settings/organization-subscription.component.ts
+++ b/apps/web/src/app/organizations/settings/organization-subscription.component.ts
@@ -7,8 +7,8 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { OrganizationApiKeyType } from "@bitwarden/common/enums/organizationApiKeyType";
 import { OrganizationConnectionType } from "@bitwarden/common/enums/organizationConnectionType";
@@ -87,7 +87,7 @@ export class OrganizationSubscriptionComponent implements OnInit {
    }

    this.loading = true;
-    this.userOrg = await this.organizationService.get(this.organizationId);
+    this.userOrg = this.organizationService.get(this.organizationId);
    if (this.userOrg.canManageBilling) {
      this.sub = await this.organizationApiService.getSubscription(this.organizationId);
    }
--- a/apps/web/src/app/organizations/settings/settings.component.ts
+++ b/apps/web/src/app/organizations/settings/settings.component.ts
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";

-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";

@Component({
--- a/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html
+++ b/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html
@@ -34,7 +34,9 @@
      >
        <option value="" disabled>-- {{ "select" | i18n }} --</option>
        <option value="createNew">{{ "newFamiliesOrganization" | i18n }}</option>
-        <option *ngFor="let o of existingFamilyOrganizations" [ngValue]="o.id">{{ o.name }}</option>
+        <option *ngFor="let o of existingFamilyOrganizations$ | async" [ngValue]="o.id">
+          {{ o.name }}
+        </option>
      </select>
    </div>
    <div *ngIf="showNewOrganization" class="col-12">
--- a/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts
+++ b/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts
@@ -1,12 +1,13 @@
-import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { first } from "rxjs/operators";
+import { Observable, Subject } from "rxjs";
+import { first, map, takeUntil } from "rxjs/operators";

 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ValidationService } from "@bitwarden/angular/services/validation.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { PlanSponsorshipType } from "@bitwarden/common/enums/planSponsorshipType";
@@ -22,8 +23,7 @@ import { DeleteOrganizationComponent } from "../settings/delete-organization.com
  selector: "families-for-enterprise-setup",
  templateUrl: "families-for-enterprise-setup.component.html",
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class FamiliesForEnterpriseSetupComponent implements OnInit {
+export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
  @ViewChild(OrganizationPlansComponent, { static: false })
  set organizationPlansComponent(value: OrganizationPlansComponent) {
    if (!value) {
@@ -46,11 +46,14 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit {

  token: string;
  existingFamilyOrganizations: Organization[];
+  existingFamilyOrganizations$: Observable<Organization[]>;

  showNewOrganization = false;
  _organizationPlansComponent: OrganizationPlansComponent;
  _selectedFamilyOrganizationId = "";

+  private _destroy = new Subject<void>();
+
  constructor(
    private router: Router,
    private platformUtilsService: PlatformUtilsService,
@@ -84,17 +87,24 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit {
      await this.syncService.fullSync(true);
      this.badToken = !(await this.apiService.postPreValidateSponsorshipToken(this.token));
      this.loading = false;
+    });

-      this.existingFamilyOrganizations = (await this.organizationService.getAll()).filter(
-        (o) => o.planProductType === ProductType.Families
-      );
+    this.existingFamilyOrganizations$ = this.organizationService.organizations$.pipe(
+      map((orgs) => orgs.filter((o) => o.planProductType === ProductType.Families))
+    );

-      if (this.existingFamilyOrganizations.length === 0) {
+    this.existingFamilyOrganizations$.pipe(takeUntil(this._destroy)).subscribe((orgs) => {
+      if (orgs.length === 0) {
        this.selectedFamilyOrganizationId = "createNew";
      }
    });
  }

+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+
  async submit() {
    this.formPromise = this.doSubmit(this._selectedFamilyOrganizationId);
    await this.formPromise;
--- a/apps/web/src/app/organizations/tools/exposed-passwords-report.component.ts
+++ b/apps/web/src/app/organizations/tools/exposed-passwords-report.component.ts
@@ -5,7 +5,7 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { Cipher } from "@bitwarden/common/models/domain/cipher";
--- a/apps/web/src/app/organizations/tools/import-export/org-import.component.ts
+++ b/apps/web/src/app/organizations/tools/import-export/org-import.component.ts
@@ -5,7 +5,7 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { ImportService } from "@bitwarden/common/abstractions/import.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";

--- a/apps/web/src/app/organizations/tools/inactive-two-factor-report.component.ts
+++ b/apps/web/src/app/organizations/tools/inactive-two-factor-report.component.ts
@@ -5,7 +5,7 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { CipherView } from "@bitwarden/common/models/view/cipherView";
--- a/apps/web/src/app/organizations/tools/reused-passwords-report.component.ts
+++ b/apps/web/src/app/organizations/tools/reused-passwords-report.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute } from "@angular/router";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { Cipher } from "@bitwarden/common/models/domain/cipher";
--- a/apps/web/src/app/organizations/tools/tools.component.ts
+++ b/apps/web/src/app/organizations/tools/tools.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";

 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/models/domain/organization";

@Component({
--- a/apps/web/src/app/organizations/tools/unsecured-websites-report.component.ts
+++ b/apps/web/src/app/organizations/tools/unsecured-websites-report.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute } from "@angular/router";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { CipherView } from "@bitwarden/common/models/view/cipherView";
--- a/apps/web/src/app/organizations/tools/weak-passwords-report.component.ts
+++ b/apps/web/src/app/organizations/tools/weak-passwords-report.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute } from "@angular/router";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
--- a/apps/web/src/app/organizations/vault/add-edit.component.ts
+++ b/apps/web/src/app/organizations/vault/add-edit.component.ts
@@ -9,7 +9,7 @@ import { FolderService } from "@bitwarden/common/abstractions/folder/folder.serv
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
--- a/apps/web/src/app/organizations/vault/ciphers.component.ts
+++ b/apps/web/src/app/organizations/vault/ciphers.component.ts
@@ -5,7 +5,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
--- a/apps/web/src/app/organizations/vault/vault.component.ts
+++ b/apps/web/src/app/organizations/vault/vault.component.ts
@@ -16,7 +16,7 @@ import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.s
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
--- a/apps/web/src/app/settings/add-credit.component.ts
+++ b/apps/web/src/app/settings/add-credit.component.ts
@@ -11,7 +11,7 @@ import {
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PayPalConfig } from "@bitwarden/common/abstractions/environment.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType";
--- a/apps/web/src/app/settings/change-password.component.ts
+++ b/apps/web/src/app/settings/change-password.component.ts
@@ -10,8 +10,8 @@ import { FolderService } from "@bitwarden/common/abstractions/folder/folder.serv
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { KeyConnectorService } from "@bitwarden/common/abstractions/keyConnector.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
--- a/apps/web/src/app/settings/emergency-access.component.ts
+++ b/apps/web/src/app/settings/emergency-access.component.ts
@@ -7,7 +7,7 @@ import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { EmergencyAccessStatusType } from "@bitwarden/common/enums/emergencyAccessStatusType";
--- a/apps/web/src/app/settings/emergency-add-edit.component.ts
+++ b/apps/web/src/app/settings/emergency-add-edit.component.ts
@@ -8,7 +8,7 @@ import { FolderService } from "@bitwarden/common/abstractions/folder/folder.serv
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
--- a/apps/web/src/app/settings/organization-plans.component.ts
+++ b/apps/web/src/app/settings/organization-plans.component.ts
@@ -7,8 +7,8 @@ import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
--- a/apps/web/src/app/settings/settings.component.ts
+++ b/apps/web/src/app/settings/settings.component.ts
@@ -2,7 +2,7 @@ import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { TokenService } from "@bitwarden/common/abstractions/token.service";

--- a/apps/web/src/app/settings/sponsored-families.component.html
+++ b/apps/web/src/app/settings/sponsored-families.component.html
@@ -22,7 +22,7 @@
    [appApiAction]="formPromise"
    [formGroup]="sponsorshipForm"
    ngNativeValidate
-    *ngIf="anyOrgsAvailable"
+    *ngIf="anyOrgsAvailable$ | async"
  >
    <div class="form-group col-7">
      <label for="availableSponsorshipOrg">{{ "familiesSponsoringOrgSelect" | i18n }}</label>
@@ -34,7 +34,9 @@
        required
      >
        <option disabled="true" value="">-- {{ "select" | i18n }} --</option>
-        <option *ngFor="let o of availableSponsorshipOrgs" [ngValue]="o.id">{{ o.name }}</option>
+        <option *ngFor="let o of availableSponsorshipOrgs$ | async" [ngValue]="o.id">
+          {{ o.name }}
+        </option>
      </select>
    </div>
    <div class="form-group col-7">
@@ -74,7 +76,7 @@
      </button>
    </div>
  </form>
-  <ng-container *ngIf="anyActiveSponsorships">
+  <ng-container *ngIf="anyActiveSponsorships$ | async">
    <div class="border-bottom">
      <table class="table table-hover table-list">
        <thead>
@@ -86,12 +88,12 @@
          </tr>
        </thead>
        <tbody>
-          <ng-container *ngFor="let o of activeSponsorshipOrgs">
+          <ng-container *ngFor="let o of activeSponsorshipOrgs$ | async">
            <tr
              sponsoring-org-row
              [sponsoringOrg]="o"
              [isSelfHosted]="isSelfHosted"
-              (sponsorshipRemoved)="load(true)"
+              (sponsorshipRemoved)="forceReload()"
            ></tr>
          </ng-container>
        </tbody>
--- a/apps/web/src/app/settings/sponsored-families.component.ts
+++ b/apps/web/src/app/settings/sponsored-families.component.ts
@@ -1,30 +1,40 @@
-import { Component, OnInit } from "@angular/core";
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { map, Observable, Subject, takeUntil } from "rxjs";

 import { notAllowedValueAsync } from "@bitwarden/angular/validators/notAllowedValueAsync.validator";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { PlanSponsorshipType } from "@bitwarden/common/enums/planSponsorshipType";
 import { Organization } from "@bitwarden/common/models/domain/organization";

+interface RequestSponsorshipForm {
+  selectedSponsorshipOrgId: FormControl<string>;
+  sponsorshipEmail: FormControl<string>;
+}
+
@Component({
  selector: "app-sponsored-families",
  templateUrl: "sponsored-families.component.html",
 })
-export class SponsoredFamiliesComponent implements OnInit {
+export class SponsoredFamiliesComponent implements OnInit, OnDestroy {
  loading = false;

-  availableSponsorshipOrgs: Organization[] = [];
-  activeSponsorshipOrgs: Organization[] = [];
+  availableSponsorshipOrgs$: Observable<Organization[]>;
+  activeSponsorshipOrgs$: Observable<Organization[]>;
+  anyOrgsAvailable$: Observable<boolean>;
+  anyActiveSponsorships$: Observable<boolean>;

  // Conditional display properties
-  formPromise: Promise<any>;
+  formPromise: Promise<void>;

-  sponsorshipForm: UntypedFormGroup;
+  sponsorshipForm: FormGroup<RequestSponsorshipForm>;
+
+  private _destroy = new Subject<void>();

  constructor(
    private apiService: ApiService,
@@ -32,31 +42,50 @@ export class SponsoredFamiliesComponent implements OnInit {
    private platformUtilsService: PlatformUtilsService,
    private syncService: SyncService,
    private organizationService: OrganizationService,
-    private formBuilder: UntypedFormBuilder,
+    private formBuilder: FormBuilder,
    private stateService: StateService
  ) {
-    this.sponsorshipForm = this.formBuilder.group({
-      selectedSponsorshipOrgId: [
-        "",
-        {
-          validators: [Validators.required],
-        },
-      ],
-      sponsorshipEmail: [
-        "",
-        {
-          validators: [Validators.email],
-          asyncValidators: [
-            notAllowedValueAsync(async () => await this.stateService.getEmail(), true),
-          ],
-          updateOn: "blur",
-        },
-      ],
+    this.sponsorshipForm = this.formBuilder.group<RequestSponsorshipForm>({
+      selectedSponsorshipOrgId: new FormControl("", {
+        validators: [Validators.required],
+      }),
+      sponsorshipEmail: new FormControl("", {
+        validators: [Validators.email],
+        asyncValidators: [
+          notAllowedValueAsync(async () => await this.stateService.getEmail(), true),
+        ],
+        updateOn: "blur",
+      }),
    });
  }

  async ngOnInit() {
-    await this.load();
+    this.availableSponsorshipOrgs$ = this.organizationService.organizations$.pipe(
+      map((orgs) => orgs.filter((o) => o.familySponsorshipAvailable))
+    );
+
+    this.availableSponsorshipOrgs$.pipe(takeUntil(this._destroy)).subscribe((orgs) => {
+      if (orgs.length === 1) {
+        this.sponsorshipForm.patchValue({
+          selectedSponsorshipOrgId: orgs[0].id,
+        });
+      }
+    });
+
+    this.anyOrgsAvailable$ = this.availableSponsorshipOrgs$.pipe(map((orgs) => orgs.length > 0));
+
+    this.activeSponsorshipOrgs$ = this.organizationService.organizations$.pipe(
+      map((orgs) => orgs.filter((o) => o.familySponsorshipFriendlyName !== null))
+    );
+
+    this.anyActiveSponsorships$ = this.activeSponsorshipOrgs$.pipe(map((orgs) => orgs.length > 0));
+
+    this.loading = false;
+  }
+
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
  }

  async submit() {
@@ -73,50 +102,23 @@ export class SponsoredFamiliesComponent implements OnInit {
    this.platformUtilsService.showToast("success", null, this.i18nService.t("sponsorshipCreated"));
    this.formPromise = null;
    this.resetForm();
-    await this.load(true);
+    await this.forceReload();
  }

-  async load(forceReload = false) {
-    if (this.loading) {
-      return;
-    }
-
+  async forceReload() {
    this.loading = true;
-    if (forceReload) {
-      await this.syncService.fullSync(true);
-    }
-
-    const allOrgs = await this.organizationService.getAll();
-    this.availableSponsorshipOrgs = allOrgs.filter((org) => org.familySponsorshipAvailable);
-
-    this.activeSponsorshipOrgs = allOrgs.filter(
-      (org) => org.familySponsorshipFriendlyName !== null
-    );
-
-    if (this.availableSponsorshipOrgs.length === 1) {
-      this.sponsorshipForm.patchValue({
-        selectedSponsorshipOrgId: this.availableSponsorshipOrgs[0].id,
-      });
-    }
+    await this.syncService.fullSync(true);
    this.loading = false;
  }

  get sponsorshipEmailControl() {
-    return this.sponsorshipForm.controls["sponsorshipEmail"];
+    return this.sponsorshipForm.controls.sponsorshipEmail;
  }

  private async resetForm() {
    this.sponsorshipForm.reset();
  }

-  get anyActiveSponsorships(): boolean {
-    return this.activeSponsorshipOrgs.length > 0;
-  }
-
-  get anyOrgsAvailable(): boolean {
-    return this.availableSponsorshipOrgs.length > 0;
-  }
-
  get isSelfHosted(): boolean {
    return this.platformUtilsService.isSelfHost();
  }
--- a/apps/web/src/app/vault/add-edit.component.ts
+++ b/apps/web/src/app/vault/add-edit.component.ts
@@ -9,7 +9,7 @@ import { FolderService } from "@bitwarden/common/abstractions/folder/folder.serv
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
--- a/apps/web/src/app/vault/bulk-share.component.ts
+++ b/apps/web/src/app/vault/bulk-share.component.ts
@@ -4,11 +4,12 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { Organization } from "@bitwarden/common/models/domain/organization";
 import { CipherView } from "@bitwarden/common/models/view/cipherView";
 import { CollectionView } from "@bitwarden/common/models/view/collectionView";
+import { Checkable, isChecked } from "@bitwarden/common/types/checkable";

@Component({
  selector: "app-vault-bulk-share",
@@ -20,10 +21,10 @@ export class BulkShareComponent implements OnInit {
  @Output() onShared = new EventEmitter();

  nonShareableCount = 0;
-  collections: CollectionView[] = [];
+  collections: Checkable<CollectionView>[] = [];
  organizations: Organization[] = [];
  shareableCiphers: CipherView[] = [];
-  formPromise: Promise<any>;
+  formPromise: Promise<void>;

  private writeableCollections: CollectionView[] = [];

@@ -66,9 +67,7 @@ export class BulkShareComponent implements OnInit {
  }

  async submit() {
-    const checkedCollectionIds = this.collections
-      .filter((c) => (c as any).checked)
-      .map((c) => c.id);
+    const checkedCollectionIds = this.collections.filter(isChecked).map((c) => c.id);
    try {
      this.formPromise = this.cipherService.shareManyWithServer(
        this.shareableCiphers,
@@ -90,8 +89,8 @@ export class BulkShareComponent implements OnInit {
    }
  }

-  check(c: CollectionView, select?: boolean) {
-    (c as any).checked = select == null ? !(c as any).checked : select;
+  check(c: Checkable<CollectionView>, select?: boolean) {
+    c.checked = select == null ? !c.checked : select;
  }

  selectAll(select: boolean) {
@@ -106,7 +105,7 @@ export class BulkShareComponent implements OnInit {
      this.collections != null
    ) {
      for (let i = 0; i < this.collections.length; i++) {
-        if ((this.collections[i] as any).checked) {
+        if (this.collections[i].checked) {
          return true;
        }
      }
--- a/apps/web/src/app/vault/ciphers.component.ts
+++ b/apps/web/src/app/vault/ciphers.component.ts
@@ -5,7 +5,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
--- a/apps/web/src/app/vault/share.component.html
+++ b/apps/web/src/app/vault/share.component.html
@@ -15,78 +15,87 @@
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
-      <div class="modal-body" *ngIf="!organizations || !organizations.length">
-        {{ "noOrganizationsList" | i18n }}
-      </div>
-      <div class="modal-body" *ngIf="organizations && organizations.length">
-        <p>{{ "moveToOrgDesc" | i18n }}</p>
-        <div class="form-group">
-          <label for="organization">{{ "organization" | i18n }}</label>
-          <select
-            id="organization"
-            name="OrganizationId"
-            [(ngModel)]="organizationId"
-            class="form-control"
-            (change)="filterCollections()"
-          >
-            <option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
-          </select>
+      <ng-container *ngIf="organizations$ | async as organizations">
+        <div class="modal-body" *ngIf="!organizations || !organizations.length">
+          {{ "noOrganizationsList" | i18n }}
        </div>
-        <div class="d-flex">
-          <h3>{{ "collections" | i18n }}</h3>
-          <div class="ml-auto d-flex" *ngIf="collections && collections.length">
-            <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
-              {{ "selectAll" | i18n }}
-            </button>
-            <button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
-              {{ "unselectAll" | i18n }}
-            </button>
+        <div class="modal-body" *ngIf="organizations && organizations.length">
+          <p>{{ "moveToOrgDesc" | i18n }}</p>
+          <div class="form-group">
+            <label for="organization">{{ "organization" | i18n }}</label>
+            <select
+              id="organization"
+              name="OrganizationId"
+              [(ngModel)]="organizationId"
+              class="form-control"
+              (change)="filterCollections()"
+            >
+              <option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
+            </select>
          </div>
+          <div class="d-flex">
+            <h3>{{ "collections" | i18n }}</h3>
+            <div class="ml-auto d-flex" *ngIf="collections && collections.length">
+              <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
+                {{ "selectAll" | i18n }}
+              </button>
+              <button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
+                {{ "unselectAll" | i18n }}
+              </button>
+            </div>
+          </div>
+          <div *ngIf="!collections || !collections.length">
+            {{ "noCollectionsInList" | i18n }}
+          </div>
+          <table
+            class="table table-hover table-list mb-0"
+            *ngIf="collections && collections.length"
+          >
+            <tbody>
+              <tr *ngFor="let c of collections; let i = index" (click)="check(c)">
+                <td class="table-list-checkbox">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="c.checked"
+                    name="Collection[{{ i }}].Checked"
+                    appStopProp
+                  />
+                </td>
+                <td>
+                  {{ c.name }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
        </div>
-        <div *ngIf="!collections || !collections.length">
-          {{ "noCollectionsInList" | i18n }}
+        <div class="modal-footer">
+          <button
+            type="submit"
+            class="btn btn-primary btn-submit manual"
+            [disabled]="form.loading || !canSave"
+            [ngClass]="{ loading: form.loading }"
+            *ngIf="organizations && organizations.length"
+          >
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
+            <span>{{ "save" | i18n }}</span>
+          </button>
+          <a
+            href="#"
+            routerLink="/create-organization"
+            class="btn btn-primary"
+            *ngIf="!organizations || !organizations.length"
+          >
+            {{ "newOrganization" | i18n }}
+          </a>
+          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+            {{ "cancel" | i18n }}
+          </button>
        </div>
-        <table class="table table-hover table-list mb-0" *ngIf="collections && collections.length">
-          <tbody>
-            <tr *ngFor="let c of collections; let i = index" (click)="check(c)">
-              <td class="table-list-checkbox">
-                <input
-                  type="checkbox"
-                  [(ngModel)]="c.checked"
-                  name="Collection[{{ i }}].Checked"
-                  appStopProp
-                />
-              </td>
-              <td>
-                {{ c.name }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="modal-footer">
-        <button
-          type="submit"
-          class="btn btn-primary btn-submit manual"
-          [disabled]="form.loading || !canSave"
-          [ngClass]="{ loading: form.loading }"
-          *ngIf="organizations && organizations.length"
-        >
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "save" | i18n }}</span>
-        </button>
-        <a
-          href="#"
-          routerLink="/create-organization"
-          class="btn btn-primary"
-          *ngIf="!organizations || !organizations.length"
-        >
-          {{ "newOrganization" | i18n }}
-        </a>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
+      </ng-container>
    </form>
  </div>
 </div>
--- a/apps/web/src/app/vault/share.component.ts
+++ b/apps/web/src/app/vault/share.component.ts
@@ -5,7 +5,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { CollectionView } from "@bitwarden/common/models/view/collectionView";

--- a/apps/web/src/app/vault/vault-filter/organization-filter/organization-options.component.ts
+++ b/apps/web/src/app/vault/vault-filter/organization-filter/organization-options.component.ts
@@ -102,9 +102,7 @@ export class OrganizationOptionsComponent {
    }

    try {
-      this.actionPromise = this.organizationApiService.leave(org.id).then(() => {
-        return this.syncService.fullSync(true);
-      });
+      this.actionPromise = this.organizationApiService.leave(org.id);
      await this.actionPromise;
      this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
      await this.load();
--- a/apps/web/src/app/vault/vault-filter/shared/vault-filter.service.ts
+++ b/apps/web/src/app/vault/vault-filter/shared/vault-filter.service.ts
@@ -8,7 +8,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
 import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { CollectionData } from "@bitwarden/common/models/data/collectionData";
--- a/apps/web/src/app/vault/vault.component.ts
+++ b/apps/web/src/app/vault/vault.component.ts
@@ -17,7 +17,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";