From 99022e2baa4692751b1cbdeb96a17a44ea68c1f8 Mon Sep 17 00:00:00 2001
From: aj-rosado <109146700+aj-rosado@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:24:40 +0000
Subject: [PATCH] Added dashed line as separator and label for common formats
 on format selector for import (#7432)

---
 apps/browser/src/_locales/en/messages.json         | 4 ++++
 apps/desktop/src/locales/en/messages.json          | 4 ++++
 apps/web/src/locales/en/messages.json              | 4 ++++
 libs/importer/src/components/import.component.html | 9 ++++++++-
 libs/importer/src/components/import.component.ts   | 9 ++-------
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 9fb10bb0ba..62d6f8df0d 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -2888,5 +2888,9 @@
         "example": "google.com"
       }
     }
+  },
+  "commonImportFormats": {
+    "message": "Common formats",
+    "description": "Label indicating the most common import formats"
   }
 }
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 1041283dc4..20c1cd7d31 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2616,5 +2616,9 @@
   },
   "lastPassYubikeyDesc": {
     "message": "Insert the YubiKey associated with your LastPass account into your computer's USB port, then touch its button."
+  },
+  "commonImportFormats": {
+    "message": "Common formats",
+    "description": "Label indicating the most common import formats"
   }
 }
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 35420dd498..982c9498c0 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -7455,5 +7455,9 @@
   },
   "serviceAccountAccessUpdated": {
     "message": "Service account access updated"
+  },
+  "commonImportFormats": {
+    "message": "Common formats",
+    "description": "Label indicating the most common import formats"
   }
 }
diff --git a/libs/importer/src/components/import.component.html b/libs/importer/src/components/import.component.html
index 7e2fd4f163..871bd7f22d 100644
--- a/libs/importer/src/components/import.component.html
+++ b/libs/importer/src/components/import.component.html
@@ -61,9 +61,16 @@
   <bit-form-field class="tw-w-1/2">
     <bit-label>{{ "fileFormat" | i18n }}</bit-label>
     <bit-select formControlName="format">
+      <bit-option value="" label="-- {{ 'select' | i18n }} --" />
+      <bit-option
+        class="tw-font-bold tw-text-muted tw-text-xs"
+        value="-"
+        label="{{ 'commonImportFormats' | i18n }}"
+        disabled
+      />
       <bit-option *ngFor="let o of featuredImportOptions" [value]="o.id" [label]="o.name" />
       <ng-container *ngIf="importOptions && importOptions.length">
-        <bit-option value="-" disabled />
+        <bit-option value="-" label="--------------------------------------" disabled />
         <bit-option *ngFor="let o of importOptions" [value]="o.id" [label]="o.name" />
       </ng-container>
     </bit-select>
diff --git a/libs/importer/src/components/import.component.ts b/libs/importer/src/components/import.component.ts
index 438076c934..4efedbfcfd 100644
--- a/libs/importer/src/components/import.component.ts
+++ b/libs/importer/src/components/import.component.ts
@@ -422,13 +422,8 @@ export class ImportComponent implements OnInit, OnDestroy {
   }
 
   protected setImportOptions() {
-    this.featuredImportOptions = [
-      {
-        id: null,
-        name: "-- " + this.i18nService.t("select") + " --",
-      },
-      ...this.importService.featuredImportOptions,
-    ];
+    this.featuredImportOptions = [...this.importService.featuredImportOptions];
+
     this.importOptions = [...this.importService.regularImportOptions].sort((a, b) => {
       if (a.name == null && b.name != null) {
         return -1;