Display external link to bitbucket or github when upstream is defined…

… for branch
DonJayamanne · Feb 7, 2020 · c1dfa88 · c1dfa88
1 parent fc43c94
commit c1dfa88
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/browser/src/components/Header/index.tsx b/browser/src/components/Header/index.tsx
@@ -2,13 +2,17 @@ import * as React from 'react';
 import { Button } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import * as ResultActions from '../../actions/results';
-import { RootState } from '../../reducers/index';
+import { RootState, BranchesState } from '../../reducers/index';
 import Author from './author';
 import Branch from './branch';
+import { ISettings } from '../../types';
+import { GoMarkGithub, GoBrowser } from 'react-icons/lib/go';
 
 interface HeaderProps {
     isLoading?: boolean;
     searchText?: string;
+    branches?: BranchesState;
+    settings?: ISettings;
     search(searchText: string): void;
     clearSearch(): void;
     refresh(): void;
@@ -24,6 +28,11 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
         super(props);
         this.state = { isLoading: props.isLoading, searchText: props.searchText };
     }
+
+    componentWillReceiveProps(nextProps: HeaderProps): void {
+        this.setState({ isLoading: nextProps.isLoading, searchText: nextProps.searchText });
+    }
+
     private onSearch = () => {
         if (!this.state.isLoading) {
             this.setState({ isLoading: true });
@@ -44,9 +53,37 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
             this.props.refresh();
         }
     }
-    componentWillReceiveProps(nextProps: HeaderProps): void {
-        this.setState({ isLoading: nextProps.isLoading, searchText: nextProps.searchText });
+
+    private remoteLink() {
+        if (this.props.branches.length === 0) {
+            return (<span></span>);
+        }
+
+        const branchIndex = this.props.branches.findIndex(v => v.name === this.props.settings.branchName);
+
+        if (branchIndex === -1) {
+            return (<span></span>);
+        }
+
+        const selectedBranch = this.props.branches[branchIndex];
+
+        if (!selectedBranch.remote) {
+            return (<span></span>);
+        }
+
+        switch (selectedBranch.remoteType) {
+            case 2:
+                return (<a className='hint--right hint--rounded hint--bounce' aria-label='Open repository on Github' href={selectedBranch.remote.replace(/\.git$/, '') + '/tree/' + encodeURI(selectedBranch.name)}><GoMarkGithub /></a>);
+            case 3:
+                let m = selectedBranch.remote.match(/:(\w+)\/(.*)/);
+                if (m) {
+                    return (<a className='hint--right hint--rounded hint--bounce' aria-label='Open repository on Bitbucket' href={'https://bitbucket.org/' + m[1] + '/' + m[2] + '/src/' + encodeURI(selectedBranch.name) }><GoBrowser /></a>);
+                }
+        }
+
+        return (<span></span>);
     }
+
     private handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({ isLoading: this.state.isLoading, searchText: e.target.value });
     }
@@ -79,19 +116,24 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
                 bsSize='small'
                 disabled={this.state.isLoading}
                 onClick={this.onRefresh}>Refresh</Button>
+            <span style={{display: 'inline-block', marginLeft: '1em', fontSize: '130%', verticalAlign: 'middle'}}>
+                {this.remoteLink()}
+            </span>
         </header>);
     }
 }
 
-function mapStateToProps(state: RootState): HeaderState {
+function mapStateToProps(state: RootState): HeaderProps {
     const searchText = (state && state.logEntries.searchText) ?
         state.logEntries.searchText : '';
     const isLoading = state && state.logEntries && state.logEntries.isLoading;
 
     return {
         isLoading,
-        searchText
-    };
+        searchText,
+        branches: state.branches,
+        settings: state.settings
+    } as HeaderProps;
 }
 
 function mapDispatchToProps(dispatch) {

diff --git a/browser/src/containers/App/index.tsx b/browser/src/containers/App/index.tsx
@@ -38,7 +38,7 @@ class App extends React.Component<AppProps, AppState> {
         return (
             <div className='appRootParent'>
                 <div className='appRoot'>
-                    <Header></Header >
+                    <Header></Header>
                     <LogView logEntries={ this.props.logEntries }></LogView>
                     <Footer
                         canGoBack={ this.props.logEntries.pageIndex > 0 }

diff --git a/browser/src/reducers/index.ts b/browser/src/reducers/index.ts
@@ -15,7 +15,7 @@ export type LogEntriesState = LogEntriesResponse & {
     isLoadingCommit: boolean;
 };
 
-export type BranchesState = { name: string; current: boolean }[];
+export type BranchesState = { name: string; current: boolean, remote: string, remoteType: number }[];
 export type AuthorsState = ActionedUser[];
 export type AvatarsState = Avatar[];
 export type RootState = {