fix: correct the description of shortcut keys (#4057)

app/vmui/packages/vmui/src/components/Chart/GraphTips/contants/tips.tsx

@@ -51,15 +51,16 @@ const legendTips = [
     </>
   },
   {
-    title: "Copy key-value pairs",
+    title: "Copy label key-value pairs",
     description: <>
-      <code>click</code> on a key-value pair to save it to the clipboard.
+      <code>click</code> on a label key-value pair to save it to the clipboard.
     </>
   },
   {
     title: "Collapse/Expand the legend group",
     description: <>
-      <code>click</code> on the group name (e.g. <b>Query 1: &#123;name!=&#34;&#34;&#125;</b>) to collapse or expand the legend.
+      <code>click</code> on the group name (e.g. <b>Query 1: &#123;__name__!=&#34;&#34;&#125;</b>)
+      to collapse or expand the legend.
     </>
   },
 ];

app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx

@@ -1,77 +1,18 @@
-import React, { FC, useState } from "preact/compat";
+import React, { FC, useEffect, useState } from "preact/compat";
-import { isMacOs } from "../../../utils/detect-device";
 import { getAppModeEnable } from "../../../utils/app-mode";
 import Button from "../Button/Button";
 import { KeyboardIcon } from "../Icons";
 import Modal from "../Modal/Modal";
 import "./style.scss";
 import Tooltip from "../Tooltip/Tooltip";
-
+import keyList from "./constants/keyList";
-const ctrlMeta = isMacOs() ? "Cmd" : "Ctrl";
+import { isMacOs } from "../../../utils/detect-device";
-
-const keyList = [
-  {
-    title: "Query",
-    list: [
-      {
-        keys: ["Enter"],
-        description: "Run"
-      },
-      {
-        keys: ["Shift", "Enter"],
-        description: "Multi-line queries"
-      },
-      {
-        keys: [ctrlMeta, "Arrow Up"],
-        description: "Previous command from the Query history"
-      },
-      {
-        keys: [ctrlMeta, "Arrow Down"],
-        description: "Next command from the Query history"
-      },
-      {
-        keys: [ctrlMeta, "Click by 'Eye'"],
-        description: "Toggle multiple queries"
-      }
-    ]
-  },
-  {
-    title: "Graph",
-    list: [
-      {
-        keys: [ctrlMeta, "Scroll Up"],
-        alt: ["+"],
-        description: "Zoom in"
-      },
-      {
-        keys: [ctrlMeta, "Scroll Down"],
-        alt: ["-"],
-        description: "Zoom out"
-      },
-      {
-        keys: [ctrlMeta, "Click and Drag"],
-        description: "Move the graph left/right"
-      },
-    ]
-  },
-  {
-    title: "Legend",
-    list: [
-      {
-        keys: ["Mouse Click"],
-        description: "Select series"
-      },
-      {
-        keys: [ctrlMeta, "Mouse Click"],
-        description: "Toggle multiple series"
-      }
-    ]
-  }
-];
 
 const title = "Shortcut keys";
+const isMac = isMacOs();
+const keyOpenHelp = isMac ? "Cmd + /" : "F1";
 
-const ShortcutKeys: FC<{showTitle?: boolean}> = ({ showTitle }) => {
+const ShortcutKeys: FC<{ showTitle?: boolean }> = ({ showTitle }) => {
   const [openList, setOpenList] = useState(false);
   const appModeEnable = getAppModeEnable();
 
@@ -83,10 +24,26 @@ const ShortcutKeys: FC<{showTitle?: boolean}> = ({ showTitle }) => {
     setOpenList(false);
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    const openOnMac = isMac && e.key === "/" && e.metaKey;
+    const openOnOther = !isMac && e.key === "F1" && !e.metaKey;
+    if (openOnMac || openOnOther) {
+      handleOpen();
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   return <>
     <Tooltip
       open={showTitle === true ? false : undefined}
-      title={title}
+      title={`${title} (${keyOpenHelp})`}
       placement="bottom-center"
     >
       <Button
@@ -111,33 +68,20 @@ const ShortcutKeys: FC<{showTitle?: boolean}> = ({ showTitle }) => {
               className="vm-shortcuts-section"
               key={section.title}
             >
+              {section.readMore && (
+                <div className="vm-shortcuts-section__read-more">{section.readMore}</div>
+              )}
               <h3 className="vm-shortcuts-section__title">
                 {section.title}
               </h3>
               <div className="vm-shortcuts-section-list">
-                {section.list.map(l => (
+                {section.list.map((l, i) => (
                   <div
                     className="vm-shortcuts-section-list-item"
-                    key={l.keys.join("+")}
+                    key={`${section.title}_${i}`}
                   >
                     <div className="vm-shortcuts-section-list-item__key">
-                      {l.keys.map((k, i) => (
+                      {l.keys}
-                        <>
-                          <code key={k}>
-                            {k}
-                          </code>
-                          {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}

app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx

@@ -0,0 +1,62 @@
+import React from "preact/compat";
+import { isMacOs } from "../../../../utils/detect-device";
+import { VisibilityIcon } from "../../Icons";
+import GraphTips from "../../../Chart/GraphTips/GraphTips";
+
+const ctrlMeta = <code>{isMacOs() ? "Cmd" : "Ctrl"}</code>;
+
+const keyList = [
+  {
+    title: "Query",
+    list: [
+      {
+        keys: <code>Enter</code>,
+        description: "Run"
+      },
+      {
+        keys: <><code>Shift</code> + <code>Enter</code></>,
+        description: "Multi-line queries"
+      },
+      {
+        keys: <>{ctrlMeta} + <code>Arrow Up</code></>,
+        description: "Previous command from the Query history"
+      },
+      {
+        keys: <>{ctrlMeta} + <code>Arrow Down</code></>,
+        description: "Next command from the Query history"
+      },
+      {
+        keys: <>{ctrlMeta} + <code>click</code> by <VisibilityIcon/></>,
+        description: "Toggle multiple queries"
+      }
+    ]
+  },
+  {
+    title: "Graph",
+    readMore: <GraphTips/>,
+    list: [
+      {
+        keys: <>{ctrlMeta} + <code>scroll Up</code> or <code>+</code></>,
+        description: "Zoom in"
+      },
+      {
+        keys: <>{ctrlMeta} + <code>scroll Down</code> or <code>-</code></>,
+        description: "Zoom out"
+      },
+      {
+        keys: <>{ctrlMeta} + <code>drag</code></>,
+        description: "Move the graph left/right"
+      },
+      {
+        keys: <><code>click</code></>,
+        description: "Select the series in the legend"
+      },
+      {
+        keys: <>{ctrlMeta} + <code>click</code></>,
+        description: "Toggle multiple series in the legend"
+      }
+    ]
+  },
+];
+
+export default keyList;

app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss

@@ -8,13 +8,20 @@
   }
 
   &-section {
-    margin-bottom: $padding-medium;
+    position: relative;
+    margin-bottom: $padding-global;
+    padding-bottom: $padding-global;
+    border-bottom: $border-divider;
 
     &__title {
       font-weight: bold;
-      padding: $padding-small 0;
       margin-bottom: $padding-global;
-      border-bottom: $border-divider;
+    }
+
+    &__read-more {
+      position: absolute;
+      top: -8px;
+      right: 0;
     }
 
     &-list {
@@ -40,6 +47,7 @@
           align-items: center;
           gap: 4px;
 
+          svg,
           code {
             display: inline-block;
             padding: 2px $padding-small 0;
@@ -52,6 +60,11 @@
             border: $border-divider;
             border-radius: 4px;
           }
+
+          svg {
+            width: 24px;
+            padding: 4px;
+          }
         }
 
         &__description {