Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PM-16243] Allow users to collapse extension sections #12756

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

vleague2
Copy link
Contributor

@vleague2 vleague2 commented Jan 8, 2025

🎟️ Tracking

PM-16243

📔 Objective

This PR adds the ability to collapse the "favorites" and "all items" sections of the browser extension vault. The collapse state is stored locally so that the user's preference is remembered when the extension is opened again on the same device.

When searching or filtering, the collapsed sections are automatically expanded to display search results. The user's preference is remembered when exiting a search/filter view. If a user changes the collapse state of a section while searching or filtering, that preference will be carried to the main vault page and remembered.

📸 Screenshots

Functionality of collapsible sections:

Screen.Recording.2025-01-09.at.9.43.06.AM.mov

Autofill section is not collapsible:

Screen.Recording.2025-01-09.at.9.45.27.AM.mov

⏰ Reminders before review

  • Contributor guidelines followed
  • All formatters and local linters executed and passed
  • Written new unit and / or integration tests where applicable
  • Protected functional changes with optionality (feature flags)
  • Used internationalization (i18n) for all UI strings
  • CI builds passed
  • Communicated to DevOps any deployment requirements
  • Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

  • 👍 (:+1:) or similar for great changes
  • 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
  • ❓ (:question:) for questions
  • 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
  • 🎨 (:art:) for suggestions / improvements
  • ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
  • 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
  • ⛏ (:pick:) for minor or nitpick changes

@willmartian willmartian self-requested a review January 8, 2025 17:14
Copy link
Contributor

github-actions bot commented Jan 9, 2025

Logo
Checkmarx One – Scan Summary & Details3d05dfc9-8336-41d6-8e4e-e6915d92344c

Fixed Issues

Severity Issue Source File / Package
MEDIUM Client_Privacy_Violation /libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.html: 17
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 484
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 457
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html: 15
MEDIUM Client_Privacy_Violation /apps/browser/src/autofill/popup/settings/autofill-v1.component.ts: 104
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 212
MEDIUM Client_Privacy_Violation /apps/desktop/src/vault/app/vault/view.component.html: 209
MEDIUM Client_Privacy_Violation /apps/browser/src/vault/popup/settings/trash-list-items-container/trash-list-items-container.component.html: 6
MEDIUM Client_Privacy_Violation /apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts: 50
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 78
MEDIUM Client_Privacy_Violation /apps/browser/src/autofill/popup/settings/autofill-v1.component.ts: 104
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html: 53
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html: 31
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM Client_Privacy_Violation /apps/web/src/app/vault/individual-vault/view.component.ts: 103
MEDIUM

More results are available on AST platform

@vleague2 vleague2 marked this pull request as ready for review January 9, 2025 16:08
@vleague2 vleague2 requested review from a team as code owners January 9, 2025 16:08
Copy link

codecov bot commented Jan 9, 2025

Codecov Report

Attention: Patch coverage is 0% with 42 lines in your changes missing coverage. Please review.

Project coverage is 34.12%. Comparing base (a527aa9) to head (b7a02d6).
Report is 4 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...ault/popup/services/vault-popup-section.service.ts 0.00% 30 Missing ⚠️
...-container/vault-list-items-container.component.ts 0.00% 12 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #12756      +/-   ##
==========================================
- Coverage   34.15%   34.12%   -0.03%     
==========================================
  Files        2937     2938       +1     
  Lines       90353    90392      +39     
  Branches    16967    16971       +4     
==========================================
- Hits        30856    30847       -9     
- Misses      57042    57090      +48     
  Partials     2455     2455              

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

@vleague2 vleague2 requested a review from merissaacosta January 9, 2025 17:18
Copy link
Member

@danielleflinn danielleflinn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the chrome build locally:
✅ Favorites and all items have collapsable indicator when hovered
✅ Focus indicator visually looks as expected
✅ Click target is WCAG AA minimum 24px
✅ Screen reader properly announces if the section is expanded or collapsed
✅ Closed sections auto expand when a search term or filter is applied
✅ Closed/Open state persists when extension is closed, user moves to a different tab and returns, or searches and clears the search

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants