query - saving to local storage

packages/web/src/TabContent.js

@@ -52,7 +52,7 @@ export default function TabContent({ toolbarPortalRef }) {
     return (
       // @ts-ignore
       <TabContainer key={tabid} tabVisible={tabVisible}>
-        <TabComponent {...props} tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef} />
+        <TabComponent {...props} tabid={tabid} tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef} />
       </TabContainer>
     );
   });

packages/web/src/query/QueryToolbar.js

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

packages/web/src/query/useNewQuery.js

@@ -1,19 +1,25 @@
-import { useSetOpenedTabs } from '../utility/globalState';
+import _ from 'lodash';
+import { useSetOpenedTabs, useCurrentDatabase } from '../utility/globalState';
 import { openNewTab } from '../utility/common';
 
 export default function useNewQuery() {
   const setOpenedTabs = useSetOpenedTabs();
+  const currentDatabase = useCurrentDatabase();
+
+  const connection = _.get(currentDatabase, 'connection') || {};
+  const database = _.get(currentDatabase, 'name');
+
+  const tooltip = `${connection.displayName || connection.server}\n${database}`;
 
   return () =>
     openNewTab(setOpenedTabs, {
       title: 'Query',
       icon: 'sql.svg',
+      tooltip,
       tabComponent: 'QueryTab',
-      // props: {
-      //   schemaName,
-      //   pureName,
-      //   conid,
-      //   database,
-      // },
+      props: {
+        conid: connection._id,
+        database,
+      },
     });
 }

packages/web/src/sqleditor/SqlEditor.js

@@ -33,8 +33,7 @@ export default function SqlEditor({
   const editorRef = React.useRef(null);
 
   React.useEffect(() => {
-    console.log('editorRef.current', editorRef.current);
-    if (tabVisible) editorRef.current.editor.focus();
+    if (tabVisible && editorRef.current && editorRef.current.editor) editorRef.current.editor.focus();
   }, [tabVisible]);
   return (
     <Wrapper ref={containerRef}>

packages/web/src/tabs/QueryTab.js

@@ -1,23 +1,47 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+import _ from 'lodash';
 import engines from '@dbgate/engines';
 import useTableInfo from '../utility/useTableInfo';
 import useConnectionInfo from '../utility/useConnectionInfo';
 import SqlEditor from '../sqleditor/SqlEditor';
+import { useUpdateDatabaseForTab } from '../utility/globalState';
+import QueryToolbar from '../query/QueryToolbar';
 
-export default function QueryTab({ conid, database, schemaName, pureName, tabVisible }) {
-  const [queryText, setQueryText] = React.useState('');
-  //   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
-  //   const connnection = useConnectionInfo(conid);
-  //   if (!connnection || !tableInfo) return null;
-  //   // console.log(tableInfo);
+export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPortalRef }) {
+  const localStorageKey = `sql_${tabid}`;
+  const [queryText, setQueryText] = React.useState(() => localStorage.getItem(localStorageKey) || '');
+  const queryTextRef = React.useRef(queryText);
 
-  //   const driver = engines(connnection.engine);
-  //   const dmp = driver.createDumper();
-  //   if (tableInfo) dmp.createTable(tableInfo);
+  const saveToStorage = React.useCallback(() => localStorage.setItem(localStorageKey, queryTextRef.current), [
+    localStorageKey,
+    queryTextRef,
+  ]);
+  const saveToStorageDebounced = React.useMemo(() => _.debounce(saveToStorage, 5000), [saveToStorage]);
+
+  React.useEffect(() => {
+    window.addEventListener('beforeunload', saveToStorage);
+    return () => {
+      window.removeEventListener('beforeunload', saveToStorage);
+    };
+  }, []);
+
+  useUpdateDatabaseForTab(tabVisible, conid, database);
 
   const handleChange = text => {
+    if (text != null) queryTextRef.current = text;
     setQueryText(text);
+    saveToStorageDebounced();
   };
 
-  return <SqlEditor value={queryText} onChange={handleChange} tabVisible={tabVisible} />;
+  return (
+    <>
+      <SqlEditor value={queryText} onChange={handleChange} tabVisible={tabVisible} />
+
+      {toolbarPortalRef &&
+        toolbarPortalRef.current &&
+        tabVisible &&
+        ReactDOM.createPortal(<QueryToolbar />, toolbarPortalRef.current)}
+    </>
+  );
 }

packages/web/src/utility/globalState.js

@@ -65,8 +65,10 @@ export { OpenedTabsProvider, useOpenedTabs, useSetOpenedTabs };
 export function useUpdateDatabaseForTab(tabVisible, conid, database) {
   const connection = useConnectionInfo(conid);
   const setDb = useSetCurrentDatabase();
-
   const previousTabVisible = usePrevious(!!(tabVisible && connection));
+
+  if (!conid || !database) return;
+
   if (!previousTabVisible && tabVisible && connection) {
     setDb({
       name: database,