From 7645d9ae007c6bd4aa931826299675f642662ce6 Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Tue, 6 Dec 2022 07:45:15 +0100
Subject: [PATCH] feat: add toggle query display by Ctrl (#3449)

---
 .../Main/ShortcutKeys/ShortcutKeys.tsx        | 15 ++++++++++++++
 .../components/Main/ShortcutKeys/style.scss   |  2 +-
 .../QueryConfigurator/QueryConfigurator.tsx   | 20 ++++++++++++++-----
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx
index 2ae8a9aeb..7dfd619e7 100644
--- a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx
@@ -28,6 +28,10 @@ const keyList = [
       {
         keys: [ctrlMeta, "Arrow Down"],
         description: "Next command from the Query history"
+      },
+      {
+        keys: [ctrlMeta, "Click by 'Eye'"],
+        description: "Toggle multiple queries"
       }
     ]
   },
@@ -36,10 +40,12 @@ const keyList = [
     list: [
       {
         keys: [ctrlMeta, "Scroll Up"],
+        alt: ["+"],
         description: "Zoom in"
       },
       {
         keys: [ctrlMeta, "Scroll Down"],
+        alt: ["-"],
         description: "Zoom out"
       },
       {
@@ -118,6 +124,15 @@ const ShortcutKeys: FC = () => {
                           {i !== l.keys.length - 1 ? "+" : ""}
                         </>
                       ))}
+                      {l.alt && l.alt.map((alt, i) => (
+                        <>
+                          or
+                          <code key={alt}>
+                            {alt}
+                          </code>
+                          {i !== l.alt.length - 1 ? "+" : ""}
+                        </>
+                      ))}
                     </div>
                     <p className="vm-shortcuts-section-list-item__description">
                       {l.description}
diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss
index 7550b9fc4..c6668f4d5 100644
--- a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss
+++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss
@@ -19,7 +19,7 @@
 
       &-item {
         display: grid;
-        grid-template-columns: 180px 1fr;
+        grid-template-columns: 210px 1fr;
         align-items: center;
         gap: $padding-small;
 
diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx
index 543e91c1b..ffbe7c76f 100644
--- a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx
@@ -11,6 +11,8 @@ import Button from "../../../components/Main/Button/Button";
 import "./style.scss";
 import Tooltip from "../../../components/Main/Tooltip/Tooltip";
 import classNames from "classnames";
+import { MouseEvent as ReactMouseEvent } from "react";
+import { arrayEquals } from "../../../utils/array";
 
 export interface QueryConfiguratorProps {
   error?: ErrorTypes | string;
@@ -55,8 +57,16 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({ error, queryOptions, on
     setStateQuery(prev => prev.filter((q, i) => i !== index));
   };
 
-  const onToggleHideQuery = (index: number) => {
-    setHideQuery(prev => prev.includes(index) ? prev.filter(n => n !== index) : [...prev, index]);
+  const onToggleHideQuery = (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>, index: number) => {
+    const { ctrlKey, metaKey } = e;
+    const ctrlMetaKey = ctrlKey || metaKey;
+
+    if (ctrlMetaKey) {
+      const hideIndexes = stateQuery.map((q, i) => i).filter(n => n !== index);
+      setHideQuery(prev => arrayEquals(hideIndexes, prev) ? [] : hideIndexes);
+    } else {
+      setHideQuery(prev => prev.includes(index) ? prev.filter(n => n !== index) : [...prev, index]);
+    }
   };
 
   const handleChangeQuery = (value: string, index: number) => {
@@ -84,11 +94,11 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({ error, queryOptions, on
 
   const createHandlerRemoveQuery = (i: number) => () => {
     onRemoveQuery(i);
-    setHideQuery(prev => prev.map(n => n > i ? n - 1: n));
+    setHideQuery(prev => prev.includes(i) ? prev.filter(n => n !== i) : prev.map(n => n > i ? n - 1: n));
   };
 
-  const createHandlerHideQuery = (i: number) => () => {
-    onToggleHideQuery(i);
+  const createHandlerHideQuery = (i: number) => (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
+    onToggleHideQuery(e, i);
   };
 
   useEffect(() => {