Bug/UI/tra 4169 apply qury by enter (#660)

* add shortcuts listeners and config

* key added

* listen for shortcut on input

* refactoring listensing to Enter Press

* comment for support

Co-authored-by: Leon <>

acceptanceTests/cypress.json

@@ -8,10 +8,13 @@
   "testFiles":
   ["tests/GuiPort.js",
   "tests/MultipleNamespaces.js",
-  "tests/RedactTests.js",
+  "tests/Redact.js",
+    "tests/NoRedact.js",
   "tests/Regex.js"],
 
   "env": {
-    "testUrl": "http://localhost:8899/"
+    "testUrl": "http://localhost:8899/",
+    "redactHeaderContent": "User-Header[REDACTED]",
+    "redactBodyContent": "{ \"User\": \"[REDACTED]\" }"
   }
 }

acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js

@@ -0,0 +1,9 @@
+export function isValueExistsInElement(shouldInclude, content, domPathToContainer){
+    it(`should ${shouldInclude ? '' : 'not'} include '${content}'`, function () {
+        cy.get(domPathToContainer).then(htmlText => {
+            const allTextString = htmlText.text();
+            if (allTextString.includes(content) !== shouldInclude)
+                throw new Error(`One of the containers part contains ${content}`)
+        });
+    });
+}

acceptanceTests/cypress/integration/tests/MultipleNamespaces.js

@@ -1,4 +1,4 @@
-import {findLineAndCheck, getExpectedDetailsDict} from '../page_objects/StatusBar';
+import {findLineAndCheck, getExpectedDetailsDict} from '../testHelpers/StatusBarHelper';
 
 it('opening', function () {
     cy.visit(Cypress.env('testUrl'));

acceptanceTests/cypress/integration/tests/NoRedact.js

@@ -0,0 +1,8 @@
+import {isValueExistsInElement} from '../testHelpers/TrafficHelper';
+
+it('Loading Mizu', function () {
+    cy.visit(Cypress.env('testUrl'));
+})
+
+isValueExistsInElement(false, Cypress.env('redactHeaderContent'), '#tbody-Headers');
+isValueExistsInElement(false, Cypress.env('redactBodyContent'), '.hljs');

acceptanceTests/cypress/integration/tests/Redact.js

@@ -0,0 +1,8 @@
+import {isValueExistsInElement} from '../testHelpers/TrafficHelper';
+
+it('Loading Mizu', function () {
+    cy.visit(Cypress.env('testUrl'));
+})
+
+isValueExistsInElement(true, Cypress.env('redactHeaderContent'), '#tbody-Headers');
+isValueExistsInElement(true, Cypress.env('redactBodyContent'), '.hljs');

acceptanceTests/cypress/integration/tests/RedactTests.js

@@ -1,23 +0,0 @@
-const inHeader = 'User-Header[REDACTED]';
-const inBody = '{ "User": "[REDACTED]" }';
-const shouldExist = Cypress.env('shouldExist');
-
-it('Loading Mizu', function () {
-    cy.visit(Cypress.env('testUrl'));
-})
-
-it(`should ${shouldExist ? '' : 'not'} include ${inHeader}`, function () {
-    cy.get('.CollapsibleContainer', { timeout : 15 * 1000}).first().next().then(headerElements => { //TODO change the path and refactor the body and head functions
-        const allText = headerElements.text();
-        if (allText.includes(inHeader) !== shouldExist)
-            throw new Error(`The headers panel doesnt include ${inHeader}`);
-    });
-});
-
-it(`should ${shouldExist ? '' : 'not'} include ${inBody}`, function () {
-    cy.get('.hljs').then(bodyElement => {
-        const line = bodyElement.text();
-        if (line.includes(inBody) !== shouldExist)
-            throw new Error(`The body panel doesnt include ${inBody}`);
-    });
-});

acceptanceTests/cypress/integration/tests/Regex.js

@@ -1,4 +1,4 @@
-import {getExpectedDetailsDict, checkLine} from '../page_objects/StatusBar';
+import {getExpectedDetailsDict, checkLine} from '../testHelpers/StatusBarHelper';
 
 
 it('opening', function () {

acceptanceTests/tap_test.go

@@ -377,7 +377,7 @@ func TestTapRedact(t *testing.T) {
 		}
 	}
 
-	runCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/RedactTests.js\" --env shouldExist=true"))
+	runCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/Redact.js\""))
 }
 
 func TestTapNoRedact(t *testing.T) {
@@ -429,7 +429,7 @@ func TestTapNoRedact(t *testing.T) {
 		}
 	}
 
-	runCypressTests(t, "npx cypress run --spec  \"cypress/integration/tests/RedactTests.js\" --env shouldExist=false")
+	runCypressTests(t, "npx cypress run --spec  \"cypress/integration/tests/NoRedact.js\"")
 }
 
 func TestTapRegexMasking(t *testing.T) {

ui/src/components/EntriesList.tsx

@@ -148,7 +148,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
                 </div>
 
                 <div className={styles.footer}>
-                    <div>Displaying <b>{entries?.length}</b> results out of <b>{queriedTotal}</b> total</div>
+                    <div>Displaying <b id="entries-length">{entries?.length}</b> results out of <b id="total-entries">{queriedTotal}</b> total</div>
                     {startTime !== 0 && <div>Started listening at <span style={{marginRight: 5, fontWeight: 600, fontSize: 13}}>{Moment(truncatedTimestamp ? truncatedTimestamp : startTime).utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}</span></div>}
                 </div>
             </div>

ui/src/components/Filters.tsx

@@ -9,6 +9,8 @@ import filterUIExample2 from "./assets/filter-ui-example-2.png"
 import variables from '../variables.module.scss';
 import {useRecoilState} from "recoil";
 import queryAtom from "../recoil/query";
+import useKeyPress from "../hooks/useKeyPress"
+import shortcutsKeyboard from "../configs/shortcutsKeyboard"
 
 interface FiltersProps {
     backgroundColor: string
@@ -60,6 +62,8 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
         setQuery(e.target.value);
     }
 
+    
+
     const handleSubmit = (e) => {
         ws.close();
         if (query) {
@@ -70,6 +74,8 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
         e.preventDefault();
     }
 
+    useKeyPress(shortcutsKeyboard.ctrlEnter, handleSubmit, formRef.current);
+
     return <>
         <form
             ref={formRef}

ui/src/components/InstallPage.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@material-ui/core";
-import React, { useState } from "react";
+import React, { useState,useRef } from "react";
 import { adminUsername } from "../consts";
 import Api, { FormValidationErrorType } from "../helpers/api";
 import { toast } from 'react-toastify';
@@ -7,6 +7,9 @@ import LoadingOverlay from "./LoadingOverlay";
 import { useCommonStyles } from "../helpers/commonStyle";
 import {useSetRecoilState} from "recoil";
 import entPageAtom, {Page} from "../recoil/entPage";
+import useKeyPress from "../hooks/useKeyPress"
+import shortcutsKeyboard from "../configs/shortcutsKeyboard"
+
 
 const api = Api.getInstance();
 
@@ -16,6 +19,7 @@ interface InstallPageProps {
 
 export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
 
+    const formRef = useRef(null);
     const classes = useCommonStyles();
     const [isLoading, setIsLoading] = useState(false);
     const [password, setPassword] = useState("");
@@ -54,13 +58,9 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
 
     }
 
-    const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter") {
-            onFormSubmit();
-        }
-    };
+    useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
 
-    return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
+    return <div className="centeredForm" ref={formRef}>
             {isLoading && <LoadingOverlay/>}
             <div className="form-title left-text">Setup</div>
             <span className="form-subtitle">Welcome to Mizu, please set up the admin user to continue</span>

ui/src/components/LoginPage.tsx

@@ -1,11 +1,14 @@
 import { Button } from "@material-ui/core";
-import React, { useState } from "react";
+import React, { useState,useRef } from "react";
 import { toast } from "react-toastify";
 import Api from "../helpers/api";
 import { useCommonStyles } from "../helpers/commonStyle";
 import LoadingOverlay from "./LoadingOverlay";
 import entPageAtom, {Page} from "../recoil/entPage";
 import {useSetRecoilState} from "recoil";
+import useKeyPress from "../hooks/useKeyPress"
+import shortcutsKeyboard from "../configs/shortcutsKeyboard"
+
 
 const api = Api.getInstance();
 
@@ -15,6 +18,7 @@ const LoginPage: React.FC = () => {
     const [isLoading, setIsLoading] = useState(false);
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
+    const formRef = useRef(null);
 
     const setEntPage = useSetRecoilState(entPageAtom);
 
@@ -36,13 +40,9 @@ const LoginPage: React.FC = () => {
         }
     }
 
-    const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter") {
-            onFormSubmit();
-        }
-    };
+    useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
 
-    return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
+    return <div className="centeredForm" ref={formRef}> 
             {isLoading && <LoadingOverlay/>}
             <div className="form-title left-text">Login</div>
             <div className="form-input">

ui/src/configs/shortcutsKeyboard.ts

@@ -0,0 +1,7 @@
+const dictionary = {
+    ctrlEnter : [{metaKey : true, code:"Enter"}, {ctrlKey:true, code:"Enter"}], // support Ctrl/command
+    enter : [{code:"Enter"}]
+};
+
+
+export default dictionary;

ui/src/hooks/useKeyPress.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+
+const useKeyPress = (eventConfigs, callback, node = null) => {
+  // implement the callback ref pattern
+  const callbackRef = useRef(callback);
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // handle what happens on key press
+  const handleKeyPress = useCallback(
+    (event) => {
+      // check if one of the key is part of the ones we want
+      if (eventConfigs.some((eventConfig) => Object.keys(eventConfig).every(nameKey => eventConfig[nameKey] === event[nameKey]))) {
+        callbackRef.current(event);
+      }
+    },
+    [eventConfigs]
+  );
+
+  useEffect(() => {
+    // target is either the provided node or the document
+    const targetNode = node ?? document;
+    // attach the event listener
+    targetNode &&
+      targetNode.addEventListener("keydown", handleKeyPress);
+
+    // remove the event listener
+    return () =>
+      targetNode &&
+        targetNode.removeEventListener("keydown", handleKeyPress);
+  }, [handleKeyPress, node]);
+};
+
+export default useKeyPress;