Fix small browser filter bugs (#2684)

apps/browser/src/_locales/en/messages.json

@@ -52,6 +52,9 @@
   "tab": {
     "message": "Tab"
   },
+  "vault": {
+    "message": "Vault"
+  },
   "myVault": {
     "message": "My Vault"
   },

apps/browser/src/popup/scss/base.scss

@@ -438,6 +438,10 @@ main {
 .no-items,
 .full-loading-spinner {
   text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 
   .no-items-image {
     @include themify($themes) {

apps/browser/src/popup/tabs.component.html

@@ -17,7 +17,7 @@
           appA11yTitle="{{ 'myVault' | i18n }}"
           [attr.aria-pressed]="rlaMyVault.isActive"
         >
-          <i class="bwi bwi-lock-f bwi-2x" aria-hidden="true"></i>{{ "myVault" | i18n }}
+          <i class="bwi bwi-lock-f bwi-2x" aria-hidden="true"></i>{{ "vault" | i18n }}
         </button>
       </li>
       <li routerLinkActive="active" #rlaSend="routerLinkActive">

apps/browser/src/popup/vault/ciphers.component.html

@@ -78,14 +78,20 @@
     </div>
   </ng-container>
   <ng-container *ngIf="ciphers">
-    <div class="no-items" *ngIf="!ciphers.length">
-      <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
-      <ng-container *ngIf="loaded">
-        <p>{{ "noItemsInList" | i18n }}</p>
-        <button type="button" (click)="addCipher()" class="btn block primary link">
-          {{ "addItem" | i18n }}
-        </button>
-      </ng-container>
+    <div *ngIf="!ciphers.length">
+      <app-vault-select
+        *ngIf="showVaultFilter && !showGroupings()"
+        (onVaultSelectionChanged)="changeVaultSelection()"
+      ></app-vault-select>
+      <div class="no-items">
+        <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
+        <ng-container *ngIf="loaded">
+          <p>{{ "noItemsInList" | i18n }}</p>
+          <button type="button" (click)="addCipher()" class="btn block primary link">
+            {{ "addItem" | i18n }}
+          </button>
+        </ng-container>
+      </div>
     </div>
     <cdk-virtual-scroll-viewport
       itemSize="46"

apps/browser/src/popup/vault/vault-filter.component.html

@@ -23,6 +23,7 @@
   </div>
 </header>
 <main tabindex="-1">
+  <app-vault-select (onVaultSelectionChanged)="vaultFilterChanged()"></app-vault-select>
   <div class="no-items" *ngIf="(!ciphers || !ciphers.length) && !showSearching()">
     <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded"></i>
     <ng-container *ngIf="loaded">
@@ -33,7 +34,6 @@
       </button>
     </ng-container>
   </div>
-  <app-vault-select (onVaultSelectionChanged)="vaultFilterChanged()"></app-vault-select>
   <ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
     <div class="box list" *ngIf="favoriteCiphers">
       <h2 class="box-header">

apps/browser/src/popup/vault/vault-select.component.html

@@ -7,8 +7,9 @@
     aria-haspopup="menu"
     aria-controls="cdk-overlay-container"
     [attr.aria-expanded]="isOpen"
+    [attr.aria-label]="vaultFilterDisplay"
   >
-    <span>{{ vaultFilterDisplay }}&nbsp;</span>
+    {{ vaultFilterDisplay | ellipsis: 45 }}&nbsp;
     <i
       class="bwi bwi-sm"
       aria-hidden="true"
@@ -67,7 +68,7 @@
           class="bwi bwi-fw bwi-family"
           aria-hidden="true"
         ></i>
-        <span>&nbsp;{{ organization.name | ellipsis: 23:true }}</span>
+        <span>&nbsp;{{ organization.name | ellipsis: 21:true }}</span>
       </button>
     </div>
   </ng-template>

apps/browser/src/popup/vault/vault-select.component.ts

@@ -82,7 +82,9 @@ export class VaultSelectComponent implements OnInit {
 
   async load() {
     this.vaultFilter = this.vaultFilterService.getVaultFilter();
-    this.organizations = await this.vaultFilterService.buildOrganizations();
+    this.organizations = (await this.vaultFilterService.buildOrganizations()).sort((a, b) =>
+      a.name.localeCompare(b.name)
+    );
     this.enforcePersonalOwnwership =
       await this.vaultFilterService.checkForPersonalOwnershipPolicy();