Skip to content

Conversation

@itsadrago
Copy link

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-27465

📔 Objective

  1. During the creation of a new Text Send on the browser extension, you have the option to Save or Cancel. Hitting the Cancel button currently has no effect. It should close the "New Text Send" dialog window, similar to if you hit the back arrow at the top left of the dialog window.

  2. During the creation of a new Export Vault operation on the browser extension, you have the option to Export vault or Cancel. Hitting the Cancel button currently has no effect. It should close the "Export vault" dialog window, similar to if you hit the back arrow at the top left of the dialog window.

📸 Screenshots

image image

⏰ 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

@itsadrago itsadrago requested a review from a team as a code owner October 30, 2025 20:08
@claude
Copy link

claude bot commented Oct 30, 2025

Claude finished @itsadrago's task —— View job


PR Review: Cancel Button Fixes

Summary of Changes

This PR fixes non-functional cancel buttons in two browser extension dialogs by changing the popupBackAction directive usage from attribute syntax to property binding syntax:

  • Send creation dialog (send-add-edit.component.html): Changed popupBackAction[popupBackAction]
  • Export vault dialog (export-browser-v2.component.html): Changed popupBackAction[popupBackAction]

The issue was introduced when the PopupBackBrowserDirective was migrated to use Angular signals in commit 827c4c0301 (PR #15738, August 2025). The directive now uses a signal-based model input with an alias, which requires property binding syntax [popupBackAction] instead of the plain attribute popupBackAction.


✅ Code Quality

The fix is correct and minimal - it properly converts the directive usage to match Angular's signal-based model input requirements.


📋 Review Findings

Critical Issues

None found.

Suggestions for Improvement

💭 Consider adding template tests to catch similar regressions

These templates lack unit tests that could have caught this issue earlier. While not blocking for this PR, consider adding tests that verify:

  • Cancel button click behavior
  • Integration with popupBackAction directive
  • Dialog closing functionality

This would prevent similar issues when directives are refactored in the future.

Files lacking test coverage:

  • apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.spec.ts (doesn't exist)
  • apps/browser/src/tools/popup/settings/export/export-browser-v2.component.spec.ts (doesn't exist)
🌱 Migration gap: Other templates may have similar issues

The signal migration in PR #15738 (commit 827c4c0) changed PopupBackBrowserDirective to require property binding, but the original templates at apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html:19 and apps/browser/src/tools/popup/settings/export/export-browser-v2.component.html:26 weren't updated at that time.

Recommendation: Search for other directives that were migrated to signal models with aliases in that same PR to verify all their usages were updated. This could be a systematic issue.

# Check if other signal model directives might have similar issues
git diff 827c4c0301^..827c4c0301 -- '*.directive.ts' | grep -A5 "model.*alias"

👍 Good Practices Observed

  • Minimal, focused changes addressing only the reported issue
  • Consistent fix applied to both affected files
  • No unnecessary refactoring or scope creep

Action Items

For this PR:

  • ✅ No blocking issues - ready to merge

For future consideration:

  1. Add unit tests for these components to catch template-directive binding issues
  2. Audit other usages of directives migrated to signal models in PR [PM-15847] libs/components strict migration #15738
  3. Consider adding a linting rule or migration script for signal model directives to ensure property binding is used

Technical Context

Why this fix works:

In Angular, when a directive uses model() with an alias:

readonly handler = model<FunctionReturningAwaitable>(
  () => this.routerCacheService.back(),
  { alias: "popupBackAction" }
);

The template must use property binding syntax [popupBackAction] (not attribute syntax popupBackAction) to properly bind to the signal model. The original implementation worked before the signal migration because the directive used a different binding mechanism.

Reference:

  • Directive implementation: apps/browser/src/platform/popup/layout/popup-back.directive.ts:14-17
  • Parent directive: libs/components/src/async-actions/bit-action.directive.ts:39

@itsadrago itsadrago added bug browser Browser Extension labels Oct 30, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Oct 30, 2025

Logo
Checkmarx One – Scan Summary & Details395ce47c-5877-44b0-9a05-c343214045b9

Great job! No new security vulnerabilities introduced in this pull request

@codecov
Copy link

codecov bot commented Oct 30, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 40.40%. Comparing base (326cd40) to head (6a843dd).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #17138      +/-   ##
==========================================
- Coverage   40.41%   40.40%   -0.01%     
==========================================
  Files        3504     3504              
  Lines      100148   100148              
  Branches    15022    15022              
==========================================
- Hits        40473    40467       -6     
- Misses      57957    57964       +7     
+ Partials     1718     1717       -1     

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

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@harr1424 harr1424 added the needs-qa Marks a PR as requiring QA approval label Oct 30, 2025
{{ "save" | i18n }}
</button>
<button bitButton type="button" buttonType="secondary" popupBackAction>
<button bitButton type="button" buttonType="secondary" [popupBackAction]>
Copy link
Member

Choose a reason for hiding this comment

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

@bitwarden/team-ui-foundation Should the selector for this be tweaked to allow missed []?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think these are the only two instances of this directive being used, so not sure if it is worth it at this point?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

browser Browser Extension bug needs-qa Marks a PR as requiring QA approval

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants