[PS-1341] Add folder to item view (#3347)

* Initial - add folder id to popup item view

* Add folder service to view component

* Move folder info higher in the item view as proper box

* Add folder name handling to component

* Add folder field to browser view

* Add folder field to desktop view

* Make folder field draggable

following the merging of https://github.com/bitwarden/clients/pull/3321 also make the folder field draggable

* Use `<label>` and readonly `<input>`

In anticipation of https://github.com/bitwarden/clients/pull/3485 being merged

* Changes from review

- change input name to `folderName`, match it in the `for` attribute on the `<label>`
- add an `if` check before querying folder names

* Match `name` to `id`

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

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

@@ -475,6 +475,20 @@
       </div>
     </div>
   </div>
+  <div class="box" *ngIf="cipher.folderId">
+    <div class="box-content">
+      <div class="box-content-row">
+        <label
+          for="folderName"
+          class="draggable"
+          draggable="true"
+          (dragstart)="setTextDataOnDrag($event, folder.name)"
+          >{{ "folder" | i18n }}</label
+        >
+        <input id="folderName" type="text" name="folderName" [value]="folder.name" readonly />
+      </div>
+    </div>
+  </div>
   <div class="box" *ngIf="cipher.notes">
     <h2 class="box-header">
       <label

apps/browser/src/popup/vault/view.component.ts

@@ -11,6 +11,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
+import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -43,6 +44,7 @@ export class ViewComponent extends BaseViewComponent {
 
   constructor(
     cipherService: CipherService,
+    folderService: FolderService,
     totpService: TotpService,
     tokenService: TokenService,
     i18nService: I18nService,
@@ -67,6 +69,7 @@ export class ViewComponent extends BaseViewComponent {
   ) {
     super(
       cipherService,
+      folderService,
       totpService,
       tokenService,
       i18nService,

apps/desktop/src/app/vault/view.component.html

@@ -422,6 +422,20 @@
         </div>
       </div>
     </div>
+    <div class="box" *ngIf="cipher.folderId">
+      <div class="box-content">
+        <div class="box-content-row">
+          <label
+            for="folderName"
+            class="draggable"
+            draggable="true"
+            (dragstart)="setTextDataOnDrag($event, folder.name)"
+            >{{ "folder" | i18n }}</label
+          >
+          <input id="folderName" type="text" name="folderName" [value]="folder.name" readonly />
+        </div>
+      </div>
+    </div>
     <div class="box" *ngIf="cipher.notes">
       <h2 class="box-header">
         <span

apps/desktop/src/app/vault/view.component.ts

@@ -15,6 +15,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
+import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -36,6 +37,7 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
 
   constructor(
     cipherService: CipherService,
+    folderService: FolderService,
     totpService: TotpService,
     tokenService: TokenService,
     i18nService: I18nService,
@@ -55,6 +57,7 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
   ) {
     super(
       cipherService,
+      folderService,
       totpService,
       tokenService,
       i18nService,

libs/angular/src/components/view.component.ts

@@ -8,6 +8,7 @@ import {
   OnInit,
   Output,
 } from "@angular/core";
+import { firstValueFrom } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -16,6 +17,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
+import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
@@ -31,6 +33,7 @@ import { EncArrayBuffer } from "@bitwarden/common/models/domain/enc-array-buffer
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { AttachmentView } from "@bitwarden/common/models/view/attachment.view";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
+import { FolderView } from "@bitwarden/common/models/view/folder.view";
 import { LoginUriView } from "@bitwarden/common/models/view/login-uri.view";
 
 const BroadcasterSubscriptionId = "ViewComponent";
@@ -58,6 +61,7 @@ export class ViewComponent implements OnDestroy, OnInit {
   totpLow: boolean;
   fieldType = FieldType;
   checkPasswordPromise: Promise<number>;
+  folder: FolderView;
 
   private totpInterval: any;
   private previousCipherId: string;
@@ -65,6 +69,7 @@ export class ViewComponent implements OnDestroy, OnInit {
 
   constructor(
     protected cipherService: CipherService,
+    protected folderService: FolderService,
     protected totpService: TotpService,
     protected tokenService: TokenService,
     protected i18nService: I18nService,
@@ -112,6 +117,12 @@ export class ViewComponent implements OnDestroy, OnInit {
     this.showPremiumRequiredTotp =
       this.cipher.login.totp && !this.canAccessPremium && !this.cipher.organizationUseTotp;
 
+    if (this.cipher.folderId) {
+      this.folder = await (
+        await firstValueFrom(this.folderService.folderViews$)
+      ).find((f) => f.id == this.cipher.folderId);
+    }
+
     if (
       this.cipher.type === CipherType.Login &&
       this.cipher.login.totp &&