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-16804] Add supporting Vault component presentational updates for blocked domains #12720

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

Conversation

jprusik
Copy link
Contributor

@jprusik jprusik commented Jan 6, 2025

๐ŸŽŸ๏ธ Tracking

PM-16804

๐Ÿ“” Objective

Split from #11826 - see details in original PR

Screenshot 2024-12-16 at 11 32 47โ€ฏAM

๐Ÿฆฎ 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

Copy link

codecov bot commented Jan 6, 2025

Codecov Report

Attention: Patch coverage is 5.88235% with 48 lines in your changes missing coverage. Please review.

Project coverage is 34.12%. Comparing base (16a0176) to head (fc3823f).
Report is 40 commits behind head on main.

โœ… All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...ult/popup/services/vault-popup-autofill.service.ts 11.53% 23 Missing โš ๏ธ
...ction-banner/blocked-injection-banner.component.ts 0.00% 13 Missing โš ๏ธ
...-container/vault-list-items-container.component.ts 0.00% 11 Missing โš ๏ธ
...lt/popup/components/vault-v2/vault-v2.component.ts 0.00% 1 Missing โš ๏ธ
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #12720      +/-   ##
==========================================
- Coverage   34.14%   34.12%   -0.02%     
==========================================
  Files        2937     2937              
  Lines       90337    90483     +146     
  Branches    16961    17000      +39     
==========================================
+ Hits        30846    30879      +33     
- Misses      57036    57146     +110     
- Partials     2455     2458       +3     

โ˜” View full report in Codecov by Sentry.
๐Ÿ“ข Have feedback on the report? Share it here.

Copy link
Contributor

github-actions bot commented Jan 6, 2025

Logo
Checkmarx One โ€“ Scan Summary & Details โ€“ 8f421e05-b7cc-43ed-b195-e831e10846d9

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/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/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/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/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: 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

More results are available on AST platform

Base automatically changed from pm-13115 to main January 6, 2025 22:10
@jprusik jprusik force-pushed the pm-16804 branch 5 times, most recently from 8356aae to 580bf9f Compare January 7, 2025 22:31
@jprusik jprusik force-pushed the pm-16804 branch 3 times, most recently from 66dba77 to b7e5851 Compare January 8, 2025 16:31
Copy link
Member

@shane-melton shane-melton left a comment

Choose a reason for hiding this comment

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

This is looking good! Thanks encapsulating the logic in a new banner component.

There are a few issues around reactivity and the Firefox sidebar that we'll need to address, but otherwise I just left a few other suggestions/nits.

* Flag indicating that the current tab location is blocked
*/
@Input({ transform: booleanAttribute })
currentURIIsBlocked: boolean;
Copy link
Member

Choose a reason for hiding this comment

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

๐ŸŽจ Instead of an input property, we can use the already injected VaultPopupAutofillService and reference the currentTabIsOnBlocklist$ observable.

We should also make use of the observable and an async pipe in the template as the current tab could change while the extension is open. (e.g. the Firefox sidebar has a "refresh current tab" button that will cause currentAutofillTab$ to re-emit)

@@ -22,6 +22,11 @@
</bit-no-items>
</div>

<blocked-injection-banner
Copy link
Member

Choose a reason for hiding this comment

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

๐Ÿ‘ Perfect!

/**
* Flag indicating that the banner should be shown
*/
protected showScriptInjectionIsBlockedBanner = false;
Copy link
Member

Choose a reason for hiding this comment

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

โš ๏ธ We should make these properties observables as the currentAutofillTab$ observable these all depend on internally could re-emit within the lifetime of Vault page / this banner component.

The Firefox sidebar has a "refresh current tab" button that will force currentAutofillTab$ to re-emit and if we're now on a blocked tab (or vice versa) we'd want to have the UI be reactive.

Suggested change
protected showScriptInjectionIsBlockedBanner = false;
protected showScriptInjectionIsBlockedBanner$ = this.vaultPopupAutofillService.currentTabBlockedBannerIsDismissed$;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@@ -74,6 +72,10 @@ export class AutofillVaultListItemsComponent implements OnInit {
}

async ngOnInit() {
this.currentURIIsBlocked = await firstValueFrom(
Copy link
Member

Choose a reason for hiding this comment

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

โš ๏ธ I think we can remove this if we fetch the value in the vault list items container component. But, if we don't do that, then we need to also make this an observable/reactive for the Firefox sidebar that can refresh the current tab.

@jprusik jprusik marked this pull request as ready for review January 9, 2025 17:24
@jprusik jprusik requested a review from a team as a code owner January 9, 2025 17:24
Copy link
Member

@shane-melton shane-melton left a comment

Choose a reason for hiding this comment

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

Looks great! I think we just have one last property to make reactive for current tab changes.

/**
* Flag indicating that the current tab location is blocked
*/
currentURIIsBlocked: boolean = false;
Copy link
Member

Choose a reason for hiding this comment

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

โš ๏ธ I believe this needs to be an observable so that the component reacts when the current tab changes. This value will become stale if the user changes tabs and refreshes the list in the Firefox sidebar.

Copy link
Contributor Author

@jprusik jprusik Jan 10, 2025

Choose a reason for hiding this comment

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

ah yeah, good call; sorted in fc3823f

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