Update the @woocommerce/eslint-plugin and fix bugs (#36988)

packages/js/admin-e2e-tests/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Lint fixes

packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { waitForElementByText, getElementByText } from '../utils/actions';
+import { waitForElementByText } from '../utils/actions';
 import { BasePage } from './BasePage';
 
 type PaymentMethodWithSetupButton =
@@ -12,7 +12,7 @@ type PaymentMethodWithSetupButton =
 	| 'mollie'
 	| 'bacs';
 
-type PaymentMethod = PaymentMethodWithSetupButton | 'cod';
+//  type PaymentMethod = PaymentMethodWithSetupButton | 'cod';
 
 export class PaymentsSetup extends BasePage {
 	url = 'wp-admin/admin.php?page=wc-admin&task=payments';

packages/js/components/.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
 	extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
 	root: true,
+	ignorePatterns: [ '**/test/*.ts', '**/test/*.tsx' ],
 	overrides: [
 		{
 			files: [

packages/js/components/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Adjust eslintrc for changes to eslint plugin.

packages/js/components/src/chart/d3chart/utils/axis-x.js

@@ -192,7 +192,7 @@ export const compareStrings = (
 ) => {
 	const string1 = s1.split( splitChar );
 	const string2 = s2.split( splitChar );
-	const diff = new Array();
+	const diff = [];
 	const long = s1.length > s2.length ? string1 : string2;
 	for ( let x = 0; x < long.length; x++ ) {
 		// eslint-disable-next-line no-unused-expressions

packages/js/components/src/date-time-picker-control/stories/index.tsx

@@ -8,7 +8,7 @@ import { createElement, useCallback, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DateTimePickerControl, defaultDateFormat } from '../';
+import { DateTimePickerControl } from '../';
 
 export default {
 	title: 'WooCommerce Admin/components/DateTimePickerControl',

packages/js/components/src/media-uploader/stories/index.tsx

@@ -12,11 +12,6 @@ import { useState } from '@wordpress/element';
 import { MediaUploader } from '../';
 import { File } from '../types';
 
-declare let Blob: {
-	prototype: Blob;
-	new (): Blob;
-};
-
 const MockMediaUpload = ( { onSelect, render } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 

packages/js/components/src/product-fields/fields/basic-select-control/render.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createElement } from '@wordpress/element';
-import { RadioControl, SelectControl } from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

packages/js/components/src/search-list-control/index.js

@@ -82,20 +82,6 @@ export const SearchListControl = ( props ) => {
 		};
 	};
 
-	const onSelect = ( item ) => {
-		return () => {
-			if ( isSelected( item ) ) {
-				onRemove( item.id )();
-				return;
-			}
-			if ( isSingle ) {
-				onChange( [ item ] );
-			} else {
-				onChange( [ ...selected, item ] );
-			}
-		};
-	};
-
 	const isSelected = ( item ) =>
 		findIndex( selected, { id: item.id } ) !== -1;
 
@@ -114,6 +100,20 @@ export const SearchListControl = ( props ) => {
 			: filteredList;
 	};
 
+	const onSelect = ( item ) => {
+		return () => {
+			if ( isSelected( item ) ) {
+				onRemove( item.id )();
+				return;
+			}
+			if ( isSingle ) {
+				onChange( [ item ] );
+			} else {
+				onChange( [ ...selected, item ] );
+			}
+		};
+	};
+
 	const defaultRenderItem = ( args ) => {
 		return <SearchListItem { ...args } />;
 	};

packages/js/components/src/select-control/test/index.js

@@ -169,7 +169,7 @@ describe( 'SelectControl', () => {
 
 	it( 'changes the options on search', async () => {
 		const queriedOptions = [];
-		// eslint-disable-next-line no-shadow
+		// eslint-disable-next-line @typescript-eslint/no-shadow
 		const queryOptions = ( options, searchedQuery ) => {
 			if ( searchedQuery === 'test' ) {
 				queriedOptions.push( {

packages/js/components/src/sortable/sortable-handle.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { createElement, useContext } from '@wordpress/element';
 
 /**

packages/js/components/src/table/index.tsx

@@ -27,13 +27,14 @@ import TablePlaceholder from './placeholder';
 import TableSummary, { TableSummaryPlaceholder } from './summary';
 import { TableCardProps } from './types';
 
-const defaultOnQueryChange =
-	( param: string ) => ( path?: string, direction?: string ) => {};
+const defaultOnQueryChange: (
+	param: string
+) => ( path?: string, direction?: string ) => void = () => () => {};
 
-const defaultOnColumnsChange = (
+const defaultOnColumnsChange: (
 	showCols: Array< string >,
 	key?: string
-) => {};
+) => void = () => {};
 /**
  * This is an accessible, sortable, and scrollable table for displaying tabular data (like revenue and other analytics data).
  * It accepts `headers` for column headers, and `rows` for the table content.

packages/js/components/src/tree-select-control/index.js

@@ -385,28 +385,6 @@ const TreeSelectControl = ( {
 		);
 	};
 
-	/**
-	 * Handles a change on the Tree options. Could be a click on a parent option
-	 * or a child option
-	 *
-	 * @param {boolean}     checked Indicates if the item should be checked
-	 * @param {InnerOption} option  The option to change
-	 * @param {InnerOption} parent  The options parent (could be null)
-	 */
-	const handleOptionsChange = ( checked, option, parent ) => {
-		if ( option.hasChildren ) {
-			handleParentChange( checked, option );
-		} else {
-			handleSingleChange( checked, option, parent );
-		}
-
-		onInputChange( '' );
-		setInputControlValue( '' );
-		if ( ! nodesExpanded.includes( option.parent ) ) {
-			controlRef.current.focus();
-		}
-	};
-
 	/**
 	 * Handles a change of a child element.
 	 *
@@ -459,6 +437,28 @@ const TreeSelectControl = ( {
 		onChange( newValue );
 	};
 
+	/**
+	 * Handles a change on the Tree options. Could be a click on a parent option
+	 * or a child option
+	 *
+	 * @param {boolean}     checked Indicates if the item should be checked
+	 * @param {InnerOption} option  The option to change
+	 * @param {InnerOption} parent  The options parent (could be null)
+	 */
+	const handleOptionsChange = ( checked, option, parent ) => {
+		if ( option.hasChildren ) {
+			handleParentChange( checked, option );
+		} else {
+			handleSingleChange( checked, option, parent );
+		}
+
+		onInputChange( '' );
+		setInputControlValue( '' );
+		if ( ! nodesExpanded.includes( option.parent ) ) {
+			controlRef.current.focus();
+		}
+	};
+
 	/**
 	 * Handles a change of a Tag element. We map them to Value format.
 	 *

packages/js/customer-effort-score/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Fix lint issues

packages/js/customer-effort-score/src/feedback-modal/feedback-modal.tsx

@@ -5,7 +5,6 @@ import { createElement, useState } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { Button, Modal } from '@wordpress/components';
 import { Text } from '@woocommerce/experimental';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Provides a modal requesting customer feedback.

packages/js/customer-effort-score/src/feedback-modal/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { createElement } from '@wordpress/element';
 
 /**

packages/js/customer-effort-score/src/product-mvp-feedback-modal/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { createElement } from '@wordpress/element';
 
 /**

packages/js/data/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Fix lint issues

packages/js/data/src/products/test/reducer.ts

@@ -223,7 +223,6 @@ describe( 'products reducer', () => {
 	} );
 
 	it( 'should handle CREATE_PRODUCT_START', () => {
-		const id = 1;
 		const state = reducer( defaultState, {
 			type: TYPES.CREATE_PRODUCT_START,
 		} );

packages/js/e2e-core-tests/.eslintrc.js

@@ -1,10 +1,15 @@
 module.exports = {
-	extends: ['plugin:@woocommerce/eslint-plugin/recommended'],
-	plugins: ['jest'],
+	extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
+	plugins: [ 'jest' ],
 	root: true,
 	env: {
 		'jest/globals': true,
 	},
+	rules: {
+		'jest/expect-expect': 'off',
+		'jest/no-disabled-tests': 'off',
+		'@typescript-eslint/no-shadow': 'off',
+	},
 	globals: {
 		page: true,
 	},

packages/js/e2e-environment/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
 	extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
+	ignorePatterns: [ '**/jest.*' ],
 	env: {
 		'jest/globals': true,
 	},

packages/js/eslint-plugin/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-	extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
-	root: true,
-};

packages/js/eslint-plugin/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Update deps and fix a bug where package rc files were not respected.

packages/js/eslint-plugin/configs/index.js

@@ -1 +0,0 @@
-module.exports = require( 'requireindex' )( __dirname );

packages/js/eslint-plugin/configs/recommended.js

@@ -3,6 +3,7 @@ module.exports = {
 		'plugin:react-hooks/recommended',
 		require.resolve( './custom.js' ),
 		'plugin:@wordpress/eslint-plugin/recommended',
+		'plugin:@typescript-eslint/recommended',
 	],
 	parser: '@typescript-eslint/parser',
 	globals: {
@@ -10,7 +11,7 @@ module.exports = {
 		'jest/globals': true,
 		jest: true,
 	},
-	plugins: [ '@wordpress' ],
+	plugins: [ '@wordpress', '@typescript-eslint' ],
 	rules: {
 		radix: 'error',
 		yoda: [ 'error', 'never' ],
@@ -22,6 +23,15 @@ module.exports = {
 				allowedTextDomain: 'woocommerce',
 			},
 		],
+		'@typescript-eslint/no-explicit-any': 'error',
+		'@typescript-eslint/no-use-before-define': [ 'error' ],
+		'@typescript-eslint/no-shadow': [ 'error' ],
+		'@typescript-eslint/no-empty-function': 'off',
+		camelcase: 'off',
+		'no-use-before-define': 'off',
+		'jsdoc/require-param': 'off',
+		// Making use of typescript no-shadow instead, fixes issues with enum.
+		'no-shadow': 'off',
 		'@wordpress/valid-sprintf': 'warn',
 		'@wordpress/no-unsafe-wp-apis': 'warn',
 		'@wordpress/no-global-active-element': 'warn',
@@ -60,17 +70,15 @@ module.exports = {
 	},
 	overrides: [
 		{
-			files: [ '*.ts', '*.tsx' ],
-			extends: [ 'plugin:@typescript-eslint/recommended' ],
+			files: [ '*.js', '*.jsx' ],
 			rules: {
-				'@typescript-eslint/no-explicit-any': 'error',
-				'@typescript-eslint/no-use-before-define': [ 'error' ],
-				'@typescript-eslint/no-shadow': [ 'error' ],
-				'@typescript-eslint/no-empty-function': 'off',
-				camelcase: 'off',
-				'no-use-before-define': 'off',
-				'jsdoc/require-param': 'off',
-				// Making use of typescript no-shadow instead, fixes issues with enum.
+				'@typescript-eslint/no-var-requires': 'off',
+			},
+		},
+		{
+			files: [ '*.ts', '*.tsx' ],
+			rules: {
+				// Making use of typescript no-shadow instead.
 				'no-shadow': 'off',
 			},
 		},

packages/js/eslint-plugin/index.js

@@ -1,4 +1,8 @@
 module.exports = {
-	configs: require( './configs' ),
-	rules: require( './rules' ),
+	configs: {
+		recommended: require( './configs/recommended' ),
+	},
+	rules: {
+		'dependency-group': require( './rules/dependency-group' ),
+	},
 };

packages/js/eslint-plugin/package.json

@@ -30,11 +30,11 @@
 	],
 	"main": "index.js",
 	"dependencies": {
-		"@typescript-eslint/parser": "^5.14.0",
-		"@wordpress/eslint-plugin": "^13.3.0",
-		"eslint-plugin-react-hooks": "^4.3.0",
-		"eslint-plugin-testing-library": "^5.1.0",
-		"requireindex": "^1.2.0"
+		"@typescript-eslint/parser": "^5.54.0",
+		"@typescript-eslint/eslint-plugin": "^5.54.0",
+		"@wordpress/eslint-plugin": "^14.0.0",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"eslint-plugin-testing-library": "^5.10.2"
 	},
 	"publishConfig": {
 		"access": "public"

packages/js/eslint-plugin/rules/index.js

@@ -1 +0,0 @@
-module.exports = require( 'requireindex' )( __dirname );

packages/js/experimental/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Fix lint issues

packages/js/experimental/src/inbox-note/inbox-note.tsx

@@ -143,7 +143,6 @@ const InboxNoteCard: React.FC< InboxNoteProps > = ( {
 
 	const {
 		content,
-		date_created: dateCreated,
 		date_created_gmt: dateCreatedGmt,
 		image,
 		is_deleted: isDeleted,

packages/js/internal-e2e-builds/build.js

@@ -49,37 +49,6 @@ function getBuildPath( file, buildFolder ) {
 	return path.resolve( pkgBuildPath, relativeToSrcPath );
 }
 
-/**
- * Given a list of scss and js filepaths, divide them into sets them and rebuild.
- *
- * @param {Array} files list of files to rebuild
- */
-function buildFiles( files ) {
-	// Reduce files into a unique sets of javaScript files and scss packages.
-	const buildPaths = files.reduce(
-		( accumulator, filePath ) => {
-			if ( isJsFile( filePath ) ) {
-				accumulator.jsFiles.add( filePath );
-			}
-			return accumulator;
-		},
-		{ jsFiles: new Set() }
-	);
-
-	buildPaths.jsFiles.forEach( buildJsFile );
-}
-
-/**
- * Build a javaScript file for the required environments (node and ES5)
- *
- * @param {string}  file   File path to build
- * @param {boolean} silent Show logs
- */
-function buildJsFile( file, silent ) {
-	buildJsFileFor( file, silent, 'main' );
-	buildJsFileFor( file, silent, 'module' );
-}
-
 /**
  * Build a file for a specific environment
  *
@@ -116,6 +85,37 @@ function buildJsFileFor( file, silent, environment ) {
 	}
 }
 
+/**
+ * Build a javaScript file for the required environments (node and ES5)
+ *
+ * @param {string}  file   File path to build
+ * @param {boolean} silent Show logs
+ */
+function buildJsFile( file, silent ) {
+	buildJsFileFor( file, silent, 'main' );
+	buildJsFileFor( file, silent, 'module' );
+}
+
+/**
+ * Given a list of scss and js filepaths, divide them into sets them and rebuild.
+ *
+ * @param {Array} files list of files to rebuild
+ */
+function buildFiles( files ) {
+	// Reduce files into a unique sets of javaScript files and scss packages.
+	const buildPaths = files.reduce(
+		( accumulator, filePath ) => {
+			if ( isJsFile( filePath ) ) {
+				accumulator.jsFiles.add( filePath );
+			}
+			return accumulator;
+		},
+		{ jsFiles: new Set() }
+	);
+
+	buildPaths.jsFiles.forEach( buildJsFile );
+}
+
 /**
  * Build the provided package path
  *

packages/js/navigation/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Fix lint issues

packages/js/navigation/src/filters.js

@@ -3,6 +3,20 @@
  */
 import { find, get, omit } from 'lodash';
 
+/**
+ * Get the url query key from the filter key and rule.
+ *
+ * @param {string} key  - filter key.
+ * @param {string} rule - filter rule.
+ * @return {string} - url query key.
+ */
+export function getUrlKey( key, rule ) {
+	if ( rule && rule.length ) {
+		return `${ key }_${ rule }`;
+	}
+	return key;
+}
+
 /**
  * Collapse an array of filter values with subFilters into a 1-dimensional array.
  *
@@ -166,17 +180,3 @@ export function getQueryFromActiveFilters( activeFilters, query, config ) {
 
 	return { ...previousData, ...nextData };
 }
-
-/**
- * Get the url query key from the filter key and rule.
- *
- * @param {string} key  - filter key.
- * @param {string} rule - filter rule.
- * @return {string} - url query key.
- */
-export function getUrlKey( key, rule ) {
-	if ( rule && rule.length ) {
-		return `${ key }_${ rule }`;
-	}
-	return key;
-}

packages/js/navigation/src/index.js

@@ -37,6 +37,41 @@ const TIME_EXCLUDED_SCREENS_FILTER = 'woocommerce_admin_time_excluded_screens';
  */
 export const getPath = () => getHistory().location.pathname;
 
+/**
+ * Get the current query string, parsed into an object, from history.
+ *
+ * @return {Object}  Current query object, defaults to empty object.
+ */
+export function getQuery() {
+	const search = getHistory().location.search;
+	if ( search.length ) {
+		return parse( search.substring( 1 ) ) || {};
+	}
+	return {};
+}
+
+/**
+ * Return a URL with set query parameters.
+ *
+ * @param {Object} query        object of params to be updated.
+ * @param {string} path         Relative path (defaults to current path).
+ * @param {Object} currentQuery object of current query params (defaults to current querystring).
+ * @param {string} page         Page key (defaults to "wc-admin")
+ * @return {string}  Updated URL merging query params into existing params.
+ */
+export function getNewPath(
+	query,
+	path = getPath(),
+	currentQuery = getQuery(),
+	page = 'wc-admin'
+) {
+	const args = { page, ...currentQuery, ...query };
+	if ( path !== '/' ) {
+		args.path = path;
+	}
+	return addQueryArgs( 'admin.php', args );
+}
+
 /**
  * Gets query parameters that should persist between screens or updates
  * to reports, such as filtering.
@@ -75,16 +110,6 @@ export const getQueryExcludedScreens = () =>
 		'homescreen',
 	] );
 
-/**
- * Given a path, return whether it is an excluded screen
- *
- * @param {Object} path Path to check
- *
- * @return {boolean} Boolean representing whether path is excluded
- */
-export const pathIsExcluded = ( path ) =>
-	getQueryExcludedScreens().includes( getScreenFromPath( path ) );
-
 /**
  * Retrieve a string 'name' representing the current screen
  *
@@ -97,16 +122,6 @@ export const getScreenFromPath = ( path = getPath() ) => {
 		: path.replace( '/analytics', '' ).replace( '/', '' );
 };
 
-/**
- * Get an array of IDs from a comma-separated query parameter.
- *
- * @param {string} [queryString=''] string value extracted from URL.
- * @return {Array<number>} List of IDs converted to an array of unique integers.
- */
-export function getIdsFromQuery( queryString = '' ) {
-	return [ ...getSetOfIdsFromQuery( queryString ) ];
-}
-
 /**
  * Get an array of IDs from a comma-separated query parameter.
  *
@@ -122,121 +137,6 @@ export function getSetOfIdsFromQuery( queryString = '' ) {
 	);
 }
 
-/**
- * Get an array of searched words given a query.
- *
- * @param {Object} query Query object.
- * @return {Array} List of search words.
- */
-export function getSearchWords( query = navUtils.getQuery() ) {
-	if ( typeof query !== 'object' ) {
-		throw new Error(
-			'Invalid parameter passed to getSearchWords, it expects an object or no parameters.'
-		);
-	}
-	const { search } = query;
-	if ( ! search ) {
-		return [];
-	}
-	if ( typeof search !== 'string' ) {
-		throw new Error(
-			"Invalid 'search' type. getSearchWords expects query's 'search' property to be a string."
-		);
-	}
-	return search
-		.split( ',' )
-		.map( ( searchWord ) => searchWord.replace( '%2C', ',' ) );
-}
-
-/**
- * Return a URL with set query parameters.
- *
- * @param {Object} query        object of params to be updated.
- * @param {string} path         Relative path (defaults to current path).
- * @param {Object} currentQuery object of current query params (defaults to current querystring).
- * @param {string} page         Page key (defaults to "wc-admin")
- * @return {string}  Updated URL merging query params into existing params.
- */
-export function getNewPath(
-	query,
-	path = getPath(),
-	currentQuery = getQuery(),
-	page = 'wc-admin'
-) {
-	const args = { page, ...currentQuery, ...query };
-	if ( path !== '/' ) {
-		args.path = path;
-	}
-	return addQueryArgs( 'admin.php', args );
-}
-
-/**
- * Get the current query string, parsed into an object, from history.
- *
- * @return {Object}  Current query object, defaults to empty object.
- */
-export function getQuery() {
-	const search = getHistory().location.search;
-	if ( search.length ) {
-		return parse( search.substring( 1 ) ) || {};
-	}
-	return {};
-}
-
-/**
- * Like getQuery but in useHook format for easy usage in React functional components
- *
- * @return {Record<string, string>} Current query object, defaults to empty object.
- */
-export const useQuery = () => {
-	const [ queryState, setQueryState ] = useState( {} );
-	const [ locationChanged, setLocationChanged ] = useState( true );
-	useLayoutEffect( () => {
-		return addHistoryListener( () => {
-			setLocationChanged( true );
-		} );
-	}, [] );
-
-	useEffect( () => {
-		if ( locationChanged ) {
-			const query = getQuery();
-			setQueryState( query );
-			setLocationChanged( false );
-		}
-	}, [ locationChanged ] );
-	return queryState;
-};
-
-/**
- * This function returns an event handler for the given `param`
- *
- * @param {string} param The parameter in the querystring which should be updated (ex `page`, `per_page`)
- * @param {string} path  Relative path (defaults to current path).
- * @param {string} query object of current query params (defaults to current querystring).
- * @return {Function} A callback which will update `param` to the passed value when called.
- */
-export function onQueryChange( param, path = getPath(), query = getQuery() ) {
-	switch ( param ) {
-		case 'sort':
-			return ( key, dir ) =>
-				updateQueryString( { orderby: key, order: dir }, path, query );
-		case 'compare':
-			return ( key, queryParam, ids ) =>
-				updateQueryString(
-					{
-						[ queryParam ]: `compare-${ key }`,
-						[ key ]: ids,
-						search: undefined,
-					},
-					path,
-					query
-				);
-		default:
-			return ( value ) =>
-				updateQueryString( { [ param ]: value }, path, query );
-	}
-}
-
 /**
  * Updates the query parameters of the current page.
  *
@@ -300,6 +200,106 @@ export const addHistoryListener = ( listener ) => {
 	};
 };
 
+/**
+ * Given a path, return whether it is an excluded screen
+ *
+ * @param {Object} path Path to check
+ *
+ * @return {boolean} Boolean representing whether path is excluded
+ */
+export const pathIsExcluded = ( path ) =>
+	getQueryExcludedScreens().includes( getScreenFromPath( path ) );
+
+/**
+ * Get an array of IDs from a comma-separated query parameter.
+ *
+ * @param {string} [queryString=''] string value extracted from URL.
+ * @return {Array<number>} List of IDs converted to an array of unique integers.
+ */
+export function getIdsFromQuery( queryString = '' ) {
+	return [ ...getSetOfIdsFromQuery( queryString ) ];
+}
+
+/**
+ * Get an array of searched words given a query.
+ *
+ * @param {Object} query Query object.
+ * @return {Array} List of search words.
+ */
+export function getSearchWords( query = navUtils.getQuery() ) {
+	if ( typeof query !== 'object' ) {
+		throw new Error(
+			'Invalid parameter passed to getSearchWords, it expects an object or no parameters.'
+		);
+	}
+	const { search } = query;
+	if ( ! search ) {
+		return [];
+	}
+	if ( typeof search !== 'string' ) {
+		throw new Error(
+			"Invalid 'search' type. getSearchWords expects query's 'search' property to be a string."
+		);
+	}
+	return search
+		.split( ',' )
+		.map( ( searchWord ) => searchWord.replace( '%2C', ',' ) );
+}
+
+/**
+ * Like getQuery but in useHook format for easy usage in React functional components
+ *
+ * @return {Record<string, string>} Current query object, defaults to empty object.
+ */
+export const useQuery = () => {
+	const [ queryState, setQueryState ] = useState( {} );
+	const [ locationChanged, setLocationChanged ] = useState( true );
+	useLayoutEffect( () => {
+		return addHistoryListener( () => {
+			setLocationChanged( true );
+		} );
+	}, [] );
+
+	useEffect( () => {
+		if ( locationChanged ) {
+			const query = getQuery();
+			setQueryState( query );
+			setLocationChanged( false );
+		}
+	}, [ locationChanged ] );
+	return queryState;
+};
+
+/**
+ * This function returns an event handler for the given `param`
+ *
+ * @param {string} param The parameter in the querystring which should be updated (ex `page`, `per_page`)
+ * @param {string} path  Relative path (defaults to current path).
+ * @param {string} query object of current query params (defaults to current querystring).
+ * @return {Function} A callback which will update `param` to the passed value when called.
+ */
+export function onQueryChange( param, path = getPath(), query = getQuery() ) {
+	switch ( param ) {
+		case 'sort':
+			return ( key, dir ) =>
+				updateQueryString( { orderby: key, order: dir }, path, query );
+		case 'compare':
+			return ( key, queryParam, ids ) =>
+				updateQueryString(
+					{
+						[ queryParam ]: `compare-${ key }`,
+						[ key ]: ids,
+						search: undefined,
+					},
+					path,
+					query
+				);
+		default:
+			return ( value ) =>
+				updateQueryString( { [ param ]: value }, path, query );
+	}
+}
+
 /**
  * Determines if a URL is a WC admin url.
  *

packages/js/onboarding/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Fix lint issues

packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx

@@ -13,7 +13,6 @@ import { Link } from '@woocommerce/components';
  */
 import { PaymentMethodsIcons } from './PaymentMethodsIcons';
 import { WCPayBannerImage } from './WCPayBannerImage';
-import { WCPayBannerImageCut } from './WCPayBannerImageCut';
 
 export const WCPayBannerFooter: React.VFC = () => (
 	<CardFooter className="woocommerce-recommended-payments-banner__footer">

packages/js/product-editor/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Fix lint issues

packages/js/product-editor/src/utils/create-ordered-children.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { isValidElement, Fragment } from 'react';
-import { Slot, Fill } from '@wordpress/components';
+import { isValidElement } from 'react';
+import { Fill } from '@wordpress/components';
 import { cloneElement, createElement } from '@wordpress/element';
 
 type ChildrenProps = {

plugins/woocommerce-admin/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
 			files: [ 'client/**/*.js', 'client/**/*.jsx', 'client/**/*.tsx' ],
 			rules: {
 				'react/react-in-jsx-scope': 'off',
+				'@typescript-eslint/no-use-before-define': 'warn',
 			},
 		},
 	],

plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-feedback-modal-container.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { ProductMVPFeedbackModal } from '@woocommerce/customer-effort-score';
 import { recordEvent } from '@woocommerce/tracks';

plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.tsx

@@ -2,9 +2,9 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { COUNTRIES_STORE_NAME, Country, Locale } from '@woocommerce/data';
+import { COUNTRIES_STORE_NAME, Country } from '@woocommerce/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { escapeRegExp, has } from 'lodash';
+import { escapeRegExp } from 'lodash';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { SelectControl, TextControl } from '@woocommerce/components';
 import { Spinner } from '@wordpress/components';
@@ -28,10 +28,10 @@ type Option = { key: string; label: string };
 /**
  * Form validation.
  *
- * @param {Object} locale The store locale.
  * @return {Function} Validator function.
  */
-export function getStoreAddressValidator( locale: Locale = {} ) {
+// Note: param was removed because its not used, callers still assume its needed. TODO: Fix this.
+export function getStoreAddressValidator(/* locale: Locale = {} */) {
 	/**
 	 * Form validator.
 	 *

plugins/woocommerce-admin/client/payments-welcome/exit-survey-modal.tsx

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
-import apiFetch from '@wordpress/api-fetch';
 import { recordEvent } from '@woocommerce/tracks';
 
 /**
@@ -22,9 +21,7 @@ import strings from './strings';
  * Provides a modal requesting customer feedback.
  *
  */
-function ExitSurveyModal( {
-	setExitSurveyModalOpen,
-}: {
+function ExitSurveyModal( {}: {
 	// eslint-disable-next-line @typescript-eslint/ban-types
 	setExitSurveyModalOpen: Function;
 } ): JSX.Element | null {

plugins/woocommerce-admin/client/products/fields/attribute-term-input-field/test/attribute-term-input-field.spec.tsx

@@ -4,7 +4,7 @@
 import { act, render, waitFor, screen } from '@testing-library/react';
 import { useState } from '@wordpress/element';
 import { resolveSelect } from '@wordpress/data';
-import { ProductAttribute, ProductAttributeTerm } from '@woocommerce/data';
+import { ProductAttributeTerm } from '@woocommerce/data';
 
 /**
  * Internal dependencies
@@ -75,80 +75,81 @@ jest.mock( '@woocommerce/components', () => {
 	};
 } );
 
-const attributeList: ProductAttribute[] = [
-	{
-		id: 15,
-		name: 'Automotive',
-		position: 0,
-		visible: true,
-		variation: false,
-		options: [ 'test' ],
-	},
-	{
-		id: 1,
-		name: 'Color',
-		position: 2,
-		visible: true,
-		variation: true,
-		options: [
-			'Beige',
-			'black',
-			'Blue',
-			'brown',
-			'Gray',
-			'Green',
-			'mint',
-			'orange',
-			'pink',
-			'Red',
-			'white',
-			'Yellow',
-		],
-	},
-];
+// Not used - TODO: Remove?
+// const attributeList: ProductAttribute[] = [
+// 	{
+// 		id: 15,
+// 		name: 'Automotive',
+// 		position: 0,
+// 		visible: true,
+// 		variation: false,
+// 		options: [ 'test' ],
+// 	},
+// 	{
+// 		id: 1,
+// 		name: 'Color',
+// 		position: 2,
+// 		visible: true,
+// 		variation: true,
+// 		options: [
+// 			'Beige',
+// 			'black',
+// 			'Blue',
+// 			'brown',
+// 			'Gray',
+// 			'Green',
+// 			'mint',
+// 			'orange',
+// 			'pink',
+// 			'Red',
+// 			'white',
+// 			'Yellow',
+// 		],
+// 	},
+// ];
 
-const attributeTermList: ProductAttributeTerm[] = [
-	{
-		id: 23,
-		name: 'XXS',
-		slug: 'xxs',
-		description: '',
-		menu_order: 1,
-		count: 1,
-	},
-	{
-		id: 22,
-		name: 'XS',
-		slug: 'xs',
-		description: '',
-		menu_order: 2,
-		count: 1,
-	},
-	{
-		id: 17,
-		name: 'S',
-		slug: 's',
-		description: '',
-		menu_order: 3,
-		count: 1,
-	},
-	{
-		id: 18,
-		name: 'M',
-		slug: 'm',
-		description: '',
-		menu_order: 4,
-		count: 1,
-	},
-	{
-		id: 19,
-		name: 'L',
-		slug: 'l',
-		description: '',
-		menu_order: 5,
-		count: 1,
-	},
-];
+// const attributeTermList: ProductAttributeTerm[] = [
+// 	{
+// 		id: 23,
+// 		name: 'XXS',
+// 		slug: 'xxs',
+// 		description: '',
+// 		menu_order: 1,
+// 		count: 1,
+// 	},
+// 	{
+// 		id: 22,
+// 		name: 'XS',
+// 		slug: 'xs',
+// 		description: '',
+// 		menu_order: 2,
+// 		count: 1,
+// 	},
+// 	{
+// 		id: 17,
+// 		name: 'S',
+// 		slug: 's',
+// 		description: '',
+// 		menu_order: 3,
+// 		count: 1,
+// 	},
+// 	{
+// 		id: 18,
+// 		name: 'M',
+// 		slug: 'm',
+// 		description: '',
+// 		menu_order: 4,
+// 		count: 1,
+// 	},
+// 	{
+// 		id: 19,
+// 		name: 'L',
+// 		slug: 'l',
+// 		description: '',
+// 		menu_order: 5,
+// 		count: 1,
+// 	},
+// ];
 
 describe( 'AttributeTermInputField', () => {
 	beforeEach( () => {

plugins/woocommerce-admin/client/products/fields/category-field/category-field.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import {
 	selectControlStateChangeTypes,
 	Spinner,

plugins/woocommerce-admin/client/products/fills/product-form-api-section-fills.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import {
 	__experimentalProductFieldSection as ProductFieldSection,
 	__experimentalWooProductSectionItem as WooProductSectionItem,

plugins/woocommerce-admin/client/products/layout/test/product-section-layout.test.tsx

@@ -31,7 +31,7 @@ describe( 'ProductSectionLayout', () => {
 	} );
 
 	it( 'should wrap children in ProductFieldLayout if prop contains onChange', () => {
-		const { queryByText, queryAllByText } = render(
+		const { queryByText } = render(
 			<ProductSectionLayout
 				title="Title"
 				description="This is a description"

plugins/woocommerce-admin/client/products/product-status-badge.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { Pill } from '@woocommerce/components';
 import { PRODUCTS_STORE_NAME, WCDataSelector } from '@woocommerce/data';

plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.tsx

@@ -8,7 +8,6 @@ import { useDispatch } from '@wordpress/data';
 import { cleanForSlug } from '@wordpress/url';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Product } from '@woocommerce/data';
-import { Text } from '@woocommerce/experimental';
 import { useFormContext } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 

plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx

@@ -1,10 +1,8 @@
 /**
  * External dependencies
  */
-import { PropsWithChildren } from 'react';
 import { render, waitFor, screen, within } from '@testing-library/react';
 import { Fragment } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { Form, FormContext } from '@woocommerce/components';
 import { Product } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';

plugins/woocommerce-admin/client/products/tour/use-product-tour.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';

plugins/woocommerce-admin/client/tasks/fills/Marketing/test/index.tsx

@@ -112,7 +112,7 @@ describe( 'transformExtensionToPlugin', () => {
 
 describe( 'getMarketingExtensionLists', () => {
 	test( 'should only return the allowed lists', () => {
-		const [ installed, lists ] = getMarketingExtensionLists(
+		const [ , lists ] = getMarketingExtensionLists(
 			extensionLists,
 			[],
 			[]
@@ -135,7 +135,7 @@ describe( 'getMarketingExtensionLists', () => {
 	} );
 
 	test( 'should not include installed plugins in the extensions list', () => {
-		const [ installed, lists ] = getMarketingExtensionLists(
+		const [ , lists ] = getMarketingExtensionLists(
 			extensionLists,
 			[],
 			[ 'grow-plugin' ]
@@ -145,7 +145,7 @@ describe( 'getMarketingExtensionLists', () => {
 	} );
 
 	test( 'should only include allowed list plugins in the installed list', () => {
-		const [ installed, lists ] = getMarketingExtensionLists(
+		const [ installed ] = getMarketingExtensionLists(
 			extensionLists,
 			[],
 			[ 'basic-plugin' ]

plugins/woocommerce-admin/client/tasks/fills/experimental-shipping-recommendation/components/connect.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { recordEvent } from '@woocommerce/tracks';
 
 /**

plugins/woocommerce-admin/client/tasks/fills/experimental-shipping-recommendation/components/store-location.tsx

@@ -3,7 +3,7 @@
  */
 import { SETTINGS_STORE_NAME } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**

plugins/woocommerce-admin/client/tasks/fills/experimental-shipping-recommendation/shipping-recommendation.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { difference } from 'lodash';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { Stepper } from '@woocommerce/components';
 import { Card, CardBody, Button } from '@wordpress/components';
 

plugins/woocommerce-admin/client/tasks/fills/tax/components/partner-card.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 
 /**

plugins/woocommerce-admin/client/tasks/fills/tax/components/store-location.tsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { SETTINGS_STORE_NAME, WCDataSelector } from '@woocommerce/data';
+import { SETTINGS_STORE_NAME } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';

plugins/woocommerce-admin/client/tasks/fills/tax/manual-configuration/configure.tsx

@@ -6,7 +6,7 @@ import { Button } from '@wordpress/components';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Link } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
-import { SETTINGS_STORE_NAME, WCDataSelector } from '@woocommerce/data';
+import { SETTINGS_STORE_NAME } from '@woocommerce/data';
 import { useSelect } from '@wordpress/data';
 
 /**

plugins/woocommerce-admin/client/tasks/fills/tax/woocommerce-tax/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { difference } from 'lodash';
 import { useSelect } from '@wordpress/data';
 import { Spinner } from '@woocommerce/components';

plugins/woocommerce-admin/client/tasks/tasks.tsx

@@ -85,7 +85,7 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
 
 	useEffect( () => {
 		// @todo Update this when all task lists have been hidden or completed.
-		const taskListsFinished = false;
+		// const taskListsFinished = false;
 		updateOptions( {
 			woocommerce_task_list_prompt_shown: true,
 		} );

plugins/woocommerce-admin/client/tasks/test/tasks.test.tsx

@@ -3,7 +3,6 @@
  */
 import { render, act, cleanup, waitFor } from '@testing-library/react';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useExperiment } from '@woocommerce/explat';
 import { recordEvent } from '@woocommerce/tracks';
 import userEvent from '@testing-library/user-event';
 

plugins/woocommerce-admin/client/wp-admin-scripts/payment-method-promotions/payment-promotion-row.tsx

@@ -7,7 +7,6 @@ import { useState, useEffect } from '@wordpress/element';
 import {
 	PLUGINS_STORE_NAME,
 	PAYMENT_GATEWAYS_STORE_NAME,
-	PluginsStoreActions,
 } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 import { useDispatch, useSelect } from '@wordpress/data';

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/shared.ts

@@ -135,7 +135,7 @@ const getProductData = () => {
 /**
  * Get the publish date as a string.
  *
- * @param  prefix Prefix for date element selectors.
+ * @param prefix Prefix for date element selectors.
  * @return string
  */
 const getPublishDate = ( prefix = '' ) => {
@@ -186,8 +186,8 @@ const getPublishingWidgetData = () => {
 /**
  * Prefix all object keys with a string.
  *
- * @param  obj    Object to create keys from.
- * @param  prefix Prefix used before all keys.
+ * @param obj    Object to create keys from.
+ * @param prefix Prefix used before all keys.
  * @return object
  */
 const prefixObjectKeys = (
@@ -306,7 +306,7 @@ export const initProductScreenTracks = () => {
 
 	// Product tags
 
-	function deleteTagEventListener( event: Event ) {
+	function deleteTagEventListener(/* event: Event */) {
 		recordEvent( 'product_tags_delete', {
 			page: 'product',
 			tag_list_size:
@@ -330,7 +330,7 @@ export const initProductScreenTracks = () => {
 
 	document
 		.querySelector( '.tagadd' )
-		?.addEventListener( 'click', ( event ) => {
+		?.addEventListener( 'click', (/* event: Event */) => {
 			const tagInput = document.querySelector< HTMLInputElement >(
 				'#new-tag-product_tag'
 			);
@@ -494,7 +494,7 @@ export function addExitPageListener( pageId: string ) {
 		}
 		return isDisabled;
 	}
-	window.addEventListener( 'beforeunload', function ( event ) {
+	window.addEventListener( 'beforeunload', function (/* event */) {
 		// Check if button disabled or triggered delete to see if user saved or deleted the product instead.
 		if ( checkIfSubmitButtonsDisabled() || triggeredDelete ) {
 			productChanged = false;

plugins/woocommerce/changelog/dev-update-eslint-plugin

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Fix lint issues

tools/code-analyzer/package.json

@@ -7,15 +7,16 @@
 	"license": "GPLv2",
 	"repository": "woocommerce/woocommerce",
 	"dependencies": {
+		"@actions/core": "^1.10.0",
 		"@commander-js/extra-typings": "^0.1.0",
+		"@oclif/core": "^2.4.0",
 		"@tsconfig/node16": "^1.0.3",
 		"@types/uuid": "^8.3.4",
 		"cli-core": "workspace:*",
 		"commander": "^9.4.0",
 		"dotenv": "^10.0.0",
 		"simple-git": "^3.10.0",
-		"uuid": "^8.3.2",
-		"@actions/core": "^1.10.0"
+		"uuid": "^8.3.2"
 	},
 	"devDependencies": {
 		"@types/node": "^16.9.4",

tools/code-analyzer/src/lib/hook-changes.ts

@@ -112,6 +112,7 @@ export const scanForHookChanges = async (
 					} );
 				} catch ( error ) {
 					if ( error ) {
+						// eslint-disable-next-line no-console
 						console.error( error );
 					}
 				}

tools/code-analyzer/src/lib/template-changes.ts

@@ -79,7 +79,7 @@ export const scanForTemplateChanges = async (
 							repositoryPath,
 							commitHash
 						);
-						if ( -1 === pullRequests.indexOf( prNumber ) ) {
+						if ( pullRequests.indexOf( prNumber ) === -1 ) {
 							pullRequests.push( prNumber );
 						}
 					} catch ( e: unknown ) {

tools/create-extension/_package.json

@@ -21,7 +21,7 @@
 	},
 	"devDependencies": {
 		"@wordpress/scripts": "^12.2.1",
-		"@woocommerce/eslint-plugin": "1.1.0",
+		"@woocommerce/eslint-plugin": "latest",
 		"@woocommerce/dependency-extraction-webpack-plugin": "1.6.0"
 	},
 	"dependencies": {

tools/package-release/src/commands/prepare/index.ts

@@ -92,7 +92,7 @@ export default class PackagePrepare extends Command {
 	 */
 	private async preparePackages(
 		packages: Array< string >,
-		initialRelease?: Boolean
+		initialRelease?: boolean
 	) {
 		packages.forEach( async ( name ) => {
 			CliUx.ux.action.start( `Preparing ${ name }` );