replaced querystring package with URLSearchParams

man-group · Nov 16, 2021 · bea78a7 · bea78a7
1 parent fdb6eeb
commit bea78a7
Show file tree

Hide file tree

Showing 21 changed files with 62 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -155,7 +155,6 @@
     "popsicle": "12.1.0",
     "postcss-cli": "9.0.1",
     "prop-types": "15.7.2",
-    "querystring": "0.2.1",
     "re-resizable": "6.9.1",
     "react": "17.0.2",
     "react-addons-shallow-compare": "15.6.3",

diff --git a/static/__tests__/dtale/DataViewer-upload-web-test.jsx b/static/__tests__/dtale/DataViewer-upload-web-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -45,7 +43,7 @@ describe("DataViewer tests", () => {
         if (_.startsWith(url, "/dtale/datasets")) {
           return {
             success: true,
-            data_id: qs.parse(url.split("?")[1]).dataset,
+            data_id: new URLSearchParams(url.split("?")[1]).get("dataset"),
           };
         }
         return urlFetcher(url);

diff --git a/static/__tests__/dtale/duplicates/DataViewer-duplicates-columns-test.jsx b/static/__tests__/dtale/duplicates/DataViewer-duplicates-columns-test.jsx
@@ -1,6 +1,4 @@
 /* eslint max-lines: "off" */
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -45,7 +43,7 @@ describe("DataViewer tests", () => {
       mockPopsicle.mock(url => {
         const { urlFetcher } = require("../../redux-test-utils").default;
         if (_.startsWith(url, "/dtale/duplicates")) {
-          const urlParams = qs.parse(url.split("?")[1]);
+          const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
           if (urlParams.action === "test") {
             const cfg = JSON.parse(urlParams.cfg);
             if (urlParams.type === "show") {

diff --git a/static/__tests__/dtale/side/MissingNoChart-test.jsx b/static/__tests__/dtale/side/MissingNoChart-test.jsx
@@ -43,27 +43,34 @@ describe("MissingNoCharts", () => {
     expect(wrapper.find("img")).toHaveLength(1);
     expect(wrapper.state()).toEqual(
       expect.objectContaining({
-        chartType: "matrix",
+        chartType: "heatmap",
         freq: { value: "BQ", label: "BQ - BQ" },
-        dateCol: null,
+        dateCol: { value: "col4" },
         imageLoading: true,
       })
     );
     expect(wrapper.state().dtypes).toHaveLength(4);
     expect(wrapper.state().dateCols).toHaveLength(1);
-    expect(wrapper.state().imageUrl.startsWith("/dtale/missingno/matrix/1?date_index=&freq=BQ")).toBeTruthy();
-    expect(wrapper.state().fileUrl.startsWith("/dtale/missingno/matrix/1?date_index=&freq=BQ&file=true")).toBeTruthy();
+    expect(wrapper.state().imageUrl.startsWith("/dtale/missingno/heatmap/1?date_index=col4&freq=BQ")).toBeTruthy();
+    expect(
+      wrapper.state().fileUrl.startsWith("/dtale/missingno/heatmap/1?date_index=col4&freq=BQ&file=true")
+    ).toBeTruthy();
   });
 
   it("updates URLs on chart prop changes", () => {
-    wrapper.setState({ chartType: "heatmap" });
-    expect(wrapper.state().imageUrl.startsWith("/dtale/missingno/heatmap/1?date_index=&freq=BQ")).toBeTruthy();
-    expect(wrapper.state().fileUrl.startsWith("/dtale/missingno/heatmap/1?date_index=&freq=BQ&file=true")).toBeTruthy();
+    wrapper.setState({ chartType: "bar" });
+    expect(wrapper.state().imageUrl.startsWith("/dtale/missingno/bar/1?date_index=col4&freq=BQ")).toBeTruthy();
+    expect(wrapper.state().fileUrl.startsWith("/dtale/missingno/bar/1?date_index=col4&freq=BQ&file=true")).toBeTruthy();
   });
 
   it("includes date col & freq in matrix chart", async () => {
+    wrapper.setState({ chartType: "matrix" });
     const currState = wrapper.state();
-    wrapper.find(ColumnSelect).first().props().updateState({ dateCol: currState.dateCols[0] });
+    wrapper
+      .find(ColumnSelect)
+      .first()
+      .props()
+      .updateState({ dateCol: { value: currState.dateCols[0].name } });
     const freqSelect = wrapper.find(FilterSelect).first().props();
     freqSelect.selectProps.onChange(freqSelect.selectProps.options[1]);
     wrapper.update();

diff --git a/static/__tests__/popups/ColumnAnalysis-test.jsx b/static/__tests__/popups/ColumnAnalysis-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -69,7 +67,7 @@ describe("ColumnAnalysis tests", () => {
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
         if (_.startsWith(url, "/dtale/column-analysis")) {
-          const params = qs.parse(url.split("?")[1]);
+          const params = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
           const ordinal = ANALYSIS_DATA.data;
           const count = ANALYSIS_DATA.data;
           if (params.col === "null") {

diff --git a/static/__tests__/popups/Correlations-test.jsx b/static/__tests__/popups/Correlations-test.jsx
@@ -1,6 +1,4 @@
 /* eslint max-lines: "off" */
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -43,7 +41,7 @@ describe("Correlations tests", () => {
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
         if (_.startsWith(url, "/dtale/correlations/")) {
-          const query = qs.parse(url.split("?")[1]).query;
+          const query = new URLSearchParams(url.split("?")[1]).get("query");
           if (query == "null") {
             return { error: "No data found." };
           }

diff --git a/static/__tests__/popups/Variance-test.jsx b/static/__tests__/popups/Variance-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -58,7 +56,7 @@ describe("Variance tests", () => {
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
         if (_.startsWith(url, "/dtale/variance")) {
-          const { col } = qs.parse(url.split("?")[1]);
+          const col = new URLSearchParams(url.split("?")[1]).get("col");
           if (col === "error") {
             return { error: "variance error" };
           }

diff --git a/static/__tests__/popups/charts/Charts-test.jsx b/static/__tests__/popups/charts/Charts-test.jsx
@@ -1,6 +1,4 @@
 /* eslint max-statements: "off" */
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -32,7 +30,7 @@ describe("Charts tests", () => {
     mockWordcloud();
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
-        const urlParams = qs.parse(url.split("?")[1]);
+        const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
         if (urlParams.x === "error" && _.includes(JSON.parse(urlParams.y), "error2")) {
           return { data: {} };
         }
@@ -86,9 +84,15 @@ describe("Charts tests", () => {
     result.find(Charts).find("button").first().simulate("click");
     await tickUpdate(result);
     expect(result.find(ChartsBody).instance().state.charts.length).toBe(1);
-    expect(_.last(result.find(Charts).instance().state.url.split("?"))).toBe(
-      "x=col4&y=%5B%22col1%22%5D&query=col4%20%3D%3D%20'20181201'&agg=rolling&rollingWin=10&rollingComp=corr"
-    );
+    const params = Object.fromEntries(new URLSearchParams(_.last(result.find(Charts).instance().state.url.split("?"))));
+    expect(params).toEqual({
+      x: "col4",
+      y: '["col1"]',
+      agg: "rolling",
+      query: "col4 == '20181201'",
+      rollingComp: "corr",
+      rollingWin: "10",
+    });
     result.find(ChartsBody).instance().state.charts[0].cfg.options.onClick();
     result.update();
     result.find(ChartsBody).instance().resetZoom();

diff --git a/static/__tests__/popups/charts/bar-test.jsx b/static/__tests__/popups/charts/bar-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -30,7 +28,7 @@ describe("Charts bar tests", () => {
     mockD3Cloud();
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
-        const urlParams = qs.parse(url.split("?")[1]);
+        const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
         if (urlParams.x === "error" && _.includes(JSON.parse(urlParams.y), "error2")) {
           return { data: {} };
         }

diff --git a/static/__tests__/popups/charts/multi-column-test.jsx b/static/__tests__/popups/charts/multi-column-test.jsx
@@ -1,6 +1,4 @@
 /* eslint max-statements: "off" */
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -29,7 +27,7 @@ describe("Charts tests", () => {
     mockWordcloud();
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
-        const urlParams = qs.parse(url.split("?")[1]);
+        const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
         if (urlParams.x === "error" && _.includes(JSON.parse(urlParams.y), "error2")) {
           return { data: {} };
         }
@@ -75,15 +73,15 @@ describe("Charts tests", () => {
     result.find(Charts).find("button").first().simulate("click");
     await tickUpdate(result);
     expect(result.find(ChartsBody).instance().state.charts.length).toBe(1);
-    expect(_.last(result.find(Charts).instance().state.url.split("?"))).toBe(
-      _.join(
-        [
-          "x=col4&y=%5B%22col1%22%2C%22col2%22%5D&query=col4%20%3D%3D%20'20181201'",
-          "agg=rolling&rollingWin=10&rollingComp=corr",
-        ],
-        "&"
-      )
-    );
+    const params = Object.fromEntries(new URLSearchParams(_.last(result.find(Charts).instance().state.url.split("?"))));
+    expect(params).toEqual({
+      x: "col4",
+      y: '["col1","col2"]',
+      agg: "rolling",
+      query: "col4 == '20181201'",
+      rollingComp: "corr",
+      rollingWin: "10",
+    });
     result.find(ChartsBody).instance().state.charts[0].cfg.options.onClick();
     result.update();
     const { ticks } = result.find(ChartsBody).instance().state.charts[0].options.scales.x;

diff --git a/static/__tests__/popups/charts/rolling-test.jsx b/static/__tests__/popups/charts/rolling-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -23,7 +21,7 @@ describe("Charts rolling tests", () => {
     mockD3Cloud();
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
-        const urlParams = qs.parse(url.split("?")[1]);
+        const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
         if (urlParams.x === "error" && _.includes(JSON.parse(urlParams.y), "error2")) {
           return { data: {} };
         }

diff --git a/static/__tests__/popups/charts/scatter-test.jsx b/static/__tests__/popups/charts/scatter-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -29,7 +27,7 @@ describe("Charts scatter tests", () => {
     mockD3Cloud();
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
-        const urlParams = qs.parse(url.split("?")[1]);
+        const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
         if (urlParams.x === "error" && _.includes(JSON.parse(urlParams.y), "error2")) {
           return { data: {} };
         }

diff --git a/static/__tests__/popups/timeseries/TimeseriesAnalysis-test.jsx b/static/__tests__/popups/timeseries/TimeseriesAnalysis-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { shallow } from "enzyme";
 import React from "react";
 
@@ -111,7 +109,7 @@ describe("TimeseriesAnalysis", () => {
       const { code, url } = wrapper.state();
       expect(code.bkfilter).toBeDefined();
       expect(url.startsWith("/dtale/timeseries-analysis/1")).toBe(true);
-      const urlParams = qs.parse(url.split("?")[1]);
+      const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
       expect(urlParams.type).toBe("bkfilter");
     });
 
@@ -122,7 +120,7 @@ describe("TimeseriesAnalysis", () => {
         .updateState({ cfg: { lamb: 1600 } });
       const { code, url } = wrapper.state();
       expect(code.hpfilter).toBeDefined();
-      const urlParams = qs.parse(url.split("?")[1]);
+      const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
       expect(urlParams.type).toBe("hpfilter");
     });
 
@@ -134,7 +132,7 @@ describe("TimeseriesAnalysis", () => {
         .updateState({ cfg: { low: 6, high: 32, drift: true } });
       const { code, url } = wrapper.state();
       expect(code.cffilter).toBeDefined();
-      const urlParams = qs.parse(url.split("?")[1]);
+      const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
       expect(urlParams.type).toBe("cffilter");
     });
 
@@ -146,7 +144,7 @@ describe("TimeseriesAnalysis", () => {
         .updateState({ cfg: { model: "additive" } });
       const { code, url } = wrapper.state();
       expect(code.seasonal_decompose).toBeDefined();
-      const urlParams = qs.parse(url.split("?")[1]);
+      const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
       expect(urlParams.type).toBe("seasonal_decompose");
     });
 
@@ -155,7 +153,7 @@ describe("TimeseriesAnalysis", () => {
       wrapper.find(SeasonalDecompose).props().updateState({ cfg: {} });
       const { code, url } = wrapper.state();
       expect(code.stl).toBeDefined();
-      const urlParams = qs.parse(url.split("?")[1]);
+      const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
       expect(urlParams.type).toBe("stl");
     });
   });

diff --git a/static/__tests__/popups/window/Correlations-test.jsx b/static/__tests__/popups/window/Correlations-test.jsx
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import { mount } from "enzyme";
 import _ from "lodash";
 import React from "react";
@@ -38,7 +36,7 @@ describe("Correlations tests", () => {
     const mockBuildLibs = withGlobalJquery(() =>
       mockPopsicle.mock(url => {
         if (_.startsWith(url, "/dtale/correlations/")) {
-          const query = qs.parse(url.split("?")[1]).query;
+          const query = new URLSearchParams(url.split("?")[1]).get("query");
           if (query == "null") {
             return { error: "No data found." };
           }

diff --git a/static/__tests__/redux-test-utils.jsx b/static/__tests__/redux-test-utils.jsx
@@ -1,6 +1,4 @@
 /* eslint max-lines: "off" */
-import qs from "querystring";
-
 import _ from "lodash";
 
 import dtaleApp from "../reducers/dtale";
@@ -182,7 +180,7 @@ function getDataId(url) {
 
 // eslint-disable-next-line max-statements, complexity
 function urlFetcher(url) {
-  const urlParams = qs.parse(url.split("?")[1]);
+  const urlParams = Object.fromEntries(new URLSearchParams(url.split("?")[1]));
   const query = urlParams.query;
   if (_.startsWith(url, "/dtale/data")) {
     if (query === "error") {

diff --git a/static/actions/dtale.js b/static/actions/dtale.js
@@ -1,5 +1,4 @@
 import _ from "lodash";
-import querystring from "querystring";
 
 import serverStateManagement from "../dtale/serverStateManagement";
 
@@ -74,7 +73,7 @@ export function isJSON(str) {
 
 export function getParams() {
   const params = {};
-  const queryParams = querystring.parse(window.location.search.replace(/^.*\?/, ""));
+  const queryParams = Object.fromEntries(new URLSearchParams(window.location.search.replace(/^.*\?/, "")));
   _.forEach(queryParams, (value, key) => {
     if (value) {
       if (_.includes(value, ",") && !isJSON(value)) {

diff --git a/static/actions/url-utils.js b/static/actions/url-utils.js
@@ -1,5 +1,3 @@
-import qs from "querystring";
-
 import _ from "lodash";
 
 const URL_KEYS = {
@@ -30,7 +28,7 @@ function buildURLParams(state, props = null, required = null) {
 }
 
 function buildURLString(base, params) {
-  return `${base}${base.endsWith("?") ? "" : "?"}${qs.stringify(params)}`;
+  return `${base}${base.endsWith("?") ? "" : "?"}${new URLSearchParams(params).toString()}`;
 }
 
 function buildURL(base, state, props) {