Added dashed line as separator and label for common formats on format selector for import (#7432)

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"
   }
 }

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"
   }
 }

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"
   }
 }

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>

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;