Add a way to add folders in the desktop ui migration milestone 1 (#18632)

apps/desktop/src/vault/app/vault-v3/vault.component.html

@@ -6,6 +6,7 @@
     (onCipherClicked)="viewCipher($event)"
     (onCipherRightClicked)="viewCipherMenu($event)"
     (onAddCipher)="addCipher($event)"
+    (onAddFolder)="addFolder()"
     [showPremiumCallout]="showPremiumCallout$ | async"
   >
   </app-vault-items-v2>

apps/desktop/src/vault/app/vault/vault-items-v2.component.html

@@ -95,5 +95,13 @@
         {{ itemTypes.labelKey | i18n }}
       </button>
     }
+    @if (desktopMigrationMilestone1()) {
+      <bit-menu-divider />
+
+      <button type="button" bitMenuItem (click)="onAddFolder.emit()">
+        <i class="bwi bwi-folder tw-mr-1" aria-hidden="true"></i>
+        {{ "folder" | i18n }}
+      </button>
+    }
   </bit-menu>
 </ng-template>

apps/desktop/src/vault/app/vault/vault-items-v2.component.ts

@@ -1,12 +1,13 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { Component, input } from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Component, input, output } from "@angular/core";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
 import { distinctUntilChanged, debounceTime } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultItemsComponent as BaseVaultItemsComponent } from "@bitwarden/angular/vault/components/vault-items.component";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { uuidAsString } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
@@ -32,6 +33,12 @@ import { SearchBarService } from "../../../app/layout/search/search-bar.service"
 export class VaultItemsV2Component<C extends CipherViewLike> extends BaseVaultItemsComponent<C> {
   readonly showPremiumCallout = input<boolean>(false);
 
+  readonly onAddFolder = output<void>();
+
+  protected readonly desktopMigrationMilestone1 = toSignal(
+    this.configService.getFeatureFlag$(FeatureFlag.DesktopUiMigrationMilestone1),
+  );
+
   protected CipherViewLikeUtils = CipherViewLikeUtils;
 
   constructor(

libs/angular/src/vault/components/vault-items.component.ts

@@ -94,7 +94,7 @@ export class VaultItemsComponent<C extends CipherViewLike> implements OnDestroy
     protected cipherService: CipherService,
     protected accountService: AccountService,
     protected restrictedItemTypesService: RestrictedItemTypesService,
-    private configService: ConfigService,
+    protected configService: ConfigService,
   ) {
     this.subscribeToCiphers();