separate out "new" button implementations for extension refresh (#12002)

apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html

@@ -104,7 +104,9 @@
     *ngIf="filter.type !== 'trash' && filter.collectionId !== Unassigned && organization"
     class="tw-shrink-0"
   >
-    <div *ngIf="canCreateCipher && canCreateCollection" appListDropdown>
+    <!-- "New" menu is always shown for Extension Refresh unless the user cannot create a cipher -->
+    <ng-container *ngIf="extensionRefreshEnabled && canCreateCipher; else nonRefresh">
+      <div appListDropdown>
         <button
           bitButton
           buttonType="primary"
@@ -117,8 +119,6 @@
           {{ "new" | i18n }}<i class="bwi tw-ml-2" aria-hidden="true"></i>
         </button>
         <bit-menu #addOptions aria-labelledby="newItemDropdown">
-        <ng-container [ngSwitch]="extensionRefreshEnabled">
-          <ng-container *ngSwitchCase="true">
           <button type="button" bitMenuItem (click)="addCipher(CipherType.Login)">
             <i class="bwi bwi-globe" slot="start" aria-hidden="true"></i>
             {{ "typeLogin" | i18n }}
@@ -135,21 +135,44 @@
             <i class="bwi bwi-sticky-note" slot="start" aria-hidden="true"></i>
             {{ "note" | i18n }}
           </button>
+          <ng-container *ngIf="canCreateCollection">
             <bit-menu-divider></bit-menu-divider>
+            <button type="button" bitMenuItem (click)="addCollection()">
+              <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
+              {{ "collection" | i18n }}
+            </button>
           </ng-container>
-          <ng-container *ngSwitchCase="false">
+        </bit-menu>
+      </div>
+    </ng-container>
+
+    <ng-template #nonRefresh>
+      <!-- Show a menu when the user can create a cipher and collection -->
+      <div *ngIf="canCreateCipher && canCreateCollection" appListDropdown>
+        <button
+          bitButton
+          buttonType="primary"
+          type="button"
+          [bitMenuTriggerFor]="addOptions"
+          id="newItemDropdown"
+          appA11yTitle="{{ 'new' | i18n }}"
+        >
+          <i class="bwi bwi-plus-f" aria-hidden="true"></i>
+          {{ "new" | i18n }}<i class="bwi tw-ml-2" aria-hidden="true"></i>
+        </button>
+        <bit-menu #addOptions aria-labelledby="newItemDropdown">
           <button type="button" bitMenuItem (click)="addCipher()">
             <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>
             {{ "item" | i18n }}
           </button>
-          </ng-container>
-        </ng-container>
           <button type="button" bitMenuItem (click)="addCollection()">
             <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
             {{ "collection" | i18n }}
           </button>
         </bit-menu>
       </div>
+
+      <!-- Show a single button when the user can only create a cipher -->
       <button
         *ngIf="canCreateCipher && !canCreateCollection"
         type="button"
@@ -161,6 +184,7 @@
         {{ "newItem" | i18n }}
       </button>
 
+      <!-- Show a single button when the user can only create a collection -->
       <button
         *ngIf="canCreateCollection && !canCreateCipher"
         type="button"
@@ -171,5 +195,6 @@
         <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
         {{ "newCollection" | i18n }}
       </button>
+    </ng-template>
   </div>
 </app-header>

apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts

@@ -57,7 +57,7 @@ export class VaultHeaderComponent implements OnInit {
    */
   @Input() loading: boolean;
 
-  /** Current active fitler */
+  /** Current active filter */
   @Input() filter: RoutedVaultFilterModel;
 
   /** The organization currently being viewed */