elastic · mw-ding · Apr 11, 2019 · Apr 11, 2019
diff --git a/x-pack/plugins/code/public/components/admin_page/setup_guide.tsx b/x-pack/plugins/code/public/components/admin_page/setup_guide.tsx
@@ -102,7 +102,9 @@ const toastMessage = (
       We’ve made some changes to roles and permissions in Kibana. Read more about what these changes
       mean for you below.{' '}
     </p>
-    <EuiButton size="s" href="">Learn More</EuiButton>
+    <EuiButton size="s" href="">
+      Learn More
+    </EuiButton>
   </div>
 );
 

diff --git a/x-pack/plugins/code/public/components/editor/editor.tsx b/x-pack/plugins/code/public/components/editor/editor.tsx
@@ -21,6 +21,7 @@ import { refUrlSelector } from '../../selectors';
 import { history } from '../../utils/url';
 import { Modifier, Shortcut } from '../shortcuts';
 import { ReferencesPanel } from './references_panel';
+import { encodeRevisionString } from '../../utils/url';
 
 export interface EditorActions {
   closeReferences(changeUrl: boolean): void;
@@ -169,7 +170,7 @@ export class EditorComponent extends React.Component<IProps> {
       this.editor = await this.monaco.loadFile(repo, file, text, lang, revision);
       this.editor.onMouseDown((e: editorInterfaces.IEditorMouseEvent) => {
         if (e.target.type === monaco.editor.MouseTargetType.GUTTER_LINE_NUMBERS) {
-          const uri = `${repo}/blob/${revision}/${file}`;
+          const uri = `${repo}/blob/${encodeRevisionString(revision)}/${file}`;
           history.push(`/${uri}!L${e.target.position.lineNumber}:0`);
         }
         this.monaco!.container.focus();

diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
@@ -17,6 +17,7 @@ import { FileTree as Tree, FileTreeItemType } from '../../../model';
 import { closeTreePath, fetchRepoTree, FetchRepoTreePayload, openTreePath } from '../../actions';
 import { EuiSideNavItem, MainRouteParams, PathTypes } from '../../common/types';
 import { RootState } from '../../reducers';
+import { encodeRevisionString } from '../../utils/url';
 
 const DirectoryNode = styled.span`
   margin-left: ${theme.euiSizeS};
@@ -64,7 +65,9 @@ export class CodeFileTree extends React.Component<Props> {
       } else {
         pathType = PathTypes.tree;
       }
-      this.props.history.push(`/${resource}/${org}/${repo}/${pathType}/${revision}/${node.path}`);
+      this.props.history.push(
+        `/${resource}/${org}/${repo}/${pathType}/${encodeRevisionString(revision)}/${node.path}`
+      );
     }
   };
 

diff --git a/x-pack/plugins/code/public/components/main/breadcrumb.tsx b/x-pack/plugins/code/public/components/main/breadcrumb.tsx
@@ -8,6 +8,7 @@
 import { EuiBreadcrumbs } from '@elastic/eui';
 import React from 'react';
 import { MainRouteParams } from '../../common/types';
+import { encodeRevisionString } from '../../utils/url';
 
 interface Props {
   routeParams: MainRouteParams;
@@ -22,7 +23,7 @@ export class Breadcrumb extends React.PureComponent<Props> {
 
     pathSegments.forEach((p, index) => {
       const paths = pathSegments.slice(0, index + 1);
-      const href = `#${repoUri}/tree/${revision}/${paths.join('/')}`;
+      const href = `#${repoUri}/tree/${encodeRevisionString(revision)}/${paths.join('/')}`;
       breadcrumbs.push({
         text: p,
         href,

diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
@@ -29,7 +29,7 @@ import {
   statusSelector,
   treeCommitsSelector,
 } from '../../selectors';
-import { history } from '../../utils/url';
+import { encodeRevisionString, history } from '../../utils/url';
 import { Editor } from '../editor/editor';
 import { CloneStatus } from './clone_status';
 import { CommitHistory, CommitHistoryLoading } from './commit_history';
@@ -141,24 +141,34 @@ class CodeContent extends React.PureComponent<Props> {
     const repoUri = `${resource}/${org}/${repo}`;
     switch (id) {
       case ButtonOption.Code:
-        history.push(`/${repoUri}/${PathTypes.blob}/${revision}/${path || ''}`);
+        history.push(
+          `/${repoUri}/${PathTypes.blob}/${encodeRevisionString(revision)}/${path || ''}`
+        );
         break;
       case ButtonOption.Folder:
-        history.push(`/${repoUri}/${PathTypes.tree}/${revision}/${path || ''}`);
+        history.push(
+          `/${repoUri}/${PathTypes.tree}/${encodeRevisionString(revision)}/${path || ''}`
+        );
         break;
       case ButtonOption.Blame:
-        history.push(`/${repoUri}/${PathTypes.blame}/${revision}/${path || ''}`);
+        history.push(
+          `/${repoUri}/${PathTypes.blame}/${encodeRevisionString(revision)}/${path || ''}`
+        );
         break;
       case ButtonOption.History:
-        history.push(`/${repoUri}/${PathTypes.commits}/${revision}/${path || ''}`);
+        history.push(
+          `/${repoUri}/${PathTypes.commits}/${encodeRevisionString(revision)}/${path || ''}`
+        );
         break;
     }
   };
 
   public openRawFile = () => {
     const { path, resource, org, repo, revision } = this.props.match.params;
     const repoUri = `${resource}/${org}/${repo}`;
-    window.open(chrome.addBasePath(`/app/code/repo/${repoUri}/raw/${revision}/${path}`));
+    window.open(
+      chrome.addBasePath(`/app/code/repo/${repoUri}/raw/${encodeRevisionString(revision)}/${path}`)
+    );
   };
 
   public renderButtons = () => {
@@ -298,8 +308,9 @@ class CodeContent extends React.PureComponent<Props> {
                     <h3>Recent Commits</h3>
                   </Title>
                   <EuiButton
-                    href={`#/${resource}/${org}/${repo}/${PathTypes.commits}/${revision}/${path ||
-                      ''}`}
+                    href={`#/${resource}/${org}/${repo}/${PathTypes.commits}/${encodeRevisionString(
+                      revision
+                    )}/${path || ''}`}
                   >
                     View All
                   </EuiButton>

diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx
@@ -11,6 +11,7 @@ import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import { FileTree, FileTreeItemType } from '../../../model';
 import { MainRouteParams, PathTypes } from '../../common/types';
+import { encodeRevisionString } from '../../utils/url';
 
 const Root = styled.div`
   padding: ${theme.paddingSizes.m};
@@ -84,7 +85,7 @@ export const Directory = withRouter((props: Props) => {
   }
   const { resource, org, repo, revision } = props.match.params;
   const getUrl = (pathType: PathTypes) => (path: string) =>
-    `/${resource}/${org}/${repo}/${pathType}/${revision}/${path}`;
+    `/${resource}/${org}/${repo}/${pathType}/${encodeRevisionString(revision)}/${path}`;
   const fileList = <DirectoryNodes nodes={files} title="Files" getUrl={getUrl(PathTypes.blob)} />;
   const folderList = (
     <DirectoryNodes nodes={folders} title="Directories" getUrl={getUrl(PathTypes.tree)} />

diff --git a/x-pack/plugins/code/public/components/main/top_bar.tsx b/x-pack/plugins/code/public/components/main/top_bar.tsx
@@ -11,6 +11,7 @@ import styled from 'styled-components';
 import { SearchScope } from '../../../model';
 import { ReferenceInfo } from '../../../model/commit';
 import { MainRouteParams } from '../../common/types';
+import { encodeRevisionString } from '../../utils/url';
 import { history } from '../../utils/url';
 import { Breadcrumb } from './breadcrumb';
 import { SearchBar } from './search_bar';
@@ -38,7 +39,9 @@ export class TopBar extends React.Component<Props, { value: string }> {
       value: e.target.value,
     });
     const revision = this.props.branches.find(b => b.name === e.target.value)!.commit.id;
-    history.push(`/${resource}/${org}/${repo}/${pathType}/${revision}/${path}`);
+    history.push(
+      `/${resource}/${org}/${repo}/${pathType}/${encodeRevisionString(revision)}/${path}`
+    );
   };
 
   public render() {