[PM-6825] Browser Refresh - Initial List Items #9199

shane-melton · 2024-05-15T19:09:13Z

Type of change

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

Objective

Introduce the new vault list item components and services to be used in the new combined vault view.

Code changes

New Components

VaultListItemContainer
- A presentational container to list VaultListItems with a section header
AutofillVaultListItems
- A smart component that wraps a VaultListItemContainer for auto fill items. It also includes the necessary logic to hide/show the autofill tooltip message when no autofill items are available.

New `VaultPopupItemsService`

This service is responsible for determining which ciphers should be visible on the new vault page. It provides observables for each of the cipher list sections (autofill, favorites, all items) and applies the necessary logic to sort ciphers and ensure none repeat between the sections. Eventually, we should be able to apply filtering/searching logic to the base cipher list and then our new filter/search components will be able to influence what is shown via this service.

It also has a few helpers:

emptyVault$ - Used to help determine if the vault is empty and the empty screen should be shown
autofillAllowed$ - Checks if the popup is not in a popout and a current tab is available for autofill.
hasFilterApplied$ - Placeholder value for now. Is used to show the autofill tip when no filters are applied and no autofill suggestions are present.
noFilteredResults$ - Placeholder value for now. Is used to show the No Search Results screen. Will need to be updated when filtering logic is added.

Known Issues / Pending Work

Empty and No Results pages are not vertically centered. This appears to be a limitation of the popout page. The popup-page > main > div element doesn't fill the parent's height and so I can't get the no items icon to fill and center. cc: @willmartian
The No Results icon will need to be updated at the CL level to match the Figma. Unless we want to introduce the new icon separately? cc: @willmartian
~~The Empty Vault icon colors are not available to be themed by Tailwind yet.~~
~~Section headers are placeholders and will need to be updated to the component in [PM-7878] PopupSectionHeader component #9107~~
~~Vault page header is a placeholder and will need to be removed/resolved with [PM-6823] Vault Header Refresh #9197~~

Screenshots

No autofill suggestions with tip/helper

Autofill suggestions and favorites and all items

Hidden autofill suggestions when in Popout

Empty Vault

No Results

Before you submit

Please add unit tests where it makes sense to do so (encouraged but not required)
If this change requires a documentation update - notify the documentation team
If this change has particular deployment requirements - notify the DevOps team
Ensure that all UI additions follow WCAG AA requirements

…ty for reuse

… components

…e autofill logic

codecov · 2024-05-15T19:23:09Z

Codecov Report

Attention: Patch coverage is 47.31183% with 49 lines in your changes are missing coverage. Please review.

Project coverage is 28.14%. Comparing base (983a82c) to head (2b7c697).
Report is 1 commits behind head on main.

Files	Patch %	Lines
...vault/popup/components/vault/vault-v2.component.ts	0.00%	18 Missing ⚠️
...-list-items/autofill-vault-list-items.component.ts	0.00%	13 Missing ⚠️
...-container/vault-list-items-container.component.ts	0.00%	7 Missing ⚠️
libs/common/src/vault/services/cipher.service.ts	20.00%	4 Missing ⚠️
...owser/src/vault/popup/components/vault-v2/index.ts	0.00%	2 Missing ⚠️
.../vault/popup/services/vault-popup-items.service.ts	95.55%	1 Missing and 1 partial ⚠️
libs/components/src/icon/icons/vault.ts	0.00%	2 Missing ⚠️
libs/components/src/icon/icons/index.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9199      +/-   ##
==========================================
+ Coverage   28.11%   28.14%   +0.02%     
==========================================
  Files        2363     2368       +5     
  Lines       69922    70011      +89     
  Branches    13149    13158       +9     
==========================================
+ Hits        19661    19704      +43     
- Misses      48703    48748      +45     
- Partials     1558     1559       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2024-05-15T19:33:11Z

Checkmarx One – Scan Summary & Details – 3b0282d9-0536-44d1-92b8-2894e10e7b5e

New Issues

Issue	Source File / Package	Checkmarx Insight
Angular_Improper_Type_Pipe_Usage	/apps/browser/src/vault/popup/components/vault/vault-v2.component.html: 37	Attack Vector
Angular_Improper_Type_Pipe_Usage	/apps/browser/src/vault/popup/components/vault/vault-v2.component.html: 27	Attack Vector
Angular_Improper_Type_Pipe_Usage	/apps/browser/src/vault/popup/components/vault/vault-v2.component.html: 24	Attack Vector
Angular_Improper_Type_Pipe_Usage	/apps/browser/src/vault/popup/components/vault/vault-v2.component.html: 14	Attack Vector

willmartian · 2024-05-15T21:42:50Z

The No Results icon will need to be updated at the CL level to match the Figma. Unless we want to introduce the new icon separately?

Passing this on to @danielleflinn , do we plan to still use the current no-items icon anywhere? https://components.bitwarden.com/?path=/docs/component-library-no-items--docs

Or should all instances of it be updated to the icon introduced here?

willmartian · 2024-05-15T21:43:49Z

Empty and No Results pages are not vertically centered. This appears to be a limitation of the popout page. The popup-page > main > div element doesn't fill the parent's height and so I can't get the no items icon to fill and center.

@shane-melton Taking a look! 👀
edit: tomorrow

apps/browser/src/_locales/en/messages.json

...popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts

apps/browser/src/vault/popup/components/vault-v2/vault-list-item/vault-list-item.component.html

apps/browser/src/vault/popup/components/vault-v2/vault-list-item/vault-list-item.component.ts

...pup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

apps/browser/src/vault/popup/services/vault-popup-items.service.ts

libs/components/src/icon/icons/index.ts

apps/browser/src/vault/popup/components/vault-v2/vault-list-item/vault-list-item.component.html

willmartian · 2024-05-16T23:21:27Z

...pup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

+          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>


These icon buttons should have aria labels

Fixed 0a72374

willmartian · 2024-05-17T16:53:28Z

...pup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

+  <bit-item-group>
+    <bit-item *ngFor="let cipher of ciphers">
+      <a bit-item-content [routerLink]="['/view-cipher']" [queryParams]="{ cipherId: cipher.id }">
+        <app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>


I don't think it needs to part of the CL--components can be used across clients without being part of the CL lib. The CL is for low level domain-agnostic UI components, whereas this is tied into the domain-specific idea of a vault cipher.

Instead, I would move these global styles into app-vault-icon's template with Tailwind. This will make the component portable. (Also a good opportunity to make it standalone.)

willmartian · 2024-05-17T17:45:46Z

Empty and No Results pages are not vertically centered. This appears to be a limitation of the popout page. The popup-page > main > div element doesn't fill the parent's height and so I can't get the no items icon to fill and center.

Should be fixed when #9237 is merged. See story.

willmartian · 2024-05-21T19:30:28Z

apps/browser/src/popup/app.module.ts

+import {
+  AvatarModule,
+  ButtonModule,
+  IconButtonModule,
+  NoItemsModule,
+  SectionComponent,
+  ToastModule,
+  TypographyModule,
+} from "@bitwarden/components";


Only blocking item, everything else is a nit pick:

Do these need to be in the AppModule? Could we instead make VaultV2Component standalone? (I think that is why they were brought in.)

Ah, at the time I originally started, the CurrentAccountComponent and PopOutComponent where not standalone and I couldn't import them into a standalone VaultV2Component. However, now that they're both standalone I can do that.

Doing so also removes the need for a VaultV2Module as everything it exported for the AppModule can now be imported directly in VaultV2Component.

Addressed in f332778

...t/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts

apps/desktop/src/scss/misc.scss

willmartian · 2024-05-21T19:41:23Z

...pup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

+  <bit-item-group>
+    <bit-item *ngFor="let cipher of ciphers">
+      <a bit-item-content [routerLink]="['/view-cipher']" [queryParams]="{ cipherId: cipher.id }">
+        <app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>


Are we able to remove the global styles mentioned above in this thread? Are they still needed after your latest changes?

apps/browser/src/vault/popup/components/vault/vault-v2.component.html

willmartian

LGTM! Thanks for iterating with me :)

* [PM-6825] Add temporary vault page header * [PM-6825] Expose cipherViews$ observable * [PM-6825] Refactor getAllDecryptedForUrl to expose filter functionality for reuse * [PM-6825] Introduce VaultPopupItemsService * [PM-6825] Introduce initial VaultListItem and VaultListItemsContainer components * [PM-6825] Add VaultListItems to VaultV2 component * [PM-6825] Introduce autofill-vault-list-items.component to encapsulate autofill logic * [PM-6825] Add temporary Vault icon * [PM-6825] Add empty and no results states to Vault tab * [PM-6825] Add unit tests for vault popup items service * [PM-6825] Negate noFilteredResults placeholder * [PM-6825] Cleanup new Vault components * [PM-6825] Move new components into its own module * [PM-6825] Fix missing button type * [PM-6825] Add booleanAttribute to showAutofill input * [PM-6825] Replace empty refresh BehaviorSubject with Subject * [PM-6825] Combine *ngIfs for vault list items container * [PM-6825] Use popup-section-header component * [PM-6825] Use small variant for icon buttons * [PM-6825] Use anchor tag for vault items * [PM-6825] Consolidate vault-list-items-container to include list item component functionality directly * [PM-6825] Add Tailwind classes to new Vault icon * [PM-6825] Remove temporary header comment * [PM-6825] Fix auto fill suggestion font size and padding * [PM-6825] Use tailwind for vault icon styling * [PM-6825] Add libs/angular to tailwind.config content * [PM-6825] Cleanup missing i18n * [PM-6825] Make VaultV2 standalone and cleanup Browser App module * [PM-6825] Use explicit type annotation * [PM-6825] Use property binding instead of interpolation

… Switching Tabs (#9300) * [PM-8322] Firefox Inline Autofill Menu Not Propagation Correctly When Switching Tabs * [PM-8322] Firefox Inline Autofill Menu Not Propagation Correctly When Switching Tabs * Add missing RouterModule to the CurrentAccountComponent (#9295) Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com> * [PM-6825] Browser Refresh - Initial List Items (#9199) * [PM-6825] Add temporary vault page header * [PM-6825] Expose cipherViews$ observable * [PM-6825] Refactor getAllDecryptedForUrl to expose filter functionality for reuse * [PM-6825] Introduce VaultPopupItemsService * [PM-6825] Introduce initial VaultListItem and VaultListItemsContainer components * [PM-6825] Add VaultListItems to VaultV2 component * [PM-6825] Introduce autofill-vault-list-items.component to encapsulate autofill logic * [PM-6825] Add temporary Vault icon * [PM-6825] Add empty and no results states to Vault tab * [PM-6825] Add unit tests for vault popup items service * [PM-6825] Negate noFilteredResults placeholder * [PM-6825] Cleanup new Vault components * [PM-6825] Move new components into its own module * [PM-6825] Fix missing button type * [PM-6825] Add booleanAttribute to showAutofill input * [PM-6825] Replace empty refresh BehaviorSubject with Subject * [PM-6825] Combine *ngIfs for vault list items container * [PM-6825] Use popup-section-header component * [PM-6825] Use small variant for icon buttons * [PM-6825] Use anchor tag for vault items * [PM-6825] Consolidate vault-list-items-container to include list item component functionality directly * [PM-6825] Add Tailwind classes to new Vault icon * [PM-6825] Remove temporary header comment * [PM-6825] Fix auto fill suggestion font size and padding * [PM-6825] Use tailwind for vault icon styling * [PM-6825] Add libs/angular to tailwind.config content * [PM-6825] Cleanup missing i18n * [PM-6825] Make VaultV2 standalone and cleanup Browser App module * [PM-6825] Use explicit type annotation * [PM-6825] Use property binding instead of interpolation * [PM-7076] Create settings-v2.component (#9213) * Create settings-v2.component Create new settings page Add routing based on extension refresh flag * Wrap anchors around the icons * Add account-switcher to settings page --------- Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com> * [PM-8289] Inline menu content script does not update when user updates setting (#9279) * [PM-8289] Inline menu content script does not update whne user updates setting * [PM-8289] Fixing issue present within Jest tests * [PM-8289] Triggering a reload of autofill scripts when a user logs into their account --------- Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com> Co-authored-by: Shane Melton <smelton@bitwarden.com>

shane-melton added 15 commits May 13, 2024 16:58

[PM-6825] Add temporary vault page header

1f80d29

[PM-6825] Expose cipherViews$ observable

5351a71

[PM-6825] Refactor getAllDecryptedForUrl to expose filter functionali…

292dfc8

…ty for reuse

[PM-6825] Introduce VaultPopupItemsService

8364f74

[PM-6825] Introduce initial VaultListItem and VaultListItemsContainer…

91328ba

… components

[PM-6825] Add VaultListItems to VaultV2 component

742277f

[PM-6825] Introduce autofill-vault-list-items.component to encapsulat…

2c361a6

…e autofill logic

[PM-6825] Add temporary Vault icon

d03ad5b

[PM-6825] Add empty and no results states to Vault tab

a29f9ce

[PM-6825] Add unit tests for vault popup items service

ed2b84f

[PM-6825] Negate noFilteredResults placeholder

1ae4c3e

[PM-6825] Cleanup new Vault components

84255e1

[PM-6825] Move new components into its own module

22f83d2

Merge branch 'main' into vault/pm-6825/list-item-containers

244a49a

[PM-6825] Fix missing button type

77a04a1

shane-melton marked this pull request as ready for review May 15, 2024 19:23

shane-melton requested review from a team as code owners May 15, 2024 19:23

shane-melton requested a review from gbubemismith May 15, 2024 19:23

willmartian reviewed May 15, 2024

View reviewed changes

shane-melton added 3 commits May 15, 2024 15:27

[PM-6825] Add booleanAttribute to showAutofill input

0163609

[PM-6825] Replace empty refresh BehaviorSubject with Subject

f949440

[PM-6825] Combine *ngIfs for vault list items container

e24dd06

danielleflinn reviewed May 16, 2024

View reviewed changes

apps/browser/src/vault/popup/components/vault-v2/vault-list-item/vault-list-item.component.html Outdated Show resolved Hide resolved

shane-melton added 2 commits May 15, 2024 19:40

Merge branch 'main' into vault/pm-6825/list-item-containers

7aca642

Merge branch 'main' into vault/pm-6825/list-item-containers

16bcb98

willmartian reviewed May 17, 2024

View reviewed changes

shane-melton added 2 commits May 17, 2024 10:02

Merge branch 'main' into vault/pm-6825/list-item-containers

ffe107c

[PM-6825] Fix auto fill suggestion font size and padding

72c77ed

willmartian mentioned this pull request May 17, 2024

[CL-290] make popup layout grow to full height #9237

Merged

shane-melton added 7 commits May 17, 2024 13:52

[PM-6825] Use tailwind for vault icon styling

e3efe8c

[PM-6825] Add libs/angular to tailwind.config content

f7e9959

Merge branch 'main' into vault/pm-6825/list-item-containers

fc83dd1

Merge branch 'main' into vault/pm-6825/list-item-containers

79f20b5

[PM-6825] Cleanup missing i18n

0a72374

Merge branch 'main' into vault/pm-6825/list-item-containers

69cb257

Merge branch 'main' into vault/pm-6825/list-item-containers

b3fc955

Jingo88 previously approved these changes May 21, 2024

View reviewed changes

willmartian reviewed May 21, 2024

View reviewed changes

[PM-6825] Make VaultV2 standalone and cleanup Browser App module

f332778

shane-melton dismissed Jingo88’s stale review via f332778 May 21, 2024 20:37

shane-melton added 3 commits May 21, 2024 13:50

[PM-6825] Use explicit type annotation

f7e1a21

[PM-6825] Use property binding instead of interpolation

7d3d3c2

Merge branch 'main' into vault/pm-6825/list-item-containers

2b7c697

shane-melton requested review from Jingo88 and willmartian May 21, 2024 20:56

willmartian approved these changes May 21, 2024

View reviewed changes

shane-melton enabled auto-merge (squash) May 21, 2024 21:00

Jingo88 approved these changes May 21, 2024

View reviewed changes

shane-melton merged commit 3d0e0d2 into main May 21, 2024
60 checks passed

shane-melton deleted the vault/pm-6825/list-item-containers branch May 21, 2024 21:05

shane-melton mentioned this pull request May 22, 2024

[PM-6825] Fix app icon styling in Browser #9311

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PM-6825] Browser Refresh - Initial List Items #9199

[PM-6825] Browser Refresh - Initial List Items #9199

shane-melton commented May 15, 2024 •

edited

codecov bot commented May 15, 2024 •

edited

github-actions bot commented May 15, 2024 •

edited

willmartian commented May 15, 2024 •

edited

willmartian commented May 15, 2024 •

edited

willmartian May 16, 2024

shane-melton May 20, 2024

willmartian May 17, 2024

willmartian commented May 17, 2024

willmartian May 21, 2024 •

edited

shane-melton May 21, 2024

willmartian May 21, 2024 •

edited

willmartian left a comment

[PM-6825] Browser Refresh - Initial List Items #9199

[PM-6825] Browser Refresh - Initial List Items #9199

Conversation

shane-melton commented May 15, 2024 • edited

Type of change

Objective

Code changes

New Components

New VaultPopupItemsService

Known Issues / Pending Work

Screenshots

No autofill suggestions with tip/helper

Autofill suggestions and favorites and all items

Hidden autofill suggestions when in Popout

Empty Vault

No Results

Before you submit

codecov bot commented May 15, 2024 • edited

Codecov Report

github-actions bot commented May 15, 2024 • edited

New Issues

willmartian commented May 15, 2024 • edited

willmartian commented May 15, 2024 • edited

willmartian May 16, 2024

Choose a reason for hiding this comment

shane-melton May 20, 2024

Choose a reason for hiding this comment

willmartian May 17, 2024

Choose a reason for hiding this comment

willmartian commented May 17, 2024

willmartian May 21, 2024 • edited

Choose a reason for hiding this comment

shane-melton May 21, 2024

Choose a reason for hiding this comment

willmartian May 21, 2024 • edited

Choose a reason for hiding this comment

willmartian left a comment

Choose a reason for hiding this comment

shane-melton commented May 15, 2024 •

edited

New `VaultPopupItemsService`

codecov bot commented May 15, 2024 •

edited

github-actions bot commented May 15, 2024 •

edited

willmartian commented May 15, 2024 •

edited

willmartian commented May 15, 2024 •

edited

willmartian May 21, 2024 •

edited

willmartian May 21, 2024 •

edited