React compatibility: Changing global JSX namespace to React.JSX

[coder-karen]

Fixes #38566

Proposed changes:

• In the React package, the global JSX namespace has been deprecated, in favor of React.JSX. As such, in this PR any usage of JSX.Element has been replaced with React.JSX.Element.
• The only package in which I imported React in the relevant file was jetpack-mu-wpcom package, in the inline-support-link.tsx file, as there was a warning to import React for other elements in the file as well.
• It also appears to be the only affected package / plugin that does not have a tsconfig.json file, therefore it didn't have "jsx": "react-jsx" added to any compilerOptions (or rather imported from the tools/js-tools/tsconfig.base.json file) as the others did. To explain further, adding "jsx": "react-jsx"to compilerOptions means that React is not needed to be in scope for JSX syntax.
• I also added a React import elsewhere in jetpack-mu-wpcom as a component that used the affected function also turned out to need a React import.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

#38566

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

No.

Testing instructions:

Tests should pass for NumberSlider and StatCard whose type files were affected.

For testable component changes:

Self-hosted and Atomic

• For Status changes, you could test Boost - /wp-admin/admin.php?page=jetpack-boost - if the plugin is active - toggle on Optimize Critical CSS loading, and regenerate. Notice text later suggesting 'Remember to regenerate each time you make changes that affect your HTML or CSS structure.' (which I believe will only show if you don't have a paid plan) - this is via the Status component, so should work properly.
  • You can also test Boost Tracks component by visiting the boost upgrade page at /wp-admin/admin.php?page=jetpack-boost#/upgrade and confirming the Upgrade component is loading properly.
• The description on a My Jetpack connected product card is also an affected property so this should work as expected.
• VideoPress package: Video thumbnails added via VideoPress should work as expected.
  • The Privacy restriction toggle on the Media card related to VideoPress - /wp-admin/admin.php?page=jetpack#/performance - allows testing both CheckboxCheckmark and FilterSection
• With the AiImageModal, it's the accept button prop we want to test first. In a post editor, click on the Jetpack icon (top right), then expand the AI assistant, and then 'Generate Image' under 'AI featured image'. It's the 'Set as featured image' button that should work properly, once an image is generated (I couldn't test on Atomic for this, the button didn't seem to work either on the branch or via trunk).

Atomic

• For the jetpack-mu-wpcom package changes, the affected function / file is used by DescriptionSupportLink. These are testable when adding a block in the block editor on a post / page, then viewing the settings sidebar after adding the block (make sure you open the 'Block' tab). There should be a description of the block, and if there is a link that has the class 'fse-inline-support-link', set by DescriptionSupportLink. A good block to test with is the Business Hours block. This should work as expected.
• For the VideoPress changes, the DisabledReasonTooltip should be able to be tested from the Jetpack Settings Writing page (linked above), if the site is private (the disabled reason should show - that the site is private). That said, I was unable to replicate this.

Simple

• VideoPress thumbnails should work as expected (see 'Self hosted and Atomic' above).
• The AIImageModal changes should be testable on Simple (see 'Self hosted and Atomic' above).
• The DescriptionSupportLink should be testable on Simple too (see 'Atomic' above).

[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.
  
• ✅ 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 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 reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen daily.
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly. The next release is scheduled for August 6, 2024 (scheduled code freeze on August 5, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Boost plugin:

• Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the update/jsx-namespace-usage branch.

  • For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack update/jsx-namespace-usage
  

  bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/jsx-namespace-usage
  

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[monsieur-z]

Code changes look straightforward. I tested with a self-hosted and atomic sites: functionalities were working and I didn't notice any errors in the console.