Hosting Dashboard: Add reset password in Settings Database #103691

taipeicoder · 2025-05-24T15:33:08Z

Ref DOTCOM-13253

Proposed Changes

This PR implements the reset database password functionality.

Why are these changes being made?

Hosting Dashboard.

Testing Instructions

Head to /v2/sites/:siteSlug/settings/database
Ensure that the "resetting the password" link opens the confirmation modal.
Ensure that the Restore button in the confirmation modal works as intended.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-05-24T15:33:19Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-145654

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-145654&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-145654&env=a8c-for-agencies

taipeicoder · 2025-05-24T15:33:34Z

client/dashboard/app/style.scss

 }

-h1 {
+h1:not( .components-modal__header-heading ) {


Not really happy about this change, any better ideas?

Hmm... maybe move these existing CSS to https://github.com/Automattic/wp-calypso/blob/0a063059234e6cccc1f61843ecbe34e1b8cfb97f/client/dashboard/components/page-header/style.scss instead? 🥲

I think that's a fair change. Updated in c404fa4.

cc: @youknowriad

we're using an h1 in a modal, is that really what we want? Aren't we supposed to have only one h1 in a page?

Ok, I see the message about modal forcing h1. That's probably fair.

The downside I see with the change to move to page header, is that the page-header is probably a reusable component that can be extracted to the components package, and defining the h1 styles seems like an "application layer" thing that the reusable component should be agnostic about.

That said, it's not a big deal at the moment, there are multiple solutions here including a "theme" package for DS. The change is fine for now.

Perhaps the modal h1 should also use brand font? cc: @jasmussen @jameskoster for input.

Unsure of the semantics, but yes I could personally see all headings being subject to branding on the font level. I think there's a technical/component reusability question to answer as to how to best do this.

matticbot · 2025-05-24T15:39:46Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~143 bytes added 📈 [gzipped])

Details

name                    parsed_size           gzip_size
entry-dashboard-dotcom       +724 B  (+0.0%)     +132 B  (+0.0%)
entry-dashboard-a4a          +724 B  (+0.0%)     +132 B  (+0.0%)
entry-subscriptions          +283 B  (+0.0%)      +76 B  (+0.0%)
entry-stepper                +283 B  (+0.0%)      +76 B  (+0.0%)
entry-reauth-required        +283 B  (+0.0%)      +76 B  (+0.0%)
entry-main                   +283 B  (+0.0%)      +76 B  (+0.0%)
entry-login                  +283 B  (+0.0%)      +76 B  (+0.0%)
entry-domains-landing        +241 B  (+0.0%)      +65 B  (+0.0%)
entry-browsehappy            +241 B  (+0.1%)      +65 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~46 bytes added 📈 [gzipped])

Details

name           parsed_size           gzip_size
site-settings       +113 B  (+0.0%)      +22 B  (+0.0%)
hosting             +113 B  (+0.0%)      +24 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

fushar · 2025-05-26T04:46:36Z

client/dashboard/app/style.scss

 }

-h1 {
+h1:not( .components-modal__header-heading ) {


Hmm... maybe move these existing CSS to https://github.com/Automattic/wp-calypso/blob/0a063059234e6cccc1f61843ecbe34e1b8cfb97f/client/dashboard/components/page-header/style.scss instead? 🥲

fushar · 2025-05-26T04:48:31Z

client/dashboard/sites/settings-database/reset-password-modal.tsx

+}: ResetPasswordModalProps ) {
+	const [ isRestoring, setIsRestoring ] = useState( false );
+
+	const handleRestore = async () => {


Nit: there is no await here for the async

Good catch, removed the leftover code in c404fa4.

matticbot · 2025-05-26T05:19:36Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/DOTCOM-13253-reset-database-password on your sandbox.

youknowriad · 2025-05-26T07:15:44Z

client/dashboard/app/style.scss

 	font-size: $font-size-medium;
 }
-
-h1 {


Any rationale about this change?

Modals use h1 for title, and in the design it doesn't use the brand font. So we changed to scope it to the PageHeading h1 instead. I couldn't find any prop to change the title to use another element.

ntsekouras · 2025-05-26T07:59:54Z

client/dashboard/components/page-header/style.scss

 }

 .client-dashboard-components-page-header__heading {
+	font-family: var( --dashboard-h1__font-family );


These header components aim to be promoted in @automattic/components and should not use dashboard css vars. I'm keeping this for now in #103555, but we should update during the component's move to the other package.

I'm assuming you're saying we shouldn't use dashboard CSS vars. In that case, I lean towards reverting this particular change and see how we feel about having the modal h1 using the branding font as well.

Yeah, sorry. I missed typing the not above (update now 😄 ).

a8ci18n · 2025-05-26T08:21:45Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17513118

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @taipeicoder for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2025-06-01T10:28:49Z

Translation for this Pull Request has now been finished.

taipeicoder self-assigned this May 24, 2025

taipeicoder commented May 24, 2025

View reviewed changes

taipeicoder marked this pull request as ready for review May 24, 2025 15:40

taipeicoder requested review from a team and youknowriad as code owners May 24, 2025 15:40

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 24, 2025

fushar reviewed May 26, 2025

View reviewed changes

Add reset database password

c404fa4

taipeicoder force-pushed the add/DOTCOM-13253-reset-database-password branch from 1b6b34e to c404fa4 Compare May 26, 2025 05:10

fushar approved these changes May 26, 2025

View reviewed changes

Code lint

9297055

taipeicoder merged commit 5bf4539 into trunk May 26, 2025
11 checks passed

taipeicoder deleted the add/DOTCOM-13253-reset-database-password branch May 26, 2025 06:48

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 26, 2025

youknowriad reviewed May 26, 2025

View reviewed changes

ntsekouras reviewed May 26, 2025

View reviewed changes

taipeicoder mentioned this pull request May 26, 2025

Hosting Dashboard: Revert moving h1 styles to PageHeader #103703

Merged

8 tasks

gabrielcaires pushed a commit that referenced this pull request May 26, 2025

Hosting Dashboard: Add reset password in Settings Database (#103691)

0be2ae3

Hosting Dashboard: Add reset password in Settings Database #103691

Hosting Dashboard: Add reset password in Settings Database #103691

Uh oh!

Conversation

taipeicoder commented May 24, 2025

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented May 24, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matticbot commented May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matticbot commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

taipeicoder May 26, 2025 • 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!

ntsekouras May 26, 2025 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

a8ci18n commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

a8ci18n commented Jun 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

github-actions bot commented May 24, 2025 •

edited by matticbot

Loading

matticbot commented May 24, 2025 •

edited

Loading

matticbot commented May 26, 2025 •

edited

Loading

taipeicoder May 26, 2025 •

edited

Loading

ntsekouras May 26, 2025 •

edited

Loading

a8ci18n commented May 26, 2025 •

edited

Loading