[end user vault refresh] Filters

addisonbeck commented 2 years ago

https://bitwarden.atlassian.net/browse/SG-80?atlOrigin=eyJpIjoiNWU1OWRhMDYyMTBmNDdjNWFlMDFlOTMxNGEwMTkxNTMiLCJwIjoiaiJ9

Type of change

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

Objective

The product initiative here is to implement the filters section of the end user vault refresh epic. This includes:

Allowing top level filters (types, folders, collections) to be collapsable
Adding a filter for organizations (or lack there of)
Improved accessibility (using correct tags, expanded attributes, etc.)
Changing the .active vault filter style from a black bar across the item to a highlight text and bold font weight

There are some other initiatives in here, mostly around refactoring. These include:

Removing the suffix Service from our route guards. This work was mostly done in jslib and is being carried into desktop with this PR.
Splitting the GroupingsComponent into a module with several smaller components. This is also mostly done in jslib, and is being implemented in this PR.
Created a SharedModule as an effort to clean up AppModule, and to reuse shared modules in other modules. This is a pretty standard practice in Angular applications.
Extracting the scss from the left nav into a separate file. This was mostly a necessity in order to make sense of what was going on with the styles during development, but is an extra refactor none the less.
Making the navigation toggle between My Vault and BW Send sticky at the bottom of the nav. This just kind of happened during development, but is certainly the behavior we want vs. it scrolling.

I am not planning to add any more refactoring initiatives. I'm happy to discuss them, but this is already a long list of changes and I need to get to other tickets.

Code changes

Removed the Service suffix from LoginGuard and relocated it to a guards folder
Split the GroupingsComponent into a VaultFiltersModule with components for each filter type
Developed a new filter type for organizations - OrganizationFilterComponent
Allowed for filter headers to be collapsible as individual nodes (most of this work is in jslib)
Massive HTML restructuring of filters in order to get the accessibility changes in. Previously each node consisted of an <a> tag with a click event that performed the filter, but that <a> tag could have any number of <span> or <i> tags inside of it that had their own click events. I changed all of this so every clickable element is a <button>, and added the attributes requested by design.
Massive SCSS restructuring to match the HTML restructuring. I left the nested node rules as is because it made my brain hurt.
Changed the .active style for selected nodes as requested.

Screenshots

! I noticed that these screenshots use inconsistent casing for "All Vaults". This is fixed by [bug] Apply text-transform: uppercase to All Vaults filter header. Please don't make me take three new screenshots 😅

Screen Shot 2022-04-15 at 9 13 21 AM

Before you submit

[x] I have checked for linting errors (npm run lint) (required)
[ ] This change requires a documentation update (notify the documentation team)
[ ] This change has particular deployment requirements (notify the DevOps team)

addisonbeck commented 2 years ago

jslib will need to be updated with the linked PR before this build will function correctly again

addisonbeck commented 2 years ago

@eliykat Send issues are resolved here: [bug] Adjusted Send filters to match new HTML structure for vault fil…

Folder edit button issues are addressed here: [bug] Fixed color and location for several filter buttons

patrickhlauke commented 2 years ago

as i see this touches on the "Edit" buttons for folders, just going to mention bitwarden/clients#2567

addisonbeck commented 2 years ago

Thanks for the note @patrickhlauke. I'm happy to say this will resolve bitwarden/clients#2567. I broke out all those nested controls into individual <button>s. Both edit buttons and toggle buttons are tab friendly with these changes, and toggle buttons are all using aria-expanded and aria-controls.

https://user-images.githubusercontent.com/15897251/166238053-aa9a0c38-f275-44a2-b63f-b84a71bb061b.mov

patrickhlauke commented 2 years ago

@addisonbeck perfect, thanks

bitwarden / desktop