New file/folder menu on toolbar (#2452)

frontend/src/components/dialog/create-file-dialog.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+class CreateFile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      parentPath: '',
+      childName: props.fileType,
+    };
+    this.newInput = React.createRef()
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      childName: e.target.value, 
+    }) 
+  }
+
+  handleSubmit = () => {
+    let path = this.state.parentPath + this.state.childName
+    this.props.onAddFile(path);
+  } 
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+    }
+  }
+
+  toggle = () => {
+    this.props.addFileCancel();
+  }
+
+  componentDidMount() {
+    if (this.props.parentPath === "/") {
+      this.setState({parentPath: this.props.parentPath});
+    } else {
+      this.setState({parentPath: this.props.parentPath + "/"});
+    }
+    this.newInput.focus();
+    this.newInput.setSelectionRange(0,0);
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext("New File")}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup row>
+              <Label sm={3}>Parent path: </Label>
+              <Col sm={9} className="parent-path"><FormText>{this.state.parentPath}</FormText></Col>
+            </FormGroup>
+            <FormGroup row>
+              <Label for="fileName" sm={3}>{gettext("Name")}: </Label>
+              <Col sm={9}>
+                <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input}} id="fileName" placeholder={gettext("newName")} value={this.state.childName} onChange={this.handleChange}/>
+              </Col>
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext("Submit")}</Button>
+          <Button color="secondary" onClick={this.toggle}>{gettext("Cancel")}</Button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+
+export default CreateFile;

frontend/src/components/dialog/create-folder-dialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { gettext } from '../../../utils/constants';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
+import { gettext } from '../../utils/constants';
 
-class CreateFileForder extends React.Component {
+class CreateForder extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -20,11 +20,7 @@ class CreateFileForder extends React.Component {
 
   handleSubmit = () => {
     let path = this.state.parentPath + this.state.childName
-    if (this.props.isFile) {
-      this.props.onAddFile(path);
-    } else {
-      this.props.onAddFolder(path);
-    }
+    this.props.onAddFolder(path);
   } 
 
   handleKeyPress = (e) => {
@@ -34,44 +30,23 @@ class CreateFileForder extends React.Component {
   }
 
   toggle = () => {
-    if (this.props.isFile) {
-      this.props.addFileCancel();
-    } else {
-      this.props.addFolderCancel();
-    }
-  }
-  
-  componentWillMount() {
-    this.changeState(this.props.isFile);
+    this.props.addFolderCancel();
   }
 
   componentDidMount() {
-    if (this.props.currentNode.path === "/") {
-      this.setState({parentPath: this.props.currentNode.path});
+    if (this.props.parentPath === "/") {
+      this.setState({parentPath: this.props.parentPath});
     } else {
-      this.setState({parentPath: this.props.currentNode.path + "/"});
+      this.setState({parentPath: this.props.parentPath + "/"});
     }
     this.newInput.focus();
     this.newInput.setSelectionRange(0,0);
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.changeState(nextProps.isFile);
-  }
-
-  changeState(isFile) {
-    if (isFile) {
-      this.setState({childName: '.md'});
-    } else{
-      this.setState({childName: ""});
-    }
-  }
-
-
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{this.props.isFile ? gettext("New File") : gettext("New Folder")}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext("New Folder")}</ModalHeader>
         <ModalBody>
           <Form>
             <FormGroup row>
@@ -95,4 +70,4 @@ class CreateFileForder extends React.Component {
   }
 }
 
-export default CreateFileForder;
+export default CreateForder;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
 const propTypes = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { gettext } from '../../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter } from 'reactstrap';
 
 class Rename extends React.Component {

frontend/src/components/draft-list-view/draft-list-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot, lang } from '../../utils/constants';
-import NodeMenuControl from '../menu-component/node-menu-control';
+import MenuControl from '../menu-control';
 import moment from 'moment';
 
 moment.locale(lang);
@@ -87,7 +87,7 @@ class DraftListItem extends React.Component {
         <td className="menu-toggle">
           { 
             this.props.draft.review_status !== 'open' &&
-            <NodeMenuControl
+            <MenuControl
               isShow={this.state.isMenuControlShow}
               onClick={this.onMenuToggleClick}
             />

frontend/src/components/history-list-view/history-list-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import NodeMenuControl from '../menu-component/node-menu-control';
+import MenuControl from '../menu-control';
 
 moment.locale(window.app.config.lang);
 const propTypes = {
@@ -70,7 +70,7 @@ class HistoryListItem extends React.Component {
           </div>
         </div>
         <div className="history-operation">
-          <NodeMenuControl
+          <MenuControl
             isShow={this.state.isShowOperationIcon || isHigtlightItem}
             onClick={this.onMenuControlClick}
           />

frontend/src/components/menu-component/node-menu-control.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  isShow: PropTypes.bool.isRequired,
-  currentNode: PropTypes.object,
-  onClick: PropTypes.func.isRequired,
-};
-
-class NodeMenuControl extends React.Component {
-
-  onClick = (e) => {
-    let node = this.props.currentNode;
-    this.props.onClick(e, node);
-  }
-  
-  render() {
-    return (
-      <i 
-        className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'hide'}`}
-        onClick={this.onClick}
-      >
-      </i>
-    );
-  }
-}
-
-NodeMenuControl.propTypes = propTypes;
-
-export default NodeMenuControl;

frontend/src/components/menu-control.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  isShow: PropTypes.bool.isRequired,
+};
+
+class MenuControl extends React.Component {
+ 
+  render() {
+    return (
+      <i className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'hide'}`} onClick={this.props.onClick}></i>
+    );
+  }
+}
+
+MenuControl.propTypes = propTypes;
+
+export default MenuControl;

frontend/src/components/review-list-view/review-list-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, lang } from '../../utils/constants';
 import moment from 'moment';
+import { siteRoot, lang } from '../../utils/constants';
 
 moment.locale(lang);
 const propTypes = {

frontend/src/components/tree-view/node-menu.js

@@ -2,11 +2,15 @@ import React from 'react';
 import { gettext } from '../../utils/constants';
 
 class NodeMenu extends React.Component {
-  
-  toggleAddFileFolder = (ev, flag) => {
-    this.props.toggleAddFileFolder(flag);
+
+  toggleAddFile = () => {
+    this.props.toggleAddFile();
   }
   
+  toggleAddFolder = () => {
+    this.props.toggleAddFolder();
+  }
+
   toggleRename = () => {
     this.props.toggleRename();
   }
@@ -23,16 +27,16 @@ class NodeMenu extends React.Component {
       if (this.props.currentNode.name === '/') {
         return (
           <ul className="dropdown-menu" style={style}>
-            <li className="dropdown-item" onClick={this.toggleAddFileFolder}>{gettext('New Folder')}</li>
-            <li className="dropdown-item" onClick={(ev,flag) => this.toggleAddFileFolder(ev,true)}>{gettext('New File')}</li>
+            <li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
+            <li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
           </ul>
         );
       }
       
       return (
         <ul className="dropdown-menu" style={style}>
-          <li className="dropdown-item" onClick={this.toggleAddFileFolder}>{gettext('New Folder')}</li>
-          <li className="dropdown-item" onClick={(ev,flag) => this.toggleAddFileFolder(ev,true)}>{gettext('New File')}</li>
+          <li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
+          <li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
           <li className="dropdown-item" onClick={this.toggleRename}>{gettext('Rename')}</li>
           <li className="dropdown-item" onClick={this.toggleDelete}>{gettext('Delete')}</li>
         </ul>

frontend/src/components/tree-view/tree-node-view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MenuControl from '../menu-component/node-menu-control';
+import MenuControl from '../menu-control';
 import { permission } from '../../utils/constants';
 
 function sortByType(a, b) {