12.0 change add existing file in wiki edit (#6057)

* 12.0 change add existing file in wiki edit

* 01 delete create wiki from existing library

* 02 change click wiki name jump to edit page and delete edit icon

* 03 delete select existing file to create new page

* optimize edit wiki

* 04 old wiki page use the early version 11.x features

* optimize wiki permission

* wiki add wiki2

* delete page file

* fix wiki test

---------

Co-authored-by: ‘JoinTyang’ <yangtong1009@163.com>

frontend/src/components/dialog/add-wiki-dialog.js

@@ -1,34 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label } from 'reactstrap';
 
 const propTypes = {
   toggleCancel: PropTypes.func.isRequired,
   addWiki: PropTypes.func.isRequired,
 };
 
-class NewWikiDialog extends React.Component {
+class AddWikiDialog extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isExist: false,
       name: '',
-      repoID: '',
       isSubmitBtnActive: false,
     };
   }
 
   inputNewName = (e) => {
-    if (!event.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
-    } else {
-      this.setState({isSubmitBtnActive: true});
-    }
-
     this.setState({
       name: e.target.value,
+      isSubmitBtnActive: !!e.target.value.trim(),
     });
   };
 
@@ -39,8 +32,9 @@ class NewWikiDialog extends React.Component {
   };
 
   handleSubmit = () => {
-    let { isExist, name, repoID } = this.state;
-    this.props.addWiki(isExist, name, repoID);
+    const wikiName = this.state.name.trim();
+    if (!wikiName) return;
+    this.props.addWiki(wikiName);
     this.props.toggleCancel();
   };
 
@@ -51,9 +45,9 @@ class NewWikiDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} autoFocus={false} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Wiki')}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext('Add Wiki')}</ModalHeader>
         <ModalBody>
-          <label className="form-label">{gettext('Name')}</label>
+          <Label>{gettext('Name')}</Label>
           <Input onKeyDown={this.handleKeyDown} autoFocus={true} value={this.state.name} onChange={this.inputNewName}/>
         </ModalBody>
         <ModalFooter>
@@ -65,6 +59,6 @@ class NewWikiDialog extends React.Component {
   }
 }
 
-NewWikiDialog.propTypes = propTypes;
+AddWikiDialog.propTypes = propTypes;
 
-export default NewWikiDialog;
+export default AddWikiDialog;

frontend/src/components/dialog/wiki-select-dialog.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api';
-import moment from 'moment';
-import Repo from '../../models/repo';
-import { Utils } from '../../utils/utils';
-
-const propTypes = {
-  toggleCancel: PropTypes.func.isRequired,
-  addWiki: PropTypes.func.isRequired
-};
-
-class WikiSelectDialog extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      repos: [],
-      repoID: '',
-    };
-  }
-
-  componentDidMount() {
-    seafileAPI.listRepos().then(res => {
-      let repoList = res.data.repos
-        .filter(item => {
-          switch (item.type) {
-            case 'mine': // my libraries
-              return !item.encrypted;
-            case 'shared': // libraries shared with me
-              // 'is_admin': the library is shared with 'admin' permission
-              return !item.encrypted && item.is_admin;
-            case 'group':
-            default:
-              return !item.encrypted && !res.data.repos.some(repo => {
-                // just remove the duplicated libraries
-                return repo.type != item.type && repo.repo_id == item.repo_id;
-              });
-          }
-        })
-        .map(item => {
-          let repo = new Repo(item);
-          return repo;
-        });
-      repoList = Utils.sortRepos(repoList, 'name', 'asc');
-      this.setState({repos: repoList});
-    });
-  }
-
-  onChange = (repo) => {
-    this.setState({
-      repoID: repo.repo_id,
-    });
-  };
-
-  handleSubmit = () => {
-    let { repoID } = this.state;
-    this.props.addWiki(repoID);
-    this.props.toggleCancel();
-  };
-
-  toggle = () => {
-    this.props.toggleCancel();
-  };
-
-  render() {
-    return (
-      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Create Wiki from existing library')}</ModalHeader>
-        <ModalBody className="dialog-list-container">
-          <table>
-            <thead>
-              <tr>
-                <th width='6%'>{/* select */}</th>
-                <th width='9%'>{/* icon */}</th>
-                <th width='55%'>{gettext('Name')}</th>
-                <th width='30%'>{gettext('Last Update')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {this.state.repos.map((repo, index) => {
-                return (
-                  <tr key={index}>
-                    <td className="text-center"><input type="radio" className="vam" name="repo" value={repo.repo_id} onChange={this.onChange.bind(this, repo)} /></td>
-                    <td className="text-center"><img src={Utils.getLibIconUrl(repo, false)} width="24" title={Utils.getLibIconTitle(repo)} alt={Utils.getLibIconTitle(repo)} /></td>
-                    <td>{repo.repo_name}</td>
-                    <td>{moment(repo.last_modified).fromNow()}</td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          {this.state.repoID ?
-            <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>:
-            <Button color="primary" disabled>{gettext('Submit')}</Button>
-          }
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-WikiSelectDialog.propTypes = propTypes;
-
-export default WikiSelectDialog;