Merge pull request #50 from prymitive/silence-observer

Silence observer

ui/src/Components/SilenceModal/SilenceForm.js

@@ -17,7 +17,14 @@ import { SilenceMatch } from "./SilenceMatch";
 import { DateTimeSelect } from "./DateTimeSelect";
 import { SilencePreview } from "./SilencePreview";
 
-const IconInput = ({ icon, placeholder, value, onChange }) => (
+const IconInput = ({
+  type,
+  autoComplete,
+  icon,
+  placeholder,
+  value,
+  onChange
+}) => (
   <div className="input-group mb-3">
     <div className="input-group-prepend">
       <span className="input-group-text">
@@ -25,17 +32,19 @@ const IconInput = ({ icon, placeholder, value, onChange }) => (
       </span>
     </div>
     <input
-      type="text"
+      type={type}
       className="form-control"
       placeholder={placeholder}
       value={value}
       required
-      autoComplete="on"
+      autoComplete={autoComplete}
       onChange={onChange}
     />
   </div>
 );
 IconInput.propTypes = {
+  type: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string.isRequired,
   icon: PropTypes.object.isRequired,
   placeholder: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
@@ -100,7 +109,7 @@ const SilenceForm = observer(
       const { alertStore, silenceFormStore } = this.props;
 
       return (
-        <form onSubmit={this.handleSubmit}>
+        <form onSubmit={this.handleSubmit} autoComplete="on">
           <div className="mb-3">
             <AlertManagerInput
               alertStore={alertStore}
@@ -126,12 +135,16 @@ const SilenceForm = observer(
           </button>
           <DateTimeSelect silenceFormStore={silenceFormStore} />
           <IconInput
-            placeholder="Author"
+            type="email"
+            autoComplete="email"
+            placeholder="Author email"
             icon={faUser}
             value={silenceFormStore.data.author}
             onChange={this.onAuthorChange}
           />
           <IconInput
+            type="text"
+            autoComplete="on"
             placeholder="Comment"
             icon={faCommentDots}
             value={silenceFormStore.data.comment}

ui/src/Components/SilenceModal/SilenceModalContent.js

@@ -2,48 +2,54 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
+import { observer } from "mobx-react";
+
 import { SilenceForm } from "./SilenceForm";
 import { SilenceSubmitController } from "./SilenceSubmitController";
 
-class SilenceModalContent extends Component {
-  static propTypes = {
-    alertStore: PropTypes.object.isRequired,
-    silenceFormStore: PropTypes.object.isRequired
-  };
+const SilenceModalContent = observer(
+  class SilenceModalContent extends Component {
+    static propTypes = {
+      alertStore: PropTypes.object.isRequired,
+      silenceFormStore: PropTypes.object.isRequired
+    };
 
-  render() {
-    const { alertStore, silenceFormStore } = this.props;
+    render() {
+      const { alertStore, silenceFormStore } = this.props;
 
-    return ReactDOM.createPortal(
-      <div className="modal d-block bg-primary-transparent-80" role="dialog">
-        <div className="modal-dialog modal-lg" role="document">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title">Add new silence</h5>
-              <button
-                type="button"
-                className="close"
-                onClick={silenceFormStore.toggle.hide}
-              >
-                <span className="align-middle">&times;</span>
-              </button>
-            </div>
-            <div className="modal-body">
-              {silenceFormStore.data.inProgress ? (
-                <SilenceSubmitController silenceFormStore={silenceFormStore} />
-              ) : (
-                <SilenceForm
-                  alertStore={alertStore}
-                  silenceFormStore={silenceFormStore}
-                />
-              )}
+      return ReactDOM.createPortal(
+        <div className="modal d-block bg-primary-transparent-80" role="dialog">
+          <div className="modal-dialog modal-lg" role="document">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Add new silence</h5>
+                <button
+                  type="button"
+                  className="close"
+                  onClick={silenceFormStore.toggle.hide}
+                >
+                  <span className="align-middle">&times;</span>
+                </button>
+              </div>
+              <div className="modal-body">
+                {silenceFormStore.data.inProgress ? (
+                  <SilenceSubmitController
+                    silenceFormStore={silenceFormStore}
+                  />
+                ) : (
+                  <SilenceForm
+                    alertStore={alertStore}
+                    silenceFormStore={silenceFormStore}
+                  />
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      </div>,
-      document.body
-    );
+        </div>,
+        document.body
+      );
+    }
   }
-}
+);
 
 export { SilenceModalContent };

ui/src/Components/SilenceModal/SilenceSubmitController.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUndoAlt } from "@fortawesome/free-solid-svg-icons/faUndoAlt";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 
 import { SilenceSubmitProgress } from "./SilenceSubmitProgress";
 
@@ -29,11 +29,11 @@ class SilenceSubmitController extends Component {
         <div className="d-flex flex-row-reverse">
           <button
             type="button"
-            className="btn btn-outline-success"
+            className="btn btn-outline-primary"
             onClick={silenceFormStore.data.resetProgress}
           >
-            <FontAwesomeIcon icon={faUndoAlt} className="pr-1" />
-            Reset form
+            <FontAwesomeIcon icon={faArrowLeft} className="pr-1" />
+            Back
           </button>
         </div>
       </React.Fragment>