Jetpack: Fix some JS lints ahead of the eslint 9 upgrade (#40503)

To make the eslint 9 upgrade PR smaller, let's fix some of the lints
that it'll complain about ahead of time.

Also, let's take the opportunity to fix the old non-jsdoc lints we had
been ignoring (and the easily fixable jsdoc ones too).

Author: anomiex

projects/plugins/jetpack/.eslintignore

@@ -1,9 +1,6 @@
 # Not loaded by default eslint, but we use tools/js-tools/load-eslint-ignore.js in .eslintrc to pull it in.
 
-/3rd-party/debug-bar/debug-bar.js
-/_inc/jetpack-modules.models.js
-/_inc/postmessage.js
-
+/modules/carousel/swiper-bundle.js
 /modules/custom-css/custom-css/js/core-customizer-css-preview.js
 /modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js
 /modules/custom-css/custom-css/js/core-customizer-css.js

projects/plugins/jetpack/3rd-party/debug-bar/debug-bar.js

@@ -1,8 +1,8 @@
-/* global jQuery, JSON */
+/* eslint no-var: "off" */
 
-( function( $ ) {
-	$( document ).ready( function() {
-		$( '.jetpack-search-debug-bar .json-toggle-wrap .toggle' ).click( function() {
+( function ( $ ) {
+	$( document ).ready( function () {
+		$( '.jetpack-search-debug-bar .json-toggle-wrap .toggle' ).click( function () {
 			var t = $( this ),
 				wrap = t.closest( '.json-toggle-wrap' ),
 				pre = wrap.find( 'pre' ),

projects/plugins/jetpack/_inc/client/.eslintrc.js

@@ -14,5 +14,6 @@ module.exports = {
 				allowedTextDomain: 'jetpack',
 			},
 		],
+		'jsdoc/check-tag-names': [ 1, { definedTags: [ 'ssr-ready' ] } ],
 	},
 };

projects/plugins/jetpack/_inc/client/admin.js

@@ -13,6 +13,7 @@ import store from 'state/redux-store';
 accessibleFocus();
 
 // Add dispatch and actionTypes to the window object so we can use it from the browser's console
+// eslint-disable-next-line no-undef -- webpack sets process.env.NODE_ENV
 if ( 'undefined' !== typeof window && process.env.NODE_ENV === 'development' ) {
 	assign( window, {
 		actionTypes: actionTypes,

projects/plugins/jetpack/_inc/client/components/chart/bar.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';

projects/plugins/jetpack/_inc/client/components/dash-item/test/component.js

@@ -82,12 +82,14 @@ describe( 'DashItem', () => {
 
 	describe( 'when site is connected, is a PRO module, user can toggle', () => {
 		// While the button is passed to <SectionHeader>, that doesn't render it.
+		// eslint-disable-next-line jest/no-disabled-tests -- @todo Fix this, or remove it.
 		it.skip( 'displays a PRO button for a PRO feature', () => {
 			render( <DashItem { ...testProps } />, { initialState: buildInitialState() } );
 			expect( screen.getByRole( 'link', { name: 'Paid' } ) ).toBeInTheDocument();
 		} );
 
 		// Same.
+		// eslint-disable-next-line jest/no-disabled-tests -- @todo Fix this, or remove it.
 		it.skip( 'the button for a PRO feature is linked to #/plans', () => {
 			render( <DashItem { ...testProps } />, { initialState: buildInitialState() } );
 			expect( screen.getByRole( 'link', { name: 'Paid' } ) ).toHaveAttribute( 'href', '#/plans' );

projects/plugins/jetpack/_inc/client/components/jetpack-notices/plan-conflict-warning.jsx

@@ -1,8 +1,8 @@
 import { __, sprintf } from '@wordpress/i18n';
-import SimpleNotice from 'components/notice';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import SimpleNotice from 'components/notice';
 import { getActiveSitePurchases } from 'state/site';
 
 /**

projects/plugins/jetpack/_inc/client/components/modal/index.jsx

@@ -55,7 +55,7 @@ class Modal extends React.Component {
 				// onDeactivate: this.maybeClose,
 				initialFocus: this.props.initialFocus,
 			} );
-		} catch ( e ) {
+		} catch {
 			//noop
 		}
 	}
@@ -65,7 +65,7 @@ class Modal extends React.Component {
 		jQuery( document ).unbind( 'keyup', this.handleEscapeKey );
 		try {
 			this.focusTrap.deactivate();
-		} catch ( e ) {
+		} catch {
 			//noop
 		}
 	}

projects/plugins/jetpack/_inc/client/components/module-settings/connect-module-options.jsx

@@ -1,5 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { get } from 'lodash';
+import React from 'react';
 import { connect } from 'react-redux';
 import { isCurrentUserLinked } from 'state/connection';
 import {
@@ -22,7 +23,7 @@ import {
  * High order component that connects to Jetpack modules'options
  * redux state selectors and action creators.
  *
- * @param {React.Component} Component The component to be connected to the state
+ * @param {React.Component} Component - The component to be connected to the state
  * @return {[React.Component]} The component with some props connected to the state
  */
 export function connectModuleOptions( Component ) {

projects/plugins/jetpack/_inc/client/components/module-settings/with-module-settings-form-helpers.jsx

@@ -1,13 +1,13 @@
-import { connectModuleOptions } from 'components/module-settings/connect-module-options';
-import analytics from 'lib/analytics';
 import { each, get, omit } from 'lodash';
 import React from 'react';
+import { connectModuleOptions } from 'components/module-settings/connect-module-options';
+import analytics from 'lib/analytics';
 
 /**
  * High order component that provides a <form> with functionality
  * to handle input values on the forms' own React component state.
  *
- * @param {React.Component} InnerComponent The component with a top level form element
+ * @param {React.Component} InnerComponent - The component with a top level form element
  * @return {[React.Component]} The component with new functionality
  */
 export function withModuleSettingsFormHelpers( InnerComponent ) {
@@ -34,8 +34,8 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 		 * Updates the list of form values to save, usually options to set or modules to activate.
 		 * Receives an object with key => value pairs to set multiple options or a string and a value to set a single option.
 		 *
-		 * @param {string|object} optionMaybeOptions options to update.
-		 * @param {*}             optionValue        value to set if it's a single option
+		 * @param {string|object} optionMaybeOptions - options to update.
+		 * @param {*}             optionValue        - value to set if it's a single option
 		 * @return {boolean}       Always true
 		 */
 		updateFormStateOptionValue = ( optionMaybeOptions, optionValue = undefined ) => {
@@ -69,9 +69,9 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 		 * If the module is active, only the option is added to the list of form values to send.
 		 * If it's inactive, an additional option stating that the module must be activated is added to the list.
 		 *
-		 * @param {String}  module       the module.
-		 * @param {String}  moduleOption the option slug for the module.
-		 * @param {Boolean} deactivate   whether to deactive the module too.
+		 * @param {string}  module       - the module.
+		 * @param {string}  moduleOption - the option slug for the module.
+		 * @param {boolean} deactivate   - whether to deactive the module too.
 		 */
 		updateFormStateModuleOption = ( module, moduleOption, deactivate = false ) => {
 			this.trackSettingsToggle( module, moduleOption, ! this.getOptionValue( moduleOption ) );
@@ -102,7 +102,7 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 		/**
 		 * Instantly activate or deactivate a module.
 		 *
-		 * @param {String} module the module slug.
+		 * @param {string} module - the module slug.
 		 */
 		toggleModuleNow = module => {
 			this.props.updateOptions( { [ module ]: ! this.getOptionValue( module ) } );
@@ -141,8 +141,8 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 		/**
 		 * Retrieves an option from an existing module, or from an array of modules
 		 * if the form was initialized with an array
-		 * @param {String}  settingName           the setting to get.
-		 * @param {String}  module                the module related to the setting.
+		 * @param {string}  settingName           - the setting to get.
+		 * @param {string}  module                - the module related to the setting.
 		 * @param {boolean} ignoreDisabledModules - Whether to ignore settings for disabled modules.
 		 * @return {*}                 the current value of the settings.
 		 */
@@ -162,7 +162,7 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 		/**
 		 * Check if there are unsaved settings in the card.
 		 *
-		 * @return {Boolean}  True if the form has unsaved changes.
+		 * @return {boolean}  True if the form has unsaved changes.
 		 */
 		isDirty = () => {
 			return !! Object.keys( this.state.options ).length;
@@ -171,27 +171,27 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 		/**
 		 * Checks if a setting is currently being saved.
 		 *
-		 * @param {String|Array} settings The settings to check for a current saving in progress
+		 * @param {string | Array} settings - The settings to check for a current saving in progress
 		 *
-		 * @return {Boolean} True if specified settings are being saved, false otherwise.
+		 * @return {boolean} True if specified settings are being saved, false otherwise.
 		 */
 		isSavingAnyOption = ( settings = '' ) => {
 			return this.props.isUpdating( settings );
 		};
 
 		/**
 		 * Tracks form submissions
-		 * @param {Object } options options passed to recordEvent
+		 * @param {object} options - options passed to recordEvent
 		 */
 		trackFormSubmission = options => {
 			analytics.tracks.recordEvent( 'jetpack_wpa_settings_form_submit', options );
 		};
 
 		/**
 		 * Tracks settings toggles
-		 * @param {String}  module    the module slug.
-		 * @param {String}  setting   the setting slug.
-		 * @param {Boolean} activated whether the settings is currently on
+		 * @param {string}  module    - the module slug.
+		 * @param {string}  setting   - the setting slug.
+		 * @param {boolean} activated - whether the settings is currently on
 		 */
 		trackSettingsToggle = ( module, setting, activated ) => {
 			analytics.tracks.recordEvent( 'jetpack_wpa_settings_toggle', {

projects/plugins/jetpack/_inc/client/components/navigation-settings/test/component.js

@@ -111,9 +111,7 @@ describe( 'NavigationSettings', () => {
 				// eslint-disable-next-line react/jsx-no-bind
 				<NavigationSettings { ...currentTestProps } isModuleActivated={ m => 'publicize' !== m } />
 			);
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'menuitem' ) ).toHaveLength( 1 );
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'option' ) ).toHaveLength( 1 );
 			expect( screen.getByRole( 'menuitem', { name: 'Writing' } ) ).toBeInTheDocument();
 			expect( screen.getByRole( 'option', { name: 'Writing' } ) ).toBeInTheDocument();
@@ -129,9 +127,7 @@ describe( 'NavigationSettings', () => {
 					isModuleActivated={ m => 'post-by-email' !== m }
 				/>
 			);
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'menuitem' ) ).toHaveLength( 1 );
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'option' ) ).toHaveLength( 1 );
 			expect( screen.queryByRole( 'menuitem', { name: 'Writing' } ) ).not.toBeInTheDocument();
 			expect( screen.queryByRole( 'option', { name: 'Writing' } ) ).not.toBeInTheDocument();

projects/plugins/jetpack/_inc/client/components/navigation/test/component.js

@@ -17,9 +17,7 @@ describe( 'Navigation', () => {
 		it( 'renders 1 NavItem component', () => {
 			render( <Navigation { ...testProps } /> );
 
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'menuitem' ) ).toHaveLength( 1 );
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'option' ) ).toHaveLength( 1 );
 
 			expect( screen.getByRole( 'menuitem', { name: 'At a Glance' } ) ).toBeInTheDocument();
@@ -35,9 +33,7 @@ describe( 'Navigation', () => {
 
 		it( 'renders 1 NavItem components', () => {
 			render( <Navigation { ...currentTestProps } /> );
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'menuitem' ) ).toHaveLength( 1 );
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'option' ) ).toHaveLength( 1 );
 		} );
 

projects/plugins/jetpack/_inc/client/components/popover/index.jsx

@@ -90,7 +90,6 @@ class Popover extends Component {
 			if ( ! context || this.isDOMNode( context ) ) {
 				this.domContextRef.current = context;
 			} else {
-				// eslint-disable-next-line no-console
 				this.debug( 'Expected a DOM node for props.context', context );
 			}
 		}
@@ -203,7 +202,6 @@ class Popover extends Component {
 			if ( ! this.props.ignoreContext || this.isDOMNode( this.props.ignoreContext ) ) {
 				ignoreContext = this.props.ignoreContext;
 			} else {
-				// eslint-disable-next-line no-console
 				this.debug( 'Expected a DOM node for props.context', this.props.ignoreContext );
 			}
 			if ( ignoreContext && ignoreContext.contains ) {
@@ -255,7 +253,6 @@ class Popover extends Component {
 		if ( ! this.props.context || this.isDOMNode( this.props.context ) ) {
 			this.domContextRef.current = this.props.context;
 		} else {
-			// eslint-disable-next-line no-console
 			this.debug( 'Expected a DOM node for props.context', this.props.context );
 		}
 

projects/plugins/jetpack/_inc/client/components/popover/util.js

@@ -294,8 +294,8 @@ function offset( pos, el, target ) {
  *
  * @param {TextRectangle} box - result from a `getBoundingClientRect()` call
  * @param {Document}      doc - Document instance to use
- * @return {Object} an object with `top` and `left` Number properties
- * @api private
+ * @return {object} an object with `top` and `left` Number properties
+ * @private
  */
 
 function _offset( box, doc ) {
@@ -314,7 +314,7 @@ function _offset( box, doc ) {
 
 /*
  * Constrain a left to keep the element in the window
- * @param  {Object} pl proposed left
+ * @param  {object} pl proposed left
  * @param  {Number} ew tip element width
  * @return {Number}    the best width
  */
@@ -329,7 +329,7 @@ const isElement = obj => {
 	try {
 		//Using W3 DOM2 (works for FF, Opera and Chrom)
 		return obj instanceof HTMLElement;
-	} catch ( error ) {
+	} catch {
 		return (
 			typeof obj === 'object' &&
 			obj.nodeType === 1 &&

projects/plugins/jetpack/_inc/client/components/section-nav/index.jsx

@@ -1,10 +1,10 @@
 /** @ssr-ready **/
 
 import clsx from 'clsx';
-import Search from 'components/search';
 import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Search from 'components/search';
 import NavItem from './item';
 import NavTabs from './tabs';
 import './style.scss';

projects/plugins/jetpack/_inc/client/components/section-nav/item.jsx

@@ -2,9 +2,9 @@
 
 import { ExternalLink } from '@wordpress/components';
 import clsx from 'clsx';
-import Count from 'components/count';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Count from 'components/count';
 
 /**
  * Main

projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx

@@ -2,11 +2,11 @@
 
 import { getWindowInnerWidth } from '@automattic/viewport';
 import clsx from 'clsx';
-import SelectDropdown from 'components/select-dropdown';
-import DropdownItem from 'components/select-dropdown/item';
 import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
+import SelectDropdown from 'components/select-dropdown';
+import DropdownItem from 'components/select-dropdown/item';
 
 /**
  * Internal Variables

projects/plugins/jetpack/_inc/client/components/select-dropdown/index.jsx

@@ -1,13 +1,13 @@
 /** @ssr-ready **/
 
 import clsx from 'clsx';
+import { filter, find, findIndex, map, result } from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Count from 'components/count';
 import DropdownItem from 'components/select-dropdown/item';
 import DropdownLabel from 'components/select-dropdown/label';
 import DropdownSeparator from 'components/select-dropdown/separator';
-import { filter, find, findIndex, map, result } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
 
 import './style.scss';
 

projects/plugins/jetpack/_inc/client/components/select-dropdown/item.jsx

@@ -1,9 +1,9 @@
 /** @ssr-ready **/
 
 import clsx from 'clsx';
-import Count from 'components/count';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Count from 'components/count';
 
 class SelectDropdownItem extends React.Component {
 	static propTypes = {

projects/plugins/jetpack/_inc/client/components/settings-card/test/component.js

@@ -150,7 +150,6 @@ describe( 'SettingsCard', () => {
 					<Child />
 				</SettingsCard>
 			);
-			// eslint-disable-next-line jest-dom/prefer-in-document -- No, we really want to assert there's exactly 1.
 			expect( screen.getAllByRole( 'button' ) ).toHaveLength( 1 );
 		} );
 	} );

projects/plugins/jetpack/_inc/client/lib/decode-entities/index.js

@@ -3,8 +3,8 @@
  *
  * @since 5.8.0
  *
- * @param {String} text The text to decode
- * @return {String}      Returns the string with HTML entities decoded if DOMParser is available. Returns the original text otherwise.
+ * @param {string} text - The text to decode
+ * @return {string}      Returns the string with HTML entities decoded if DOMParser is available. Returns the original text otherwise.
  */
 export default function decodeEntities( text ) {
 	if ( 'undefined' === typeof DOMParser ) {

projects/plugins/jetpack/_inc/client/lib/touch-detect/index.js

@@ -3,10 +3,10 @@
  * It may not accurately detect a touch screen, but may be close enough depending on the use case.
  *
  * @copyright Modernizr © 2009-2015.
- * @license See CREDITS.md.
- * @see https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
+ * @license MIT
+ * @see https://github.com/Modernizr/Modernizr/blob/d5f881a4de0d5fc1af85921ce9c7dc3919c6d335/feature-detects/touchevents.js
  *
- * @return {Boolean} whether touch screen is available
+ * @return {boolean} whether touch screen is available
  */
 export function hasTouch() {
 	/* global DocumentTouch:true */