Change delete wiki page UI (#7171)

* change delete wiki page UI

* optimise codes

* fix text

frontend/src/components/common/common-undo-tool.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+
+function CommonUndoTool(props) {
+  const style = {
+    color: 'rgb(71, 184, 129)',
+    marginLeft: '8px',
+    paddingBottom: '1px',
+    borderBottom: '1px solid rgb(71, 184, 129)',
+    cursor: 'pointer',
+  };
+  return (
+    <span onClick={(e) => {e.stopPropagation(); props.onUndoOperation(e);}} style={style}>{gettext('Undo')}</span>
+  );
+}
+
+CommonUndoTool.propTypes = {
+  onUndoOperation: PropTypes.func.isRequired,
+};
+
+export default CommonUndoTool;

frontend/src/components/dialog/trash-dialog.js

@@ -358,7 +358,7 @@ class Item extends React.Component {
       this.setState({
         restored: true
       });
-      toaster.success(gettext('Successfully restored 1 item.'));
+      toaster.success(gettext('Restored 1 item'));
     }).catch((error) => {
       let errorMsg = '';
       if (error.response) {

frontend/src/pages/wiki2/side-panel.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import deepCopy from 'deep-copy';
 import classNames from 'classnames';
-import { isWiki2, wikiId, wikiPermission } from '../../utils/constants';
+import { isWiki2, wikiId, wikiPermission, gettext } from '../../utils/constants';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import WikiNav from './wiki-nav/index';
@@ -15,6 +15,7 @@ import WikiExternalOperations from './wiki-external-operations';
 import WikiTrashDialog from './wiki-trash-dialog';
 import { DEFAULT_PAGE_NAME } from './constant';
 import Wiki2Search from '../../components/search/wiki2-search';
+import CommonUndoTool from '../../components/common/common-undo-tool';
 
 import './side-panel.css';
 
@@ -40,14 +41,21 @@ class SidePanel extends PureComponent {
     };
   }
 
-  confirmDeletePage = (pageId) => {
+  onDeletePage = (pageId) => {
     const config = deepCopy(this.props.config);
     const { pages } = config;
     const index = PageUtils.getPageIndexById(pageId, pages);
+    const deletePageName = pages[index].name;
     config.pages.splice(index, 1);
     wikiAPI.deleteWiki2Page(wikiId, pageId).then((res) => {
       if (res.data.success === true) {
         this.props.updateWikiConfig(config);
+        toaster.success(
+          <span>
+            {gettext('Page xxx deleted.').replace('xxx', deletePageName)}
+            <CommonUndoTool onUndoOperation={() => this.revertWikiPage(pageId)} />
+          </span>
+        );
       }
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -59,6 +67,19 @@ class SidePanel extends PureComponent {
     }
   };
 
+  revertWikiPage = (pageId) => {
+    wikiAPI.revertTrashPage(wikiId, pageId).then(res => {
+      if (res.data.success === true) {
+        this.props.getWikiConfig();
+        toaster.closeAll();
+        toaster.success(gettext('Restored 1 item'));
+      }
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   addPageInside = async ({ parentPageId, page_id, name, icon, path, docUuid, successCallback, errorCallback }) => {
     const newPage = new Page({ id: page_id, name, icon, path, docUuid });
     this.addPage(newPage, parentPageId, successCallback, errorCallback);
@@ -130,7 +151,7 @@ class SidePanel extends PureComponent {
             isEditMode={isWiki2}
             navigation={navigation}
             pages={pages}
-            onDeletePage={this.confirmDeletePage}
+            onDeletePage={this.onDeletePage}
             onUpdatePage={onUpdatePage}
             setCurrentPage={this.props.setCurrentPage}
             onMovePage={this.movePage}

frontend/src/pages/wiki2/wiki-nav/pages/page-item.js

@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import NameEditPopover from '../../common/name-edit-popover';
 import NavItemIcon from '../../common/nav-item-icon';
 import PageDropdownMenu from './page-dropdownmenu';
-import DeleteDialog from '../../common/delete-dialog';
 import { gettext, wikiPermission } from '../../../../utils/constants';
 import AddNewPageDialog from '../add-new-page-dialog';
 import Icon from '../../../../components/icon';
@@ -20,7 +19,6 @@ class PageItem extends Component {
     this.state = {
       isShowNameEditor: false,
       isShowOperationDropdown: false,
-      isShowDeleteDialog: false,
       isShowInsertPage: false,
       isShowAddSiblingPage: false,
       insertPosition: '',
@@ -100,14 +98,6 @@ class PageItem extends Component {
     this.setState({ pageName: newName });
   };
 
-  openDeleteDialog = () => {
-    this.setState({ isShowDeleteDialog: true });
-  };
-
-  closeDeleteDialog = () => {
-    this.setState({ isShowDeleteDialog: false });
-  };
-
   toggleDropdown = () => {
     const isShowOperationDropdown = !this.state.isShowOperationDropdown;
     this.setState({ isShowOperationDropdown });
@@ -277,7 +267,7 @@ class PageItem extends Component {
                             toggle={this.toggleDropdown}
                             toggleNameEditor={this.toggleNameEditor}
                             duplicatePage={this.props.duplicatePage}
-                            onDeletePage={this.openDeleteDialog}
+                            onDeletePage={this.props.onDeletePage.bind(this, page.id)}
                             toggleInsertSiblingPage={this.toggleInsertSiblingPage}
                           />
                         }
@@ -288,12 +278,6 @@ class PageItem extends Component {
                     </>
                   }
                 </div>
-                {this.state.isShowDeleteDialog &&
-                  <DeleteDialog
-                    closeDeleteDialog={this.closeDeleteDialog}
-                    handleSubmit={this.props.onDeletePage.bind(this, page.id)}
-                  />
-                }
                 {this.state.isShowInsertPage &&
                   <AddNewPageDialog
                     toggle={this.toggleInsertPage}

frontend/src/pages/wiki2/wiki-trash-dialog.js

@@ -62,6 +62,7 @@ class WikiTrashDialog extends React.Component {
       this.getItems(1);
     });
   };
+
   cleanTrash = () => {
     this.toggleCleanTrashDialog();
   };
@@ -225,7 +226,8 @@ class Item extends React.Component {
         restored: true
       });
       this.props.getWikiConfig();
-      toaster.success(gettext('Successfully restored 1 item.'));
+      toaster.closeAll();
+      toaster.success(gettext('Restored 1 item'));
     }).catch((error) => {
       let errorMsg = '';
       if (error.response) {
@@ -237,7 +239,6 @@ class Item extends React.Component {
     });
   };
 
-
   render() {
     const item = this.props.item;
     const { restored, isIconShown } = this.state;

frontend/src/repo-folder-trash.js

@@ -327,7 +327,7 @@ class Item extends React.Component {
       this.setState({
         restored: true
       });
-      toaster.success(gettext('Successfully restored 1 item.'));
+      toaster.success(gettext('Restored 1 item'));
     }).catch((error) => {
       let errorMsg = '';
       if (error.response) {

frontend/src/repo-snapshot.js

@@ -270,7 +270,7 @@ class FolderItem extends React.Component {
       seafileAPI.revertFolder(repoID, path, commitID) :
       seafileAPI.revertFile(repoID, path, commitID);
     request.then((res) => {
-      toaster.success(gettext('Successfully restored 1 item.'));
+      toaster.success(gettext('Restored 1 item'));
     }).catch((error) => {
       let errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);