daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge: fix #822 - Whitelist filter rules

Browse Source 
Squashed commit of the following:

commit 350c6d5fadd77145b801df8887284bf4d64fbd19
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Wed Feb 26 15:43:29 2020 +0300

    * client: update translations

commit a884dffcd59f2259e2eee2c1e5a3270819bf8962
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Mon Feb 17 17:32:10 2020 +0300

    + client: handle whitelist filters

commit a586ec5bc614ffb0e01584a1fbdc7292b4865e68
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jan 29 18:16:59 2020 +0300

    + client: add whitelist

commit a52c3de62cf2fa34be6394771fb8bb56b4ee81e3
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Thu Feb 20 17:50:44 2020 +0300

    * change /filtering/refresh

commit 7f8f2ecccb9f7fa65318c1717dc6a7bd61afccf4
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Thu Feb 20 16:17:07 2020 +0300

    * fix race-detector issue

commit ac4b64c4a52c5b364a4b154bf18dea0fdf45647f
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Mon Jan 20 20:08:21 2020 +0300

    + whitelist filters
This commit is contained in:
Andrey Meshkov
2020-02-26 19:58:25 +03:00
parent 82aa38fce3
commit d839136fee
70 changed files with 1821 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
client/src/components/Header/Menu.js
View File

@@ -5,33 +5,39 @@ import enhanceWithClickOutside from 'react-click-outside';
import classnames from 'classnames';
import { Trans, withNamespaces } from 'react-i18next';
import { SETTINGS_URLS } from '../../helpers/constants';
import { SETTINGS_URLS, FILTERS_URLS, MENU_URLS } from '../../helpers/constants';
import Dropdown from '../ui/Dropdown';
const MENU_ITEMS = [
{
route: '', exact: true, xlinkHref: 'dashboard', text: 'dashboard', order: 0,
route: MENU_URLS.root, exact: true, icon: 'dashboard', text: 'dashboard', order: 0,
},
// Settings dropdown should have visual order 1
// Filters dropdown should have visual order 2
{
route: 'filters', xlinkHref: 'filters', text: 'filters', order: 2,
route: MENU_URLS.logs, icon: 'log', text: 'query_log', order: 3,
},
{
route: 'logs', xlinkHref: 'log', text: 'query_log', order: 3,
},
{
route: 'guide', xlinkHref: 'setup', text: 'setup_guide', order: 4,
route: MENU_URLS.guide, icon: 'setup', text: 'setup_guide', order: 4,
},
];
const DROPDOWN_ITEMS = [
{ route: 'settings', text: 'general_settings' },
{ route: 'dns', text: 'dns_settings' },
{ route: 'encryption', text: 'encryption_settings' },
{ route: 'clients', text: 'client_settings' },
{ route: 'dhcp', text: 'dhcp_settings' },
const SETTINGS_ITEMS = [
{ route: SETTINGS_URLS.settings, text: 'general_settings' },
{ route: SETTINGS_URLS.dns, text: 'dns_settings' },
{ route: SETTINGS_URLS.encryption, text: 'encryption_settings' },
{ route: SETTINGS_URLS.clients, text: 'client_settings' },
{ route: SETTINGS_URLS.dhcp, text: 'dhcp_settings' },
];
const FILTERS_ITEMS = [
{ route: FILTERS_URLS.dns_blocklists, text: 'dns_blocklists' },
{ 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' },
];
class Menu extends Component {
@@ -43,50 +49,82 @@ class Menu extends Component {
this.props.toggleMenuOpen();
};
getActiveClassForSettings = () => {
getActiveClassForDropdown = (URLS) => {
const { pathname } = this.props.location;
const isSettingsPage = SETTINGS_URLS.some(item => item === pathname);
const isActivePage = Object.values(URLS).some(item => item === pathname);
return isSettingsPage ? 'active' : '';
return isActivePage ? 'active' : '';
};
getNavLink = ({
route, exact, text, order, className, icon,
}) => (
<NavLink
to={route}
key={route}
exact={exact || false}
className={`order-${order} ${className}`}
onClick={this.toggleMenu}
>
{icon && (
<svg className="nav-icon">
<use xlinkHref={`#${icon}`} />
</svg>
)}
<Trans>{text}</Trans>
</NavLink>
);
getDropdown = ({
label, order, URLS, icon, ITEMS,
}) =>
(
<Dropdown
label={this.props.t(label)}
baseClassName={`dropdown nav-item order-${order}`}
controlClassName={`nav-link ${this.getActiveClassForDropdown(URLS)}`}
icon={icon}>
{ITEMS.map(item => (
this.getNavLink({
...item,
order,
className: 'dropdown-item',
})))}
</Dropdown>
);
render() {
const menuClass = classnames({
'header__column mobile-menu': true,
'mobile-menu--active': this.props.isMenuOpen,
});
const dropdownControlClass = `nav-link ${this.getActiveClassForSettings()}`;
return (
<Fragment>
<div className={menuClass}>
<ul className="nav nav-tabs border-0 flex-column flex-lg-row flex-nowrap">
{MENU_ITEMS.map(({
route, text, exact, xlinkHref, order,
}) => (
<li className={`nav-item order-${order}`} key={text} onClick={this.toggleMenu}>
<NavLink to={`/${route}`} exact={exact || false} className="nav-link">
<svg className="nav-icon">
<use xlinkHref={`#${xlinkHref}`} />
</svg>
<Trans>{text}</Trans>
</NavLink>
{MENU_ITEMS.map(item => (
<li
className={`nav-item order-${item.order}`}
key={item.text}
onClick={this.toggleMenu}
>
{this.getNavLink({ ...item, className: 'nav-link' })}
</li>
))}
<Dropdown
label={this.props.t('settings')}
baseClassName="dropdown nav-item order-1"
controlClassName={dropdownControlClass}
icon="settings"
>
{DROPDOWN_ITEMS.map(({ route, text }) => (
<NavLink to={`/${route}`} className="dropdown-item" key={text}
onClick={this.toggleMenu}>
<Trans>{text}</Trans>
</NavLink>
))}
</Dropdown>
{this.getDropdown({
order: 1,
label: 'settings',
icon: 'settings',
URLS: SETTINGS_URLS,
ITEMS: SETTINGS_ITEMS,
})}
{this.getDropdown({
order: 2,
label: 'filters',
icon: 'filters',
URLS: FILTERS_URLS,
ITEMS: FILTERS_ITEMS,
})}
</ul>
</div>
</Fragment>