fix: replace query-string with URLSearchParams (#319)

* fix: replace query-string with URLSearchParams

package.json

@@ -39,6 +39,7 @@
     "@edx/frontend-component-header": "npm:@edx/frontend-component-header-edx@^7.0.0",
     "@edx/frontend-enterprise-catalog-search": "^4.2.0",
     "@edx/frontend-enterprise-hotjar": "^1.3.0",
+    "@edx/frontend-enterprise-utils": "^3.2.0",
     "@edx/frontend-platform": "^4.0.1",
     "@edx/paragon": "20.29.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
@@ -56,7 +57,6 @@
     "lodash.escaperegexp": "4.1.2",
     "npm": "^8.19.3",
     "prop-types": "15.8.1",
-    "query-string": "7.1.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-helmet": "6.1.0",

src/components/catalogSearchResults/CatalogSearchResults.jsx

@@ -13,7 +13,6 @@ import {
   Alert, Badge, Button, CardView, DataTable,
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
-import queryString from 'query-string';
 import React, {
   useCallback,
   useContext,
@@ -322,7 +321,7 @@ export const BaseCatalogSearchResults = ({
     () => searchResults?.hits || [],
     [searchResults?.hits],
   );
-  const query = queryString.parse(window.location.search.substring(1));
+  const query = new URLSearchParams(window.location.search.substring(1));
   const toggleOptions = preview
     ? {}
     : {

src/components/catalogSearchResults/associatedComponents/downloadCsvButton/DownloadCsvButton.test.jsx

@@ -65,7 +65,7 @@ describe('Download button', () => {
     // The query, query param should not have an `&` in it.
     // TODO: figure out why the process env for catalog base service can't be set in the test
     const expectedWindowLocation = 'undefined/api/v1/enterprise-catalogs/catalog_workbook?availability=Available'
-      + '%20Now&availability=Upcoming&query=math%20%26%20science';
+      + '+Now&availability=Upcoming&query=math%20%26%20science';
     expect(window.location.href).toEqual(expectedWindowLocation);
   });
 });

src/config/index.js

@@ -1,15 +1,10 @@
-import qs from 'query-string';
+import { hasFeatureFlagEnabled } from '@edx/frontend-enterprise-utils';
 import {
   FEATURE_ENABLE_PROGRAMS,
   FEATURE_EXEC_ED_INCLUSION,
   FEATURE_PROGRAM_TYPE_FACET,
 } from './constants';
 
-const hasFeatureFlagEnabled = (featureFlag) => {
-  const { features } = qs.parse(window.location.search);
-  return features && features.split(',').includes(featureFlag);
-};
-
 const features = {
   ENABLE_PROGRAMS:
     process.env.FEATURE_ENABLE_PROGRAMS === 'true'

src/data/services/EnterpriseCatalogAPIService.js

@@ -1,6 +1,5 @@
-import qs from 'query-string';
-
 import { getHttpClient } from '@edx/frontend-platform/auth';
+import { createQueryParams } from '../../utils/catalogUtils';
 
 class EnterpriseCatalogApiService {
   static enterpriseCatalogServiceApiUrl = `${process.env.CATALOG_SERVICE_BASE_URL}/api/v1/enterprise-catalogs`;
@@ -9,16 +8,18 @@ class EnterpriseCatalogApiService {
 
   static generateCsvDownloadLink(options, query) {
     const facetQuery = query ? `&query=${encodeURIComponent(query)}` : '';
+    const queryParams = createQueryParams(options);
     const enterpriseListUrl = `${
       EnterpriseCatalogApiService.enterpriseCatalogServiceApiUrl
-    }/catalog_workbook?${qs.stringify(options)}${facetQuery}`;
+    }/catalog_workbook?${queryParams}${facetQuery}`;
     return enterpriseListUrl;
   }
 
   static fetchDefaultCoursesInCatalog(options) {
+    const queryParams = new URLSearchParams(options);
     const enterpriseListUrl = `${
       EnterpriseCatalogApiService.enterpriseCatalogServiceApiUrl
-    }/default_course_set?${qs.stringify(options)}`;
+    }/default_course_set?${queryParams.toString()}`;
     return EnterpriseCatalogApiService.apiClient().get(enterpriseListUrl);
   }
 

src/utils/catalogUtils.js

@@ -45,4 +45,29 @@ function convertLearningTypesToFilters(types) {
   }, []).join(' OR ');
 }
 
-export { checkAvailability, checkSubscriptions, convertLearningTypesToFilters };
+/**
+ * Parses an object that accounts for keys with values that is an array.
+ * e.g. {'availability': ['Available Now', 'Starting Soon']} will be parsed as
+ * 'availability=Available+Now&availability=Starting+Soon'
+ *
+ * @param Object query parameter with an array of values.
+ * @returns A string containing a query string suitable for use in a URL.
+ */
+
+function createQueryParams(options) {
+  const queryParams = new URLSearchParams();
+  Object.entries(options).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        queryParams.append(key, item);
+      });
+      return;
+    }
+    queryParams.set(key, value);
+  });
+  return queryParams.toString();
+}
+
+export {
+  checkAvailability, checkSubscriptions, convertLearningTypesToFilters, createQueryParams,
+};

src/utils/catalogUtils.test.js

@@ -1,9 +1,24 @@
 import { EXEC_ED_TITLE } from '../constants';
-import { convertLearningTypesToFilters } from './catalogUtils';
+import { convertLearningTypesToFilters, createQueryParams } from './catalogUtils';
 
 describe('catalogUtils', () => {
   it('converts lists of learning types to algolia filters', () => {
     const algoliaFilter = convertLearningTypesToFilters(['a', 'b', EXEC_ED_TITLE]);
     expect(algoliaFilter).toEqual('a OR b OR "Executive Education"');
   });
+
+  it('parses an object with an array of values and returns query string', () => {
+    const options = {
+      enterprise_catalog_query_titles: [
+        'A la carte',
+      ],
+      availability: [
+        'Available Now',
+        'Starting Soon',
+      ],
+    };
+    const expectedQueryParams = 'enterprise_catalog_query_titles=A+la+carte&availability=Available+Now&availability=Starting+Soon';
+    const queryParams = createQueryParams(options);
+    expect(queryParams).toEqual(expectedQueryParams);
+  });
 });