[ui/utils/query_string]: Remove unused methods & migrate apps to querystring lib

[alexwizp]

Closes: #56704

Summary

What was done:

1. querystring-browser dependency was removed
   This library is no longer being updated. We cannot use it in TypeScript code without @ ts-ignore, because there are no types available for it.

2. query-string library was added instead of querystring . All import from querystring/querystring-browser were replaced to use new library

3. kibana_utils/public/url service was introduced. Now we stringify all objects using one encodeQueryComponent method.

4. encodeQueryComponent method was unified. Before that we had 3 different copies of that method. All duplicated were removed

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility, including a check against IE11

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[lizozom]

Overall looks good. Didn't test yet.
Added couple of questions.

[lizozom]

This seems like an actual logic change. Why was this added?

[lizozom]

Why not add the param function to the URL utils?

[alexwizp]

We use this method only in one place. Not sure that we need it somewhere else

[lizozom]

In other places if seems you replaced stringing with url.stringifyUrlQuery. why isn't this the case here?

[alexwizp]

You are right, I did it in almost all places instead functional tests and kibana-core code. Not sure that we should add import from 'kibana_utils' from that places.

[sorenlouv]

Isn't this the same as arrayFormat: 'comma'?

queryString.stringify({ foo: [1, 2, 3] }, { arrayFormat: 'comma'} );
//=> 'foo=1,2,3'

[alexwizp]

@sqren yes, if you don't need to encode your object using encodeQuery method you can definitely use { arrayFormat: 'comma'}. Now you can do it cause all plugins use query-string library directly without any wrappers. Thank you for your previous suggestion.

But I added this line, because initially the encodeUriQuery method worked only with the string type, but should also work fine with string arrays.

If you have any suggestions how to modify that code to use { arrayFormat: 'comma'} please let me know.

[sorenlouv]

Thanks for making the changes above!

I think that perhaps url.encodeQuery changes the format of the encoded values slightly. This is probably not a problem, but I'd like the change to be explicit.

I've added a few specs to capture previous behaviour. Can you do me a favour and add them to x-pack/legacy/plugins/apm/public/components/shared/Links/url_helpers.test.tsx:

  it('should not encode the following characters', () => {
    expect(
      fromQuery({
        a: true,
        b: 5000,
        c: ':'
      })
    ).toEqual('a=true&b=5000&c=:');
  });

  it('should encode the following characters', () => {
    expect(
      fromQuery({
        a: '@',
        b: '.',
        c: ';',
        d: ' '
      })
    ).toEqual('a=%40&b=.&c=%3B&d=%20');
  });

  it('should handle null and undefined', () => {
    expect(
      fromQuery({
        a: undefined,
        b: null
      })
    ).toEqual('a=&b=');
  });

  it('should handle arrays', () => {
    expect(
      fromQuery({
        arr: ['a', 'b']
      })
    ).toEqual('arr=a&arr=b');
  });

That should make any discrepancies between the old and new behaviour clear.
Most notably I think the new encoding changes the array format, and handling of null and undefined.

[alexwizp]

@sqren tests were added

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 76ec6dd

History

• 💚 Build #26141 succeeded cc02970
• 💚 Build #26120 succeeded b3c48e0
• 💔 Build #26099 failed 2cfb68b
• 💚 Build #25985 succeeded 293a121
• 💚 Build #25927 succeeded fc49fee

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream