From f20a9602f44e4ea5982549c5edd0dd03e7354cae Mon Sep 17 00:00:00 2001
From: mmv <mmvsha73@gmail.com>
Date: Tue, 18 Jun 2019 16:49:50 +0400
Subject: [PATCH] show validation error

---
 src/components/forms/SelectField/index.jsx    |  3 +-
 .../ChangeThreshold/index.jsx                 | 29 ++++++++++++-------
 .../ChangeThreshold/style.js                  |  7 +++++
 .../Settings/ThresholdSettings/index.jsx      | 24 ++++++++-------
 4 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/components/forms/SelectField/index.jsx b/src/components/forms/SelectField/index.jsx
index 5f92a849..cce9b6b3 100644
--- a/src/components/forms/SelectField/index.jsx
+++ b/src/components/forms/SelectField/index.jsx
@@ -18,9 +18,10 @@ const SelectInput = ({
   formControlProps,
   classes,
   renderValue,
+  disableError,
   ...rest
 }: SelectFieldProps) => {
-  const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched
+  const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched && !disableError
   const inputProps = {
     ...restInput,
     name,
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx
index df64e3e5..c1a841ec 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx
@@ -66,20 +66,29 @@ const ChangeThreshold = ({
                   Any transaction over any daily limit requires the confirmation of:
                 </Paragraph>
               </Row>
-              <Row margin="xl" align="center">
+              <Row margin="xl" align="center" className={classes.inputRow}>
                 <Col xs={2}>
                   <Field
                     name={THRESHOLD_FIELD_NAME}
-                    component={SelectField}
+                    render={props => (
+                      <>
+                        <SelectField {...props} disableError>
+                          {[...Array(Number(owners.size))].map((x, index) => (
+                            <MenuItem key={index} value={`${index + 1}`}>
+                              {index + 1}
+                            </MenuItem>
+                          ))}
+                        </SelectField>
+                        {props.meta.error && props.meta.touched && (
+                          <Paragraph className={classes.errorText} noMargin color="error">
+                            {props.meta.error}
+                          </Paragraph>
+                        )}
+                      </>
+                    )}
                     validate={composeValidators(required, mustBeInteger, minValue(1), differentFrom(threshold))}
                     data-testid="threshold-select-input"
-                  >
-                    {[...Array(Number(owners.size))].map((x, index) => (
-                      <MenuItem key={index} value={`${index + 1}`}>
-                        {index + 1}
-                      </MenuItem>
-                    ))}
-                  </Field>
+                  />
                 </Col>
                 <Col xs={10}>
                   <Paragraph size="lg" color="primary" noMargin className={classes.ownersText}>
@@ -87,7 +96,7 @@ const ChangeThreshold = ({
                     {' '}
                     {owners.size}
                     {' '}
-owner(s)
+                    owner(s)
                   </Paragraph>
                 </Col>
               </Row>
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.js b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.js
index 7486a68b..924c460f 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.js
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.js
@@ -34,4 +34,11 @@ export const styles = () => ({
     bottom: 0,
     width: '100%',
   },
+  inputRow: {
+    position: 'relative',
+  },
+  errorText: {
+    position: 'absolute',
+    bottom: '-25px',
+  },
 })
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/index.jsx b/src/routes/safe/components/Settings/ThresholdSettings/index.jsx
index cb7307a1..7bdd7672 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/index.jsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/index.jsx
@@ -63,17 +63,19 @@ const ThresholdSettings = ({
                   {' '}
                   owners
                 </Paragraph>
-                <Row align="center" className={classes.buttonRow}>
-                  <Button
-                    color="primary"
-                    minWidth={120}
-                    className={classes.modifyBtn}
-                    onClick={toggleModal}
-                    variant="contained"
-                  >
-                    Modify
-                  </Button>
-                </Row>
+                {owners.size > 1 && (
+                  <Row align="center" className={classes.buttonRow}>
+                    <Button
+                      color="primary"
+                      minWidth={120}
+                      className={classes.modifyBtn}
+                      onClick={toggleModal}
+                      variant="contained"
+                    >
+                      Modify
+                    </Button>
+                  </Row>
+                )}
               </Block>
               <Modal
                 title="Change Required Confirmations"