refactor(file): moved server interaction to container component

SwissDataScienceCenter · Sep 13, 2019 · de59b68 · de59b68
1 parent 71c0ba9
commit de59b68
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 49 deletions.
diff --git a/src/file/File.container.js b/src/file/File.container.js
@@ -22,9 +22,10 @@ import ReactDOM from 'react-dom';
 import hljs from 'highlight.js';
 
 import { atobUTF8 } from '../utils/Encoding';
-import { StyledNotebook, JupyterButtonPresent } from './File.present';
+import { StyledNotebook, JupyterButtonPresent, ShowFile as ShowFilePresent } from './File.present';
 import { ACCESS_LEVELS } from '../api-client';
 import { StatusHelper } from '../model/Model';
+import { API_ERRORS } from '../api-client';
 
 const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'tiff', 'pdf', 'gif'];
 const CODE_EXTENSIONS = ['py', 'js', 'json', 'sh', 'r', 'txt', 'yml', 'csv', 'parquet', 'cwl', 'job', 'prn', 'rout', 'dcf', 'rproj', 'rst', 'bat'];
@@ -131,7 +132,7 @@ class JupyterNotebookContainer extends Component {
 
 /**
  * Jupyter button container component
- * 
+ *
  * @param {Object} client - api-client used to query the gateway
  * @param {number} accessLevel - current project access level
  * @param {Object} branches - branches data, likely to change in a future release
@@ -196,4 +197,59 @@ class JupyterButton extends React.Component {
   }
 }
 
-export { FilePreview, JupyterNotebookContainer as JupyterNotebook, JupyterButton };
+
+/**
+ * File content display container 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
+ */
+class ShowFile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { file: null, error: null }
+  }
+
+  // TODO: Write a wrapper to make promises cancellable to avoid usage of this._isMounted
+  componentDidMount() {
+    this._isMounted = true;
+    this.retrieveFile()
+  }
+
+  componentWillUnmount() { this._isMounted = false; }
+
+  retrieveFile() {
+    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')
+      .catch(e => {
+        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)
+          this.setState({file:json});
+      });
+  }
+
+  render() {
+    const gitLabFilePath = this.props.filePath.replace(this.props.match.url + '/files/blob/', '');
+    let filePath = gitLabFilePath;
+
+    if (this.state.error !== null) {
+      filePath = this.props.filePath.split('\\').pop().split('/').pop();
+    }
+
+    return <ShowFilePresent externalUrl={this.props.externalUrl}
+      filePath={filePath}
+      gitLabFilePath={gitLabFilePath}
+      file={this.state.file}
+      error={this.state.error} />
+  }
+}
+
+export { FilePreview, JupyterNotebookContainer as JupyterNotebook, JupyterButton, ShowFile };
diff --git a/src/file/File.present.js b/src/file/File.present.js
@@ -32,7 +32,6 @@ import faGitlab from '@fortawesome/fontawesome-free-brands/faGitlab';
 import { FilePreview, JupyterButton } from './index';
 import { CheckNotebookStatus, CheckNotebookIcon } from '../notebooks'
 import { Loader } from '../utils/UIComponents';
-import { API_ERRORS } from '../api-client';
 
 
 /**
@@ -65,44 +64,15 @@ class FileCard extends React.Component {
 }
 
 class ShowFile extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { file: null, error: null }
-  }
-
-  // TODO: Write a wrapper to make promises cancellable to avoid usage of this._isMounted
-  componentDidMount() {
-    this._isMounted = true;
-    this.retrieveFile()
-  }
-
-  componentWillUnmount() { this._isMounted = false; }
-
-  retrieveFile() {
-    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')
-      .catch(e => {
-        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)
-          this.setState({file:json});
-      });
-  }
 
   render() {
-    const filePath = this.props.filePath.replace(this.props.match.url + '/files/blob/', '');
+    const gitLabFilePath = this.props.gitLabFilePath;
     const buttonGraph = this.props.lineagesPath !== undefined ?
       <span>
         <UncontrolledTooltip placement="top" target="tooltipGraphView">
           Graph View
         </UncontrolledTooltip>
-        <Link to={this.props.lineagesPath + '/' + filePath} id="tooltipGraphView">
+        <Link to={this.props.lineagesPath + '/' + gitLabFilePath} id="tooltipGraphView">
           <FontAwesomeIcon className="icon-link" icon={faProjectDiagram} id="TooltipFileView"/>
         </Link>
       </span>
@@ -113,23 +83,24 @@ class ShowFile extends React.Component {
       <UncontrolledTooltip placement="top" target="tooltipGitView">
           Open in GitLab
       </UncontrolledTooltip>
-      <a id="tooltipGitView" href={`${this.props.externalUrl}/blob/master/${filePath}`}
+      <a id="tooltipGitView" href={`${this.props.externalUrl}/blob/master/${gitLabFilePath}`}
         role="button" target="_blank" rel="noreferrer noopener">
         <FontAwesomeIcon className="icon-link" icon={faGitlab} />
       </a>
     </span>
 
-    if (this.state.error !== null) {
-      return <FileCard filePath={this.props.filePath.split('\\').pop().split('/').pop()}
-        commitHash={this.state.file.commit_id}
+    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}
         buttonGraph={buttonGraph}
         buttonGit={buttonGit}
         buttonJupyter={null}
-        body={this.state.error}
+        body={this.props.error}
         lfsBadge={null} />
     }
 
-    if (this.state.file == null) return <Card>
+    if (this.props.file == null) return <Card>
       <CardHeader className="align-items-baseline">&nbsp;</CardHeader>
       <CardBody>{"Loading..."}</CardBody>
     </Card>;
@@ -141,14 +112,16 @@ class ShowFile extends React.Component {
 
     let buttonJupyter = null;
     if (this.props.filePath.endsWith(".ipynb"))
-      buttonJupyter = (<JupyterButton {...this.props} file={this.state.file} />);
+      buttonJupyter = (<JupyterButton {...this.props} file={this.props.file} />);
 
     const body = <FilePreview
-      file={this.state.file}
+      file={this.props.file}
       {...this.props}
     />
-    return <FileCard filePath={this.props.filePath.replace(this.props.match.url + '/files/blob/', '')}
-      commitHash={this.state.file.commit_id}
+
+    return <FileCard gitLabUrl={this.props.externalUrl}
+      filePath={this.props.filePath}
+      commitHash={this.props.file.last_commit_id}
       buttonGraph={buttonGraph}
       buttonGit={buttonGit}
       buttonJupyter={buttonJupyter}
@@ -208,4 +181,4 @@ class JupyterButtonPresent extends React.Component {
   }
 }
 
-export { ShowFile, StyledNotebook, JupyterButtonPresent };
+export { StyledNotebook, JupyterButtonPresent, ShowFile };
diff --git a/src/file/index.js b/src/file/index.js
@@ -24,7 +24,7 @@
  */
 
 
-import { FilePreview, JupyterButton } from './File.container'
+import { FilePreview, JupyterButton, ShowFile } from './File.container'
 import { FileLineage } from './Lineage.container'
 
-export { FilePreview, FileLineage, JupyterButton }
+export { FilePreview, FileLineage, JupyterButton, ShowFile }
diff --git a/src/project/Project.js b/src/project/Project.js
@@ -38,7 +38,7 @@ import { MergeRequest, MergeRequestList } from '../merge-request';
 
 import List from './list';
 import New from './new';
-import { ShowFile } from '../file/File.present';
+import { ShowFile } from '../file';
 import Fork from './fork';
 
 // TODO: This component has grown too much and needs restructuring. One option would be to insert