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;
-    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 });
-    }
+    this.setState({ description: el.target.value });
   }
 
   updateDescription() {
@@ -74,40 +59,40 @@ class UpdateTeamDescriptionModal extends Component {
   render() {
     return (
       <Modal show={this.props.showModal} onHide={this.onCloseModal}>
-        <Modal.Header closeButton>
-          <Modal.Title>
-            <FormattedMessage id="settings_page.update_team_description_modal.title" />
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup
-            controlId="teamDescription"
-            validationState={this.getValidationState()}
-          >
-            <ControlLabel>
-              <FormattedMessage id="settings_page.update_team_description_modal.label" />
-            </ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              defaultValue={this.props.team.description}
-              onChange={this.handleDescription}
-            />
-            <FormControl.Feedback />
-            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button
-            bsStyle="primary"
-            onClick={this.updateDescription}
-            disabled={!_.isEmpty(this.state.errorMessage)}
-          >
-            <FormattedMessage id="general.update" />
-          </Button>
-          <Button onClick={this.onCloseModal}>
-            <FormattedMessage id="general.close" />
-          </Button>
-        </Modal.Footer>
+        <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>
+            <ValidatedFormGroup tag="description">
+              <ControlLabel>
+                <FormattedMessage id="settings_page.update_team_description_modal.label" />
+              </ControlLabel>
+              <ValidatedFormControl
+                componentClass="textarea"
+                tag="description"
+                defaultValue={this.props.team.description}
+                onChange={this.handleDescription}
+                validatorsOnChange={[textMaxLengthValidator]}
+              />
+              <FormControl.Feedback />
+              <ValidatedErrorHelpBlock tag="description" />
+            </ValidatedFormGroup>
+          </Modal.Body>
+          <Modal.Footer>
+            <ValidatedSubmitButton
+              bsStyle="primary"
+              onClick={this.updateDescription}
+            >
+              <FormattedMessage id="general.update" />
+            </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() {
-    return this.state.errorMessage.length > 0 ? "error" : null;
-  }
-
-  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 });
-    }
+  handleName(e) {
+    this.setState({ name: e.target.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}>
-        <Modal.Header closeButton>
-          <Modal.Title>
-            <FormattedMessage id="settings_page.update_team_name_modal.title" />
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup
-            controlId="teamName"
-            validationState={this.getValidationState()}
-          >
-            <ControlLabel>
-              <FormattedMessage id="settings_page.update_team_name_modal.label" />
-            </ControlLabel>
-            <FormControl
-              type="text"
-              onChange={this.handleName}
-              value={this.state.name}
-            />
-            <FormControl.Feedback />
-            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button
-            bsStyle="primary"
-            onClick={this.updateName}
-            disabled={!_.isEmpty(this.state.errorMessage)}
-          >
-            <FormattedMessage id="general.update" />
-          </Button>
-          <Button onClick={this.onCloseModal}>
-            <FormattedMessage id="general.close" />
-          </Button>
-        </Modal.Footer>
+        <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>
+            <ValidatedFormGroup tag="name">
+              <ControlLabel>
+                <FormattedMessage id="settings_page.update_team_name_modal.label" />
+              </ControlLabel>
+              <ValidatedFormControl
+                type="text"
+                tag="name"
+                validatorsOnChange={[nameLengthValidator]}
+                onChange={this.handleName}
+                value={this.state.name}
+              />
+              <FormControl.Feedback />
+              <ValidatedErrorHelpBlock tag="name" />
+            </ValidatedFormGroup>
+          </Modal.Body>
+          <Modal.Footer>
+            <ValidatedSubmitButton
+              onClick={this.updateName}
+              bsStyle="primary"
+            >
+              <FormattedMessage id="general.update" />
+            </ValidatedSubmitButton>
+            <Button onClick={this.onCloseModal}>
+              <FormattedMessage id="general.close" />
+            </Button>
+          </Modal.Footer>
+        </ValidatedForm>
       </Modal>
     );
   }