fix(cockpit/editor): add delete modal to confirm deletion

Also fix cases where modals closed for no reason

packages/embark-ui/src/components/AddFileModal.js

@@ -7,11 +7,14 @@ import {isDarkTheme} from '../utils/utils';
 
 class AddFileModal extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {modal: false, filename: ''};
   }
 
-  toggle() {
+  toggle(open) {
+    if (open !== undefined) {
+      return this.setState({modal: open});
+    }
     this.setState({modal: !this.state.modal});
   }
 
@@ -21,24 +24,24 @@ class AddFileModal extends React.Component {
 
   addFile() {
     this.props.saveFile({path: `${this.props.node.path}/${this.state.filename}`, content: ''});
-    this.toggle();
+    this.toggle(false);
   }
 
   render() {
     return (
       <Modal contentClassName={classNames({'dark-theme': isDarkTheme(this.props.theme)})}
              isOpen={this.state.modal}
-             toggle={() => this.toggle()}>
-        <ModalHeader toggle={() => this.toggle()}>Please give the file a name</ModalHeader>
+             toggle={(open) => this.toggle(open)}>
+        <ModalHeader toggle={() => this.toggle(false)}>Please give the file a name</ModalHeader>
         <ModalBody>
-          <Input autofocus="true" value={this.state.filename} onChange={e => this.handleChange(e)} />
+          <Input autoFocus={true} value={this.state.filename} onChange={e => this.handleChange(e)}/>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={() => this.addFile()}>Add File</Button>{' '}
-          <Button color="secondary" onClick={() => this.toggle()}>Cancel</Button>
+          <Button color="secondary" onClick={() => this.toggle(false)}>Cancel</Button>
         </ModalFooter>
       </Modal>
-    )
+    );
   }
 }
 
@@ -48,4 +51,4 @@ AddFileModal.propTypes = {
   theme: PropTypes.string
 };
 
-export default AddFileModal;
+export default AddFileModal;

packages/embark-ui/src/components/AddFolderModal.js

@@ -7,11 +7,14 @@ import {isDarkTheme} from '../utils/utils';
 
 class AddFolderModal extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {modal: false, folder: ''};
   }
 
-  toggle() {
+  toggle(open) {
+    if (open !== undefined) {
+      return this.setState({modal: open});
+    }
     this.setState({modal: !this.state.modal});
   }
 
@@ -21,21 +24,21 @@ class AddFolderModal extends React.Component {
 
   addFolder() {
     this.props.saveFolder({path: `${this.props.node.path}/${this.state.folder}`});
-    this.toggle();
+    this.toggle(false);
   }
 
   render() {
     return (
       <Modal contentClassName={classNames({'dark-theme': isDarkTheme(this.props.theme)})}
              isOpen={this.state.modal}
-             toggle={() => this.toggle()}>
-        <ModalHeader toggle={() => this.toggle()}>Please give the folder a name</ModalHeader>
+             toggle={(open) => this.toggle(open)}>
+        <ModalHeader toggle={() => this.toggle(false)}>Please give the folder a name</ModalHeader>
         <ModalBody>
-          <Input autofocus="true" value={this.state.filename} onChange={e => this.handleChange(e)} />
+          <Input autoFocus={true} value={this.state.filename} onChange={e => this.handleChange(e)} />
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={() => this.addFolder()}>Add Folder</Button>{' '}
-          <Button color="secondary" onClick={() => this.toggle()}>Cancel</Button>
+          <Button color="secondary" onClick={() => this.toggle(false)}>Cancel</Button>
         </ModalFooter>
       </Modal>
     )
@@ -48,4 +51,4 @@ AddFolderModal.propTypes = {
   theme: PropTypes.string
 };
 
-export default AddFolderModal;
+export default AddFolderModal;

packages/embark-ui/src/components/ContractsList.js

@@ -18,7 +18,7 @@ const ContractsList = ({contracts}) => (
         contracts.map((contract) => {
           const contractDisplay = formatContractForDisplay(contract);
           if (!contractDisplay) {
-            return '';
+            return null;
           }
           return (
             <tr key={contract.className} className={contractDisplay.stateColor}>
@@ -31,7 +31,7 @@ const ContractsList = ({contracts}) => (
       }
     </tbody>
   </Table>
-)
+);
 
 ContractsList.propTypes = {
   contracts: PropTypes.array,

packages/embark-ui/src/components/DeleteModal.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {isDarkTheme} from '../utils/utils';
+
+class DeleteModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {modal: false};
+  }
+
+  toggle(open) {
+    if (open !== undefined) {
+      return this.setState({modal: open});
+    }
+    this.setState({modal: !this.state.modal});
+  }
+
+  render() {
+    return (
+      <Modal contentClassName={classNames({'dark-theme': isDarkTheme(this.props.theme)})}
+             isOpen={this.state.modal}
+             toggle={(open) => this.toggle(open)}>
+        <ModalHeader toggle={() => this.toggle(false)}>Are you sure you want to remove this?</ModalHeader>
+        <ModalBody>
+          <p>This change is permanent and cannot be undone (from the Cockpit)</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={() => this.toggle(false)}>Cancel</Button>
+          <Button color="danger" onClick={() => {this.props.delete(); this.toggle(false);}}>Delete</Button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+
+DeleteModal.propTypes = {
+  delete: PropTypes.func,
+  theme: PropTypes.string
+};
+
+export default DeleteModal;

packages/embark-ui/src/containers/FileExplorerRowContainer.js

@@ -8,6 +8,7 @@ import {VelocityComponent} from 'velocity-react';
 import {removeFile as removeFileAction, saveFile as saveFileAction, saveFolder as saveFolderAction} from '../actions';
 import AddFileModal from '../components/AddFileModal';
 import AddFolderModal from '../components/AddFolderModal';
+import DeleteModal from '../components/DeleteModal';
 import { getTheme } from '../reducers/selectors';
 
 class FileExplorerRowContainer extends React.Component {
@@ -16,6 +17,7 @@ class FileExplorerRowContainer extends React.Component {
     this.state = {active: false};
     this.addFileModal = React.createRef();
     this.addFolderModal = React.createRef();
+    this.deleteModal = React.createRef();
   }
 
   activateNode() {
@@ -33,12 +35,12 @@ class FileExplorerRowContainer extends React.Component {
           <React.Fragment>
             <span id="add-file"
                   className="pointer"
-                  onClick={() => this.addFileModal.current.toggle()}>
+                  onClick={() => this.addFileModal.current.toggle(true)}>
               <FontAwesome name="plus" className="text-success mr-2" />
             </span>
             <span id="add-folder"
                   className="pointer"
-                  onClick={() => this.addFolderModal.current.toggle()}>
+                  onClick={() => this.addFolderModal.current.toggle(true)}>
               <FontAwesome name="folder-open" className="text-success mr-2" />
             </span>
             <UncontrolledTooltip placement="bottom" target="add-file">
@@ -53,12 +55,13 @@ class FileExplorerRowContainer extends React.Component {
         }
         <span id="delete"
               style={{cursor: "pointer"}}
-              onClick={() => this.props.removeFile(this.props.node)}>
+              onClick={() => this.deleteModal.current.toggle(true)}>
           <FontAwesome name="trash" className="text-danger" />
         </span>
         <UncontrolledTooltip placement="bottom" target="delete">
           Delete
         </UncontrolledTooltip>
+        <DeleteModal theme={this.props.theme} delete={() => this.props.removeFile(this.props.node)} ref={this.deleteModal} />
       </span>
     )
   }