Change edit team name & description modals to use new validation

app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx

@@ -3,55 +3,40 @@ import PropTypes, { bool, number, string, func } from "prop-types";
 import {
   Modal,
   Button,
-  FormGroup,
   ControlLabel,
   FormControl,
-  HelpBlock
 } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import _ from "lodash";
-import styled from "styled-components";
 import axios from "../../../../../config/axios";
+import {
+  ValidatedForm,
+  ValidatedFormGroup,
+  ValidatedFormControl,
+  ValidatedErrorHelpBlock,
+  ValidatedSubmitButton
+} from "../../../../../components/validation";
+import {
+  textMaxLengthValidator
+} from "../../../../../components/validation/validators/text_validators";
 
-import { TEXT_MAX_LENGTH } from "../../../../../config/constants/numeric";
 import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
-import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
-
-const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
 
 class UpdateTeamDescriptionModal extends Component {
   constructor(props) {
     super(props);
-    this.state = { errorMessage: "", description: "" };
+    this.state = { description: "" };
     this.onCloseModal = this.onCloseModal.bind(this);
     this.updateDescription = this.updateDescription.bind(this);
     this.handleDescription = this.handleDescription.bind(this);
-    this.getValidationState = this.getValidationState.bind(this);
   }
 
   onCloseModal() {
-    this.setState({ errorMessage: "", description: "" });
+    this.setState({ description: "" });
     this.props.hideModal();
   }
 
-  getValidationState() {
-    return this.state.errorMessage.length > 0 ? "error" : null;
-  }
-
   handleDescription(el) {
-    const { value } = el.target;
+    this.setState({ description: el.target.value });
-    if (value.length > TEXT_MAX_LENGTH) {
-      this.setState({
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: TEXT_MAX_LENGTH }}
-          />
-        )
-      });
-    } else {
-      this.setState({ errorMessage: "", description: value });
-    }
   }
 
   updateDescription() {
@@ -74,40 +59,40 @@ class UpdateTeamDescriptionModal extends Component {
   render() {
     return (
       <Modal show={this.props.showModal} onHide={this.onCloseModal}>
+        <ValidatedForm ref={(f) => { this.form = f; }}>
           <Modal.Header closeButton>
             <Modal.Title>
               <FormattedMessage id="settings_page.update_team_description_modal.title" />
             </Modal.Title>
           </Modal.Header>
           <Modal.Body>
-          <FormGroup
+            <ValidatedFormGroup tag="description">
-            controlId="teamDescription"
-            validationState={this.getValidationState()}
-          >
               <ControlLabel>
                 <FormattedMessage id="settings_page.update_team_description_modal.label" />
               </ControlLabel>
-            <FormControl
+              <ValidatedFormControl
                 componentClass="textarea"
+                tag="description"
                 defaultValue={this.props.team.description}
                 onChange={this.handleDescription}
+                validatorsOnChange={[textMaxLengthValidator]}
               />
               <FormControl.Feedback />
-            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
+              <ValidatedErrorHelpBlock tag="description" />
-          </FormGroup>
+            </ValidatedFormGroup>
           </Modal.Body>
           <Modal.Footer>
-          <Button
+            <ValidatedSubmitButton
               bsStyle="primary"
               onClick={this.updateDescription}
-            disabled={!_.isEmpty(this.state.errorMessage)}
             >
               <FormattedMessage id="general.update" />
-          </Button>
+            </ValidatedSubmitButton>
             <Button onClick={this.onCloseModal}>
               <FormattedMessage id="general.close" />
             </Button>
           </Modal.Footer>
+        </ValidatedForm>
       </Modal>
     );
   }

app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx

@@ -3,55 +3,40 @@ import PropTypes, { bool, number, string, func } from "prop-types";
 import {
   Modal,
   Button,
-  FormGroup,
   ControlLabel,
   FormControl,
-  HelpBlock
 } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import _ from "lodash";
-import styled from "styled-components";
 import axios from "../../../../../config/axios";
+import {
+  ValidatedForm,
+  ValidatedFormGroup,
+  ValidatedFormControl,
+  ValidatedErrorHelpBlock,
+  ValidatedSubmitButton
+} from "../../../../../components/validation";
+import {
+  nameLengthValidator
+} from "../../../../../components/validation/validators/text_validators";
 
-import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric";
 import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
-import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
-
-const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
 
 class UpdateTeamNameModal extends Component {
   constructor(props) {
     super(props);
-    this.state = { errorMessage: "", name: props.team.name };
+    this.state = { name: props.team.name };
     this.onCloseModal = this.onCloseModal.bind(this);
     this.updateName = this.updateName.bind(this);
     this.handleName = this.handleName.bind(this);
-    this.getValidationState = this.getValidationState.bind(this);
   }
 
   onCloseModal() {
-    this.setState({ errorMessage: "", name: "" });
+    this.setState({ name: "" });
     this.props.hideModal();
   }
 
-  getValidationState() {
+  handleName(e) {
-    return this.state.errorMessage.length > 0 ? "error" : null;
+    this.setState({ name: e.target.value });
-  }
-
-  handleName(el) {
-    const { value } = el.target;
-    if (value.length > NAME_MAX_LENGTH) {
-      this.setState({
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: NAME_MAX_LENGTH }}
-          />
-        )
-      });
-    } else {
-      this.setState({ errorMessage: "", name: value });
-    }
   }
 
   updateName() {
@@ -68,46 +53,48 @@ class UpdateTeamNameModal extends Component {
         this.props.updateTeamCallback(response.data.team);
         this.onCloseModal();
       })
-      .catch(error => this.setState({ errorMessage: error.message }));
+      .catch(error => {
+        this.form.setErrorsForTag("name", [error.message]);
+      });
   }
 
   render() {
     return (
       <Modal show={this.props.showModal} onHide={this.onCloseModal}>
+        <ValidatedForm ref={(f) => { this.form = f; }}>
           <Modal.Header closeButton>
             <Modal.Title>
               <FormattedMessage id="settings_page.update_team_name_modal.title" />
             </Modal.Title>
           </Modal.Header>
           <Modal.Body>
-          <FormGroup
+            <ValidatedFormGroup tag="name">
-            controlId="teamName"
-            validationState={this.getValidationState()}
-          >
               <ControlLabel>
                 <FormattedMessage id="settings_page.update_team_name_modal.label" />
               </ControlLabel>
-            <FormControl
+              <ValidatedFormControl
                 type="text"
+                tag="name"
+                validatorsOnChange={[nameLengthValidator]}
                 onChange={this.handleName}
                 value={this.state.name}
               />
               <FormControl.Feedback />
-            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
+              <ValidatedErrorHelpBlock tag="name" />
-          </FormGroup>
+            </ValidatedFormGroup>
           </Modal.Body>
           <Modal.Footer>
-          <Button
+            <ValidatedSubmitButton
-            bsStyle="primary"
               onClick={this.updateName}
-            disabled={!_.isEmpty(this.state.errorMessage)}
+              bsStyle="primary"
             >
               <FormattedMessage id="general.update" />
-          </Button>
+            </ValidatedSubmitButton>
             <Button onClick={this.onCloseModal}>
               <FormattedMessage id="general.close" />
             </Button>
           </Modal.Footer>
+        </ValidatedForm>
       </Modal>
     );
   }