Publicize: Improve primary form component.

[retrofox]

Branched off from #21085

This PR reimplements the form of the Publicize plugin.
Currently, it has two form and form-unwrapped components that make it kind of confusing.
With these changes, the form in a single component, in a single file. Also, it adds two React hooks making the whole implementation more readable, at least from my PoV 😅

Fixes #21086

Changes proposed in this Pull Request:

Publicize: Improve primary form.

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

• It doesn't change the functionality of the feature, so the first testing is confirm that everything is working as expected:
  • create a new post
  • add some content
  • start to edit the message to share the post on the social media
  • publish the post
  • check the post is shared in the social media account

Testing the hooks in the Publicize component
You can take a look at the hooks in the <PublicizeForm /> component using the React dev tool:

Testing the data propagation
Similarly, you can take a look at the core sub store tree, using the Redux dev tool.

The image above shows how the data is stored in the subtree while the user edits the publicize content via the message box component.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: October 5, 2021.
• Scheduled code freeze: September 28, 2021.

[DustyReagan]

Just a couple of small suggestions. I'll run the code next to test the functionality.

[DustyReagan]

Checked-out and built update/publicize-add-hooks-to-improve-data-flow branch. Ran through jurassic.tube.

• ☑️ create a new post
• ☑️ add some content
• ☑️ start to edit the message to share the post on the social media
• ☑️ publish the post
• ☑️ check the post is shared in the social media account

✅ Facebook, Twitter, Tumblr, and LinkedIn posts worked as expected!
✅ Viewed <PublicizeForm /> component using the React dev tool.
✅ Viewed core sub store tree, using the Redux dev tool.

Works as expected! 👍

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello retrofox! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D67058-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[retrofox]

Thanks, @DustyReagan for your review. Suggestions have been committed 👍

[pablinos]

I'm not sure if this is introduced by this PR, but if I add a title, the message box is populated with it. Then selecting the text in the message box and typing to completely replace it, the first action's undo state has the message as blank:

[retrofox]

I'm not sure if this is introduced by this PR, but if I add a title, the message box is populated with it. Then selecting the text in the message box and typing to completely replace it, the first action's undo state has the message as blank:

Pretty sure it was not introduced by this PR.
Checking...

[retrofox]

I'm not sure if this is introduced by this PR, but if I add a title, the message box is populated with it. Then selecting the text in the message box and typing to completely replace it, the first action's undo state has the message as blank:

Pretty sure it was not introduced by this PR.
Checking...

It happens in prod right now. Do you'd like to change it? I suggest creating a new issue in that case :-D

[DustyReagan]

✅ Facebook, Twitter, Tumblr, and LinkedIn posts worked as expected!

✅ Viewed component using the React dev tool.

✅ Viewed core sub store tree, using the Redux dev tool.

✅ Toggles seem to be working. I verified their state in 'core' sub store tree using Redux dev tool. I also tested manually. With Facebook, Twitter, Tumblr, and LinkedIn connected, I tested the toggles with two new posts. One post I toggled off Facebook and LinkedIn and it correctly published to Twitter and Tumblr. I did the opposite on a second post and it also posted correctly.

LGTM! 👍

[pablinos]

This is working for me. I think it has thrown up some other things we might want to change, but as discussed, we should keep this to a refactor PR.

[sdixon194]

Tests well, looks good!

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D67058-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[retrofox]

Great news! One last step: head over to your WordPress.com diff, D67058-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

r232110-wpcom