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

Pull request: 684 move block/unblock button to the tooltip menu

Browse Source 
Updates #684

Squashed commit of the following:

commit 2c5ac44d3edb55d0d3be169fb0bbfb336920964d
Merge: 0fce61dfa 733d6c1fc
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 16 10:08:58 2023 +0300

    Merge branch 'master' into ADG-7200

commit 0fce61dfad31951c3d5a484a14383c58964b47f0
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Oct 13 16:38:13 2023 +0300

    fix dashboard clients table block/unblock button

commit ef5d72fd7cac81b70503c8813cf6e96952ec3b65
Merge: f49281b88 506d71310
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Oct 13 16:16:21 2023 +0300

    Merge branch 'master' into ADG-7200

commit f49281b8818728ab298d769b8164919ea415d6c9
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:25:05 2023 +0300

    fix disabled

commit 0031861174108214e9741852f6e00c5873c3b20f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:20:50 2023 +0300

    fix icon color

commit 2916937b0d6a0d126bd48e59f41a6fcbc4622ea1
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:15:55 2023 +0300

    changelog

commit 34493c974fb9304267e9149360c802d9364dd7de
Merge: d3267bbe9 d3fabdda4
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:13:43 2023 +0300

    Merge branch 'master' into ADG-7200

commit d3267bbe9477d6db0783534cb4ab4f7afc4d63b0
Merge: 58a6c766f 6a3661562
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Oct 11 16:46:39 2023 +0300

    Merge branch 'master' into ADG-7200

commit 58a6c766f3b783f0e2fdc36d40889042f3c74f2f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Oct 11 16:46:13 2023 +0300

    ADG-7200 move block/unblock button to the tooltip menu
This commit is contained in:
Ildar Kamalov
2023-10-16 18:00:28 +03:00
parent 733d6c1fca
commit 413f484810
11 changed files with 124 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
client/src/components/Logs/Cells/ClientCell.js
View File

@@ -26,9 +26,7 @@ const ClientCell = ({
const { t } = useTranslation();
const dispatch = useDispatch();
const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
const processingRules = useSelector((state) => state.filtering.processingRules);
const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
const processingSet = useSelector((state) => state.access.processingSet);
const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
const [isOptionsOpened, setOptionsOpened] = useState(false);
@@ -84,11 +82,23 @@ const ClientCell = ({
const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
const clientNameBlockingFor = getBlockingClientName(clients, client);
const onClick = async () => {
await dispatch(toggleBlocking(buttonType, domain));
await dispatch(getStats());
setOptionsOpened(false);
};
const BUTTON_OPTIONS = [
{
name: buttonType,
onClick,
className: isFiltered ? 'bg--green' : 'bg--danger',
},
{
name: blockingForClientKey,
onClick: () => {
dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
setOptionsOpened(false);
},
},
{
@@ -101,27 +111,25 @@ const ClientCell = ({
client_info?.disallowed_rule || '',
));
await dispatch(updateLogs());
setOptionsOpened(false);
}
},
disabled: processingSet || lastRuleInAllowlist,
disabled: lastRuleInAllowlist,
},
];
const onClick = async () => {
await dispatch(toggleBlocking(buttonType, domain));
await dispatch(getStats());
};
const getOptions = (options) => {
if (options.length === 0) {
return null;
}
return (
<>
{options.map(({ name, onClick, disabled }) => (
{options.map(({
name, onClick, disabled, className,
}) => (
<button
key={name}
className="button-action--arrow-option px-4 py-1"
className={classNames('button-action--arrow-option px-4 py-1', className)}
onClick={onClick}
disabled={disabled}
>
@@ -134,17 +142,6 @@ const ClientCell = ({
const content = getOptions(BUTTON_OPTIONS);
const buttonClass = classNames('button-action button-action--main', {
'button-action--unblock': isFiltered,
'button-action--with-options': content,
'button-action--active': isOptionsOpened,
});
const buttonArrowClass = classNames('button-action button-action--arrow', {
'button-action--unblock': isFiltered,
'button-action--active': isOptionsOpened,
});
const containerClass = classNames('button-action__container', {
'button-action__container--detailed': isDetailed,
});
@@ -153,25 +150,26 @@ const ClientCell = ({
<div className={containerClass}>
<button
type="button"
className={buttonClass}
onClick={onClick}
disabled={processingRules}
className="btn btn-icon btn-sm px-0"
onClick={() => setOptionsOpened(true)}
>
{t(buttonType)}
<svg className="icon24 icon--lightgray button-action__icon">
<use xlinkHref="#bullets" />
</svg>
</button>
{content && (
<button className={buttonArrowClass} disabled={processingRules}>
<IconTooltip
className="icon24"
tooltipClass="button-action--arrow-option-container"
xlinkHref="chevron-down"
triggerClass="button-action--icon"
content={content}
placement="bottom-end"
trigger="click"
onVisibilityChange={setOptionsOpened}
/>
</button>
{isOptionsOpened && (
<IconTooltip
className="icon24"
tooltipClass="button-action--arrow-option-container"
xlinkHref="bullets"
triggerClass="btn btn-icon btn-sm px-0 button-action__hidden-trigger"
content={content}
placement="bottom-end"
trigger="click"
onVisibilityChange={setOptionsOpened}
defaultTooltipShown={true}
delayHide={0}
/>
)}
</div>
);
@@ -198,7 +196,7 @@ const ClientCell = ({
</div>
{isDetailed && clientName && !whoisAvailable && (
<Link
className="detailed-info d-none d-sm-block logs__text logs__text--link"
className="detailed-info d-none d-sm-block logs__text logs__text--link logs__text--client"
to={`logs?search="${encodeURIComponent(clientName)}"`}
title={clientName}
>