bump query-string version to remove manual type definitions (#78143)

* bump query-string version to remove manual type definitions

* remove manual type declaration

* fix cypress tests

* add )

package.json

@@ -195,7 +195,7 @@
     "p-map": "^4.0.0",
     "pegjs": "0.10.0",
     "proxy-from-env": "1.0.0",
-    "query-string": "5.1.1",
+    "query-string": "^6.13.2",
     "re2": "^1.15.4",
     "react": "^16.12.0",
     "react-color": "^2.13.8",

packages/kbn-std/src/index.ts

@@ -24,6 +24,6 @@ export { mapToObject } from './map_to_object';
 export { merge } from './merge';
 export { pick } from './pick';
 export { withTimeout } from './promise';
-export { isRelativeUrl, modifyUrl, URLMeaningfulParts, ParsedQuery } from './url';
+export { isRelativeUrl, modifyUrl, URLMeaningfulParts } from './url';
 export { unset } from './unset';
 export { getFlattenedObject } from './get_flattened_object';

packages/kbn-std/src/url.ts

@@ -18,11 +18,7 @@
  */
 
 import { format as formatUrl, parse as parseUrl, UrlObject } from 'url';
-
-// duplicate type from 'query-string' to avoid adding the d.ts file to all packages depending on kbn-std
-export interface ParsedQuery<T = string> {
-  [key: string]: T | T[] | null | undefined;
-}
+import type { ParsedQuery } from 'query-string';
 
 /**
  * We define our own typings because the current version of @types/node

src/core/typings.ts

@@ -17,34 +17,6 @@
  * under the License.
  */
 
-declare module 'query-string' {
-  type ArrayFormat = 'bracket' | 'index' | 'none';
-
-  export interface ParseOptions {
-    arrayFormat?: ArrayFormat;
-    sort: ((itemLeft: string, itemRight: string) => number) | false;
-  }
-
-  export interface ParsedQuery<T = string> {
-    [key: string]: T | T[] | null | undefined;
-  }
-
-  export function parse(str: string, options?: ParseOptions): ParsedQuery;
-
-  export function parseUrl(str: string, options?: ParseOptions): { url: string; query: any };
-
-  export interface StringifyOptions {
-    strict?: boolean;
-    encode?: boolean;
-    arrayFormat?: ArrayFormat;
-    sort: ((itemLeft: string, itemRight: string) => number) | false;
-  }
-
-  export function stringify(obj: object, options?: StringifyOptions): string;
-
-  export function extract(str: string): string;
-}
-
 type DeeplyMockedKeys<T> = {
   [P in keyof T]: T[P] extends (...args: any[]) => any
     ? jest.MockInstance<ReturnType<T[P]>, Parameters<T[P]>>

src/plugins/dashboard/public/url_utils/url_helper.test.ts

@@ -24,16 +24,17 @@ describe('', () => {
     const id = '123eb456cd';
     const url =
       "/pep/app/dashboards#/create?_g=(refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!())";
-    expect(addEmbeddableToDashboardUrl(url, id, 'visualization')).toEqual(
-      `/pep/app/dashboards#/create?_a=%28description%3A%27%27%2Cfilters%3A%21%28%29%29&_g=%28refreshInterval%3A%28pause%3A%21t%2Cvalue%3A0%29%2Ctime%3A%28from%3Anow-15m%2Cto%3Anow%29%29&addEmbeddableId=${id}&addEmbeddableType=visualization`
+
+    expect(addEmbeddableToDashboardUrl(url, id, 'visualization')).toBe(
+      '/pep/app/dashboards?addEmbeddableId=123eb456cd&addEmbeddableType=visualization#%2Fcreate%3F_g%3D%28refreshInterval%3A%28pause%3A%21t%2Cvalue%3A0%29%2Ctime%3A%28from%3Anow-15m%2Cto%3Anow%29%29%26_a%3D%28description%3A%27%27%2Cfilters%3A%21%28%29%29'
     );
   });
   it('addEmbeddableToDashboardUrl when dashboard is saved', () => {
     const id = '123eb456cd';
     const url =
       "/pep/app/dashboards#/view/9b780cd0-3dd3-11e8-b2b9-5d5dc1715159?_g=(refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!())";
-    expect(addEmbeddableToDashboardUrl(url, id, 'visualization')).toEqual(
-      `/pep/app/dashboards#/view/9b780cd0-3dd3-11e8-b2b9-5d5dc1715159?_a=%28description%3A%27%27%2Cfilters%3A%21%28%29%29&_g=%28refreshInterval%3A%28pause%3A%21t%2Cvalue%3A0%29%2Ctime%3A%28from%3Anow-15m%2Cto%3Anow%29%29&addEmbeddableId=${id}&addEmbeddableType=visualization`
+    expect(addEmbeddableToDashboardUrl(url, id, 'visualization')).toBe(
+      '/pep/app/dashboards?addEmbeddableId=123eb456cd&addEmbeddableType=visualization#%2Fview%2F9b780cd0-3dd3-11e8-b2b9-5d5dc1715159%3F_g%3D%28refreshInterval%3A%28pause%3A%21t%2Cvalue%3A0%29%2Ctime%3A%28from%3Anow-15m%2Cto%3Anow%29%29%26_a%3D%28description%3A%27%27%2Cfilters%3A%21%28%29%29'
     );
   });
 });

src/plugins/dashboard/public/url_utils/url_helper.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { parseUrl, stringify } from 'query-string';
+import { parseUrl, stringifyUrl } from 'query-string';
 import { DashboardConstants } from '../index';
 
 /** *
@@ -34,12 +34,14 @@ export function addEmbeddableToDashboardUrl(
   embeddableId: string,
   embeddableType: string
 ) {
-  const { url, query } = parseUrl(dashboardUrl);
+  const { url, query, fragmentIdentifier } = parseUrl(dashboardUrl, {
+    parseFragmentIdentifier: true,
+  });
 
   if (embeddableId) {
     query[DashboardConstants.ADD_EMBEDDABLE_TYPE] = embeddableType;
     query[DashboardConstants.ADD_EMBEDDABLE_ID] = embeddableId;
   }
 
-  return `${url}?${stringify(query)}`;
+  return stringifyUrl({ url, query, fragmentIdentifier });
 }

x-pack/package.json

@@ -361,7 +361,7 @@
     "proper-lockfile": "^3.2.0",
     "puid": "1.0.7",
     "puppeteer-core": "^1.19.0",
-    "query-string": "5.1.1",
+    "query-string": "^6.13.2",
     "raw-loader": "3.1.0",
     "react": "^16.12.0",
     "react-datetime": "^2.14.0",

x-pack/plugins/infra/public/pages/link_to/redirect_to_logs.test.tsx

@@ -19,7 +19,7 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/stream?logPosition=(end:'2019-02-20T14:58:09.404Z',position:(tiebreaker:0,time:1550671089404),start:'2019-02-20T12:58:09.404Z',streamLive:!f)&sourceId=default&logFilter=(expression:'',kind:kuery)"
+        to="/stream?sourceId=default&logPosition=(end:'2019-02-20T14:58:09.404Z',position:(tiebreaker:0,time:1550671089404),start:'2019-02-20T12:58:09.404Z',streamLive:!f)&logFilter=(expression:'',kind:kuery)"
       />
     `);
   });
@@ -33,7 +33,7 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/stream?logPosition=(end:'2019-02-20T14:58:09.404Z',position:(tiebreaker:0,time:1550671089404),start:'2019-02-20T12:58:09.404Z',streamLive:!f)&sourceId=default&logFilter=(expression:'FILTER_FIELD:FILTER_VALUE',kind:kuery)"
+        to="/stream?sourceId=default&logPosition=(end:'2019-02-20T14:58:09.404Z',position:(tiebreaker:0,time:1550671089404),start:'2019-02-20T12:58:09.404Z',streamLive:!f)&logFilter=(expression:'FILTER_FIELD:FILTER_VALUE',kind:kuery)"
       />
     `);
   });

x-pack/plugins/infra/public/utils/url_state.tsx

@@ -156,16 +156,14 @@ export const replaceStateKeyInQueryString = <UrlState extends any>(
   urlState: UrlState | undefined
 ) => (queryString: string) => {
   const previousQueryValues = parse(queryString, { sort: false });
-  const encodedUrlState =
-    typeof urlState !== 'undefined' ? encodeRisonUrlState(urlState) : undefined;
-
-  return stringify(
-    url.encodeQuery({
-      ...previousQueryValues,
-      [stateKey]: encodedUrlState,
-    }),
-    { sort: false, encode: false }
-  );
+  const newValue =
+    typeof urlState === 'undefined'
+      ? previousQueryValues
+      : {
+          ...previousQueryValues,
+          [stateKey]: encodeRisonUrlState(urlState),
+        };
+  return stringify(url.encodeQuery(newValue), { sort: false, encode: false });
 };
 
 const replaceQueryStringInLocation = (location: Location, queryString: string): Location => {

x-pack/plugins/infra/public/utils/use_url_state.ts

@@ -111,16 +111,15 @@ export const replaceStateKeyInQueryString = <UrlState extends any>(
   urlState: UrlState | undefined
 ) => (queryString: string) => {
   const previousQueryValues = parse(queryString, { sort: false });
-  const encodedUrlState =
-    typeof urlState !== 'undefined' ? encodeRisonUrlState(urlState) : undefined;
-
-  return stringify(
-    url.encodeQuery({
-      ...previousQueryValues,
-      [stateKey]: encodedUrlState,
-    }),
-    { sort: false, encode: false }
-  );
+  const newValue =
+    typeof urlState === 'undefined'
+      ? previousQueryValues
+      : {
+          ...previousQueryValues,
+          [stateKey]: encodeRisonUrlState(urlState),
+        };
+
+  return stringify(url.encodeQuery(newValue), { sort: false, encode: false });
 };
 
 const replaceQueryStringInLocation = (location: Location, queryString: string): Location => {