Switch back to querystring-browser library #58943
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Pinging @elastic/kibana-app-arch (Team:AppArch) |
|
Looks like there is a bug with doing too much encoding. I will fix this. |
mshustov
approved these changes
Mar 2, 2020
spalger
approved these changes
Mar 2, 2020
jbudz
approved these changes
Mar 2, 2020
7 tasks
lukeelmers
approved these changes
Mar 3, 2020
There was a problem hiding this comment.
Overall I think this approach makes the most sense. While I like the simplicity of #58771, if we aren't able to go down that route than I think I'd prefer this to the packages hack I put together.
Reviewed mostly app arch code but gave everything a once over.
@alexwizp would be great if you had a chance to review this too
| @@ -18,7 +18,7 @@ | |||
| */ | |||
|
|
|||
| import { format as formatUrl } from 'url'; | |||
| import { stringify } from 'query-string'; | |||
| // import { stringify } from 'querystring'; | |||
| @@ -34,7 +34,7 @@ export const analyticsJobExplorationRoute: MlRoute = { | |||
|
|
|||
| const PageWrapper: FC<PageProps> = ({ location, deps }) => { | |||
| const { context } = useResolver('', undefined, deps.config, basicResolvers(deps)); | |||
| const { _g }: Record<string, any> = parse(location.search, { sort: false }); | |||
| const { _g }: Record<string, any> = parse(location.search); | |||
There was a problem hiding this comment.
parse isn't trimming the ? char from the beginning of location.search and so the first parameter returned contains this prefix. ?_g in this example.
I see some plugins are trimming this themselves or taking a substring before parsing. This will need to happen to all of ML's usage of parse
|
(Currently reviewing for logs / metrics) |
Kerry350
reviewed
Mar 4, 2020
| @@ -62,7 +62,7 @@ const getOverallAnomalyExplorerLink = (pathname: string, jobId: string, timeRang | |||
| }, | |||
| }); | |||
|
|
|||
| const hash = `/explorer?${stringify(urlUtils.encodeQuery({ _g }), { encode: false })}`; | |||
There was a problem hiding this comment.
Removing the encode: false here changes the output of these links. urlUtils.encodeQuery will counteract over-zealous encoding with encodeUriQuery, but then stringify readds it. Whilst it's ultimately harmless, the links are nicer imo with the unnecessary encodings replaced.
| @@ -62,7 +62,7 @@ const getOverallAnomalyExplorerLink = (pathname: string, jobId: string, timeRang | |||
| }, | |||
| }); | |||
|
|
|||
| const hash = `/explorer?${stringify(urlUtils.encodeQuery({ _g }), { encode: false })}`; | |||
| const hash = `/explorer?${stringify(urlUtils.encodeQuery({ _g }))}`; | |||
There was a problem hiding this comment.
I think the above would be fixed with:
Suggested change
| const hash = `/explorer?${stringify(urlUtils.encodeQuery({ _g }))}`; | |
| const hash = `/explorer?${makeUrlFromQuery({ _g }}`; |
| sort: false, | ||
| encode: false, | ||
| })}`; | ||
| const hash = `/timeseriesexplorer?${stringify(urlUtils.encodeQuery({ _g, _a }))}`; |
There was a problem hiding this comment.
Same as above, this changes the behaviour of these links. I think we can fix this with:
Suggested change
| const hash = `/timeseriesexplorer?${stringify(urlUtils.encodeQuery({ _g, _a }))}`; | |
| const hash = `/timeseriesexplorer?${makeUrlFromQuery({ _g, _a })}`; |
| const encodedUrlState = | ||
| typeof urlState !== 'undefined' ? encodeRisonUrlState(urlState) : undefined; | ||
|
|
||
| return stringify( | ||
| url.encodeQuery({ | ||
| ...previousQueryValues, | ||
| [stateKey]: encodedUrlState, | ||
| }), | ||
| { sort: false, encode: false } |
There was a problem hiding this comment.
This changes the behaviour of these links (url.encodeQuery removing over-zealous encoding, and stringify re-adding it).
| @@ -155,16 +155,15 @@ export const replaceStateKeyInQueryString = <UrlState extends any>( | |||
| stateKey: string, | |||
| urlState: UrlState | undefined | |||
| ) => (queryString: string) => { | |||
| const previousQueryValues = parse(queryString, { sort: false }); | |||
| const previousQueryValues = parse(queryString); | |||
| const encodedUrlState = | |||
| typeof urlState !== 'undefined' ? encodeRisonUrlState(urlState) : undefined; | |||
|
|
|||
| return stringify( | |||
There was a problem hiding this comment.
I believe we can again use makeUrlFromQuery here to keep the old (preferable) behaviour. This also stops the changes to the link_to/**.test.tsx test files being needed.
| }), | ||
| { sort: false, encode: false } | ||
| ); | ||
| return url.makeUrlFromQuery({ |
joshdover
reviewed
Mar 4, 2020
| @@ -29,6 +29,7 @@ exports.getWebpackConfig = function(kibanaPath, projectRoot, config) { | |||
| // Kibana defaults https://github.com/elastic/kibana/blob/6998f074542e8c7b32955db159d15661aca253d7/src/legacy/ui/ui_bundler_env.js#L30-L36 | |||
| ui: fromKibana('src/legacy/ui/public'), | |||
| test_harness: fromKibana('src/test_harness/public'), | |||
| querystring: 'querystring-browser', | |||
There was a problem hiding this comment.
@spalger Is this acceptable? I think we would prefer not to introduce Webpack aliases. If this is just for the typings, I think we may be able to add a declare module 'querystring-browser' definition in typings/ that re-exports the types from Node's querystring to querystring-browser.
There was a problem hiding this comment.
Oh this is the eslint config. Guess I'm not sure why this is necessary
💔 Build FailedTest FailuresKibana Pipeline / kibana-oss-agent / Chrome UI Functional Tests.test/functional/apps/discover/_shared_links·js.discover app shared links shared links with state in query permalink should allow for copying the snapshot URLStandard OutStack TraceKibana Pipeline / kibana-oss-agent / Chrome UI Functional Tests.test/functional/apps/discover/_shared_links·js.discover app shared links shared links with state in query permalink should allow for copying the snapshot URLStandard OutStack TraceKibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__.Transaction action menu shows required sections onlyStandard OutStack Traceand 9 more failures, only showing the first 3. History
To update your PR or re-run it, just comment with: |
kertal
approved these changes
Mar 6, 2020
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes IE11 blocker by almost reverting #56957 it's not a full revert. This keeps the new
kibana_utils/public/urlutility from that commit, while changing all the dependency issues.Specifically, the
querystring-browserlibrary implements the API of nodequerystring, which has type definitions. So by using a webpack alias forquerystring=querystring-browser, we are able to use the existing type definitions.Resolves blocker #58684
Checklist
For maintainers