React: add new JSX transform (#56451)

* Results of running the update-react-imports codemod

* Turn off react in JSX eslint rules

* Update calypso-build babel config

* Fix className error in autocompleters

* Fix Jest test failures

* Revert test to match snapshot

* Update Banner test to fix a lint error about unused React import

Co-authored-by: Jarda Snajdr <[email protected]>

.eslintrc.js

@@ -166,6 +166,7 @@ module.exports = {
 				'no-undef': 'off',
 				'no-unused-vars': 'off',
 				'react/jsx-no-undef': 'off',
+				'react/jsx-uses-react': 'off',
 				'react/react-in-jsx-scope': 'off',
 				'wpcalypso/jsx-classname-namespace': 'off',
 				'@typescript-eslint/no-unused-vars': 'off',

apps/notifications/src/panel/Notifications.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import { createContext, PureComponent } from 'react';
 import { Provider } from 'react-redux';
 import repliesCache from './comment-replies-cache';
 import RestClient from './rest-client';
@@ -24,7 +24,7 @@ repliesCache.cleanup();
  */
 export const refreshNotes = () => client && client.refreshNotes.call( client );
 
-export const RestClientContext = React.createContext( client );
+export const RestClientContext = createContext( client );
 
 export class Notifications extends PureComponent {
 	static propTypes = {

apps/notifications/src/panel/indices-to-html/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import Gridicon from '../templates/gridicons';
 import noticon2gridicon from '../utils/noticon2gridicon';
@@ -109,7 +109,7 @@ function render_range( new_sub_text, new_sub_range, range_info, range_data, opti
 			// Gridicons have special text, and are thus not recursed into
 			new_container = document.createElement( 'span' );
 			new_container.innerHTML = ReactDOMServer.renderToStaticMarkup(
-				React.createElement( Gridicon, {
+				createElement( Gridicon, {
 					icon: noticon2gridicon( range_info.value ),
 					size: 18,
 				} )

apps/notifications/src/panel/suggestions/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createRef, Component } from 'react';
 import { connect } from 'react-redux';
 import actions from '../state/actions';
 import getSiteSuggestions from '../state/selectors/get-site-suggestions';
@@ -51,8 +51,8 @@ const getSuggestionIndexBySelectedId = function ( suggestions ) {
 	return index > -1 ? index : null;
 };
 
-class Suggestions extends React.Component {
-	suggestionList = React.createRef();
+class Suggestions extends Component {
+	suggestionList = createRef();
 	suggestionNodes = {};
 	state = {};
 

apps/notifications/src/panel/suggestions/suggestion.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 
 const getRegExpFor = function ( type, textToHighlight ) {
 	const expressions = {};
@@ -29,7 +29,7 @@ const highlight = ( content, textToHighlight, type ) => {
 	)[ 0 ];
 };
 
-export class Suggestion extends React.Component {
+export class Suggestion extends Component {
 	render() {
 		const username = highlight( this.props.username, this.props.suggestionsQuery, 'username' );
 		username.unshift( { type: 'text', text: '@' } );

apps/notifications/src/panel/templates/action-button.jsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
 import HotkeyContainer from './container-hotkey';
 import Gridicon from './gridicons';
 

apps/notifications/src/panel/templates/actions.jsx

@@ -1,6 +1,5 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { connect } from 'react-redux';
 import { getActions, getReferenceId } from '../helpers/notes';
 import getIsNoteApproved from '../state/selectors/get-is-note-approved';

apps/notifications/src/panel/templates/block-comment.jsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import React from 'react';
 import { html } from '../indices-to-html';
 import { p } from './functions';
 

apps/notifications/src/panel/templates/block-post.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { html } from '../indices-to-html';
 import { p } from './functions';
 

apps/notifications/src/panel/templates/block-user.jsx

@@ -1,6 +1,6 @@
 import { localize, getLocaleSlug } from 'i18n-calypso';
 import moment from 'moment';
-import React from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import getIsNoteApproved from '../state/selectors/get-is-note-approved';
 import FollowLink from './follow-link';
@@ -12,7 +12,7 @@ function getDisplayURL( url ) {
 	return ( parser.hostname + parser.pathname ).replace( /\/$/, '' );
 }
 
-export class UserBlock extends React.Component {
+export class UserBlock extends Component {
 	/**
 	 * Format a timestamp for showing how long
 	 * ago an event occurred. Specifically here

apps/notifications/src/panel/templates/body.jsx

@@ -1,5 +1,5 @@
 import { localize } from 'i18n-calypso';
-import React from 'react';
+import { Component } from 'react';
 import { html } from '../indices-to-html';
 import { bumpStat } from '../rest-client/bump-stat';
 import { wpcom } from '../rest-client/wpcom';
@@ -19,7 +19,7 @@ function ReplyBlock( { block } ) {
 	return <div className="wpnc__reply">{ replyText }</div>;
 }
 
-export class NoteBody extends React.Component {
+export class NoteBody extends Component {
 	state = {
 		reply: null,
 	};

apps/notifications/src/panel/templates/button-approve.jsx

@@ -1,6 +1,6 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { connect } from 'react-redux';
 import { RestClientContext } from '../Notifications';
 import { keys } from '../helpers/input';

apps/notifications/src/panel/templates/button-back.jsx

@@ -1,6 +1,5 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { connect } from 'react-redux';
 import actions from '../state/actions';
 import Gridicon from './gridicons';

apps/notifications/src/panel/templates/button-edit.jsx

@@ -1,6 +1,5 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { connect } from 'react-redux';
 import { keys } from '../helpers/input';
 import { getEditCommentLink } from '../helpers/notes';

apps/notifications/src/panel/templates/button-like.jsx

@@ -1,6 +1,6 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { connect } from 'react-redux';
 import { RestClientContext } from '../Notifications';
 import { keys } from '../helpers/input';

apps/notifications/src/panel/templates/button-spam.jsx

@@ -1,6 +1,6 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { connect } from 'react-redux';
 import { RestClientContext } from '../Notifications';
 import { keys } from '../helpers/input';

apps/notifications/src/panel/templates/button-trash.jsx

@@ -1,6 +1,6 @@
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { connect } from 'react-redux';
 import { RestClientContext } from '../Notifications';
 import { keys } from '../helpers/input';

apps/notifications/src/panel/templates/comment-reply-input.jsx

@@ -1,5 +1,5 @@
 import { localize } from 'i18n-calypso';
-import React from 'react';
+import { createRef, Component } from 'react';
 import { connect } from 'react-redux';
 import repliesCache from '../comment-replies-cache';
 import { modifierKeyIsActive } from '../helpers/input';
@@ -18,8 +18,8 @@ function stopEvent( event ) {
 	event.preventDefault();
 }
 
-class CommentReplyInput extends React.Component {
-	replyInput = React.createRef();
+class CommentReplyInput extends Component {
+	replyInput = createRef();
 
 	constructor( props ) {
 		super( props );

apps/notifications/src/panel/templates/empty-message.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { bumpStat } from '../rest-client/bump-stat';
 
 // from $wpnc__title-bar-height in boot/sizes.scss

apps/notifications/src/panel/templates/error.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const Error = ( { error } ) => <div className="error">{ error }</div>;
 
 export default Error;

apps/notifications/src/panel/templates/filter-bar.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import getFilterName from '../state/selectors/get-filter-name';
 import Filters from './filters';

apps/notifications/src/panel/templates/follow-link.jsx

@@ -1,6 +1,6 @@
 import { useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React from 'react';
+import { useState } from 'react';
 import useSafe from '../helpers/use-safe';
 import { bumpStat } from '../rest-client/bump-stat';
 import { wpcom } from '../rest-client/wpcom';
@@ -17,8 +17,8 @@ const followStatTypes = {
 export const FollowLink = ( { site, noteType, isFollowing: initialIsFollowing } ) => {
 	const translate = useTranslate();
 
-	const [ isRequestRunning, setIsRequestRunning ] = React.useState( false );
-	const [ isFollowing, setIsFollowing ] = React.useState( initialIsFollowing );
+	const [ isRequestRunning, setIsRequestRunning ] = useState( false );
+	const [ isFollowing, setIsFollowing ] = useState( initialIsFollowing );
 
 	const safeSetIsFollowing = useSafe( setIsFollowing );
 	const safeSetIsRequestRunning = useSafe( setIsRequestRunning );

apps/notifications/src/panel/templates/functions.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { html as toHtml } from '../indices-to-html';
 
 /**

apps/notifications/src/panel/templates/gridicons.jsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Component } from 'react';
 
-export default class extends React.Component {
+export default class extends Component {
 	static displayName = 'Gridicons';
 
 	static propTypes = {

apps/notifications/src/panel/templates/image-loader.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 /**
  * Module variables

apps/notifications/src/panel/templates/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import { modifierKeyIsActive } from '../helpers/input';
@@ -62,7 +62,7 @@ export const findNextNoteId = ( noteId, notes ) => {
 	return notes[ nextIndex ].id;
 };
 
-class Layout extends React.Component {
+class Layout extends Component {
 	state = {
 		lastSelectedIndex: 0,
 		navigationEnabled: true,

apps/notifications/src/panel/templates/list-header.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { connect } from 'react-redux';
 import actions from '../state/actions';
 import Gridicon from './gridicons';

apps/notifications/src/panel/templates/nav-button.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import Gridicon from './gridicons';
 
 const noop = () => {};

apps/notifications/src/panel/templates/note-list.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
-import React from 'react';
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import actions from '../state/actions';
@@ -23,7 +23,7 @@ const DAY_MILLISECONDS = 24 * 60 * 60 * 1000;
 // from $wpnc__title-bar-height in boot/sizes.scss
 const TITLE_OFFSET = 38;
 
-export class NoteList extends React.Component {
+export class NoteList extends Component {
 	static defaultProps = {
 		scrollTimeout: 200,
 	};

apps/notifications/src/panel/templates/note.jsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import { connect } from 'react-redux';
 import { getActions } from '../helpers/notes';
 import getIsNoteApproved from '../state/selectors/get-is-note-approved';

apps/notifications/src/panel/templates/preface.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { pSoup } from './functions';
 
 export const Preface = ( { blocks } ) => <div className="wpnc__preface">{ pSoup( blocks ) }</div>;

apps/notifications/src/panel/templates/spinner.jsx

@@ -4,7 +4,7 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 export default class Spinner extends PureComponent {
 	static propTypes = {

apps/notifications/src/panel/templates/status-bar.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { Component } from 'react';
 import Gridicon from './gridicons';
 
-export class StatusBar extends React.Component {
+export class StatusBar extends Component {
 	static defaultProps = {
 		statusTimeout: 4000,
 	};

apps/notifications/src/panel/templates/summary-in-list.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import { recordTracksEvent } from '../helpers/stats';
 import { html } from '../indices-to-html';
@@ -7,7 +7,7 @@ import noticon2gridicon from '../utils/noticon2gridicon';
 import Gridicon from './gridicons';
 import ImagePreloader from './image-loader';
 
-export class SummaryInList extends React.Component {
+export class SummaryInList extends Component {
 	handleClick = ( event ) => {
 		event.stopPropagation();
 		event.preventDefault();

apps/notifications/src/panel/templates/summary-in-single.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, createFactory } from 'react';
 import { html } from '../indices-to-html';
 import { linkProps } from './functions';
 
@@ -8,7 +8,7 @@ const Snippet = ( { note, snippet, url } ) => (
 	</a>
 );
 
-class UserHeader extends React.Component {
+class UserHeader extends Component {
 	render() {
 		const grav = this.props.user.media[ 0 ];
 		const grav_tag = <img src={ grav.url } height={ grav.height } width={ grav.width } />;
@@ -61,8 +61,8 @@ class UserHeader extends React.Component {
 	}
 }
 
-const Header = React.createFactory(
-	class extends React.Component {
+const Header = createFactory(
+	class extends Component {
 		render() {
 			const subject = (
 				<div
@@ -83,7 +83,7 @@ const Header = React.createFactory(
 	}
 );
 
-class SummaryInSingle extends React.Component {
+class SummaryInSingle extends Component {
 	render() {
 		let header_url;
 		let parser;

apps/notifications/src/panel/templates/undo-list-item.jsx

@@ -1,5 +1,5 @@
 import { localize } from 'i18n-calypso';
-import React from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import { modifierKeyIsActive } from '../helpers/input';
 import { bumpStat } from '../rest-client/bump-stat';
@@ -12,7 +12,7 @@ const { recordTracksEvent } = require( '../helpers/stats' );
 
 const KEY_U = 85;
 
-export class UndoListItem extends React.Component {
+export class UndoListItem extends Component {
 	state = {
 		undoTimer: null /* handle for queued action timer */,
 		undoTimeout: 4500 /* ms until action is actually executed */,