woocommerce · tomalec · May 9, 2023 · Oct 17, 2022 · Oct 17, 2022 · Oct 17, 2022
diff --git a/plugins/woocommerce-admin/client/analytics/report/revenue/table.js b/plugins/woocommerce-admin/client/analytics/report/revenue/table.js
@@ -20,7 +20,6 @@ import {
 	defaultTableDateFormat,
 	getCurrentDates,
 } from '@woocommerce/date';
-import { stringify } from 'qs';
 import { CurrencyContext } from '@woocommerce/currency';
 
 /**
@@ -308,7 +307,7 @@ const formatProps = memoize(
 		[
 			isError,
 			isRequesting,
-			stringify( tableQuery ),
+			new URLSearchParams( tableQuery ).toString(),
 			get( revenueData, [ 'totalResults' ], 0 ),
 			get( revenueData, [ 'data', 'intervals' ], EMPTY_ARRAY ).length,
 		].join( ':' )

diff --git a/plugins/woocommerce-admin/client/analytics/settings/default-date.js b/plugins/woocommerce-admin/client/analytics/settings/default-date.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { parse, stringify } from 'qs';
 import { DateRangeFilterPicker } from '@woocommerce/components';
 import { useSettings } from '@woocommerce/data';
 import {
@@ -20,11 +19,13 @@ const DefaultDate = ( { value, onChange } ) => {
 		onChange( {
 			target: {
 				name: 'woocommerce_default_date_range',
-				value: stringify( query ),
+				value: new URLSearchParams( query ).toString(),
 			},
 		} );
 	};
-	const query = parse( value.replace( /&amp;/g, '&' ) );
+	const query = Object.fromEntries(
+		new URLSearchParams( value.replace( /&amp;/g, '&' ) )
+	);
 	const { period, compare, before, after } = getDateParamsFromQuery(
 		query,
 		defaultDateRange

diff --git a/plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx b/plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx
@@ -4,7 +4,6 @@
 import { applyFilters } from '@wordpress/hooks';
 import { useEffect } from '@wordpress/element';
 import { triggerExitPageCesSurvey } from '@woocommerce/customer-effort-score';
-import QueryString, { parse } from 'qs';
 
 /**
  * Internal dependencies
@@ -17,10 +16,8 @@ import './style.scss';
 
 type QueryParams = EmbeddedBodyProps;
 
-function isWPPage(
-	params: QueryParams | QueryString.ParsedQs
-): params is QueryParams {
-	return ( params as QueryParams ).page !== undefined;
+function isWPPage( params: URLSearchParams ): boolean {
+	return params.get( 'page' ) !== null;
 }
 
 const EMBEDDED_BODY_COMPONENT_LIST: React.ElementType[] = [
@@ -40,10 +37,10 @@ export const EmbeddedBodyLayout = () => {
 		triggerExitPageCesSurvey();
 	}, [] );
 
-	const query = parse( location.search.substring( 1 ) );
+	const query = new URLSearchParams( location.search );
 	let queryParams: QueryParams = { page: '', tab: '' };
 	if ( isWPPage( query ) ) {
-		queryParams = query;
+		queryParams = Object.fromEntries( query ) as QueryParams;
 	}
 	/**
 	 * Filter an array of body components for WooCommerce non-react pages.

diff --git a/plugins/woocommerce-admin/client/guided-tours/add-product-tour/index.tsx b/plugins/woocommerce-admin/client/guided-tours/add-product-tour/index.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { TourKit, TourKitTypes } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
-import qs from 'qs';
 
 /**
  * Internal dependencies
@@ -294,7 +293,9 @@ export const ProductTour = () => {
 			recordEvent( 'walkthrough_product_enable_button_click' );
 		} );
 
-		const query = qs.parse( window.location.search.slice( 1 ) );
+		const query = Object.fromEntries(
+			new URLSearchParams( window.location.search )
+		);
 		if ( query && query.tutorial === 'true' ) {
 			const intervalId = waitUntilElementTopNotChange(
 				tourConfig.steps[ 0 ].referenceElements?.desktop || '',

diff --git a/plugins/woocommerce-admin/client/guided-tours/wc-addons-tour/index.tsx b/plugins/woocommerce-admin/client/guided-tours/wc-addons-tour/index.tsx
@@ -6,7 +6,6 @@ import { TourKit, TourKitTypes } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useDispatch } from '@wordpress/data';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
-import qs from 'qs';
 
 /**
  * Internal dependencies
@@ -25,8 +24,8 @@ const WCAddonsTour = () => {
 	const defaultAutoScrollBlock: ScrollLogicalPosition = 'center';
 
 	useEffect( () => {
-		const query = qs.parse( window.location.search.slice( 1 ) );
-		if ( query?.tutorial === 'true' ) {
+		const query = new URLSearchParams( location.search );
+		if ( query.get( 'tutorial' ) === 'true' ) {
 			const intervalId = waitUntilElementTopNotChange(
 				steps[ 0 ].referenceElements?.desktop || '',
 				() => {

diff --git a/plugins/woocommerce-admin/client/layout/controller.js b/plugins/woocommerce-admin/client/layout/controller.js
@@ -3,7 +3,6 @@
  */
 import { Suspense, lazy } from '@wordpress/element';
 import { useRef, useEffect } from 'react';
-import { parse, stringify } from 'qs';
 import { find, isEqual, last, omit } from 'lodash';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
@@ -424,18 +423,22 @@ export const Controller = ( { ...props } ) => {
  */
 export function updateLinkHref( item, nextQuery, excludedScreens ) {
 	if ( isWCAdmin( item.href ) ) {
+		// If we accept a full HTMLAnchorElement, then we should be able to use `.search`.
+		// const query = new URLSearchParams( item.search );
+		// but to remain backward compatible, we support any object with `href` property.
 		const search = last( item.href.split( '?' ) );
-		const query = parse( search );
-		const path = query.path || 'homescreen';
+		let query = new URLSearchParams( search );
+		const path = query.get( 'path' ) || 'homescreen';
 		const screen = getScreenFromPath( path );
 
-		const isExcludedScreen = excludedScreens.includes( screen );
+		if ( ! excludedScreens.includes( screen ) ) {
+			query = new URLSearchParams( {
+				...Object.fromEntries( query ),
+				...nextQuery,
+			} );
+		}
 
-		const href =
-			'admin.php?' +
-			stringify(
-				Object.assign( query, isExcludedScreen ? {} : nextQuery )
-			);
+		const href = 'admin.php?' + query.toString();
 
 		// Replace the href so you can see the url on hover.
 		item.href = href;

diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js
@@ -16,7 +16,6 @@ import {
 import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { get, isFunction, identity, memoize } from 'lodash';
-import { parse } from 'qs';
 import {
 	CustomerEffortScoreModalContainer,
 	triggerExitPageCesSurvey,
@@ -186,15 +185,6 @@ class _Layout extends Component {
 		} );
 	}
 
-	getQuery( searchString ) {
-		if ( ! searchString ) {
-			return {};
-		}
-
-		const search = searchString.substring( 1 );
-		return parse( search );
-	}
-
 	isWCPaySettingsPage() {
 		const { page, section, tab } = getQuery();
 		return (
@@ -208,7 +198,9 @@ class _Layout extends Component {
 		const { isEmbedded, ...restProps } = this.props;
 		const { location, page } = this.props;
 		const { breadcrumbs } = page;
-		const query = this.getQuery( location && location.search );
+		const query = Object.fromEntries(
+			new URLSearchParams( location && location.search )
+		);
 
 		return (
 			<LayoutContextProvider

@@ -92,7 +92,6 @@
 		"history": "^5.3.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"qs": "^6.10.3",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-router-dom": "^6.3.0",

diff --git a/plugins/woocommerce/changelog/remove-qs b/plugins/woocommerce/changelog/remove-qs
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Remove `qs` dependency from `woocommerce-admin`