+ 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() {
@@ -99,26 +101,29 @@ class App extends Component {
                                 <div className="col-lg-12">
                                     <Status reloadPage={this.reloadPage}
                                             message="dns_start"
-                                        />
+                                    />
                                     <Loading />
                                 </div>
                             </div>
                         )}
                         {!dashboard.processing && dashboard.isCoreRunning && (
-                            <Fragment>
-                                <Route path="/" exact component={Dashboard} />
-                                <Route path="/settings" component={Settings} />
-                                <Route path="/dns" component={Dns} />
-                                <Route path="/encryption" component={Encryption} />
-                                <Route path="/dhcp" component={Dhcp} />
-                                <Route path="/clients" component={Clients} />
-                                <Route path="/filters" component={DnsBlocklist} />
-                                <Route path="/dns_allowlists" component={DnsAllowlist} />
-                                <Route path="/dns_rewrites" component={DnsRewrites} />
-                                <Route path="/custom_rules" component={CustomRules} />
-                                <Route path="/logs" component={Logs} />
-                                <Route path="/guide" component={SetupGuide} />
-                            </Fragment>
+                            <>
+                                <Route path={MENU_URLS.root} exact component={Dashboard} />
+                                <Route path={MENU_URLS.logs} component={Logs} />
+                                <Route path={MENU_URLS.guide} component={SetupGuide} />
+                                <Route path={SETTINGS_URLS.settings} component={Settings} />
+                                <Route path={SETTINGS_URLS.dns} component={Dns} />
+                                <Route path={SETTINGS_URLS.encryption} component={Encryption} />
+                                <Route path={SETTINGS_URLS.dhcp} component={Dhcp} />
+                                <Route path={SETTINGS_URLS.clients} component={Clients} />
+                                <Route path={FILTERS_URLS.dns_blocklists}
+                                       component={DnsBlocklist} />
+                                <Route path={FILTERS_URLS.dns_allowlists}
+                                       component={DnsAllowlist} />
+                                <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 =