- client: fix upstream DNS servers form

Closes #1000

client/src/actions/index.js

@@ -227,7 +227,22 @@ export const getDnsStatus = () => async (dispatch) => {
         dispatch(getTlsStatus());
     } catch (error) {
         dispatch(addErrorToast({ error }));
-        dispatch(initSettingsFailure());
+        dispatch(dnsStatusFailure());
+    }
+};
+
+export const getDnsSettingsRequest = createAction('GET_DNS_SETTINGS_REQUEST');
+export const getDnsSettingsFailure = createAction('GET_DNS_SETTINGS_FAILURE');
+export const getDnsSettingsSuccess = createAction('GET_DNS_SETTINGS_SUCCESS');
+
+export const getDnsSettings = () => async (dispatch) => {
+    dispatch(getDnsSettingsRequest());
+    try {
+        const dnsStatus = await apiClient.getGlobalStatus();
+        dispatch(getDnsSettingsSuccess(dnsStatus));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getDnsSettingsFailure());
     }
 };
 
@@ -279,7 +294,7 @@ export const setUpstream = config => async (dispatch) => {
 
         await apiClient.setUpstream(values);
         dispatch(addSuccessToast('updated_upstream_dns_toast'));
-        dispatch(setUpstreamSuccess());
+        dispatch(setUpstreamSuccess(config));
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(setUpstreamFailure());

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,
 };
 

client/src/components/Settings/Settings.css

@@ -38,6 +38,11 @@
 
 .form-control--textarea {
     min-height: 110px;
+    transition: 0.3s ease-in-out background-color;
+}
+
+.form-control--textarea-small {
+    min-height: 90px;
 }
 
 .form-control--textarea-large {

client/src/containers/Dns.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { handleUpstreamChange, setUpstream, testUpstream } from '../actions';
+import { handleUpstreamChange, setUpstream, testUpstream, getDnsSettings } from '../actions';
 import { getAccessList, setAccessList } from '../actions/access';
 import {
     getRewritesList,
@@ -32,6 +32,7 @@ const mapDispatchToProps = {
     addRewrite,
     deleteRewrite,
     toggleRewritesModal,
+    getDnsSettings,
 };
 
 export default connect(

client/src/reducers/index.js

@@ -15,7 +15,8 @@ import stats from './stats';
 import queryLogs from './queryLogs';
 import filtering from './filtering';
 
-const settings = handleActions({
+const settings = handleActions(
+    {
         [actions.initSettingsRequest]: state => ({ ...state, processing: true }),
         [actions.initSettingsFailure]: state => ({ ...state, processing: false }),
         [actions.initSettingsSuccess]: (state, { payload }) => {
@@ -33,22 +34,29 @@ const settings = handleActions({
             const newSettingsList = { ...settingsList, [settingKey]: newSetting };
             return { ...state, settingsList: newSettingsList };
         },
-    [actions.setUpstreamRequest]: state => ({ ...state, processingUpstream: true }),
-    [actions.setUpstreamFailure]: state => ({ ...state, processingUpstream: false }),
-    [actions.setUpstreamSuccess]: state => ({ ...state, processingUpstream: false }),
+        [actions.setUpstreamRequest]: state => ({ ...state, processingSetUpstream: true }),
+        [actions.setUpstreamFailure]: state => ({ ...state, processingSetUpstream: false }),
+        [actions.setUpstreamSuccess]: (state, { payload }) => ({
+            ...state,
+            ...payload,
+            processingSetUpstream: false,
+        }),
 
         [actions.testUpstreamRequest]: state => ({ ...state, processingTestUpstream: true }),
         [actions.testUpstreamFailure]: state => ({ ...state, processingTestUpstream: false }),
         [actions.testUpstreamSuccess]: state => ({ ...state, processingTestUpstream: false }),
-}, {
+    },
+    {
         processing: true,
         processingTestUpstream: false,
         processingSetUpstream: false,
         processingDhcpStatus: false,
         settingsList: {},
-});
+    },
+);
 
-const dashboard = handleActions({
+const dashboard = handleActions(
+    {
         [actions.dnsStatusRequest]: state => ({ ...state, processing: true }),
         [actions.dnsStatusFailure]: state => ({ ...state, processing: false }),
         [actions.dnsStatusSuccess]: (state, { payload }) => {
@@ -163,13 +171,33 @@ const dashboard = handleActions({
             };
             return newState;
         },
-}, {
+
+        [actions.getDnsSettingsRequest]: state => ({ ...state, processingDnsSettings: true }),
+        [actions.getDnsSettingsFailure]: state => ({ ...state, processingDnsSettings: false }),
+        [actions.getDnsSettingsSuccess]: (state, { payload }) => {
+            const {
+                upstream_dns: upstreamDns,
+                bootstrap_dns: bootstrapDns,
+                all_servers: allServers,
+            } = payload;
+
+            return {
+                ...state,
+                allServers,
+                upstreamDns: (upstreamDns && upstreamDns.join('\n')) || '',
+                bootstrapDns: (bootstrapDns && bootstrapDns.join('\n')) || '',
+                processingDnsSettings: false,
+            };
+        },
+    },
+    {
         processing: true,
         isCoreRunning: false,
         processingVersion: true,
         processingFiltering: true,
         processingClients: true,
         processingUpdate: false,
+        processingDnsSettings: true,
         upstreamDns: '',
         bootstrapDns: '',
         allServers: false,
@@ -181,16 +209,15 @@ const dashboard = handleActions({
         dnsVersion: '',
         clients: [],
         autoClients: [],
-});
+    },
+);
 
-const dhcp = handleActions({
+const dhcp = handleActions(
+    {
         [actions.getDhcpStatusRequest]: state => ({ ...state, processing: true }),
         [actions.getDhcpStatusFailure]: state => ({ ...state, processing: false }),
         [actions.getDhcpStatusSuccess]: (state, { payload }) => {
-        const {
-            static_leases: staticLeases,
-            ...values
-        } = payload;
+            const { static_leases: staticLeases, ...values } = payload;
 
             const newState = {
                 ...state,
@@ -216,10 +243,7 @@ const dhcp = handleActions({
         [actions.findActiveDhcpRequest]: state => ({ ...state, processingStatus: true }),
         [actions.findActiveDhcpFailure]: state => ({ ...state, processingStatus: false }),
         [actions.findActiveDhcpSuccess]: (state, { payload }) => {
-        const {
-            other_server: otherServer,
-            static_ip: staticIP,
-        } = payload;
+            const { other_server: otherServer, static_ip: staticIP } = payload;
 
             const newState = {
                 ...state,
@@ -238,7 +262,10 @@ const dhcp = handleActions({
             const { config } = state;
             const newConfig = { ...config, enabled: !config.enabled };
             const newState = {
-            ...state, config: newConfig, check: null, processingDhcp: false,
+                ...state,
+                config: newConfig,
+                check: null,
+                processingDhcp: false,
             };
             return newState;
         },
@@ -263,9 +290,7 @@ const dhcp = handleActions({
         [actions.addStaticLeaseRequest]: state => ({ ...state, processingAdding: true }),
         [actions.addStaticLeaseFailure]: state => ({ ...state, processingAdding: false }),
         [actions.addStaticLeaseSuccess]: (state, { payload }) => {
-        const {
-            ip, mac, hostname,
-        } = payload;
+            const { ip, mac, hostname } = payload;
             const newLease = {
                 ip,
                 mac,
@@ -292,7 +317,8 @@ const dhcp = handleActions({
             };
             return newState;
         },
-}, {
+    },
+    {
         processing: true,
         processingStatus: false,
         processingInterfaces: false,
@@ -307,7 +333,8 @@ const dhcp = handleActions({
         leases: [],
         staticLeases: [],
         isModalOpen: false,
-});
+    },
+);
 
 export default combineReducers({
     settings,