[End User Vault Refresh] SG-16: Organization filters

differsthecat commented 2 years ago

https://bitwarden.atlassian.net/browse/SG-16

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.)
Limiting vault search to the active filter selected

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

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.
Creating a VaultModule with IndividualVaultModule and OrganizationVaultModule children that share a service. This is to share search field placeholder text logic between the org and individual vault components. There is certainly a lot more that could be shared between these two and refactored, but this already seemed like scope creep and only went far enough to achieve the need for filters.
Extracting the scss from the filters sidebar 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.

Code changes

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.
Created a VaultModule with IndividualVaultModule and OrganizationVaultModule children that share a service.
Created a SharedModule for passing shared code around to feature modules
Created a LooseComponentsModule as a temporary space for homeless components to exist and be consumed by feature modules.

Screenshots

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

I am aware of the build issue here. Devops has a potential fix, but I think this is an anomaly with this branch that may self correct. I don't think it should hold up merging, considering the target branch doesn't build anyway :)

Update: Oscar knew what was going on here and fixed the build

Hinton commented 2 years ago

@addisonbeck The reason it doesn't build is due to there being a package in package-lock that gets put in jslib. This often happens when someone bumps jslib packages and forget to refresh the client. (It should go away with the move to monorepo)

For now, recreate package-lock, if it still fails check which package it attempts to to drag in, and copy it to package.json.

Hinton commented 2 years ago

Found the issue, seems jslib/common wanted node-forge 1.3.1, and web for some reason resolved it to 1.3.0. I hard coded web to use the latest for now, the move to mono repo should resolve this permanently.

cloudflare-workers-and-pages[bot] commented 2 years ago

Deploying with Cloudflare Pages

Latest commit:	`307417b`
Status:	✅ Deploy successful!
Preview URL:	https://0ea4ade3.web-46f.pages.dev

View logs

bitwarden / web