add new-cipher-menu component (#15467)

* add new-cipher-menu component

* move new cipher menu to vault. clean up template

apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.html

@@ -103,48 +103,11 @@
     *ngIf="filter.type !== 'trash' && filter.collectionId !== Unassigned && organization"
     class="tw-shrink-0"
   >
-    <!-- "New" menu is always shown unless the user cannot create a cipher and cannot create a collection-->
-    <ng-container *ngIf="canCreateCipher || canCreateCollection">
-      <div appListDropdown>
-        <button
-          bitButton
-          buttonType="primary"
-          type="button"
-          [bitMenuTriggerFor]="addOptions"
-          id="newItemDropdown"
-          appA11yTitle="{{ 'new' | i18n }}"
-        >
-          <i class="bwi bwi-plus" aria-hidden="true"></i>
-          {{ "new" | i18n }}<i class="bwi tw-ml-2" aria-hidden="true"></i>
-        </button>
-        <bit-menu #addOptions aria-labelledby="newItemDropdown">
-          <ng-container *ngIf="canCreateCipher">
-            <button type="button" bitMenuItem (click)="addCipher(CipherType.Login)">
-              <i class="bwi bwi-globe" slot="start" aria-hidden="true"></i>
-              {{ "typeLogin" | i18n }}
-            </button>
-            <button type="button" bitMenuItem (click)="addCipher(CipherType.Card)">
-              <i class="bwi bwi-credit-card" slot="start" aria-hidden="true"></i>
-              {{ "typeCard" | i18n }}
-            </button>
-            <button type="button" bitMenuItem (click)="addCipher(CipherType.Identity)">
-              <i class="bwi bwi-id-card" slot="start" aria-hidden="true"></i>
-              {{ "typeIdentity" | i18n }}
-            </button>
-            <button type="button" bitMenuItem (click)="addCipher(CipherType.SecureNote)">
-              <i class="bwi bwi-sticky-note" slot="start" aria-hidden="true"></i>
-              {{ "note" | i18n }}
-            </button>
-          </ng-container>
-          <ng-container *ngIf="canCreateCollection">
-            <bit-menu-divider *ngIf="canCreateCipher"></bit-menu-divider>
-            <button type="button" bitMenuItem (click)="addCollection()">
-              <i class="bwi bwi-fw bwi-collection-shared" aria-hidden="true"></i>
-              {{ "collection" | i18n }}
-            </button>
-          </ng-container>
-        </bit-menu>
-      </div>
-    </ng-container>
+    <vault-new-cipher-menu
+      [canCreateCipher]="canCreateCipher"
+      [canCreateCollection]="canCreateCollection"
+      (cipherAdded)="addCipher($event)"
+      (collectionAdded)="addCollection()"
+    />
   </div>
 </app-header>

apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts

@@ -25,6 +25,7 @@ import {
   SearchModule,
   SimpleDialogOptions,
 } from "@bitwarden/components";
+import { NewCipherMenuComponent } from "@bitwarden/vault";
 
 import { HeaderModule } from "../../../../layouts/header/header.module";
 import { SharedModule } from "../../../../shared";
@@ -45,6 +46,7 @@ import { CollectionDialogTabType } from "../../shared/components/collection-dial
     HeaderModule,
     SearchModule,
     JslibModule,
+    NewCipherMenuComponent,
   ],
 })
 export class VaultHeaderComponent {