BRCD-1676 feat(SettingsPlay) - show error in new play form if name already exists

public/js/components/Settings/Plays/PlayForm.js

 import React, { PropTypes } from 'react';
-import { Form, FormGroup, Col, ControlLabel } from 'react-bootstrap';
+import { Form, FormGroup, Col, ControlLabel, HelpBlock } from 'react-bootstrap';
 import Immutable from 'immutable';
 import Field from '../../Field';
 
 
 const PlayForm = ({
   item,
+  isNameAlreadyExists,
   isAllowedDisableAction,
   isAllowedEditName,
   isAllowedEditDefault,
@@ -16,7 +17,7 @@ const PlayForm = ({
 }) => (
   <Form horizontal>
     {isAllowedEditName && (
-      <FormGroup>
+      <FormGroup validationState={isNameAlreadyExists ? 'error' : null} >
         <Col componentClass={ControlLabel} sm={3}>
           Name
         </Col>
@@ -25,6 +26,9 @@ const PlayForm = ({
             onChange={onChangeName}
             value={item.get('name', '')}
           />
+          { isNameAlreadyExists && (
+            <HelpBlock>Name already exists</HelpBlock>
+          )}
         </Col>
       </FormGroup>
     )}
@@ -67,6 +71,7 @@ const PlayForm = ({
 
 PlayForm.propTypes = {
   item: PropTypes.instanceOf(Immutable.Map),
+  isNameAlreadyExists: PropTypes.bool,
   isAllowedDisableAction: PropTypes.bool,
   isAllowedEditName: PropTypes.bool,
   isAllowedEditDefault: PropTypes.bool,
@@ -78,6 +83,7 @@ PlayForm.propTypes = {
 
 PlayForm.defaultProps = {
   item: Immutable.Map(),
+  isNameAlreadyExists: true,
   isAllowedDisableAction: true,
   isAllowedEditName: true,
   isAllowedEditDefault: true,

public/js/components/Settings/Plays/PlayFormContainer.js

@@ -3,6 +3,7 @@ import PlayForm from './PlayForm';
 
 
 const mapStateToProps = (state, props) => ({
+  isNameAlreadyExists: (props.existingNames) && props.existingNames.includes(props.item.get('name')),
   isAllowedDisableAction: !props.item.get('default', false),
   isAllowedEditName: props.mode === 'create',
   isAllowedEditDefault: props.mode === 'create',

public/js/components/Settings/Plays/PlaysContainer.js

@@ -36,6 +36,7 @@ const mapDispatchToProps = (dispatch, props) => ({
       title: 'Create New Paly',
       onOk,
       mode: 'create',
+      existingNames: data.map(play => play.get('name', '')),
     };
     return dispatch(showFormModal(newPlay, PlayForm, config));
   },