query - result tabs

packages/web/src/sqleditor/JslDataGrid.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import DataGrid from '../datagrid/DataGrid';
+
+export default function JslDataGrid({ jslid }) {
+  return <div>{jslid}</div>;
+  //     const display=React.useMemo(()=>)
+  //   return <DataGrid />;
+}

packages/web/src/sqleditor/ResultTabs.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TabPage, TabControl } from '../widgets/TabControl';
+import useSocket from '../utility/SocketProvider';
+import JslDataGrid from './JslDataGrid';
+
+export default function ResultTabs({ children, sessionId }) {
+  const socket = useSocket();
+  const [resultIds, setResultIds] = React.useState([]);
+
+  const handleResultSet = (props) => {
+    const { jslid } = props;
+    setResultIds((ids) => [...ids, jslid]);
+  };
+
+  React.useEffect(() => {
+    if (sessionId && socket) {
+      socket.on(`session-recordset-${sessionId}`, handleResultSet);
+      return () => {
+        socket.off(`session-recordset-${sessionId}`, handleResultSet);
+      };
+    }
+  }, [sessionId, socket]);
+
+  return (
+    <TabControl>
+      {children}
+      {resultIds.map((jslid, index) => (
+        <TabPage label={`Result ${index + 1}`} key={index}>
+          <JslDataGrid jslid={jslid} />
+        </TabPage>
+      ))}
+    </TabControl>
+  );
+}

packages/web/src/sqleditor/SqlEditor.js

@@ -28,6 +28,7 @@ export default function SqlEditor({
   readOnly = false,
   onChange = undefined,
   tabVisible = false,
+  onKeyDown = undefined,
 }) {
   const [containerRef, { height, width }] = useDimensions();
   const editorRef = React.useRef(null);
@@ -35,6 +36,16 @@ export default function SqlEditor({
   React.useEffect(() => {
     if (tabVisible && editorRef.current && editorRef.current.editor) editorRef.current.editor.focus();
   }, [tabVisible]);
+
+  React.useEffect(() => {
+    if (onKeyDown && editorRef.current) {
+      editorRef.current.editor.keyBinding.addKeyboardHandler(onKeyDown);
+    }
+    return () => {
+      editorRef.current.editor.keyBinding.removeKeyboardHandler(onKeyDown);
+    };
+  }, [onKeyDown]);
+
   return (
     <Wrapper ref={containerRef}>
       <AceEditor