all: sync with master; upd chlog

2023-10-18 17:04:44 +03:00
parent c6aed4eb57
commit b21e19a223
60 changed files with 648 additions and 371 deletions
--- a/client/src/components/Logs/Cells/ClientCell.js
+++ b/client/src/components/Logs/Cells/ClientCell.js
@@ -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}
                    >
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/client/src/components/Logs/Cells/IconTooltip.css
@@ -1,4 +1,5 @@
 .tooltip-custom__container {
+    min-width: 150px;
    padding: 1rem 1.5rem 1.25rem 1.5rem;
    font-size: 16px !important;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
--- a/client/src/components/Logs/Cells/IconTooltip.js
+++ b/client/src/components/Logs/Cells/IconTooltip.js
@@ -21,6 +21,8 @@ const IconTooltip = ({
    content,
    trigger,
    onVisibilityChange,
+    defaultTooltipShown,
+    delayHide,
    renderContent = content ? React.Children.map(
        processContent(content),
        (item, idx) => <div key={idx} className={contentItemClass}>
@@ -44,6 +46,8 @@ const IconTooltip = ({
        trigger={trigger}
        onVisibilityChange={onVisibilityChange}
        delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
+        delayHide={delayHide}
+        defaultTooltipShown={defaultTooltipShown}
    >
        {xlinkHref && <svg className={className}>
            <use xlinkHref={`#${xlinkHref}`} />
@@ -65,6 +69,8 @@ IconTooltip.propTypes = {
    content: PropTypes.node,
    renderContent: PropTypes.arrayOf(PropTypes.element),
    onVisibilityChange: PropTypes.func,
+    defaultTooltipShown: PropTypes.bool,
+    delayHide: PropTypes.number,
 };

 export default IconTooltip;
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -80,6 +80,10 @@
    color: var(--gray-f3);
 }

+.logs__text--client {
+    padding-right: 32px;
+}
+
 .icon--selected {
    background-color: var(--gray-f3);
    border: solid 1px var(--gray-d8);
@@ -261,9 +265,8 @@
 .button-action__container {
    display: flex;
    position: absolute;
-    right: 0;
+    right: 2px;
    bottom: 0.5rem;
-    height: 1.6rem;
 }

@media screen and (max-width: 1024px) {
@@ -307,45 +310,10 @@
    border-bottom-right-radius: 0;
 }

-.button-action--arrow {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 1px solid var(--white);
-    width: 1.5625rem;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 .button-action:hover {
    cursor: pointer;
 }

-.button-action--arrow .button-action--icon {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-.button-action:active {
-    background: var(--btn-block-active);
-}
-
-.button-action--unblock:active {
-    background: var(--btn-unblock-active);
-}
-
-.button-action:disabled {
-    background: var(--btn-block-disabled);
-    cursor: default;
-}
-
-.button-action--unblock:disabled {
-    background: var(--btn-unblock-disabled);
-}
-
 .button-action--arrow-option {
    background: transparent;
    border: 0;
@@ -551,3 +519,20 @@
    padding: 1rem 1.5rem;
    background-color: var(--card-bgcolor);
 }
+
+.button-action__hidden-trigger {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 33px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip: rect(0 0 0 0);
+}
+
+[data-theme="dark"] .button-action__icon {
+    color: var(--gray-f3);
+}