improved error display

libs/importer/src/components/chrome/import-chrome.component.ts

@@ -105,6 +105,10 @@ export class ImportChromeComponent implements OnInit, OnDestroy {
   // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() csvDataLoaded = new EventEmitter<string>();
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
+  @Output() error = new EventEmitter<string>();
+
   constructor(
     private formBuilder: FormBuilder,
     private controlContainer: ControlContainer,
@@ -120,6 +124,10 @@ export class ImportChromeComponent implements OnInit, OnDestroy {
           );
         } catch (error) {
           this.logService.error("Error loading profiles from browser:", error);
+          const keyOrMessage = this.getValidationErrorI18nKey(error);
+          this.error.emit(
+            keyOrMessage === "errorOccurred" ? this.i18nService.t("errorOccurred") : keyOrMessage,
+          );
         }
       }
     });
@@ -177,9 +185,11 @@ export class ImportChromeComponent implements OnInit, OnDestroy {
         return null;
       } catch (error) {
         this.logService.error(`Chromium importer error: ${error}`);
+        const keyOrMessage = this.getValidationErrorI18nKey(error);
         return {
           errors: {
-            message: this.i18nService.t(this.getValidationErrorI18nKey(error)),
+            message:
+              keyOrMessage === "errorOccurred" ? this.i18nService.t("errorOccurred") : keyOrMessage,
           },
         };
       }
@@ -188,10 +198,7 @@ export class ImportChromeComponent implements OnInit, OnDestroy {
 
   private getValidationErrorI18nKey(error: any): string {
     const message = typeof error === "string" ? error : error?.message;
-    switch (message) {
+    return message || "errorOccurred";
-      default:
-        return "errorOccurred";
-    }
   }
 
   private getBrowserName(format: ImportType): string {

libs/importer/src/components/import.component.html

@@ -463,6 +463,7 @@
           [onLoadProfilesFromBrowser]="this.onLoadProfilesFromBrowser"
           [format]="this.format"
           (csvDataLoaded)="this.formGroup.controls.fileContents.setValue($event)"
+          (error)="errorMessage = $event"
         ></import-chrome>
       } @else {
         <bit-form-field>
@@ -493,6 +494,9 @@
           ></textarea>
         </bit-form-field>
       }
+      <bit-callout type="danger" *ngIf="errorMessage" class="tw-mt-4">
+        {{ errorMessage }}
+      </bit-callout>
     </bit-card>
   </bit-section>
 </form>

libs/importer/src/components/import.component.ts

@@ -112,6 +112,7 @@ import { ImportLastPassComponent } from "./lastpass";
   providers: ImporterProviders,
 })
 export class ImportComponent implements OnInit, OnDestroy, AfterViewInit {
+  errorMessage: string | undefined = undefined;
   DefaultCollectionType = CollectionTypes.DefaultUserCollection;
 
   featuredImportOptions: ImportOption[];
@@ -439,6 +440,7 @@ export class ImportComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   protected async performImport() {
+    this.errorMessage = undefined;
     if (!(await this.validateImport())) {
       return;
     }
@@ -454,22 +456,14 @@ export class ImportComponent implements OnInit, OnDestroy, AfterViewInit {
     );
 
     if (importer === null) {
-      this.toastService.showToast({
+      this.errorMessage = this.i18nService.t("selectFormat");
-        variant: "error",
-        title: this.i18nService.t("errorOccurred"),
-        message: this.i18nService.t("selectFormat"),
-      });
       return;
     }
 
     const importContents = await this.setImportContents();
 
     if (importContents == null || importContents === "") {
-      this.toastService.showToast({
+      this.errorMessage = this.i18nService.t("selectFile");
-        variant: "error",
-        title: this.i18nService.t("errorOccurred"),
-        message: this.i18nService.t("selectFile"),
-      });
       return;
     }
 
@@ -613,11 +607,7 @@ export class ImportComponent implements OnInit, OnDestroy, AfterViewInit {
     }
 
     if (this.importBlockedByPolicy && this.organizationId == null) {
-      this.toastService.showToast({
+      this.errorMessage = this.i18nService.t("personalOwnershipPolicyInEffectImports");
-        variant: "error",
-        title: null,
-        message: this.i18nService.t("personalOwnershipPolicyInEffectImports"),
-      });
       return false;
     }