[PM-16098] Improved cipher decryption error handling (#12468)

* [PM-16098] Add decryptionFailure flag to CipherView

* [PM-16098] Add failedToDecryptCiphers$ observable to CipherService

* [PM-16098] Introduce decryption-failure-dialog.component

* [PM-16098] Disable cipher rows for the Web Vault

* [PM-16098] Show decryption error dialog on vault load or when attempting to view/edit a corrupted cipher

* [PM-16098] Browser - Show decryption error dialog on vault load or when attempting to view/edit a corrupted cipher

* [PM-16098] Desktop - Show decryption error dialog on vault load or when attempting to view a corrupted cipher. Remove edit/clone context menu options and footer actions.

* [PM-16098] Add CS link to decryption failure dialog

* [PM-16098] Return cipherViews and move filtering of isDeleted to consumers

* [PM-16098] Throw an error when retrieving cipher data for key rotation when a decryption failure is present

* [PM-16098] Properly filter out deleted, corrupted ciphers when showing dialog within the Vault

* [PM-16098] Show the decryption error dialog when attempting to view a cipher in trash and disable the restore option

* [PM-16098] Exclude failed to decrypt ciphers from getAllDecrypted method and cipherViews$ observable

* [PM-16098] Avoid re-sorting remainingCiphers$ as it was redundant

* [PM-16098] Update tests

* [PM-16098] Prevent opening view dialog in AC for corrupted ciphers

* [PM-16098] Remove withLatestFrom operator that was causing race conditions when navigating away from the individual vault

* [PM-16098] Ensure decryption error dialog is only shown once on Desktop when switching accounts

libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.html

@@ -0,0 +1,32 @@
+<bit-simple-dialog>
+  <i
+    bitDialogIcon
+    class="bwi tw-text-3xl bwi-exclamation-triangle tw-text-warning"
+    aria-hidden="true"
+  ></i>
+  <span bitDialogTitle>{{ "decryptionError" | i18n }}</span>
+  <div bitDialogContent>
+    <p>
+      {{ "couldNotDecryptVaultItemsBelow" | i18n }}
+      <a bitLink href="#" (click)="openContactSupport($event)">{{
+        "contactCSToAvoidDataLossPart1" | i18n
+      }}</a>
+      {{ "contactCSToAvoidDataLossPart2" | i18n }}
+    </p>
+    <ul class="tw-list-none tw-pl-0">
+      <li
+        *ngFor="let id of params.cipherIds"
+        class="tw-text-code tw-font-mono tw-py-0.5"
+        (click)="selectText(listItem)"
+        #listItem
+      >
+        {{ id }}
+      </li>
+    </ul>
+  </div>
+  <ng-container bitDialogFooter>
+    <button type="button" bitButton buttonType="primary" (click)="dialogRef.close(false)">
+      {{ "close" | i18n }}
+    </button>
+  </ng-container>
+</bit-simple-dialog>

libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.ts

@@ -0,0 +1,59 @@
+import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, inject } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { CipherId } from "@bitwarden/common/types/guid";
+import {
+  AnchorLinkDirective,
+  AsyncActionsModule,
+  ButtonModule,
+  DialogModule,
+  DialogService,
+  TypographyModule,
+} from "@bitwarden/components";
+
+export type DecryptionFailureDialogParams = {
+  cipherIds: CipherId[];
+};
+
+@Component({
+  standalone: true,
+  selector: "vault-decryption-failure-dialog",
+  templateUrl: "./decryption-failure-dialog.component.html",
+  imports: [
+    DialogModule,
+    CommonModule,
+    TypographyModule,
+    JslibModule,
+    AsyncActionsModule,
+    ButtonModule,
+    AnchorLinkDirective,
+  ],
+})
+export class DecryptionFailureDialogComponent {
+  protected dialogRef = inject(DialogRef);
+  protected params = inject<DecryptionFailureDialogParams>(DIALOG_DATA);
+  protected platformUtilsService = inject(PlatformUtilsService);
+
+  selectText(element: HTMLElement) {
+    const selection = window.getSelection();
+    if (selection == null) {
+      return;
+    }
+    selection.removeAllRanges();
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    selection.addRange(range);
+  }
+
+  openContactSupport(event: Event) {
+    event.preventDefault();
+    this.platformUtilsService.launchUri("https://bitwarden.com/contact");
+  }
+
+  static open(dialogService: DialogService, params: DecryptionFailureDialogParams) {
+    return dialogService.open(DecryptionFailureDialogComponent, { data: params });
+  }
+}

libs/vault/src/index.ts

@@ -16,5 +16,6 @@ export { DownloadAttachmentComponent } from "./components/download-attachment/do
 export { PasswordHistoryViewComponent } from "./components/password-history-view/password-history-view.component";
 export { NewDeviceVerificationNoticePageOneComponent } from "./components/new-device-verification-notice/new-device-verification-notice-page-one.component";
 export { NewDeviceVerificationNoticePageTwoComponent } from "./components/new-device-verification-notice/new-device-verification-notice-page-two.component";
+export { DecryptionFailureDialogComponent } from "./components/decryption-failure-dialog/decryption-failure-dialog.component";
 
 export * as VaultIcons from "./icons";