+ client: Move "Blocked services" to a separate page under "Filters" menu: Merge pull request #649 in DNS/adguard-home from feature/1744 to master

Close #1744

Squashed commit of the following:

commit 912a80b8ff42c927a97d33ccb3eebf8c3ca188d9
Merge: bb5a77ff 5ce98bd2
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jun 5 12:47:21 2020 +0300

    Merge branch 'master' into feature/1744

commit bb5a77ff6b66743bf23c9582c523280bdf9ef63a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 4 18:07:26 2020 +0300

    + client: Move "Blocked services" to a separate page under "Filters" menu

client/src/components/App/index.js

@@ -34,6 +34,8 @@ import EncryptionTopline from '../ui/EncryptionTopline';
 import Icons from '../ui/Icons';
 import i18n from '../../i18n';
 import Loading from '../ui/Loading';
+import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants';
+import Services from '../Filters/Services';
 
 class App extends Component {
     componentDidMount() {
@@ -105,20 +107,23 @@ class App extends Component {
                             </div>
                         )}
                         {!dashboard.processing && dashboard.isCoreRunning && (
-                            <Fragment>
+                            <>
-                                <Route path="/" exact component={Dashboard} />
+                                <Route path={MENU_URLS.root} exact component={Dashboard} />
-                                <Route path="/settings" component={Settings} />
+                                <Route path={MENU_URLS.logs} component={Logs} />
-                                <Route path="/dns" component={Dns} />
+                                <Route path={MENU_URLS.guide} component={SetupGuide} />
-                                <Route path="/encryption" component={Encryption} />
+                                <Route path={SETTINGS_URLS.settings} component={Settings} />
-                                <Route path="/dhcp" component={Dhcp} />
+                                <Route path={SETTINGS_URLS.dns} component={Dns} />
-                                <Route path="/clients" component={Clients} />
+                                <Route path={SETTINGS_URLS.encryption} component={Encryption} />
-                                <Route path="/filters" component={DnsBlocklist} />
+                                <Route path={SETTINGS_URLS.dhcp} component={Dhcp} />
-                                <Route path="/dns_allowlists" component={DnsAllowlist} />
+                                <Route path={SETTINGS_URLS.clients} component={Clients} />
-                                <Route path="/dns_rewrites" component={DnsRewrites} />
+                                <Route path={FILTERS_URLS.dns_blocklists}
-                                <Route path="/custom_rules" component={CustomRules} />
+                                       component={DnsBlocklist} />
-                                <Route path="/logs" component={Logs} />
+                                <Route path={FILTERS_URLS.dns_allowlists}
-                                <Route path="/guide" component={SetupGuide} />
+                                       component={DnsAllowlist} />
-                            </Fragment>
+                                <Route path={FILTERS_URLS.dns_rewrites} component={DnsRewrites} />
+                                <Route path={FILTERS_URLS.custom_rules} component={CustomRules} />
+                                <Route path={FILTERS_URLS.blocked_services} component={Services} />
+                            </>
                         )}
                     </div>
                     <Footer

client/src/components/Filters/DnsAllowlist.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -72,7 +72,7 @@ class DnsAllowlist extends Component {
         const whitelist = true;
 
         return (
-            <Fragment>
+            <>
                 <PageTitle
                     title={t('dns_allowlists')}
                     subtitle={t('dns_allowlists_desc')}
@@ -113,7 +113,7 @@ class DnsAllowlist extends Component {
                     currentFilterData={currentFilterData}
                     whitelist={whitelist}
                 />
-            </Fragment>
+            </>
         );
     }
 }

client/src/components/Filters/Services/index.js

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDispatch, useSelector } from 'react-redux';
+import Form from './Form';
+import Card from '../../ui/Card';
+import { getBlockedServices, setBlockedServices } from '../../../actions/services';
+import PageTitle from '../../ui/PageTitle';
+
+const getInitialDataForServices = (initial) => (initial ? initial.reduce(
+    (acc, service) => {
+        acc.blocked_services[service] = true;
+        return acc;
+    }, { blocked_services: {} },
+) : initial);
+
+const Services = () => {
+    const [t] = useTranslation();
+    const dispatch = useDispatch();
+    const services = useSelector((store) => store && store.services);
+
+    useEffect(() => {
+        dispatch(getBlockedServices());
+    }, []);
+
+    const handleSubmit = (values) => {
+        if (!values || !values.blocked_services) {
+            return;
+        }
+
+        const blocked_services = Object
+            .keys(values.blocked_services)
+            .filter((service) => values.blocked_services[service]);
+
+        dispatch(setBlockedServices(blocked_services));
+    };
+
+    const initialValues = getInitialDataForServices(services.list);
+
+    return (
+        <>
+            <PageTitle
+                title={t('blocked_services')}
+                subtitle={t('blocked_services_desc')}
+            />
+            <Card
+                bodyType="card-body box-body--settings"
+            >
+                <div className="form">
+                    <Form
+                        initialValues={initialValues}
+                        processing={services.processing}
+                        processingSet={services.processingSet}
+                        onSubmit={handleSubmit}
+                    />
+                </div>
+            </Card>
+        </>
+    );
+};
+
+Services.propTypes = {};
+
+export default Services;

client/src/components/Header/Menu.js

@@ -38,6 +38,7 @@ const FILTERS_ITEMS = [
     { route: FILTERS_URLS.dns_allowlists, text: 'dns_allowlists' },
     { route: FILTERS_URLS.dns_rewrites, text: 'dns_rewrites' },
     { route: FILTERS_URLS.custom_rules, text: 'custom_filtering_rules' },
+    { route: FILTERS_URLS.blocked_services, text: 'blocked_services' },
 ];
 
 class Menu extends Component {

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

@@ -1,69 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import Form from './Form';
-import Card from '../../ui/Card';
-
-class Services extends Component {
-    handleSubmit = (values) => {
-        let config = values;
-
-        if (values && values.blocked_services) {
-            const blocked_services = Object
-                .keys(values.blocked_services)
-                .filter((service) => values.blocked_services[service]);
-            config = blocked_services;
-        }
-
-        this.props.setBlockedServices(config);
-    };
-
-
-    getInitialDataForServices = (initial) => {
-        if (initial) {
-            const blocked = {};
-
-            initial.forEach((service) => {
-                blocked[service] = true;
-            });
-
-            return {
-                blocked_services: blocked,
-            };
-        }
-
-        return initial;
-    };
-
-
-    render() {
-        const { services, t } = this.props;
-        const initialData = this.getInitialDataForServices(services.list);
-
-        return (
-            <Card
-                title={t('blocked_services')}
-                subtitle={t('blocked_services_desc')}
-                bodyType="card-body box-body--settings"
-            >
-                <div className="form">
-                    <Form
-                        initialValues={{ ...initialData }}
-                        processing={services.processing}
-                        processingSet={services.processingSet}
-                        onSubmit={this.handleSubmit}
-                    />
-                </div>
-            </Card>
-        );
-    }
-}
-
-Services.propTypes = {
-    t: PropTypes.func.isRequired,
-    services: PropTypes.object.isRequired,
-    setBlockedServices: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(Services);

client/src/components/Settings/index.js

@@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import Services from './Services';
 import StatsConfig from './StatsConfig';
 import LogsConfig from './LogsConfig';
 import FiltersConfig from './FiltersConfig';
@@ -35,7 +34,6 @@ class Settings extends Component {
 
     componentDidMount() {
         this.props.initSettings(this.settings);
-        this.props.getBlockedServices();
         this.props.getStatsConfig();
         this.props.getLogsConfig();
         this.props.getFilteringStatus();
@@ -63,8 +61,6 @@ class Settings extends Component {
     render() {
         const {
             settings,
-            services,
-            setBlockedServices,
             setStatsConfig,
             resetStats,
             stats,
@@ -77,7 +73,6 @@ class Settings extends Component {
         } = this.props;
 
         const isDataReady = !settings.processing
-            && !services.processing
             && !stats.processingGetConfig
             && !queryLogs.processingGetConfig;
 
@@ -123,12 +118,6 @@ class Settings extends Component {
                                     resetStats={resetStats}
                                 />
                             </div>
-                            <div className="col-md-12">
-                                <Services
-                                    services={services}
-                                    setBlockedServices={setBlockedServices}
-                                />
-                            </div>
                         </div>
                     </div>
                 )}
@@ -147,14 +136,9 @@ Settings.propTypes = {
     setFiltersConfig: PropTypes.func.isRequired,
     getFilteringStatus: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
-    getBlockedServices: PropTypes.func,
     getLogsConfig: PropTypes.func,
-    setBlockedServices: PropTypes.func,
     setLogsConfig: PropTypes.func,
     clearLogs: PropTypes.func,
-    services: PropTypes.shape({
-        processing: PropTypes.bool,
-    }),
     stats: PropTypes.shape({
         processingGetConfig: PropTypes.bool,
         interval: PropTypes.number,

client/src/helpers/constants.js

@@ -161,6 +161,7 @@ export const FILTERS_URLS = {
     dns_allowlists: '/dns_allowlists',
     dns_rewrites: '/dns_rewrites',
     custom_rules: '/custom_rules',
+    blocked_services: '/blocked_services',
 };
 
 export const SERVICES = [