Site Migration: Preserve urlValue in text input when an invalid URL is submitted

[sixhours]

Related to paYKcK-4n3-p2#comment-3248

Proposed Changes

• Hide the error message when the text input is blank
• Preserve the input when a URL is invalidated so the user can see what they entered.

Testing Instructions

• Switch to this PR
• Go through the onboarding flow from /start
• Choose import as your site intent
• TBD

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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 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-104345

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[gabrielcaires]

@sixhours What is the benefit of repeating the same value we are already showing on the input?

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[sixhours]

@sixhours What is the benefit of repeating the same value we are already showing on the input?

@andres-blanco mentioned it in a comment on that thread:

It doesn’t mention the (invalid) URL you entered.

My thinking was the repetition might help them see the error in their URL.

But maybe we just need to not show the error message when the urlValue is empty?

[gabrielcaires]

But maybe we just need to not show the error message when the urlValue is empty?

Agree 👍

My thinking was the repetition might help them see the error in their URL.

Based on the data we have gathered, it seems that users are having trouble understanding the meaning of URL.
We have an issue just to improve the screen copy. #89543

[gabrielcaires]

@sixhours What do you think about maintaining this PR by improving the error message and the other one updating the overall copy? My concern is we probably will have a revision that can make it hard to keep track of multiple PRs.

Regarding the error message, considering the high % of users setting wrong values as a domain.
What do you think about introducing an error message specific to users that set any value without a TLD?

Something like,
"Hey, I think you missed the domain suffix, they usually are (.com, .org, etc...)."
Just an example, I don't think it is a good copy :D

[matticbot]

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

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

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/error-messages on your sandbox.

[sixhours]

This change will cause issues because sometimes we show an error message after validating the URL and we preserve the urlValue in the text input, other times we'll validate the URL and clear the urlValue from the text input.

That's how you can end up in a state where the screen shows an error message but not the URL you submitted because they've entered an invalid URL like something.aisdfua.

I've been trying to figure out how to preserve the urlValue when it is invalid so we can offer the user more context.

[gabrielcaires]

This change will cause issues because sometimes we show an error message after validating the URL and we preserve the urlValue in the text input, other times we'll validate the URL and clear the urlValue from the text input.

Thanks for sharing it, I can take a look while you are in AFK.

[gabrielcaires]

I think the form needs to be refactored to reduce the # of internal states.
setState is async and since we have multiple setState happening, that is probably causing race conditions.
We probably should do it only after merging the #89548

[bogiii]

There is a showValidationMsg field; why is this additional condition not placed there since it is dedicated to showing/hiding validation messages?

[sixhours]

This is well out of date and we seem to have conflicting thoughts on how to address the original issue around lack of clarity, so I'm going to close this and create a new issue.