[Code] fix query string key conflict (#36620) (#37048)

* fix code query string key conflict

* fix code go to definition url

x-pack/plugins/code/public/components/editor/editor.tsx

@@ -57,7 +57,7 @@ export class EditorComponent extends React.Component<IProps> {
 
   public componentDidMount(): void {
     this.container = document.getElementById('mainEditor') as HTMLElement;
-    this.monaco = new MonacoHelper(this.container, this.props);
+    this.monaco = new MonacoHelper(this.container, this.props, this.props.location.search);
 
     const { file } = this.props;
     if (file && file.content) {
@@ -100,6 +100,9 @@ export class EditorComponent extends React.Component<IProps> {
     ) {
       this.revealPosition(this.props.revealPosition);
     }
+    if (this.monaco && qs !== prevProps.location.search) {
+      this.monaco.updateUrlQuery(qs);
+    }
     if (this.monaco && this.monaco.editor) {
       if (prevProps.showBlame !== this.props.showBlame && this.props.showBlame) {
         this.loadBlame(this.props.blames);

x-pack/plugins/code/public/components/main/side_tabs.tsx

@@ -33,7 +33,7 @@ class CodeSideTabs extends React.PureComponent<Props> {
     if (search.charAt(0) === '?') {
       qs = search.substr(1);
     }
-    const tab = parseQuery(qs).tab;
+    const tab = parseQuery(qs).sideTab;
     return tab === Tabs.structure ? Tabs.structure : Tabs.file;
   }
 
@@ -87,7 +87,7 @@ class CodeSideTabs extends React.PureComponent<Props> {
     const { history } = this.props;
     const { pathname, search } = history.location;
     // @ts-ignore
-    history.push(QueryString.replaceParamInUrl(`${pathname}${search}`, 'tab', tab));
+    history.push(QueryString.replaceParamInUrl(`${pathname}${search}`, 'sideTab', tab));
   };
 
   public render() {

x-pack/plugins/code/public/components/symbol_tree/__test__/symbol_tree.test.tsx

@@ -5,17 +5,47 @@
  */
 
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, match } from 'react-router-dom';
 import renderer from 'react-test-renderer';
-import { mockFunction } from '../../../utils/test_utils';
+import {
+  mockFunction,
+  createLocation,
+  createMatch,
+  createHistory,
+} from '../../../utils/test_utils';
 import { CodeSymbolTree } from '../code_symbol_tree';
 import { props } from './__fixtures__/props';
+import { MainRouteParams, PathTypes } from '../../../common/types';
+import { History, Location } from 'history';
+
+const location: Location = createLocation({
+  pathname: '/github.com/google/guava/tree/master/guava/src/com/google',
+});
+
+const m: match<MainRouteParams> = createMatch({
+  path: '/:resource/:org/:repo/:pathType(blob|tree)/:revision/:path*:goto(!.*)?',
+  url: '/github.com/google/guava/tree/master/guava/src/com/google',
+  isExact: true,
+  params: {
+    resource: 'github.com',
+    org: 'google',
+    repo: 'guava',
+    pathType: PathTypes.tree,
+    revision: 'master',
+    path: 'guava/src/com/google',
+  },
+});
+
+const history: History = createHistory({ location, length: 8, action: 'POP' });
 
 test('render symbol tree correctly', () => {
   const tree = renderer
     .create(
       <MemoryRouter>
         <CodeSymbolTree
+          location={location}
+          history={history}
+          match={m}
           structureTree={props.structureTree}
           closedPaths={[]}
           openSymbolPath={mockFunction}

x-pack/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx

@@ -7,16 +7,16 @@
 import { EuiFlexGroup, EuiIcon, EuiSideNav, EuiText, EuiToken } from '@elastic/eui';
 import { IconType } from '@elastic/eui';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 import url from 'url';
 import { Location, SymbolKind } from 'vscode-languageserver-types/lib/umd/main';
 import { isEqual } from 'lodash';
 
 import { RepositoryUtils } from '../../../common/repository_utils';
-import { EuiSideNavItem } from '../../common/types';
+import { EuiSideNavItem, MainRouteParams } from '../../common/types';
 import { SymbolWithMembers } from '../../reducers/symbol';
 
-interface Props {
+interface Props extends RouteComponentProps<MainRouteParams> {
   structureTree: SymbolWithMembers[];
   closedPaths: string[];
   openSymbolPath: (p: string) => void;
@@ -64,6 +64,7 @@ export class CodeSymbolTree extends React.PureComponent<Props, { activeSymbol?:
     ) {
       bg = <div className="code-full-width-node" />;
     }
+    const queries = url.parse(this.props.location.search, true).query;
     return (
       <div className="code-symbol-container">
         {bg}
@@ -89,7 +90,7 @@ export class CodeSymbolTree extends React.PureComponent<Props, { activeSymbol?:
           <Link
             to={url.format({
               pathname: RepositoryUtils.locationToUrl(location),
-              query: { tab: 'structure' },
+              query: { sideTab: 'structure', ...queries },
             })}
             className="code-symbol-link"
             onClick={this.getClickHandler({ name, location })}

x-pack/plugins/code/public/components/symbol_tree/symbol_tree.tsx

@@ -5,6 +5,7 @@
  */
 
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { closeSymbolPath, openSymbolPath } from '../../actions';
 import { RootState } from '../../reducers';
 import { structureSelector } from '../../selectors';
@@ -20,7 +21,9 @@ const mapDispatchToProps = {
   closeSymbolPath,
 };
 
-export const SymbolTree = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CodeSymbolTree);
+export const SymbolTree = withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(CodeSymbolTree)
+);

x-pack/plugins/code/public/monaco/editor_service.ts

@@ -19,15 +19,18 @@ interface IResourceInput {
 }
 
 export class EditorService extends StandaloneCodeEditorServiceImpl {
-  public static async handleSymbolUri(qname: string) {
+  constructor(private readonly getUrlQuery: () => string) {
+    super();
+  }
+  public static async handleSymbolUri(qname: string, getUrlQuery: () => string) {
     const result = await EditorService.findSymbolByQname(qname);
     if (result.symbols.length > 0) {
       const symbol = result.symbols[0].symbolInformation;
       const { schema, uri } = parseSchema(symbol.location.uri);
       if (schema === 'git:') {
         const { line, character } = symbol.location.range.start;
         const url = uri + `!L${line + 1}:${character + 1}`;
-        history.push(url);
+        history.push(`${url}${getUrlQuery()}`);
       }
     }
   }
@@ -52,7 +55,7 @@ export class EditorService extends StandaloneCodeEditorServiceImpl {
   ) {
     const { scheme, authority, path } = input.resource;
     if (scheme === 'symbol') {
-      await EditorService.handleSymbolUri(authority);
+      await EditorService.handleSymbolUri(authority, this.getUrlQuery);
     } else {
       const uri = `/${authority}${path}`;
       if (input.options && input.options.selection) {
@@ -62,7 +65,7 @@ export class EditorService extends StandaloneCodeEditorServiceImpl {
         if (currentPath === url) {
           this.helper!.revealPosition(startLineNumber, startColumn);
         } else {
-          history.push(url);
+          history.push(`${url}${this.getUrlQuery()}`);
         }
       }
     }

x-pack/plugins/code/public/monaco/monaco_helper.ts

@@ -29,7 +29,8 @@ export class MonacoHelper {
 
   constructor(
     public readonly container: HTMLElement,
-    private readonly editorActions: EditorActions
+    private readonly editorActions: EditorActions,
+    private urlQuery: string
   ) {
     this.handleCopy = this.handleCopy.bind(this);
   }
@@ -47,7 +48,7 @@ export class MonacoHelper {
       if (chrome.getInjected('enableLangserversDeveloping', false) === true) {
         this.monaco.languages.registerDefinitionProvider('go', definitionProvider);
       }
-      const codeEditorService = new EditorService();
+      const codeEditorService = new EditorService(this.getUrlQuery);
       codeEditorService.setMonacoHelper(this);
       this.editor = monaco.editor.create(
         this.container!,
@@ -80,7 +81,7 @@ export class MonacoHelper {
           this.editor!.layout();
         });
       });
-      registerReferencesAction(this.editor);
+      registerReferencesAction(this.editor, this.getUrlQuery);
       const hoverController: HoverController = new HoverController(this.editor);
       hoverController.setReduxActions(this.editorActions);
       document.addEventListener('copy', this.handleCopy);
@@ -89,6 +90,14 @@ export class MonacoHelper {
     });
   }
 
+  updateUrlQuery = (q: string) => {
+    this.urlQuery = q;
+  };
+
+  getUrlQuery = () => {
+    return this.urlQuery;
+  };
+
   public destroy = () => {
     this.monaco = null;
     document.removeEventListener('copy', this.handleCopy);

x-pack/plugins/code/public/monaco/references/references_action.ts

@@ -5,10 +5,14 @@
  */
 import { editor } from 'monaco-editor';
 import queryString from 'querystring';
+import url from 'url';
 import { parseSchema } from '../../../common/uri_util';
 import { history } from '../../utils/url';
 
-export function registerReferencesAction(e: editor.IStandaloneCodeEditor) {
+export function registerReferencesAction(
+  e: editor.IStandaloneCodeEditor,
+  getUrlQuery: () => string
+) {
   e.addAction({
     id: 'editor.action.referenceSearch.trigger',
     label: 'Find All References',
@@ -18,7 +22,7 @@ export function registerReferencesAction(e: editor.IStandaloneCodeEditor) {
       const position = ed.getPosition();
       const { uri } = parseSchema(ed.getModel().uri.toString());
       const refUrl = `git:/${uri}!L${position.lineNumber - 1}:${position.column - 1}`;
-      const queries = queryString.parse(location.search);
+      const queries = url.parse(getUrlQuery(), true).query;
       const query = queryString.stringify({
         ...queries,
         tab: 'references',

x-pack/plugins/code/public/sagas/editor.ts

@@ -8,6 +8,7 @@ import queryString from 'querystring';
 import { Action } from 'redux-actions';
 import { kfetch } from 'ui/kfetch';
 import { TextDocumentPositionParams } from 'vscode-languageserver';
+import Url from 'url';
 import { call, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 import { parseGoto, parseLspUrl, toCanonicalUrl } from '../../common/uri_util';
 import { FileTree } from '../../model';
@@ -41,6 +42,7 @@ import {
   lastRequestPathSelector,
   refUrlSelector,
   repoScopeSelector,
+  urlQueryStringSelector,
 } from '../selectors';
 import { history } from '../utils/url';
 import { mainRoutePattern } from './patterns';
@@ -68,10 +70,11 @@ export function* watchLspMethods() {
   yield takeLatest(String(findReferences), handleReferences);
 }
 
-function handleCloseReferences(action: Action<boolean>) {
+function* handleCloseReferences(action: Action<boolean>) {
   if (action.payload) {
-    const { pathname, search } = history.location;
-    const queryParams = queryString.parse(search);
+    const search = yield select(urlQueryStringSelector);
+    const { pathname } = history.location;
+    const queryParams = Url.parse(search, true).query;
     if (queryParams.tab) {
       delete queryParams.tab;
     }

x-pack/plugins/code/public/selectors/index.ts

@@ -94,3 +94,5 @@ export const createTreeSelector = (path: string) => (state: RootState) => {
 export const currentRepoSelector = (state: RootState) => state.repository.currentRepository;
 
 export const repoScopeSelector = (state: RootState) => state.search.searchOptions.repoScope;
+
+export const urlQueryStringSelector = (state: RootState) => state.route.match.location.search;