- client: fix upstream DNS servers form

Closes #1000

client/src/components/Settings/Dns/Access/Form.js

@@ -5,7 +5,9 @@ import { Trans, withNamespaces } from 'react-i18next';
 import flow from 'lodash/flow';
 
 const Form = (props) => {
-    const { handleSubmit, submitting, invalid } = props;
+    const {
+        handleSubmit, submitting, invalid, processingSet,
+    } = props;
 
     return (
         <form onSubmit={handleSubmit}>
@@ -22,6 +24,7 @@ const Form = (props) => {
                     component="textarea"
                     type="text"
                     className="form-control form-control--textarea"
+                    disabled={processingSet}
                 />
             </div>
             <div className="form__group mb-5">
@@ -37,6 +40,7 @@ const Form = (props) => {
                     component="textarea"
                     type="text"
                     className="form-control form-control--textarea"
+                    disabled={processingSet}
                 />
             </div>
             <div className="form__group mb-5">
@@ -52,6 +56,7 @@ const Form = (props) => {
                     component="textarea"
                     type="text"
                     className="form-control form-control--textarea"
+                    disabled={processingSet}
                 />
             </div>
             <div className="card-actions">
@@ -59,7 +64,7 @@ const Form = (props) => {
                     <button
                         type="submit"
                         className="btn btn-success btn-standard"
-                        disabled={submitting || invalid}
+                        disabled={submitting || invalid || processingSet}
                     >
                         <Trans>save_config</Trans>
                     </button>
@@ -70,11 +75,12 @@ const Form = (props) => {
 };
 
 Form.propTypes = {
-    handleSubmit: PropTypes.func,
-    submitting: PropTypes.bool,
-    invalid: PropTypes.bool,
-    initialValues: PropTypes.object,
-    t: PropTypes.func,
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    invalid: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    processingSet: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
 };
 
 export default flow([withNamespaces(), reduxForm({ form: 'accessForm' })])(Form);

client/src/components/Settings/Dns/Access/index.js

@@ -13,11 +13,7 @@ class Access extends Component {
     render() {
         const { t, access } = this.props;
 
-        const {
-            processing,
-            processingSet,
-            ...values
-        } = access;
+        const { processing, processingSet, ...values } = access;
 
         return (
             <Card
@@ -28,6 +24,7 @@ class Access extends Component {
                 <Form
                     initialValues={values}
                     onSubmit={this.handleFormSubmit}
+                    processingSet={processingSet}
                 />
             </Card>
         );

client/src/components/Settings/Dns/Upstream/Form.js

@@ -43,6 +43,7 @@ let Form = (props) => {
                             type="text"
                             className="form-control form-control--textarea"
                             placeholder={t('upstream_dns')}
+                            disabled={processingSetUpstream || processingTestUpstream}
                         />
                     </div>
                 </div>
@@ -53,6 +54,7 @@ let Form = (props) => {
                             type="checkbox"
                             component={renderSelectField}
                             placeholder={t('upstream_parallel')}
+                            disabled={processingSetUpstream}
                         />
                     </div>
                 </div>
@@ -62,7 +64,10 @@ let Form = (props) => {
                 </div>
                 <div className="col-12">
                     <div className="form__group">
-                        <label className="form__label form__label--with-desc" htmlFor="bootstrap_dns">
+                        <label
+                            className="form__label form__label--with-desc"
+                            htmlFor="bootstrap_dns"
+                        >
                             <Trans>bootstrap_dns</Trans>
                         </label>
                         <div className="form__desc form__desc--top">
@@ -73,8 +78,9 @@ let Form = (props) => {
                             name="bootstrap_dns"
                             component="textarea"
                             type="text"
-                            className="form-control"
+                            className="form-control form-control--textarea form-control--textarea-small"
                             placeholder={t('bootstrap_dns')}
+                            disabled={processingSetUpstream}
                         />
                     </div>
                 </div>

client/src/components/Settings/Dns/index.js

@@ -10,6 +10,7 @@ import Loading from '../../ui/Loading';
 
 class Dns extends Component {
     componentDidMount() {
+        this.props.getDnsSettings();
         this.props.getAccessList();
         this.props.getRewritesList();
     }
@@ -30,11 +31,16 @@ class Dns extends Component {
             toggleRewritesModal,
         } = this.props;
 
+        const isDataLoading =
+            dashboard.processingDnsSettings || access.processing || rewrites.processing;
+        const isDataReady =
+            !dashboard.processingDnsSettings && !access.processing && !rewrites.processing;
+
         return (
             <Fragment>
                 <PageTitle title={t('dns_settings')} />
-                {(dashboard.processing || access.processing) && <Loading />}
-                {!dashboard.processing && !access.processing && (
+                {isDataLoading && <Loading />}
+                {isDataReady && (
                     <Fragment>
                         <Upstream
                             upstreamDns={dashboard.upstreamDns}
@@ -73,6 +79,7 @@ Dns.propTypes = {
     addRewrite: PropTypes.func.isRequired,
     deleteRewrite: PropTypes.func.isRequired,
     toggleRewritesModal: PropTypes.func.isRequired,
+    getDnsSettings: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
 };