[PS-1341] Add folder to item view

[patrickhlauke]

trafficstars

Type of change

- [ ] Bug fix
- [x] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Currently, the item view does not give any indication if the item is in a folder or not. This PR adds an extra"Folder: ..." label/value to the item info.

Code changes

• apps/browser/src/popup/vault/view.component.html and apps/desktop/src/app/vault/view.component.html: add "Folder:..." label/value box to the view
• apps/browser/src/popup/vault/view.component.ts and apps/desktop/src/app/vault/view.component.ts: add FolderView to the definition
• libs/angular/src/components/view.component.ts: add code to turn folderId into actual reference to the specific folder the cipher is in, if any (with thanks to @Hinton for pushing me in the right direction)

Screenshots

Before you submit

- [x] I have checked for **linting** errors (`npm run lint`) (required)
- [ ] I have added **unit tests** where it makes sense to do so (encouraged but not required)
- [ ] This change requires a **documentation update** (notify the documentation team)
- [ ] This change has particular **deployment requirements** (notify the DevOps team)

[bitwarden-bot]

Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PS-1341

[patrickhlauke]

@djsmith85 my angular skills/understanding of how the codebase is organised here fail me ... I can grab the folder id, but not sure how to now grab the actual text/name of the folder. something involving folders$, but not quite sure how to grab/populate that. any chance you could point me in the right direction, or maybe get somebody to collab with me on this?

[patrickhlauke]

also pinging @Hinton just in case he knows :)

[Hinton]

@patrickhlauke you should be able to grab the folder from the id using something like

const folder (await firstValueFrom(this.folderService.folderView$)).find(f => f.id == <id>);

FirstValueFrom subscribes to the observable and returns the first value it gets and then unsubscribes, allowing you to get all decrypted folders, which we can filter using the id.

[patrickhlauke]

@hinton sadly, my lack of angular knowledge now means i have zero idea where to slot that in...possibly bitten off more than i can chew here.

[Hinton]

Hmm, one solution would be to add a folder field to libs/angular/src/components/view.component.ts called folder, and fetch it in load after cipher.decrypt, line 110.

this.cipher = await cipher.decrypt();
this.canAccessPremium = await this.stateService.getCanAccessPremium();

this.folder (await firstValueFrom(this.folderService.folderView$)).find(f => f.id == <id>);

That would also allow you to use it in the other clients. The folderService would need to be added as a constructor argument.

[patrickhlauke]

incidentally, while this is not ready yet (not found the time to actually work out how to do this last bit of getting the actual folder name), wondering if @danielleflinn thinks this stands a chance to make it into the product as well (as it's adjacent to something like https://github.com/bitwarden/clients/pull/3181)?

[sukhleenb]

Hey Patrick! We do think including the folder name will be valuable data to display on this page. Since we’re looking into adding the Created date (# 3181), we’re leaning towards displaying the folder name in a slightly different pattern.

Let me know if you’d like to change your PR to reflect the changes shown in the screenshot (folder name form field UI beneath the website field). If the item does not exist in a folder, we just wouldn't show that field.

[patrickhlauke]

Created date (# https://github.com/bitwarden/clients/pull/3181), we’re leaning towards displaying the folder name in a slightly different pattern.

Let me know if you’d like to change your PR to reflect the changes shown in the screenshot (folder name form field UI beneath the website field).

yup, looks good. was initially aiming at the most minimal UI change, but if you're happy with the more obvious one shown in that screenshot, I'll go for something like it (once I worked out the missing bit of how to get the actual human-readable folder name)

[patrickhlauke]

with thanks to @Hinton for putting me on the right track (though it still needed a lot of trial and error on my part), this is now ready for review :)

[patrickhlauke]

if https://github.com/bitwarden/clients/pull/3321 gets merged first, this will also need to have the drag-n-drop bit added

[patrickhlauke]

if #3321 gets merged first, this will also need to have the drag-n-drop bit added

done

[patrickhlauke]

Updated to use <label> / <input type="text" readonly> (in anticipation of https://github.com/bitwarden/clients/pull/3485)

[patrickhlauke]

Thanks @djsmith85 ... I'll have a look at all the above comments in a moment :+1:

[djsmith85]

@patrickhlauke I've received approval from QA and this is ready to get merged. Thank you for your work on this.