add delete draft button (#4380)

* add delete draft button

* fix spelling mistakes

frontend/src/app.js

@@ -13,7 +13,7 @@ import DraftContent from './pages/drafts/draft-content';
 import FilesActivities from './pages/dashboard/files-activities';
 import Starred from './pages/starred/starred';
 import LinkedDevices from './pages/linked-devices/linked-devices';
-import editUtilties from './utils/editor-utilties';
+import editUtilities from './utils/editor-utilities';
 import ShareAdminLibraries from './pages/share-admin/libraries';
 import ShareAdminFolders from './pages/share-admin/folders';
 import ShareAdminShareLinks from './pages/share-admin/share-links';
@@ -100,7 +100,7 @@ class App extends Component {
   }
 
   getDrafts = () => {
-    editUtilties.listDrafts().then(res => {
+    editUtilities.listDrafts().then(res => {
       this.setState({
         draftCounts: res.data.draft_counts,
         draftList: res.data.data, 

frontend/src/components/dialog/list-repo-drafts-dialog.js

@@ -4,6 +4,8 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import moment from 'moment';
+import editorUtilities from '../../utils/editor-utilities';
+import toaster from '../../components/toast';
 import { Utils } from '../../utils/utils';
 import Draft from '../../models/draft';
 
@@ -33,12 +35,27 @@ class ListRepoDraftsDialog extends React.Component {
     });
   }
 
+  onDeleteDraftItem = (draft) => {
+    editorUtilities.deleteDraft(draft.id).then(() => {
+      let drafts = this.state.drafts.filter(item => {
+        return item.id !== draft.id;
+      });
+      this.setState({drafts: drafts});
+      let msg = gettext('Successfully deleted draft %(draft)s.');
+      msg = msg.replace('%(draft)s', draft.draftFilePath);
+      toaster.success(msg);
+    }).catch(() => {
+      let msg = gettext('Failed to delete draft %(draft)s.');
+      msg = msg.replace('%(draft)s', draft.draftFilePath);
+      toaster.danger(msg);
+    });
+  }
+
   toggle = () => {
     this.props.toggle();
   }
 
   render() {
-    let drafts = this.state.drafts;
     return (
       <Modal isOpen={true}>
         <ModalHeader toggle={this.toggle}>{gettext('Drafts')}</ModalHeader>
@@ -47,21 +64,19 @@ class ListRepoDraftsDialog extends React.Component {
             <thead>
               <tr>
                 <th width='50%' className="ellipsis">{gettext('Name')}</th>
-                <th width='25%'>{gettext('Owner')}</th>
+                <th width='20%'>{gettext('Owner')}</th>
-                <th width='25%'>{gettext('Last Update')}</th>
+                <th width='20%'>{gettext('Last Update')}</th>
+                <th width='10%'></th>
               </tr>
             </thead>
             <tbody>
-              {this.state.drafts.map((draft) => {
+              {this.state.drafts.map((item, index) => {
-                let href = siteRoot + 'drafts/' + draft.id + '/';
                 return (
-                  <tr key={draft.id}>
+                  <DraftItem
-                    <td className="name">
+                    key={index}
-                      <a href={href} target='_blank'>{Utils.getFileName(draft.draftFilePath)}</a>
+                    draftItem={item}
-                    </td>
+                    onDeleteDraftItem={this.onDeleteDraftItem}
-                    <td>{draft.ownerNickname}</td>
+                  />
-                    <td>{moment(draft.createdStr).fromNow()}</td>
-                  </tr>
                 );
               })}
             </tbody>
@@ -78,3 +93,50 @@ class ListRepoDraftsDialog extends React.Component {
 ListRepoDraftsDialog.propTypes = propTypes;
 
 export default ListRepoDraftsDialog;
+
+const DraftItemPropTypes = {
+  draftItem: PropTypes.object,
+  onDeleteDraftItem: PropTypes.func.isRequired,
+};
+
+class DraftItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = ({
+      active: false,
+    });
+  }
+
+  onMouseEnter = () => {
+    this.setState({
+      active: true
+    });
+  }
+
+  onMouseLeave = () => {
+    this.setState({
+      active: false
+    });
+  }
+
+  render() {
+    const draftItem = this.props.draftItem;
+    let href = siteRoot + 'drafts/' + draftItem.id + '/';
+    let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3';
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td className="name">
+          <a href={href} target='_blank'>{Utils.getFileName(draftItem.draftFilePath)}</a>
+        </td>
+        <td>{draftItem.ownerNickname}</td>
+        <td>{moment(draftItem.createdStr).fromNow()}</td>
+        <td>
+          <i className={className} onClick={this.props.onDeleteDraftItem.bind(this, draftItem)}></i>
+        </td>
+      </tr>
+    );
+  }
+}
+
+DraftItem.propTypes = DraftItemPropTypes;

frontend/src/components/search/search.js

@@ -4,7 +4,7 @@ import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, username } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
-import editorUtilities from '../../utils/editor-utilties';
+import editorUtilities from '../../utils/editor-utilities';
 import More from '../more';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';

frontend/src/file-history-old.js

@@ -4,7 +4,7 @@ import { Button } from 'reactstrap';
 import { Utils } from './utils/utils';
 import { seafileAPI } from './utils/seafile-api';
 import { gettext, PER_PAGE, filePath, fileName, historyRepoID, useNewAPI, canDownload, canCompare } from './utils/constants';
-import editUtilties from './utils/editor-utilties';
+import editUtilities from './utils/editor-utilities';
 import Loading from './components/loading';
 import Logo from './components/logo';
 import CommonToolbar from './components/toolbar/common-toolbar';
@@ -43,7 +43,7 @@ class FileHistory extends React.Component {
   }
 
   listNewHistoryRecords = (filePath, PER_PAGE) => {
-    editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
+    editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       let historyData = res.data;
       if (!historyData) {
         this.setState({isLoading: false});
@@ -141,7 +141,7 @@ class FileHistory extends React.Component {
           currentPage: currentPage,
           isReloadingData: true,
         });
-        editUtilties.listFileHistoryRecords(filePath, currentPage, PER_PAGE).then(res => {
+        editUtilities.listFileHistoryRecords(filePath, currentPage, PER_PAGE).then(res => {
           this.updateNewRecords(res.data);
         });
       } else {
@@ -193,7 +193,7 @@ class FileHistory extends React.Component {
   onItemRestore = (item) => {
     let commitId = item.commit_id;
     let filePath = item.path;
-    editUtilties.revertFile(filePath, commitId).then(res => {
+    editUtilities.revertFile(filePath, commitId).then(res => {
       if (res.data.success) {
         this.setState({isLoading: true});
         this.refershFileList();
@@ -203,7 +203,7 @@ class FileHistory extends React.Component {
 
   refershFileList() {
     if (useNewAPI) {
-      editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then((res) => {
+      editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then((res) => {
         this.initNewRecords(res.data);
       });
     } else {

frontend/src/pages/drafts/draft-content.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { gettext } from '../../utils/constants';
-import editUtilties from '../../utils/editor-utilties';
+import editUtilities from '../../utils/editor-utilities';
 import { Utils } from '../../utils/utils';
 import PropTypes from 'prop-types';
 import toaster from '../../components/toast';
@@ -24,7 +24,7 @@ class DraftContent extends React.Component {
   onDeleteHandler = (draft) => {
     // let draft = this.state.currentDraft;
     let draft_name = Utils.getFileName(draft.draft_file_path);
-    editUtilties.deleteDraft(draft.id).then(res => {
+    editUtilities.deleteDraft(draft.id).then(res => {
       this.props.updateDraftsList(draft.id);
       let msg_s = gettext('Successfully deleted draft %(draft)s.');
       msg_s = msg_s.replace('%(draft)s', draft_name);
@@ -39,7 +39,7 @@ class DraftContent extends React.Component {
   onPublishHandler = (draft) => {
     // let draft = this.state.currentDraft;
     let draft_name = Utils.getFileName(draft.draft_file_path);
-    editUtilties.publishDraft(draft.id).then(res => {
+    editUtilities.publishDraft(draft.id).then(res => {
       this.props.updateDraftsList(draft.id);
       let msg_s = gettext('Successfully published draft %(draft)s.');
       msg_s = msg_s.replace('%(draft)s', draft_name);

frontend/src/pages/file-history/side-panel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext, PER_PAGE, filePath } from '../../utils/constants';
-import editUtilties from '../../utils/editor-utilties';
+import editUtilities from '../../utils/editor-utilities';
 import Loading from '../../components/loading';
 import HistoryListView from '../../components/history-list-view/history-list-view';
 import toaster from '../../components/toast';
@@ -26,7 +26,7 @@ class SidePanel extends React.Component {
   }
 
   componentDidMount() {
-    editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
+    editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       let historyList = res.data;
       if (historyList.length === 0) {
         this.setState({isLoading: false});
@@ -37,7 +37,7 @@ class SidePanel extends React.Component {
   }
   
   refershFileList() {
-    editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
+    editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       this.initResultState(res.data);
     });
   }
@@ -75,7 +75,7 @@ class SidePanel extends React.Component {
         currentPage: currentPage,
         isReloadingData: true,
       });
-      editUtilties.listFileHistoryRecords(filePath, currentPage, PER_PAGE).then(res => {
+      editUtilities.listFileHistoryRecords(filePath, currentPage, PER_PAGE).then(res => {
         this.updateResultState(res.data);
         this.setState({isReloadingData: false});
       });
@@ -84,7 +84,7 @@ class SidePanel extends React.Component {
 
   onItemRestore = (currentItem) => {
     let commitId = currentItem.commit_id;
-    editUtilties.revertFile(filePath, commitId).then(res => {
+    editUtilities.revertFile(filePath, commitId).then(res => {
       if (res.data.success) {
         this.setState({isLoading: true});
         this.refershFileList();