Staging Sites: Move the database warning to the top in the sync modal

[katinthehatsite]

Closes DOTCOM-14185

Proposed Changes

This PR moves the warning for database changes and for WooCommerce above the FileTree component in the Sync modal so that user's attention is immediately drawn to it.

Without warnings

With regular warning and WooCommerce warning

Only with regular warning

Testing Instructions

• Pull the changes from this branch
• Apply the following diff:

index a07c84f720d..8f453fccd38 100644
--- a/client/sites/staging-site/components/staging-site-sync-modal/index.tsx
+++ b/client/sites/staging-site/components/staging-site-sync-modal/index.tsx
@@ -229,7 +229,8 @@ export default function SyncModal( {
        );
        const sqlNode = useSelector( ( state ) => getBackupBrowserNode( state, querySiteId, SQL_PATH ) );
 
-       const isSiteWooStore = !! useSelector( ( state ) => isSiteStore( state, querySiteId ) );
+       //const isSiteWooStore = !! useSelector( ( state ) => isSiteStore( state, querySiteId ) );
+       const isSiteWooStore = true;
        const filesAndFoldersNodesCheckState = useMemo( () => {
                const nodes = [ wpContentNode, wpConfigNode ].filter( Boolean );
                if ( nodes.length === 0 ) {

• Ensure that you have an Atomic site with a staging site
• Navigate to /sites/{yourAtomicSite}
• Click on Sync button and choose Pull from Staging
• Click on the Database checkbox
• Confirm that the warning appears above FileTree
• Close the modal
• Click on Sync button and choose Push from Staging
• Confirm that you can see a smaller warning (without WooCommerce) and that it also appears on the top

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 tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[katinthehatsite]

@ivan-ottinger and @Automattic/yolo I am adding this as a solution that we discussed in Linear but we can also review this in practice in this PR and make further modifications based on how this feels. This is pretty much open to suggestions 👀

[ivan-ottinger]

@ivan-ottinger and @Automattic/yolo I am adding this as a solution that we discussed in Linear but we can also review this in practice in this PR and make further modifications based on how this feels. This is pretty much open to suggestions 👀

Thank you for the updates, Kat! I think this solution works well. Even though the notice isn't displayed right next to the checkbox, it is clear to me it is related.

Curious to hear what others think.

Screen.Capture.on.2025-09-01.at.10-37-35.mp4

Screen.Capture.on.2025-09-01.at.10-40-21.mp4

[ivan-ottinger]

One more thing: There are still cases when the notice isn't visible, e.g. when the tree is opened up quite a lot. 🤔

Screen.Capture.on.2025-09-01.at.10-49-24.mp4

[ivan-ottinger]

One more thing: There are still cases when the notice isn't visible, e.g. when the tree is opened up quite a lot. 🤔

I am not sure if we discussed this anywhere already, but what if we displayed the notice in the modal's footer - above the domain verification field?

[katinthehatsite]

I am not sure if we discussed this anywhere already, but what if we displayed the notice in the modal's footer - above the domain verification field?

I also don't remember this but let me take a look at what this might look like. I feel that when we put it either below or above, we will sort of run into the same problem that you are showing on your screenshot with the tree fully expanded. Let's try this approach and see 👀 I will add some screenshots in the comments once I am done experimenting with this

[sejas]

One more thing: There are still cases when the notice isn't visible, e.g. when the tree is opened up quite a lot. 🤔

I am not sure if we discussed this anywhere already, but what if we displayed the notice in the modal's footer - above the domain verification field?

I agree with Ivan and I think the warning makes more sense in the footer, that way we make sure it's visible even if the files tree is expanded.
It would be great if we can make the message shorter in that case, to avoid taking too much space. Specially when displaying the generic and WooCommerce warnings. Maybe we can merge the message into one.

Selecting this option will overwrite the site database ...

I also think that this option can be a bit confusing since the warning is far from the database checkbox.

[katinthehatsite]

@ivan-ottinger and @sejas - I have made now moved the notice to the footer. I had to change the positioning of the footer from absolute and include it in the modal to make it look coherent. I also updated some wording on the notices. Please give it a try and let me know what you think (see side by side comparison of current trunk and the changes from this branch below):

[sejas]

Thanks, Kat! My only concern is that the footer is not floating, and the main buttons might not be visible if the files tree is expanded. The good part is that the user will se the waring before clicking push/pull.

[katinthehatsite]

Thanks, Kat! My only concern is that the footer is not floating, and the main buttons might not be visible if the files tree is expanded. The good part is that the user will se the waring before clicking push/pull.

I am not sure this is necessarily a bad experience. The user still has a scrollbar in that case, no?

And in any case, I think it is good that they might need to scroll to the very bottom to read carefully all the information they are selecting in the tree. Also, I am finding the footer blocking too much of the tree when it has absolute position with the warning, especially with WooCommerce warning so it is hard to see the whole tree together.

[epeicher]

Thanks, Kat! My only concern is that the footer is not floating, and the main buttons might not be visible if the files tree is expanded.

I agree with @sejas here (also in the thanks to Kat! 😄) as I think hiding the action buttons when the tree becomes very tall is not a good UX, I would be interested in others' opinions, and the view of a designer too. An additional point of view by ChatGPT can be found here, the suggestion is to leave the buttons fixed at the bottom, it also mentions things like:

If your notifications are critical (e.g., "Database will be overwritten"), then pin them in the fixed footer together with the buttons

[katinthehatsite]

Okay if the majority is voting for the sticky buttons at the bottom, I am going to re-adjust the PR based on that 👍

[gcsecsey]

I tested the most recent changes, and this is working great for me. Having the notice sticked to the bottom panel means that I couldn't see the buttons disappear or the file browser being squashed at any point. 👍

WooCommerce installed?	To staging	To prod
✅
❌

[katinthehatsite]

I tested the most recent changes, and this is working great for me. Having the notice sticked to the bottom panel means that I couldn't see the buttons disappear or the file browser being squashed at any point. 👍

Thanks for the review @gcsecsey ! I found one small edge case with spacing and WooCommerce warning so I am going to tweak it a bit more first and either merge or re-request the review.

[katinthehatsite]

I made some changes again based on the feedback:

• the buttons should be in the absolute position at the bottom and always remain within user's view;
• when the warning is present, the modal with automatically slighly expand to make sure that the footer does not block all the options that you can choose from the file browser;
• I added some CSS classes to determine how much space needs to be added based on whether only the woocommerce warning and/or database warning is also included;
• finally, there is a bit more space in the modal when you push to staging vs. pull from staging when you initially open it. To me, it looked fine so I left it as is to not introduce one more CSS rule but I can also add that if needed.

I tried other positioning e.g. fixed but the result was always worse than what we currently have in this PR.

Let me know what you think!

[matticbot]

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

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

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/scroll-to-warning on your sandbox.

[ivan-ottinger]

Great work, Kat! The result looks good to me. The warnings are now displayed right there without hiding from user. 👌🏼

I noticed only one edge-case issue when the screen is very short. In those circumstances the user may get into a trap when they cannot uncheck the Database checkbox:

Screen.Capture.on.2025-09-08.at.15-18-40.mp4

Maybe we could add a little bit more height there.

[katinthehatsite]

I noticed only one edge-case issue when the screen is very short. In those circumstances the user may get into a trap when they cannot uncheck the Database checkbox

I checked this but I could only reproduce this when I resized the screen to a smaller size manually while the modal was already open. It is likely because the modal does not have space to expand anymore as it expands slightly automatically when one of the warnings opens. I tested a bit more on smaller screens such as ipads and the issue was not visible there:

I would consider this an edge case and would just leave as is.

On another note, I believe that we should revise the design on this in the new dashboard. While these changes work, there is a bunch of CSS that we are doing for this and it seems to be too much for something that can be solved on the design level. What do you think @ivan-ottinger ?

[ivan-ottinger]

I checked this but I could only reproduce this when I resized the screen to a smaller size manually while the modal was already open. It is likely because the modal does not have space to expand anymore as it expands slightly automatically when one of the warnings opens. I tested a bit more on smaller screens such as ipads and the issue was not visible there:

Thanks, Kat. Yeah, in my tests the screen was fairly small. So let's leave the things as they are.

On another note, I believe that we should revise the design on this in the new dashboard. While these changes work, there is a bunch of CSS that we are doing for this and it seems to be too much for something that can be solved on the design level. What do you think @ivan-ottinger ?

Yes, that sounds good to me. I will create a separate task where we can discuss it with Marina.

[sejas]

@katinthehatsite Great work! I debugged Ivan's case, and I agree it's a corner case. However, I suggest solving it, as I believe it's a symptom of unnecessary CSS rules.

[katinthehatsite]

@sejas I addressed all your comments. The functionality and look should be as they were before I added the suggestions for refactoring so I will proceed with merging.