feat(file): display commit-hash information for the viewed file

src/api-client/repository.js

@@ -94,6 +94,21 @@ function addRepositoryMethods(client) {
     )
   }
 
+  client.getRepositoryCommit = (projectId, commitSHA) => {
+    let headers = client.getBasicHeaders();
+    return client.clientFetch(
+      `${client.baseUrl}/projects/${projectId}/repository/commits/${commitSHA}`, {
+        method: 'GET',
+        headers: headers
+      },
+      client.returnTypes.full,
+      false
+    ).then(response => {
+      return response.json();
+    })
+  }
+
+
   // TODO: Merge to following methods into one
   client.getRepositoryFile = (projectId, path, ref='master', encoding='base64') => {
     let headers = client.getBasicHeaders();

src/file/File.container.js

@@ -204,11 +204,12 @@ class JupyterButton extends React.Component {
  * @param {Object} client - api-client used to query the gateway
  * @param {string} filePath - path to the file
  * @param {string} branchName - optional branch name, defaults to master
+ * @param {Object} branches - for the JupyterNotebook button. See docs for JupyterButton
  */
 class ShowFile extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { file: null, error: null }
+    this.state = { file: null, commit: null, error: null}
   }
 
   // TODO: Write a wrapper to make promises cancellable to avoid usage of this._isMounted
@@ -220,20 +221,29 @@ class ShowFile extends React.Component {
   componentWillUnmount() { this._isMounted = false; }
 
   retrieveFile() {
+    const client = this.props.client;
     const branchName = this.props.branchName || 'master';
     let filePath = this.props.filePath.replace(this.props.match.url + '/files/blob/', '')
-    this.props.client.getRepositoryFile(this.props.projectId, filePath, branchName, 'base64')
+    client.getRepositoryFile(this.props.projectId, filePath, branchName, 'base64')
       .catch(e => {
+        if (!this._isMounted) return null;
         if (e.case === API_ERRORS.notFoundError) {
           this.setState({error:"ERROR 404: The file with path '"+ this.props.filePath +"' does not exist."})
         }
         else this.setState({error:"Could not load file with path "+this.props.filePath})
       })
       .then(json => {
-        if (!this._isMounted) return;
-        if(!this.state.error)
+        if (!this._isMounted) return null;
+        if (!this.state.error)
           this.setState({file:json});
-      });
+        return json;
+      }).then(fileJson => {
+        if (fileJson == null) return;
+        return client.getRepositoryCommit(this.props.projectId, fileJson.last_commit_id);
+      }).then(commitJson => {
+        if (!this._isMounted) return null;
+        this.setState({commit: commitJson});
+      })
   }
 
   render() {
@@ -244,10 +254,18 @@ class ShowFile extends React.Component {
       filePath = this.props.filePath.split('\\').pop().split('/').pop();
     }
 
+    let buttonJupyter = null;
+    if (this.props.filePath.endsWith(".ipynb"))
+      buttonJupyter = (<JupyterButton {...this.props} file={this.props.file} />);
+
     return <ShowFilePresent externalUrl={this.props.externalUrl}
       filePath={filePath}
       gitLabFilePath={gitLabFilePath}
+      lineagesPath={this.props.lineagesPath}
+      branches={this.props.branches}
+      buttonJupyter={buttonJupyter}
       file={this.state.file}
+      commit={this.state.commit}
       error={this.state.error} />
   }
 }

src/file/File.present.js

@@ -24,21 +24,26 @@ import NotebookPreview from '@nteract/notebook-render';
 // Instead define the style below
 //import './notebook.css'
 import { UncontrolledTooltip, Card, CardHeader, CardBody, Badge } from 'reactstrap';
+import { ListGroup, ListGroupItem } from 'reactstrap';
 import '../../node_modules/highlight.js/styles/atom-one-light.css'
 import FontAwesomeIcon from '@fortawesome/react-fontawesome'
 import faProjectDiagram from '@fortawesome/fontawesome-free-solid/faProjectDiagram'
 import faGitlab from '@fortawesome/fontawesome-free-brands/faGitlab';
 
-import { FilePreview, JupyterButton } from './index';
+import { FilePreview } from './index';
 import { CheckNotebookStatus, CheckNotebookIcon } from '../notebooks'
 import { Loader } from '../utils/UIComponents';
+import { Time } from '../utils/Time';
+
+const commitMessageLengthLimit = 120;
 
 
 /**
  * Display the Card with file information. Has the following parameters:
  *
+ * @param {string} gitLabUrl - Url to GitLab.
  * @param {string} filePath - Path of the file
- * @param {string} commitHash - Commit hash for the file
+ * @param {Object} commit - Information from GitLab about the commit.
  * @param {Component} buttonGraph - Button to switch to graph view
  * @param {Component} buttonGit - Button to switch to GitLab.
  * @param {Component} buttonJupyter - Button to switch to Jupyter.
@@ -47,22 +52,58 @@ import { Loader } from '../utils/UIComponents';
  */
 class FileCard extends React.Component {
   render() {
+    let commitHeader = null;
+    if (this.props.commit) {
+      const commitLinkHref = `${this.props.gitLabUrl}/commit/${this.props.commit.id}`;
+      const title = (this.props.commit.title.length > commitMessageLengthLimit) ?
+        this.props.commit.title.slice(0, commitMessageLengthLimit) + "..." :
+        this.props.commit.title
+      commitHeader = <ListGroup flush>
+        <ListGroupItem>
+          <div className="d-flex justify-content-between flex-wrap">
+            <div>
+              <a href={commitLinkHref} target="_blank" rel="noreferrer noopener">
+                Commit: {this.props.commit.short_id}
+              </a> &nbsp;
+              {title}
+            </div>
+            <div className="caption">
+              {this.props.commit.author_name} &nbsp;
+              {Time.toIsoString(this.props.commit.committed_date)}
+            </div>
+          </div>
+        </ListGroupItem>
+      </ListGroup>
+    }
     return <Card>
       <CardHeader className="align-items-baseline">
         {this.props.lfsBadge}
         {this.props.filePath}
         <span className="caption align-baseline">&nbsp;File view</span>
-        <div className="float-right" >
+        <div className="float-right">
           {this.props.buttonJupyter}
           {this.props.buttonGit}
           {this.props.buttonGraph}
         </div>
       </CardHeader>
+      {commitHeader}
       <CardBody>{this.props.body}</CardBody>
     </Card>
   }
 }
 
+/**
+ * Display a file with some metadata. Has the following parameters:
+ *
+ * @param {string} externalUrl - Url to GitLab.
+ * @param {string} filePath - Path of the file
+ * @param {string} gitLabFilePath - Path of the file in gitLab
+ * @param {string} lineagesPath - Path to get the lineage
+ * @param {Component} buttonJupyter - A button to connect to jupyter
+ * @param {Object} file - The file object from GitLab (can be null)
+ * @param {Object} commit - The commit object from GitLab (can be null)
+ * @param {Object} error - The error object from GitLab (can be null)
+ */
 class ShowFile extends React.Component {
 
   render() {
@@ -92,10 +133,10 @@ class ShowFile extends React.Component {
     if (this.props.error !== null) {
       return <FileCard gitLabUrl={this.props.externalUrl}
         filePath={this.props.gitLabFilePath.split('\\').pop().split('/').pop()}
-        commitHash={this.props.file.last_commit_id}
+        commit={this.props.commit}
         buttonGraph={buttonGraph}
         buttonGit={buttonGit}
-        buttonJupyter={null}
+        buttonJupyter={this.props.buttonJupyter}
         body={this.props.error}
         lfsBadge={null} />
     }
@@ -110,21 +151,17 @@ class ShowFile extends React.Component {
       <Badge className="lfs-badge" color="light">LFS</Badge> :
       null;
 
-    let buttonJupyter = null;
-    if (this.props.filePath.endsWith(".ipynb"))
-      buttonJupyter = (<JupyterButton {...this.props} file={this.props.file} />);
-
     const body = <FilePreview
       file={this.props.file}
       {...this.props}
     />
 
     return <FileCard gitLabUrl={this.props.externalUrl}
       filePath={this.props.filePath}
-      commitHash={this.props.file.last_commit_id}
+      commit={this.props.commit}
       buttonGraph={buttonGraph}
       buttonGit={buttonGit}
-      buttonJupyter={buttonJupyter}
+      buttonJupyter={this.props.buttonJupyter}
       body={body}
       lfsBadge={isLFSBadge} />
   }

src/file/File.test.js

@@ -29,8 +29,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import { testClient as client } from '../api-client'
 import { generateFakeUser } from '../app-state/UserState.test';
-import { JupyterButton } from './index';
-import { ShowFile } from './File.present';
+import { ShowFile, JupyterButton } from './index';
 
 describe('rendering', () => {
   const users = [