File history improve (#2707)

frontend/src/file-history.js

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
+import axios from 'axios';
 import editUtilties from './utils/editor-utilties';
-import { filePath } from './utils/constants';
+import { siteRoot, filePath, fileName } from './utils/constants';
+import { Utils } from './utils/utils';
 import URLDecorator from './utils/url-decorator';
+import CommonToolbar from './components/toolbar/common-toolbar';
 import SidePanel from './pages/file-history/side-panel';
 import MainPanel from './pages/file-history/main-panel';
-import axios from 'axios';
+
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
 import './assets/css/fontawesome.css';
@@ -19,52 +22,80 @@ class FileHistory extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      content: '',
       renderingContent: true,
-      fileOwner: '',
-      markdownContent: '',
-      markdownContentOld: ''
+      newMarkdownContent: '',
+      oldMarkdownContent: ''
     };
   }
 
+  onSearchedClick = (selectedItem) => {
+    if (selectedItem.is_dir === true) {
+      let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
+      let newWindow = window.open('about:blank');
+      newWindow.location.href = url;
+    } else {
+      let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
+      let newWindow = window.open('about:blank');
+      newWindow.location.href = url;
+    }
+  }
 
-  setDiffContent = (markdownContent, markdownContentOld)=> {
+  setDiffContent = (newmarkdownContent, oldMarkdownContent)=> {
     this.setState({
       renderingContent: false,
-      markdownContent: markdownContent,
-      markdownContentOld: markdownContentOld
+      newmarkdownContent: newmarkdownContent,
+      oldMarkdownContent: oldMarkdownContent,
     });
   }
 
 
-  onHistoryItemClick = (item, preCommitID)=> {
-    let objID = item.rev_file_id;
-    let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: objID});
-    let downLoadURL1 = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: preCommitID});
+  onHistoryItemClick = (item, preItem)=> {
     this.setState({renderingContent: true});
-    axios.all([
-      editUtilties.getFileContent(downLoadURL),
-      editUtilties.getFileContent(downLoadURL1)
-    ]).then(axios.spread((res1, res2) => {
-      this.setDiffContent(res1.data, res2.data);
-    }));
+    if (preItem) {
+      let currID = item.rev_file_id;
+      let preID = preItem.rev_file_id;
+      let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: currID});
+      let downLoadURL1 = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: preID});
+      axios.all([
+        editUtilties.getFileContent(downLoadURL),
+        editUtilties.getFileContent(downLoadURL1)
+      ]).then(axios.spread((res1, res2) => {
+        this.setDiffContent(res1.data, res2.data);
+      }));
+    } else {
+      let currID = item.rev_file_id;
+      let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: currID});
+      axios.all([
+        editUtilties.getFileContent(downLoadURL),
+      ]).then(axios.spread((res1) => {
+        this.setDiffContent(res1.data, '');
+      }));
+    }
   }
 
   render() {
     return(
-      <div id="main" className="history-main">
-        <SidePanel 
-          fileOwner={this.state.fileOwner}
-          onHistoryItemClick={this.onHistoryItemClick}
-          setDiffContent={this.setDiffContent}
-        />
-        <MainPanel 
-          markdownContent={this.state.markdownContent}
-          markdownContentOld={this.state.markdownContentOld}
-          renderingContent={this.state.renderingContent}
-        />
-
-      </div>
+      <Fragment>
+        <div id="header" className="history-header">
+          <div className="title">
+            <a href="javascript:window.history.back()" className="go-back" title="Back">
+              <span className="fas fa-chevron-left"></span>
+            </a>
+            <span className="name">{fileName}</span>
+          </div>
+          <div className='toolbar'>
+            <CommonToolbar onSearchedClick={this.onSearchedClick} />
+          </div>
+        </div>
+        <div id="main" className="history-content">
+          <SidePanel onItemClick={this.onHistoryItemClick}/>
+          <MainPanel 
+            newMarkdownContent={this.state.newMarkdownContent}
+            oldMarkdownContent={this.state.oldMarkdownContent}
+            renderingContent={this.state.renderingContent}
+          />
+        </div>
+      </Fragment>
     );
   }
 }