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-13808 - Use new <bit-form-field> component in Excluded domains settings. #13111

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

Conversation

blackwood
Copy link

Changing to new component necessitates modifying form to use ReactiveForms conventions. To handle this change, the deletable/uneditable domain state and new form control state are managed separately, including clearing the form state on save. Fields which compute vaules from the former state should now compute both values (see domain count); [formGroup], formArrayName, formControlName all necessary directives/properties on form and children.

🎟️ Tracking

Excluded Domain field is incorrect component/styling - Jira

📔 Objective

The field where you enter the excluded domain is incorrect (the label is not nested in the input border). It should use the same field and label component and stylings as the vault item page.

The added domain item alignment also looks a bit off.

Expected

  • Field styles use styles
  • Field extends width of the card
  • Added domains are aligned vertically with the remove icon button

See image below

📸 Screenshots

⏰ 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

Changing to new <bit-form-field> component necessitates modifying form to use ReactiveForms conventions. To handle this change, the deletable/uneditable domain state and new form control state are managed separately, including clearing the form state on save. Fields which compute vaules from the former state should now compute both values (see domain count); [formGroup], formArrayName, formControlName all necessary directives/properties on form and children.
@blackwood blackwood requested a review from a team as a code owner January 28, 2025 21:08
Copy link
Contributor

github-actions bot commented Jan 28, 2025

Logo
Checkmarx One – Scan Summary & Details58fa034c-58ea-416c-8580-f4fb4e90c984

New Issues (1)

Checkmarx found the following issues in this Pull Request

Severity Issue Source File / Package Checkmarx Insight
LOW Client_Use_Of_Iframe_Without_Sandbox /apps/browser/src/autofill/content/notification-bar.ts: 872
detailsThe application employs an HTML iframe at whose contents are not properly sandboxed
Attack Vector
Fixed Issues (1)

Great job! The following issues were fixed in this Pull Request

Severity Issue Source File / Package
LOW Client_Use_Of_Iframe_Without_Sandbox /apps/browser/src/autofill/content/notification-bar.ts: 881

@blackwood blackwood changed the title Use new <bit-form-field> component in Excluded domains settings. PM-13808 - Use new <bit-form-field> component in Excluded domains settings. Jan 28, 2025
@blackwood blackwood added the needs-qa Marks a PR as requiring QA approval label Jan 28, 2025
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.

screenshot looks good; approved by design

@blackwood
Copy link
Author

@danielleflinn to clarify—that screenshot came from the original ticket verbatim—here's an up-to-date screenshot.

Screenshot 2025-01-28 at 7 20 55 PM

@danielleflinn
Copy link
Member

@blackwood thank you! Typically the "screenshots" section in PRs is reserved for what the PR changes; you don't need to include screenshots from jira. Sometimes devs will include before/afters.

Is there a way for you to remove the bottom margin from the "website" inputs? If you are using a component library field I think there is a disableMargin option.

@blackwood blackwood force-pushed the PM-13808 branch 2 times, most recently from 2bb8821 to 76271b1 Compare January 29, 2025 14:33
Copy link

codecov bot commented Jan 29, 2025

Codecov Report

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

Project coverage is 35.37%. Comparing base (d001854) to head (5b3e866).
Report is 13 commits behind head on main.

Files with missing lines Patch % Lines
...ofill/popup/settings/excluded-domains.component.ts 0.00% 7 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #13111      +/-   ##
==========================================
+ Coverage   35.30%   35.37%   +0.07%     
==========================================
  Files        2996     3010      +14     
  Lines       90959    91180     +221     
  Branches    16980    16997      +17     
==========================================
+ Hits        32116    32258     +142     
- Misses      56351    56416      +65     
- Partials     2492     2506      +14     

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

@@ -14,19 +14,36 @@
<bit-section *ngIf="!isLoading">
<bit-section-header>
<h2 bitTypography="h6">{{ "domainsTitle" | i18n }}</h2>
<span bitTypography="body2" slot="end">{{ excludedDomainsState?.length || 0 }}</span>
<span bitTypography="body2" slot="end">{{
excludedDomainsState?.length + domainForms?.value?.length
Copy link
Contributor

Choose a reason for hiding this comment

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

If the use of optional chaining here is correctly indicating either of these values can be undefined, we should guard against that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs-qa Marks a PR as requiring QA approval
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants