UI Splitting to common components (#883)

* initial commit

* removing files

* after pr

* move StatusBar to common

* last changes from dev

* update common-ui

* webSocket was added to TrafficViewerApi

* useWS

* actionButtons added to TrafficV

* comment clean

* api clean up

* api clean up

* statusbar position changed

* Checkbox changed

* AnalyzeButton exported to common

* CustomModal added from Ent

* oas modal exported to common

* removed redundant

* oasmodal usage

* es6 function

* api changed

* removed react-scripts

Co-authored-by: Leon <>

ui-common/src/hooks/useKeyPress.ts

@@ -0,0 +1,38 @@
+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]))) {
+        event.stopPropagation()
+        event.preventDefault();
+        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;

ui-common/src/hooks/useWS.tsx

@@ -0,0 +1,48 @@
+import { useState, useRef } from "react";
+
+enum WebSocketReadyState {
+  CONNECTING,
+  OPEN,
+  CLOSING,
+  CLOSED
+}
+
+export const DEFAULT_QUERY = "leftOff(-1)";
+
+const useWS = (wsUrl: string) => {
+  const [message, setMessage] = useState(null);
+  const [error, setError] = useState(null);
+  const [isOpen, setisOpen] = useState(false);
+  const ws = useRef(null);
+
+  const onMessage = (e) => { setMessage(e) }
+  const onError = (e) => setError(e)
+  const onOpen = () => { setisOpen(true) }
+  const onClose = () => setisOpen(false)
+
+  const openSocket = () => {
+    ws.current = new WebSocket(wsUrl)
+    ws.current.addEventListener("message", onMessage)
+    ws.current.addEventListener("error", onError)
+    ws.current.addEventListener("open", onOpen)
+    ws.current.addEventListener("close", onClose)
+  }
+
+  const closeSocket = () => {
+    ws.current.readyState === WebSocketReadyState.OPEN && ws.current.close();
+    ws.current.removeEventListener("message", onMessage)
+    ws.current.removeEventListener("error", onError)
+    ws.current.removeEventListener("open", onOpen)
+    ws.current.removeEventListener("close", onClose)
+  }
+
+  const sendQuery = (query: string) => {
+    if (ws.current && (ws.current.readyState === WebSocketReadyState.OPEN)) {
+      ws.current.send(JSON.stringify({ "query": query, "enableFullEntries": false }));
+    }
+  }
+
+  return { message, error, isOpen, openSocket, closeSocket, sendQuery }
+}
+
+export default useWS