chore: replace querystring usage with native URLSearchParams API (#33967)

Signed-off-by: hainenber <dotronghai96@gmail.com>

superset-frontend/.eslintrc.js

@@ -69,6 +69,10 @@ const restrictedImportsRules = {
     message:
       'Please use the theme directly from the ThemeProvider rather than importing supersetTheme.',
   },
+  'no-query-string': {
+    name: 'query-string',
+    message: 'Please use the URLSearchParams API instead of query-string.',
+  },
 };
 
 module.exports = {

superset-frontend/package-lock.json

@@ -96,7 +96,6 @@
         "ol": "^7.5.2",
         "polished": "^4.3.1",
         "prop-types": "^15.8.1",
-        "query-string": "^6.13.7",
         "rc-trigger": "^5.3.4",
         "re-resizable": "^6.10.1",
         "react": "^17.0.2",
@@ -20958,6 +20957,7 @@
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
       "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -24474,6 +24474,7 @@
       "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
       "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -42262,6 +42263,7 @@
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
       "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "decode-uri-component": "^0.2.0",
         "filter-obj": "^1.1.0",
@@ -47997,6 +47999,7 @@
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
       "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -48473,6 +48476,7 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
       "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=4"
       }

superset-frontend/package.json

@@ -164,7 +164,6 @@
     "ol": "^7.5.2",
     "polished": "^4.3.1",
     "prop-types": "^15.8.1",
-    "query-string": "^6.13.7",
     "rc-trigger": "^5.3.4",
     "re-resizable": "^6.10.1",
     "react": "^17.0.2",

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

@@ -18,7 +18,6 @@
  */
 import { useEffect, useCallback, useMemo, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import querystring from 'query-string';
 
 import { SqlLabRootState, Table } from 'src/SqlLab/types';
 import {
@@ -100,7 +99,7 @@ const SqlEditorLeftBar = ({
   );
 
   useEffect(() => {
-    const bool = querystring.parse(window.location.search).db;
+    const bool = new URLSearchParams(window.location.search).get('db');
     const userSelected = getItem(
       LocalStorageKeys.Database,
       null,

superset-frontend/src/dashboard/util/extractUrlParams.ts

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import querystring from 'query-string';
 import { JsonObject } from '@superset-ui/core';
 
 const reservedQueryParams = new Set(['standalone', 'edit']);
@@ -29,8 +28,8 @@ export type UrlParamType = 'reserved' | 'regular' | 'all';
 export default function extractUrlParams(
   urlParamType: UrlParamType,
 ): JsonObject {
-  const queryParams = querystring.parse(window.location.search);
-  return Object.entries(queryParams).reduce((acc, [key, value]) => {
+  const queryParams = new URLSearchParams(window.location.search);
+  return [...queryParams.entries()].reduce((acc, [key, value]) => {
     if (
       (urlParamType === 'regular' && reservedQueryParams.has(key)) ||
       (urlParamType === 'reserved' && !reservedQueryParams.has(key))

superset-frontend/src/pages/ChartCreation/index.tsx

@@ -18,7 +18,6 @@
  */
 import { PureComponent, ReactNode } from 'react';
 import rison from 'rison';
-import querystring from 'query-string';
 import {
   isDefined,
   JsonResponse,
@@ -206,7 +205,7 @@ export class ChartCreation extends PureComponent<
   }
 
   componentDidMount() {
-    const params = querystring.parse(window.location.search)?.dataset as string;
+    const params = new URLSearchParams(window.location.search).get('dataset');
     if (params) {
       this.loadDatasources(params, 0, 1).then(r => {
         const datasource = r.data[0];