feature(code/frontend): implement new breadcrumb design (#31247)

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

@@ -8,43 +8,26 @@
 import { EuiBreadcrumbs } from '@elastic/eui';
 import React from 'react';
 import { MainRouteParams } from '../../common/types';
-import { VersionDropDown } from './version_dropdown';
 
 interface Props {
   routeParams: MainRouteParams;
 }
 export class Breadcrumb extends React.PureComponent<Props> {
   public render() {
-    const { resource, org, repo, revision, path, pathType } = this.props.routeParams;
+    const { resource, org, repo, revision, path } = this.props.routeParams;
     const repoUri = `${resource}/${org}/${repo}`;
 
-    const breadcrumbs = [
-      {
-        text: resource,
-        href: '#',
-      },
-      {
-        text: org,
-        href: '#',
-      },
-      {
-        text: repo,
-        href: `#${resource}/${org}/${repo}/tree/master`,
-      },
-      {
-        text: <VersionDropDown head={revision} repoUri={repoUri} path={path} pathType={pathType} />,
-      },
-    ];
+    const breadcrumbs: Array<{ text: string; href: string }> = [];
     const pathSegments = path ? path.split('/') : [];
 
     pathSegments.forEach((p, index) => {
       const paths = pathSegments.slice(0, index + 1);
-      const href = `#${resource}/${org}/${repo}/tree/master/${paths.join('/')}`;
+      const href = `#${repoUri}/tree/${revision}/${paths.join('/')}`;
       breadcrumbs.push({
         text: p,
         href,
       });
     });
-    return <EuiBreadcrumbs max={Number.MAX_VALUE} truncate={false} breadcrumbs={breadcrumbs} />;
+    return <EuiBreadcrumbs max={Number.MAX_VALUE} breadcrumbs={breadcrumbs} />;
   }
 }

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

@@ -18,7 +18,7 @@ import styled from 'styled-components';
 
 import { RepositoryUtils } from '../../../common/repository_utils';
 import { FileTree, FileTreeItemType, SearchScope, WorkerReservedProgress } from '../../../model';
-import { CommitInfo } from '../../../model/commit';
+import { CommitInfo, ReferenceInfo } from '../../../model/commit';
 import { changeSearchScope, FetchFileResponse, fetchMoreCommits } from '../../actions';
 import { MainRouteParams, PathTypes } from '../../common/types';
 import { RepoState, RepoStatus, RootState } from '../../reducers';
@@ -75,6 +75,7 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   file: FetchFileResponse | undefined;
   currentTree: FileTree | undefined;
   commits: CommitInfo[];
+  branches: ReferenceInfo[];
   hasMoreCommits: boolean;
   loadingCommits: boolean;
   onSearchScopeChanged: (s: SearchScope) => void;
@@ -180,13 +181,15 @@ class CodeContent extends React.PureComponent<Props> {
       return (
         <ButtonsContainer>
           <EuiButtonGroup
+            buttonSize="m"
             color="primary"
             options={this.buttonOptions}
             type="single"
             idSelected={buttonId}
             onChange={this.switchButton}
           />
           <EuiButtonGroup
+            buttonSize="m"
             color="primary"
             options={this.rawButtonOptions}
             type="single"
@@ -199,6 +202,7 @@ class CodeContent extends React.PureComponent<Props> {
       return (
         <ButtonsContainer>
           <EuiButtonGroup
+            buttonSize="m"
             color="primary"
             options={[
               {
@@ -227,6 +231,7 @@ class CodeContent extends React.PureComponent<Props> {
           onSearchScopeChanged={this.props.onSearchScopeChanged}
           buttons={this.renderButtons()}
           repoScope={this.props.repoScope}
+          branches={this.props.branches}
         />
         {this.renderContent()}
       </Root>
@@ -373,6 +378,7 @@ const mapStateToProps = (state: RootState) => ({
   tree: state.file.tree,
   currentTree: currentTreeSelector(state),
   commits: treeCommitsSelector(state),
+  branches: state.file.branches,
   hasMoreCommits: hasMoreCommitsSelector(state),
   loadingCommits: state.file.loadingCommits,
   repoStatus: statusSelector(state, repoUriSelector(state)),

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

@@ -4,31 +4,61 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiSelect } from '@elastic/eui';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+import React, { ChangeEvent } from 'react';
+import styled from 'styled-components';
 import { SearchScope } from '../../../model';
+import { ReferenceInfo } from '../../../model/commit';
 import { MainRouteParams } from '../../common/types';
+import { history } from '../../utils/url';
 import { Breadcrumb } from './breadcrumb';
 import { SearchBar } from './search_bar';
 
+const SelectContainer = styled(EuiFlexItem)`
+  margin-right: ${theme.euiSizeS};
+`;
+
 interface Props {
   routeParams: MainRouteParams;
   onSearchScopeChanged: (s: SearchScope) => void;
   buttons: React.ReactNode;
   repoScope: string[];
+  branches: ReferenceInfo[];
 }
 
-export class TopBar extends React.Component<Props> {
+export class TopBar extends React.Component<Props, { value: string }> {
+  public state = {
+    value: 'master',
+  };
+
+  public onChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const { resource, org, repo, path = '', pathType } = this.props.routeParams;
+    this.setState({
+      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}`);
+  };
+
   public render() {
     return (
       <div className="code-top-bar__container">
         <SearchBar
           onSearchScopeChanged={this.props.onSearchScopeChanged}
           repoScope={this.props.repoScope}
         />
-        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <Breadcrumb routeParams={this.props.routeParams} />
+        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+          <EuiFlexItem>
+            <EuiFlexGroup gutterSize="none">
+              <SelectContainer grow={false}>
+                <EuiSelect
+                  options={this.props.branches.map(b => ({ value: b.name, text: b.name }))}
+                  onChange={this.onChange}
+                />
+              </SelectContainer>
+              <Breadcrumb routeParams={this.props.routeParams} />
+            </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem grow={false} style={{ marginRight: '-.5rem' }}>
             {this.props.buttons}

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

@@ -7,6 +7,7 @@
 import queryString from 'querystring';
 import { Action } from 'redux-actions';
 import { call, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
+import chrome from 'ui/chrome';
 import { kfetch } from 'ui/kfetch';
 import { TextDocumentPositionParams } from 'vscode-languageserver';
 import { parseGoto, parseLspUrl, toCanonicalUrl } from '../../common/uri_util';
@@ -15,6 +16,7 @@ import {
   closeReferences,
   fetchFile,
   FetchFileResponse,
+  fetchRepoBranches,
   fetchRepoTree,
   fetchTreeCommits,
   findReferences,
@@ -144,6 +146,14 @@ function* handleMainRouteChange(action: Action<Match>) {
     position = parseGoto(goto);
   }
   yield put(loadRepo(repoUri));
+  yield put(fetchRepoBranches({ uri: repoUri }));
+  chrome.breadcrumbs.set([
+    {
+      text: 'Code',
+      href: '',
+    },
+    { text: `${org} → ${repo}` },
+  ]);
   if (file) {
     if ([PathTypes.blob, PathTypes.blame].includes(pathType as PathTypes)) {
       yield call(handleFile, repoUri, file, revision);