[PM-9952][PM-9954] Minor assign collection fixes (#10190)

* disable organization selector when only one org is selected

* break long org names in assign collections copy

- applicable more in the browser implementation

* add `title` to each select option so a mouse over presents the name

- more applicable to the browser extension where names can overflow

* truncate options that overflow a select

* set max width of form fields to 100%

libs/components/src/select/select.component.html

@@ -10,11 +10,11 @@
   appendTo="body"
 >
   <ng-template ng-option-tmp let-item="item">
-    <div class="tw-flex">
+    <div class="tw-flex" [title]="item.label">
       <div class="tw-mr-2 tw-flex-initial">
         <i *ngIf="item.icon != null" class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
       </div>
-      <div class="tw-flex-1">
+      <div class="tw-flex-1 tw-text-ellipsis tw-overflow-hidden">
         {{ item.label }}
       </div>
     </div>

libs/vault/src/components/assign-collections.component.html

@@ -1,7 +1,7 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit" id="assign_collections_form">
   <p>{{ "bulkCollectionAssignmentDialogDescription" | i18n }}</p>
 
-  <ul class="tw-list-none tw-pl-5 tw-space-y-2">
+  <ul class="tw-list-none tw-pl-5 tw-space-y-2 tw-break-words">
     <li *ngIf="readonlyItemCount > 0">
       <p>
         {{ "bulkCollectionAssignmentWarning" | i18n: totalItemCount : readonlyItemCount }}
@@ -15,7 +15,7 @@
   </ul>
 
   <div class="tw-flex" *ngIf="showOrgSelector">
-    <bit-form-field class="tw-grow">
+    <bit-form-field class="tw-grow tw-max-w-full">
       <bit-label>{{ "moveToOrganization" | i18n }}</bit-label>
       <bit-select formControlName="selectedOrg">
         <bit-option
@@ -30,7 +30,7 @@
   </div>
 
   <div class="tw-flex">
-    <bit-form-field class="tw-grow">
+    <bit-form-field class="tw-grow tw-max-w-full">
       <bit-label>{{ "selectCollectionsToAssign" | i18n }}</bit-label>
       <bit-multi-select
         class="tw-w-full"

libs/vault/src/components/assign-collections.component.ts

@@ -123,6 +123,11 @@ export class AssignCollectionsComponent implements OnInit {
           setTimeout(() => {
             this.formGroup.patchValue({ selectedOrg: orgs[0].id });
             this.setFormValidators();
+
+            // Disable the org selector if there is only one organization
+            if (orgs.length === 1) {
+              this.formGroup.controls.selectedOrg.disable();
+            }
           });
         }
       }),
@@ -139,7 +144,7 @@ export class AssignCollectionsComponent implements OnInit {
   // Get the selected organization ID. If the user has not selected an organization from the form,
   // fallback to use the organization ID from the params.
   private get selectedOrgId(): OrganizationId {
-    return this.formGroup.value.selectedOrg || this.params.organizationId;
+    return this.formGroup.getRawValue().selectedOrg || this.params.organizationId;
   }
   private destroy$ = new Subject<void>();