confirm component is added

webui/src/components/Base/Logout.js

@@ -90,7 +90,7 @@ const propTypes = {
 const Logout = ({ visible, onHide, onLogout }) => (
   <Modal 
     visible={visible} 
-    onHide={onHide} 
+    onOutside={onHide} 
     transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
     transitionLeave={`${transitions.slideUp} .5s ease-in-out`}
     transitionEnterTimeout={500}

webui/src/components/Shared/Confirm.js

@@ -7,6 +7,7 @@ import { media, transitions } from 'helpers/style-utils';
 
 import Modal from './Modal';
 import Button from './Button';
+import Dimmed from './Dimmed';
 
 const Wrapper = styled.div`
   display: flex;
@@ -33,11 +34,12 @@ const Buttons = styled.div`
   padding: 1rem;
 `
 
-const Confirm = ({ visible, message, buttons, onHide }) => {
+const Confirm = ({ visible, onOutside, message, buttons }) => {
   const buttonList = buttons
     .map(button =>
       <Button
-        clear 
+        key={button.text}
+        clear={true}
         danger={button.danger === true} 
         info={button.info === true} 
         onClick={button.action}>
@@ -45,13 +47,26 @@ const Confirm = ({ visible, message, buttons, onHide }) => {
       </Button>
     );
   return (
-    <Modal visible={visible} onHide={onHide}>
+    <div>
+      <Modal visible={visible} onOutside={onOutside} zindex='1000'>
         <Wrapper>
           <Message>{message}</Message>
           <Buttons>{buttonList}</Buttons>
         </Wrapper>
       </Modal>
+      <Dimmed visible={visible} zindex='999'/>
+    </div>
   )
 }
 
+Confirm.propTypes = {
+  visible: PropTypes.bool,
+  onOutside: PropTypes.func,
+}
+
+Confirm.defaultProps = {
+  visible: false,
+  onOutside: () => {},
+}
+
 export default Confirm;

webui/src/components/Shared/Dimmed.js

@@ -25,7 +25,7 @@ Dimmed.propTypes = {
 
 Dimmed.defaultProps = {
   visible: false,
-  zindex: '5'
+  zindex: '300'
 }
 
 export default Dimmed;

webui/src/components/Shared/Form.js

@@ -10,6 +10,7 @@ import JsonSchemaForm from 'react-jsonschema-form';
 import Modal from './Modal';
 import Button from './Button';
 import Spinner from './Spinner';
+import Confirm from './Confirm';
 
 const Wrapper = styled.div`
   display: flex;
@@ -143,25 +144,55 @@ class Form extends Component {
     title: ""
   };
 
+  state = {
+    editing: false,
+    confirm: false
+  };
+
+  handleChange = data => {
+    const {
+      onChange
+    } = this.props;
+
+    this.setState({ editing: true })
+    onChange(data.formData, data.errors)
+  }
+
   handleSubmitButton = () => {
+    this.setState({ editing: false })
     this.submitButton.click();
   }
 
-  handleChange = data => {
+  handleOutside = () => {
-    const { formData, errors } = data;
+    const {
+      onHide
+    } = this.props;
+
+    if (this.state.editing === true) {
+      this.setState({ confirm: true })
+    } else {
+      onHide();
+    }
+  }
+
+  handleClose = () => {
+    const {
+      onHide
+    } = this.props;
 
-    let disableSubmitButton = (errors.length !== 0);
-    // I think there is a library bug React or Jsonschema
-    // For workaround, I'll simply add 'formData' in setState
     this.setState({
-      disableSubmitButton,
+      editing: false,
-      formData
+      confirm: false
-    });
+    })
+    onHide();
   }
 
   render() {
     const {
-      handleSubmitButton
+      handleChange,
+      handleSubmitButton,
+      handleOutside,
+      handleClose
     } = this;
 
     const {
@@ -174,15 +205,16 @@ class Form extends Component {
       isLoading,
       disableSubmitButton,
       validate,
-      onHide,
       onChange,
       onSubmit
     } = this.props;
 
     return (
+      <div>
         <Modal 
           visible={visible} 
-        onHide={onHide}>
+          onOutside={handleOutside}
+          disableOnClickOutside={this.state.confirm}>
           <Wrapper id='nprogress-base-form'>
             <Header>
               {title}
@@ -209,7 +241,7 @@ class Form extends Component {
                   showErrorList={false}
                   transformErrors={transformErrors}
                   autocomplete="off"
-                onChange={data => onChange(data.formData, data.errors)}
+                  onChange={handleChange}
                   onSubmit={data => onSubmit(data.formData)}>
                   <div>
                     <button type="submit" ref={(el => this.submitButton = el)}/>
@@ -223,7 +255,7 @@ class Form extends Component {
               }
             </Body>
             <Footer>
-            <Button clear disabled={disabled} onClick={onHide}>
+              <Button clear disabled={disabled} onClick={handleClose}>
                 CANCEL
               </Button>
               <Button clear disabled={disabled || disableSubmitButton} onClick={handleSubmitButton}>
@@ -232,6 +264,14 @@ class Form extends Component {
             </Footer>
           </Wrapper>  
         </Modal>
+        <Confirm 
+          visible={this.state.confirm} 
+          message="You have unsaved changes. Are you sure you want to close?"
+          buttons={[
+            { text: "CLOSE", action: handleClose, info:true },
+            { text: "NO", action: () => this.setState({ confirm: false })}
+          ]}/>
+      </div>
     )
   }
 }

webui/src/components/Shared/Modal.js

@@ -28,7 +28,7 @@ const Wrapper = styled.div`
 class Modal extends Component {
   static propTypes = {
     visible: PropTypes.bool,
-    onHide: PropTypes.func,
+    onOutside: PropTypes.func,
     zindex: PropTypes.string,
     transitionEnter: PropTypes.string,
     transitionLeave: PropTypes.string,
@@ -37,7 +37,7 @@ class Modal extends Component {
   }
 
   static defaultProps = {
-    zindex: '10',
+    zindex: '500',
     transitionEnter: `${transitions.stretchOut} .25s ease-in`,
     transitionLeave: `${transitions.shrinkIn} .25s ease-in`,
     transitionEnterTimeout: 300,
@@ -45,16 +45,16 @@ class Modal extends Component {
   }
 
   handleClickOutside = (e) => {
-    const { visible, onHide } = this.props;
+    const { visible, onOutside } = this.props;
 
     if (!visible) return null;
-    onHide();
+    onOutside();
   }
 
   handleKeyUp = (e) => {
-    const { onHide } = this.props
+    const { onOutside } = this.props
     if (e.keyCode === 27) {
-      onHide();
+      onOutside();
     }
   }
   

webui/src/containers/Subscriber/Collection.js

@@ -13,7 +13,8 @@ import {
   Spinner, 
   FloatingButton, 
   Blank,
-  Dimmed
+  Dimmed,
+  Confirm
 } from 'components';
 
 import Document from './Document';