[EC-667] Collection modal add search function (#4291)

* [EC-667] feat: scaffold new select component

* [EC-667] feat: sort of working implementation

* [EC-667] feat: support for using in forms

* [EC-667] feat: add bit-select example to full form

* [EC-667] fix: broken aria label connetion

* [EC-667] fix: web not building

* [EC-667] fix: dropdown getting trapped in dialog

* [EC-667] fix: select not emitting correct value

* [EC-667] feat: add collection icon to options

* [EC-667] feat: add default select placeholder translation

* [EC-667] fix: undefined handling

* [EC-667] fix: value vs options race condition

* [EC-667] feat: remove x and add "no collection" option

* [EC-667] chore: add country list disclaimer

* chore: clean up comments

* [EC-667] chore: cleanup commented import

* [EC-667] fix: input text color not applying to single-select

apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html

@@ -30,15 +30,24 @@
 
           <bit-form-field>
             <bit-label>{{ "nestCollectionUnder" | i18n }}</bit-label>
-            <select bitInput formControlName="parent">
-              <option [ngValue]="null">-</option>
-              <option *ngIf="deletedParentName" disabled [ngValue]="deletedParentName">
-                {{ deletedParentName }} ({{ "deleted" | i18n }})
-              </option>
-              <option *ngFor="let collection of nestOptions" [ngValue]="collection.name">
-                {{ collection.name }}
-              </option>
-            </select>
+            <bit-select bitInput formControlName="parent">
+              <bit-option [value]="undefined" [label]="'noCollection' | i18n"> </bit-option>
+              <bit-option
+                *ngIf="deletedParentName"
+                disabled
+                icon="bwi-collection"
+                [value]="deletedParentName"
+                label="{{ deletedParentName }} ({{ 'deleted' | i18n }})"
+              >
+              </bit-option>
+              <bit-option
+                *ngFor="let collection of nestOptions"
+                icon="bwi-collection"
+                [value]="collection.name"
+                [label]="collection.name"
+              >
+              </bit-option>
+            </bit-select>
           </bit-form-field>
         </bit-tab>
         <bit-tab label="{{ 'access' | i18n }}">

apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.ts

@@ -62,7 +62,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
   protected formGroup = this.formBuilder.group({
     name: ["", [Validators.required, BitValidators.forbiddenCharacters(["/"])]],
     externalId: "",
-    parent: null as string | null,
+    parent: undefined as string | undefined,
     access: [[] as AccessItemValue[]],
   });
   protected PermissionMode = PermissionMode;
@@ -121,7 +121,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
           }
 
           const { name, parent } = parseName(this.collection);
-          if (parent !== null && !this.nestOptions.find((c) => c.name === parent)) {
+          if (parent !== undefined && !this.nestOptions.find((c) => c.name === parent)) {
             this.deletedParentName = parent;
           }
 
@@ -135,7 +135,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
         } else {
           this.nestOptions = collections;
           const parent = collections.find((c) => c.id === this.params.parentCollectionId);
-          this.formGroup.patchValue({ parent: parent?.name ?? null });
+          this.formGroup.patchValue({ parent: parent?.name ?? undefined });
         }
 
         this.loading = false;
@@ -237,7 +237,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
 function parseName(collection: CollectionView) {
   const nameParts = collection.name?.split("/");
   const name = nameParts[nameParts.length - 1];
-  const parent = nameParts.length > 1 ? nameParts.slice(0, -1).join("/") : null;
+  const parent = nameParts.length > 1 ? nameParts.slice(0, -1).join("/") : undefined;
 
   return { name, parent };
 }

apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.module.ts

@@ -1,12 +1,14 @@
 import { NgModule } from "@angular/core";
 
+import { SelectModule } from "@bitwarden/components";
+
 import { SharedModule } from "../../../../shared/shared.module";
 import { AccessSelectorModule } from "../access-selector";
 
 import { CollectionDialogComponent } from "./collection-dialog.component";
 
 @NgModule({
-  imports: [SharedModule, AccessSelectorModule],
+  imports: [SharedModule, AccessSelectorModule, SelectModule],
   declarations: [CollectionDialogComponent],
   exports: [CollectionDialogComponent],
 })

apps/web/src/locales/en/messages.json

@@ -5670,6 +5670,9 @@
    },
    "customColor": {
     "message": "Custom Color"
+   },
+  "selectPlaceholder": {
+    "message": "-- Select --"
   },
   "multiSelectPlaceholder": {
     "message": "-- Type to filter --"
@@ -6000,6 +6003,9 @@
   "collection": {
     "message": "Collection"
   },
+  "noCollection": {
+    "message": "No collection"
+  },
   "canView": {
     "message": "Can view"
   },