Adjust Draft Page (#3288)

* add start review

* adjust draft page

frontend/src/components/toolbar/markdown-viewer-toolbar.js

@@ -32,7 +32,7 @@ const MoreMenuPropTypes = {
   openDialogs: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,
   editorMode: PropTypes.string.isRequired
-}
+};
 
 class MoreMenu extends React.PureComponent {
 
@@ -108,6 +108,14 @@ class MarkdownViewerToolbar extends React.Component {
                 <button onMouseDown={this.props.toggleNewDraft} className="btn btn-success btn-new-draft">
                   {gettext('New Draft')}</button>
               }
+              {this.props.isDraft &&
+                <div>
+                  <button type="button" className="btn btn-success seafile-btn-add-review"
+                    onMouseDown={this.props.editorUtilities.goDraftPage}>{gettext('Start review')}</button>
+                  <button type="button" className="btn btn-success seafile-btn-add-review"
+                    onMouseDown={this.props.editorUtilities.publishDraftFile}>{gettext('Publish')}</button>
+                </div>
+              }
               {this.props.collabUsers.length > 0 && <CollabUsersButton className={'collab-users-dropdown'}
                 users={this.props.collabUsers} id={'usersButton'} />}
               <ButtonGroup>

frontend/src/css/draft.css

@@ -61,6 +61,16 @@
   font-weight: normal;
 }
 
+.file-info .file-review {
+  color: #999;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.cur-file-info .last-modification {
+  font-size: 0.8125rem;
+}
+
 .seafile-toggle-diff {
   display: flex;
   margin-right: 10px;

frontend/src/draft.js

@@ -21,7 +21,6 @@ import classnames from 'classnames';
 import HistoryList from './pages/review/history-list';
 import { Value, Document, Block } from 'slate';
 import ModalPortal from './components/modal-portal';
-import { Utils } from './utils/utils';
 
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
@@ -33,6 +32,7 @@ import './css/draft.css';
 
 require('@seafile/seafile-editor/dist/editor/code-hight-package');
 const URL = require('url-parse');
+var moment = require('moment');
 
 class Draft extends React.Component {
   constructor(props) {
@@ -40,6 +40,7 @@ class Draft extends React.Component {
     this.state = {
       draftContent: '',
       draftOriginContent: '',
+      draftInfo: {},
       isLoading: true,
       isShowDiff: true,
       showDiffTip: false,
@@ -247,6 +248,12 @@ class Draft extends React.Component {
     });
   }
 
+  getDraftInfo = () => {
+    seafileAPI.getFileInfo(draftRepoID, draftFilePath).then((res) => {
+      this.setState({ draftInfo: res.data });
+    });
+  }
+
   getChangedNodes = () => {
     const nodes = this.refs.diffViewer.value.document.nodes;
     let keys = [];
@@ -677,6 +684,7 @@ class Draft extends React.Component {
     this.getCommentsNumber();
     this.listReviewers();
     this.getOriginRepoInfo();
+    this.getDraftInfo();
   }
 
   componentDidMount() {
@@ -764,6 +772,8 @@ class Draft extends React.Component {
     const draftLink = siteRoot + 'lib/' + draftRepoID + '/file' + draftFilePath + '?mode=edit';
     const freezePublish = (this.state.freezePublish || draftStatus === 'published') ? true : false;
     const canPublish = !this.state.freezePublish && draftFileExists;
+    const time = moment(this.state.draftInfo.mtime * 1000).format('YYYY-MM-DD HH:mm');
+    const url = `${siteRoot}profile/${encodeURIComponent(this.state.draftInfo.last_modifier_email)}/`;
     return(
       <div className="wrapper">
         <div id="header" className="header review">
@@ -771,17 +781,21 @@ class Draft extends React.Component {
             <div className="info-item file-feature">
               <span className="sf2-icon-review"></span>
             </div>
+            <div>
               <div className="info-item file-info">
-              <React.Fragment>
                 <span className="file-name">{draftFileName}</span>
-                {draftFileExists &&
+                <span className="mx-2 file-review">{gettext('Review')}</span>
-                  <a href={draftLink} className="draft-link">{gettext('Edit draft')}</a>
+              </div>
-                }
+              <div className="last-modification">
-              </React.Fragment>
+                <a href={url}>{this.state.draftInfo.last_modifier_name}</a><span className="mx-1">{time}</span>
+              </div>
             </div>
           </div>
           <div className="button-group">
             {this.renderDiffButton()}
+            {draftFileExists &&
+              <a href={draftLink} className="mx-xl-1"><Button color="secondary">{gettext('Edit Draft')}</Button></a>
+            }
             {canPublish &&
               <button 
                 className='btn btn-success file-operation-btn' 
@@ -834,10 +848,7 @@ class Draft extends React.Component {
                         changedNumber={this.state.changedNodes.length}
                         scrollToChangedNode={this.scrollToChangedNode}/>
                       }
-                      <SidePanelOrigin originRepoName={this.state.originRepoName}/>
+                      <SidePanelOrigin originRepoName={this.state.originRepoName} draftInfo={this.state.draftInfo}/>
-                      {draftFileExists &&
-                        <a href={draftLink}><Button color="secondary">{gettext('Edit Draft')}</Button></a>
-                      }
                     </div>
                   </TabPane>
                   <TabPane tabId="comments" className="comments">

frontend/src/markdown-editor.js

@@ -503,7 +503,6 @@ class MarkdownEditor extends React.Component {
           const contentLength = res.data.length;
           let isBlankFile =  (contentLength === 0 || contentLength === 1);
           let hasPermission = (this.state.fileInfo.permission === 'rw');
-          let isEditMode = mode === 'edit' ? true : false;
           let value = deserialize(res.data);
           this.setState({
             markdownContent: res.data,
@@ -661,7 +660,6 @@ class MarkdownEditor extends React.Component {
 
   render() {
     let component;
-    let sidePanel = this.state.isShowHistory ? true : false;
     if (this.state.loading) {
       return (
         <div className="empty-loading-page">