Settings: Edit scan profile info #5793

flozia · 2025-04-10T12:34:04Z

References:

Jira: MNTOR-1806
Figma: https://www.figma.com/design/2iCgADpFXKOFZTEgCPkQsR/Settings?node-id=597-10052&t=c2UkGyKPdbvneuz5-4

Description

This PR adds a redesign for the /user/settings/edit-info view. US users with plus can see their profile scan info and also edit/add their details from /user/settings/edit-profile. Any changes to the scan profile info should be reflected immediately and will be used with the next monthly scan. Things to note:

There are some variants depending on the location and subscription, all of which are included in the settings stories that were added.
The updated input error style are not part of this PR.
There might be some changes to how we mock Server Actions depending on if we’ll use subpath imports or pass them as props.
The redesigned “Edit info” feature is only shipping together with the also redesigned sidebar navigation.
There will be a follow-up for admins to trigger manual monthly scans on demand (MNTOR-4297) for QA purposes.

Edit:

We’ve moved forward with passing Server Actions as props.
The admin panel for triggering scans has been added in edit: introduced in Add a profile scans section to /admin/dev #5796.

Screenshot

Edit info	Edit profile

How to test

Locally

Run the migrations: npm run db:migrate
Enable the feature flags: SidebarNavigationRedesign and EditScanProfileDetails
Visit /user/settings/edit-info
You need to be authenticated as a US and have a Plus subscription to be able to edit your profile

Storybook

Checklist (Definition of Done)

Localization strings (if needed) have been added.
Commits in this PR are minimal and have descriptive commit messages.
I've added a unit test to test for potential regressions of this bug.
If this PR implements a feature flag or experimentation, I've checked that it still works with the flag both on, and with the flag off.
If this PR implements a feature flag or experimentation, the Ship Behind Feature Flag status in Jira has been set
Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
All acceptance criteria are met.
Jira ticket has been updated (if needed) to match changes made during the development process.
Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.

flozia

Thank you for the reviews @Vinnl and @codemist!

@Vinnl I’ve addressed the blocking issues as well as most of your comments. The only thing I could spend more time on is resolving the use of act() in the unit tests, but I’d like to move forward with testing and not block the feature on those.

@codemist Happy to pair or elaborate more on anything if you have any open questions. The relevant backend for this has already landed with #5697.

jest.config.cjs

...er_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdderRedesign.tsx

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/actions.ts

...er_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdderRedesign.tsx

.storybook/main.ts

...redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfoRedesign.tsx

flozia · 2025-04-23T09:27:56Z

...authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditProfile/EditProfileForm.tsx

+  const l10n = useL10n();
+  const [profileFormData, setProfileFormData] = useState(props.profileData);
+  const [
+    _updateProfileActionError,


That’s frustrating! After bf3825f the data should not get cleared.

flozia · 2025-04-23T09:33:42Z

...er_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsPageRedesign.test.tsx

+      const addEmailButton = screen.getByRole("button", {
+        name: "Add email address",
+      });
+      await act(async () => {


The issue is not the button itself, but the dialog that is getting shown. There are some side effects caused from it and also the input field in there. I’ll follow-up with those, but will move forward to not block the feature on these.

flozia · 2025-04-23T09:33:52Z

...er_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsPageRedesign.test.tsx

+      const addEmailButton = screen.getByRole("button", {
+        name: "Add email address",
+      });
+      await act(async () => {


See #5793 (comment).

flozia · 2025-04-24T08:04:27Z

@flodolo Re-requesting your review since there have been string changes/additions for error messages in fe941fa.

flodolo

+1 for the change from deadname

codemist

Approving, up to you if you want to merge this in or wait for Vincent's greenlight since many of the changes were addressing his feedback. Incredible work!

github-actions · 2025-04-28T19:38:09Z

Cleanup completed - database 'blurts-server-pr-5793' destroyed, cloud run service 'blurts-server-pr-5793' destroyed

Vinnl · 2025-04-29T09:59:44Z

src/app/(proper_react)/(redesign)/Shell/Shell.tsx

@@ -21,6 +21,8 @@ import { ExperimentData } from "../../../../telemetry/generated/nimbus/experimen
 import MonitorLogo from "../../images/monitor-logo.svg";
 import styles from "./Shell.module.scss";
 import { UserAnnouncementWithDetails } from "../../../../db/tables/user_announcements";
+import { ToastContainer } from "react-toastify";


Would we need this in <ShellRedesign> as well?

Having it here is sufficient. The ToastContainer sits outside the code path of the feature flag SidebarNavigationRedesign, which toggles the redesigned shell.

flozia added 30 commits March 6, 2025 23:06

wip: Add SettingsPanelEditInfoRedesign

8e45065

chore: Add EmailAddressAdderRedesign component

a540dac

merge: main -> mntor-4034

0b68f78

chore: Update EmailAddressAdder dialog layout

1ab501c

Merge branch 'main' into mntor-4034

336dc39

feat: Show profile details preview in settings

d3aab3a

wip: Add /edit-profile route and content

9c4623b

chore: Add layout for /edit-profile

7e36527

chore: Add fields for /edit-profile

8202b44

chore: Add l10n strings for /edit-profile

f01d668

chore: Limit profile detail fields

4859ff2

chore: Add cancel dialog to /edit-profile

54ed36f

fix: Add warnings to required inputs

2dde0d0

chore: Move SettingsPanelEditProfile

335019c

fix: Allow initial location input value

e8e7bc0

fix: Show floating input labels for LocationAutocomplete

50a999f

Merge branch 'main' into mntor-4034

ab03d80

chore: Add Monitor Plus upsell CTA to /edit-info

47321ce

Merge branch 'main' into mntor-4034

0e7fa02

fix: Only show /edit-info route to Plus subscribers

323f43d

chore: Floating input label adjustment

de625cb

chore: Filter and sanitize update profile data

03e2e6e

chore: Update /edit-profile form layout

5a318ef

Merge branch 'main' into mntor-4034

4016e09

chore: Add wrapper for secondary form inputs

36ea3ef

chore: Split up components for /edit-profile

702a01a

chore: Make input component fill available space

4584d88

fix: Type issues

d301eef

fix: Type issues

9a66d50

feat: Add setting stories

e75ecf8

flozia added 7 commits April 22, 2025 19:19

chore: Move handleInputChangeRedesign inline

856e505

chore: Update prop profileData

2e33962

chore: Clicked add_email_verification

7600c61

fix: Revalidate /edit-info

d2038a6

fix: isVerificationEmailResent check icon

3071165

chore: Capture frontend exeption when resending emails

2171c55

chore: Edit info upsell link enhancements

233766d

flozia commented Apr 23, 2025

View reviewed changes

flozia added 2 commits April 23, 2025 11:40

Merge branch 'main' into mntor-4034

bbfbafb

fix: Linter

c2ff22e

flozia force-pushed the mntor-4034 branch from ac5c3c8 to c2ff22e Compare April 23, 2025 09:49

flozia added 2 commits April 23, 2025 11:57

chore: Rename nameMoreCount -> additionalNamesCount

1009518

fix: Unit test coverage

a433895

flozia requested review from codemist and Vinnl April 23, 2025 10:07

flozia added 2 commits April 23, 2025 13:10

fix: Report email validity only after render

cdce2e2

chore: Update /edit-info error strings

fe941fa

flozia requested a review from flodolo April 24, 2025 08:04

flodolo approved these changes Apr 24, 2025

View reviewed changes

flozia added 2 commits April 24, 2025 11:17

fix: Phone number formatting

8d4c5b7

fix: Phone number length

46f5c88

flozia force-pushed the mntor-4034 branch from c9a7903 to 46f5c88 Compare April 25, 2025 08:41

Merge branch 'main' into mntor-4034

601765f

codemist approved these changes Apr 25, 2025

View reviewed changes

Merge branch 'main' into mntor-4034

368fe0c

flozia merged commit 78dd384 into main Apr 28, 2025
17 checks passed

flozia deleted the mntor-4034 branch April 28, 2025 19:36

Vinnl reviewed Apr 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Settings: Edit scan profile info #5793

Settings: Edit scan profile info #5793

Uh oh!

flozia commented Apr 10, 2025 •

edited

Loading

Uh oh!

flozia left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flozia Apr 23, 2025

Uh oh!

flozia Apr 23, 2025

Uh oh!

flozia Apr 23, 2025

Uh oh!

flozia commented Apr 24, 2025

Uh oh!

flodolo left a comment

Uh oh!

codemist left a comment

Uh oh!

Uh oh!

github-actions bot commented Apr 28, 2025

Uh oh!

Vinnl Apr 29, 2025

Uh oh!

flozia Apr 29, 2025

Uh oh!

Uh oh!

Settings: Edit scan profile info #5793

Settings: Edit scan profile info #5793

Uh oh!

Conversation

flozia commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

References:

Description

Screenshot

How to test

Checklist (Definition of Done)

Uh oh!

flozia left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flozia Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

flozia Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

flozia Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

flozia commented Apr 24, 2025

Uh oh!

flodolo left a comment

Choose a reason for hiding this comment

Uh oh!

codemist left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Apr 28, 2025

Uh oh!

Vinnl Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

flozia Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

flozia commented Apr 10, 2025 •

edited

Loading

flozia left a comment •

edited

Loading