query - basic print workflow - messages on client

packages/web/src/query/MessagesView.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default function MessagesView({ items }) {
+  return (
+    <table>
+      <tr>
+        <th>Number</th>
+        <th>Message</th>
+        <th>Time</th>
+        <th>Procedure</th>
+        <th>Line</th>
+      </tr>
+      {items.map((row, index) => (
+        <tr key={index}>
+          <td>{index + 1}</td>
+          <td>{row.message}</td>
+          <td>{row.time}</td>
+          <td>{row.procedure}</td>
+          <td>{row.line}</td>
+        </tr>
+      ))}
+    </table>
+  );
+}

packages/web/src/query/QueryToolbar.js

@@ -1,8 +1,10 @@
-import React from 'react'
-import ToolbarButton from '../widgets/ToolbarButton'
+import React from 'react';
+import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function QueryToolbar() {
-    return <>
-        <ToolbarButton onClick={()=>{}}>Execute</ToolbarButton>
+export default function QueryToolbar({ execute,isDatabaseDefined }) {
+  return (
+    <>
+      <ToolbarButton disabled={!isDatabaseDefined} onClick={execute}>Execute</ToolbarButton>
     </>
-}
+  );
+}

packages/web/src/query/SessionMessagesView.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import MessagesView from './MessagesView';
+import useSocket from '../utility/SocketProvider';
+
+export default function SessionMessagesView({ sessionId }) {
+  const [messages, setMessages] = React.useState([]);
+  const socket = useSocket();
+
+  const handleInfo = React.useCallback((info) => setMessages((items) => [...items, info]), []);
+
+  React.useEffect(() => {
+    if (sessionId && socket) {
+      socket.on(`session-info-${sessionId}`, handleInfo);
+      return () => {
+        socket.off(`session-info-${sessionId}`, handleInfo);
+      };
+    }
+  }, [sessionId, socket]);
+
+  return <MessagesView items={messages} />;
+}