diff --git a/packages/web/src/TabContent.js b/packages/web/src/TabContent.js
index f1074fe7..df68ce99 100644
--- a/packages/web/src/TabContent.js
+++ b/packages/web/src/TabContent.js
@@ -52,7 +52,7 @@ export default function TabContent({ toolbarPortalRef }) {
return (
// @ts-ignore
-
+
);
});
diff --git a/packages/web/src/query/QueryToolbar.js b/packages/web/src/query/QueryToolbar.js
new file mode 100644
index 00000000..13a23538
--- /dev/null
+++ b/packages/web/src/query/QueryToolbar.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import ToolbarButton from '../widgets/ToolbarButton'
+
+export default function QueryToolbar() {
+ return <>
+ {}}>Execute
+ >
+}
\ No newline at end of file
diff --git a/packages/web/src/query/useNewQuery.js b/packages/web/src/query/useNewQuery.js
index f7584046..123ca7d5 100644
--- a/packages/web/src/query/useNewQuery.js
+++ b/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,
+ },
});
}
diff --git a/packages/web/src/sqleditor/SqlEditor.js b/packages/web/src/sqleditor/SqlEditor.js
index 9585caa2..da8454e7 100644
--- a/packages/web/src/sqleditor/SqlEditor.js
+++ b/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 (
diff --git a/packages/web/src/tabs/QueryTab.js b/packages/web/src/tabs/QueryTab.js
index f3833a3a..8bf3a1e9 100644
--- a/packages/web/src/tabs/QueryTab.js
+++ b/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 ;
+ return (
+ <>
+
+
+ {toolbarPortalRef &&
+ toolbarPortalRef.current &&
+ tabVisible &&
+ ReactDOM.createPortal(, toolbarPortalRef.current)}
+ >
+ );
}
diff --git a/packages/web/src/utility/globalState.js b/packages/web/src/utility/globalState.js
index 08f9fd65..019b6c5c 100644
--- a/packages/web/src/utility/globalState.js
+++ b/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,