Add rp input validation

ui/src/admin/components/DatabaseManager.js

@@ -3,6 +3,7 @@ import DatabaseTable from 'src/admin/components/DatabaseTable'
 
 const DatabaseManager = ({
   databases,
+  notify,
   addDatabase,
   onEditDatabase,
   onKeyDownDatabase,
@@ -29,6 +30,7 @@ const DatabaseManager = ({
             <DatabaseTable
               key={db.id}
               database={db}
+              notify={notify}
               onEditDatabase={onEditDatabase}
               onKeyDownDatabase={onKeyDownDatabase}
               onCancelDatabase={onCancelDatabase}
@@ -57,6 +59,7 @@ const {
 
 DatabaseManager.propTypes = {
   databases: arrayOf(shape()),
+  notify: func,
   addDatabase: func,
   onEditDatabase: func,
   onKeyDownDatabase: func,

ui/src/admin/components/DatabaseRow.js

@@ -15,63 +15,7 @@ class DatabaseRow extends Component {
     this.handleEndEdit = ::this.handleEndEdit
     this.handleCreate = ::this.handleCreate
     this.handleUpdate = ::this.handleUpdate
-    this._getInputValues = ::this._getInputValues
-  }
-
-  handleClickOutside() {
-    this.handleEndEdit()
-  }
-
-  handleStartEdit() {
-    this.setState({isEditing: true})
-  }
-
-  handleEndEdit() {
-    this.setState({isEditing: false})
-  }
-
-  handleCreate() {
-    const {database, onCreate} = this.props
-    onCreate(database, this._getInputValues())
-    this.handleEndEdit()
-  }
-
-  handleUpdate() {
-    const {database, retentionPolicy, onUpdate} = this.props
-    onUpdate(database, {...retentionPolicy, ...this._getInputValues()})
-    this.handleEndEdit()
-  }
-
-  handleKeyDown(e) {
-    const {key} = e
-    const {retentionPolicy, database, onCancel} = this.props
-
-
-    if (key === 'Escape') {
-      if (retentionPolicy.isNew) {
-        onCancel(database, retentionPolicy)
-        return
-      }
-
-      this.handleEndEdit()
-    }
-
-    if (key === 'Enter') {
-      if (retentionPolicy.isNew) {
-        this.handleCreate()
-        return
-      }
-
-      this.handleUpdate()
-    }
-  }
-
-  _getInputValues() {
-    return {
-      name: this.name.value.trim(),
-      duration: this.duration.value.trim(),
-      replication: +this.replication.value.trim(),
-    }
+    this.getInputValues = ::this.getInputValues
   }
 
   render() {
@@ -150,6 +94,82 @@ class DatabaseRow extends Component {
       </tr>
     )
   }
+
+  handleClickOutside() {
+    this.handleEndEdit()
+  }
+
+  handleStartEdit() {
+    this.setState({isEditing: true})
+  }
+
+  handleEndEdit() {
+    this.setState({isEditing: false})
+  }
+
+  handleCreate() {
+    const {database, onCreate} = this.props
+    const validInputs = this.getInputValues()
+    if (!validInputs) {
+      return
+    }
+
+    onCreate(database, validInputs)
+    this.handleEndEdit()
+  }
+
+  handleUpdate() {
+    const {database, retentionPolicy, onUpdate} = this.props
+    const validInputs = this.getInputValues()
+    if (!validInputs) {
+      return
+    }
+
+    onUpdate(database, {...retentionPolicy, ...validInputs})
+    this.handleEndEdit()
+  }
+
+  handleKeyDown(e) {
+    const {key} = e
+    const {retentionPolicy, database, onCancel} = this.props
+
+
+    if (key === 'Escape') {
+      if (retentionPolicy.isNew) {
+        onCancel(database, retentionPolicy)
+        return
+      }
+
+      this.handleEndEdit()
+    }
+
+    if (key === 'Enter') {
+      if (retentionPolicy.isNew) {
+        this.handleCreate()
+        return
+      }
+
+      this.handleUpdate()
+    }
+  }
+
+  getInputValues() {
+    const name = this.name.value.trim()
+    const duration = this.duration.value.trim()
+    const replication = +this.replication.value.trim()
+
+    if (!name || !duration || !replication) {
+      this.props.notify('error', 'Fields cannot be empty')
+      return
+    }
+
+    return {
+      name,
+      duration,
+      replication,
+    }
+  }
+
 }
 
 const {
@@ -169,10 +189,10 @@ DatabaseRow.propTypes = {
     isEditing: bool,
   }),
   database: shape(),
-  onEdit: func,
   onCancel: func,
   onCreate: func,
   onUpdate: func,
+  notify: func,
 }
 
 export default onClickOutside(DatabaseRow)

ui/src/admin/components/DatabaseTable.js

@@ -9,6 +9,7 @@ const {
 
 const DatabaseTable = ({
   database,
+  notify,
   onEditDatabase,
   onKeyDownDatabase,
   onCancelDatabase,
@@ -47,6 +48,7 @@ const DatabaseTable = ({
                 return (
                   <DatabaseRow
                     key={rp.id}
+                    notify={notify}
                     database={database}
                     retentionPolicy={rp}
                     onCreate={onCreateRetentionPolicy}
@@ -65,6 +67,7 @@ const DatabaseTable = ({
 DatabaseTable.propTypes = {
   onEditDatabase: func,
   database: shape(),
+  notify: func,
   onKeyDownDatabase: func,
   onCancelDatabase: func,
   onConfirmDatabase: func,

ui/src/admin/containers/DatabaseManagerPage.js

@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux'
 
 import * as adminActionCreators from 'src/admin/actions'
 import DatabaseManager from 'src/admin/components/DatabaseManager'
+import {publishNotification} from 'src/shared/actions/notifications';
 
 class DatabaseManagerPage extends Component {
   constructor(props) {
@@ -19,11 +20,12 @@ class DatabaseManagerPage extends Component {
   }
 
   render() {
-    const {databases, actions} = this.props
+    const {databases, actions, notify} = this.props
 
     return (
       <DatabaseManager
         databases={databases}
+        notify={notify}
         onKeyDownDatabase={this.handleKeyDownDatabase}
         onDatabaseDeleteConfirm={this.handleDatabaseDeleteConfirm}
         addDatabase={actions.addDatabase}
@@ -107,6 +109,7 @@ DatabaseManagerPage.propTypes = {
     removeDatabaseDeleteCode: func,
     editRetentionPolicy: func,
   }),
+  notify: func,
 }
 
 const mapStateToProps = ({admin: {databases, retentionPolicies}}) => ({
@@ -116,6 +119,7 @@ const mapStateToProps = ({admin: {databases, retentionPolicies}}) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(adminActionCreators, dispatch),
+  notify: bindActionCreators(publishNotification, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(DatabaseManagerPage)