openNewTab refactor

packages/web/src/appobj/ArchiveFileAppObject.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
-import { openNewTab } from '../utility/common';
 import { filterName } from 'dbgate-datalib';
 import axios from '../utility/axios';
-import { useSetOpenedTabs } from '../utility/globalState';
 import { AppObjectCore } from './AppObjectCore';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
-function openArchive(setOpenedTabs, fileName, folderName) {
+function openArchive(openNewTab, fileName, folderName) {
-  openNewTab(setOpenedTabs, {
+  openNewTab({
     title: fileName,
     icon: 'img archive',
     tooltip: `${folderName}\n${fileName}`,
@@ -19,18 +18,19 @@ function openArchive(setOpenedTabs, fileName, folderName) {
   });
 }
 
-function Menu({ data, setOpenedTabs }) {
+function Menu({ data }) {
+  const openNewTab = useOpenNewTab();
   const handleDelete = () => {
     axios.post('archive/delete-file', { file: data.fileName, folder: data.folderName });
     // setOpenedTabs((tabs) => tabs.filter((x) => x.tabid != data.tabid));
   };
   const handleOpenRead = () => {
-    openArchive(setOpenedTabs, data.fileName, data.folderName);
+    openArchive(openNewTab, data.fileName, data.folderName);
   };
   const handleOpenWrite = async () => {
     // const resp = await axios.post('archive/load-free-table', { file: data.fileName, folder: data.folderName });
 
-    openNewTab(setOpenedTabs, {
+    openNewTab({
       title: data.fileName,
       icon: 'img archive',
       tabComponent: 'FreeTableTab',
@@ -59,9 +59,9 @@ function Menu({ data, setOpenedTabs }) {
 
 function ArchiveFileAppObject({ data, commonProps }) {
   const { fileName, folderName } = data;
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const onClick = () => {
-    openArchive(setOpenedTabs, fileName, folderName);
+    openArchive(openNewTab, fileName, folderName);
   };
 
   return (

packages/web/src/appobj/DatabaseAppObject.js

@@ -1,24 +1,25 @@
 import React from 'react';
 import _ from 'lodash';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
-import { openNewTab } from '../utility/common';
 import ImportExportModal from '../modals/ImportExportModal';
 import { getDefaultFileFormat } from '../utility/fileformats';
-import { useCurrentDatabase, useSetOpenedTabs } from '../utility/globalState';
+import { useCurrentDatabase } from '../utility/globalState';
 import { AppObjectCore } from './AppObjectCore';
 import useShowModal from '../modals/showModal';
 import useExtensions from '../utility/useExtensions';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 function Menu({ data }) {
   const { connection, name } = data;
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
+
   const extensions = useExtensions();
   const showModal = useShowModal();
 
   const tooltip = `${connection.displayName || connection.server}\n${name}`;
 
   const handleNewQuery = () => {
-    openNewTab(setOpenedTabs, {
+    openNewTab({
       title: 'Query',
       icon: 'img sql-file',
       tooltip,

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
-import { openNewTab } from '../utility/common';
 import { getConnectionInfo } from '../utility/metadataLoaders';
 import fullDisplayName from '../utility/fullDisplayName';
 import { filterName } from 'dbgate-datalib';
@@ -11,6 +10,7 @@ import { AppObjectCore } from './AppObjectCore';
 import useShowModal from '../modals/showModal';
 import { findEngineDriver } from 'dbgate-tools';
 import useExtensions from '../utility/useExtensions';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 const icons = {
   tables: 'img table',
@@ -100,7 +100,7 @@ const defaultTabs = {
 };
 
 export async function openDatabaseObjectDetail(
-  setOpenedTabs,
+  openNewTab,
   tabComponent,
   sqlTemplate,
   { schemaName, pureName, conid, database, objectTypeField }
@@ -111,7 +111,7 @@ export async function openDatabaseObjectDetail(
     pureName,
   })}`;
 
-  openNewTab(setOpenedTabs, {
+  openNewTab({
     title: pureName,
     tooltip,
     icon: sqlTemplate ? 'img sql-file' : icons[objectTypeField],
@@ -129,7 +129,7 @@ export async function openDatabaseObjectDetail(
 
 function Menu({ data }) {
   const showModal = useShowModal();
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const extensions = useExtensions();
 
   const getDriver = async () => {
@@ -160,7 +160,7 @@ function Menu({ data }) {
               ));
             } else if (menu.isOpenFreeTable) {
               const coninfo = await getConnectionInfo(data);
-              openNewTab(setOpenedTabs, {
+              openNewTab({
                 title: data.pureName,
                 icon: 'img free-table',
                 tabComponent: 'FreeTableTab',
@@ -183,7 +183,6 @@ function Menu({ data }) {
               const dmp = driver.createDumper();
               dmp.put('^select * from %f', data);
               openNewTab(
-                setOpenedTabs,
                 {
                   title: data.pureName,
                   icon: 'img chart',
@@ -199,7 +198,7 @@ function Menu({ data }) {
                 }
               );
             } else {
-              openDatabaseObjectDetail(setOpenedTabs, menu.tab, menu.sqlTemplate, data);
+              openDatabaseObjectDetail(openNewTab, menu.tab, menu.sqlTemplate, data);
             }
           }}
         >
@@ -212,10 +211,10 @@ function Menu({ data }) {
 
 function DatabaseObjectAppObject({ data, commonProps }) {
   const { conid, database, pureName, schemaName, objectTypeField } = data;
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const onClick = ({ schemaName, pureName }) => {
     openDatabaseObjectDetail(
-      setOpenedTabs,
+      openNewTab,
       defaultTabs[objectTypeField],
       defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',
       {

packages/web/src/appobj/SavedFileAppObject.js

@@ -4,13 +4,13 @@ import _ from 'lodash';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
 import { AppObjectCore } from './AppObjectCore';
 import useNewQuery from '../query/useNewQuery';
-import { openNewTab } from '../utility/common';
 import { useCurrentDatabase, useSetOpenedTabs } from '../utility/globalState';
 import ScriptWriter from '../impexp/ScriptWriter';
 import { extractPackageName } from 'dbgate-tools';
 import useShowModal from '../modals/showModal';
 import InputTextModal from '../modals/InputTextModal';
 import useHasPermission from '../utility/useHasPermission';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 function Menu({ data, menuExt = null }) {
   const hasPermission = useHasPermission();
@@ -68,7 +68,7 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
   const { file, folder } = data;
   const newQuery = useNewQuery();
   const currentDatabase = useCurrentDatabase();
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
 
   const connection = _.get(currentDatabase, 'connection');
   const database = _.get(currentDatabase, 'name');
@@ -85,7 +85,6 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
     script.requirePackage(extractPackageName(conn.engine));
 
     openNewTab(
-      setOpenedTabs,
       {
         title: 'Shell',
         icon: 'img shell',
@@ -118,7 +117,8 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
 
 export function SavedShellFileAppObject({ data, commonProps }) {
   const { file, folder } = data;
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
+
   return (
     <SavedFileAppObjectBase
       data={data}
@@ -127,7 +127,6 @@ export function SavedShellFileAppObject({ data, commonProps }) {
       icon="img shell"
       onLoad={(data) => {
         openNewTab(
-          setOpenedTabs,
           {
             title: file,
             icon: 'img shell',
@@ -142,7 +141,7 @@ export function SavedShellFileAppObject({ data, commonProps }) {
 
 export function SavedChartFileAppObject({ data, commonProps }) {
   const { file, folder } = data;
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
 
   const currentDatabase = useCurrentDatabase();
 
@@ -159,7 +158,6 @@ export function SavedChartFileAppObject({ data, commonProps }) {
       icon="img chart"
       onLoad={(data) => {
         openNewTab(
-          setOpenedTabs,
           {
             title: file,
             icon: 'img chart',
@@ -179,10 +177,10 @@ export function SavedChartFileAppObject({ data, commonProps }) {
 
 export function SavedMarkdownFileAppObject({ data, commonProps }) {
   const { file, folder } = data;
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
 
   const showPage = () => {
-    openNewTab(setOpenedTabs, {
+    openNewTab({
       title: file,
       icon: 'img markdown',
       tabComponent: 'MarkdownViewTab',
@@ -199,7 +197,6 @@ export function SavedMarkdownFileAppObject({ data, commonProps }) {
       icon="img markdown"
       onLoad={(data) => {
         openNewTab(
-          setOpenedTabs,
           {
             title: file,
             icon: 'img markdown',

packages/web/src/datagrid/DataGridCore.js

@@ -25,11 +25,11 @@ import InlineButton from '../widgets/InlineButton';
 import DataGridContextMenu from './DataGridContextMenu';
 import LoadingInfo from '../widgets/LoadingInfo';
 import ErrorInfo from '../widgets/ErrorInfo';
-import { openNewTab } from '../utility/common';
 import { useSetOpenedTabs } from '../utility/globalState';
 import { FontIcon } from '../icons';
 import useTheme from '../theme/useTheme';
 import { useShowMenu } from '../modals/showMenu';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -118,7 +118,7 @@ export default function DataGridCore(props) {
   } = props;
   // console.log('RENDER GRID', display.baseTable.pureName);
   const columns = React.useMemo(() => display.allColumns, [display]);
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
 
   // usePropsCompare(props);
 
@@ -335,7 +335,6 @@ export default function DataGridCore(props) {
 
   const handleOpenFreeTable = () => {
     openNewTab(
-      setOpenedTabs,
       {
         title: 'selection',
         icon: 'img free-table',
@@ -348,7 +347,6 @@ export default function DataGridCore(props) {
 
   const handleOpenChart = () => {
     openNewTab(
-      setOpenedTabs,
       {
         title: 'Chart',
         icon: 'img chart',

packages/web/src/datagrid/SqlDataGridCore.js

@@ -6,13 +6,13 @@ import useSocket from '../utility/SocketProvider';
 import useShowModal from '../modals/showModal';
 import ImportExportModal from '../modals/ImportExportModal';
 import { changeSetToSql, createChangeSet, getChangeSetInsertedRows } from 'dbgate-datalib';
-import { openNewTab } from '../utility/common';
 import LoadingDataGridCore from './LoadingDataGridCore';
 import ChangeSetGrider from './ChangeSetGrider';
 import { scriptToSql } from 'dbgate-sqltree';
 import useModalState from '../modals/useModalState';
 import ConfirmSqlModal from '../modals/ConfirmSqlModal';
 import ErrorMessageModal from '../modals/ErrorMessageModal';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 /** @param props {import('./types').DataGridProps} */
 async function loadDataPage(props, offset, limit) {
@@ -62,7 +62,7 @@ async function loadRowCount(props) {
 export default function SqlDataGridCore(props) {
   const { conid, database, display, changeSetState, dispatchChangeSet } = props;
   const showModal = useShowModal();
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
 
   const confirmSqlModalState = useModalState();
   const [confirmSql, setConfirmSql] = React.useState('');
@@ -82,7 +82,6 @@ export default function SqlDataGridCore(props) {
   }
   function openActiveChart() {
     openNewTab(
-      setOpenedTabs,
       {
         title: 'Chart',
         icon: 'img chart',
@@ -101,7 +100,7 @@ export default function SqlDataGridCore(props) {
     );
   }
   function openQuery() {
-    openNewTab(setOpenedTabs, {
+    openNewTab({
       title: 'Query',
       icon: 'img sql-file',
       tabComponent: 'QueryTab',

packages/web/src/freetable/useNewFreeTable.js

@@ -1,12 +1,11 @@
 import _ from 'lodash';
-import { useSetOpenedTabs } from '../utility/globalState';
+import useOpenNewTab from '../utility/useOpenNewTab';
-import { openNewTab } from '../utility/common';
 
 export default function useNewFreeTable() {
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
 
   return ({ title = undefined, ...props } = {}) =>
-    openNewTab(setOpenedTabs, {
+    openNewTab({
       title: title || 'Table',
       icon: 'img free-table',
       tabComponent: 'FreeTableTab',

packages/web/src/markdown/OpenChartLink.js

@@ -1,19 +1,18 @@
 import React from 'react';
 import { useCurrentDatabase, useSetOpenedTabs } from '../utility/globalState';
-import { openNewTab } from '../utility/common';
 import axios from '../utility/axios';
 import useTheme from '../theme/useTheme';
 import { StyledThemedLink } from '../widgets/FormStyledButton';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 export default function OpenChartLink({ file, children }) {
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const currentDb = useCurrentDatabase();
   const theme = useTheme();
 
   const handleClick = async () => {
     const resp = await axios.post('files/load', { folder: 'charts', file, format: 'json' });
     openNewTab(
-      setOpenedTabs,
       {
         title: file,
         icon: 'img chart',

packages/web/src/modals/ImportExportModal.js

@@ -8,7 +8,6 @@ import ModalFooter from './ModalFooter';
 import ModalContent from './ModalContent';
 import ImportExportConfigurator from '../impexp/ImportExportConfigurator';
 import createImpExpScript from '../impexp/createImpExpScript';
-import { openNewTab } from '../utility/common';
 import { useCurrentArchive, useSetCurrentArchive, useSetCurrentWidget, useSetOpenedTabs } from '../utility/globalState';
 import RunnerOutputPane from '../query/RunnerOutputPane';
 import axios from '../utility/axios';
@@ -25,6 +24,7 @@ import { getDefaultFileFormat } from '../utility/fileformats';
 import useExtensions from '../utility/useExtensions';
 import { FormProvider, useForm } from '../utility/FormProvider';
 import { FormTextField } from '../utility/forms';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 const headerHeight = '60px';
 const footerHeight = '100px';
@@ -92,14 +92,13 @@ const FooterButtons = styled.div`
 `;
 
 function GenerateSctriptButton({ modalState }) {
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const { values } = useForm();
   const extensions = useExtensions();
 
   const handleGenerateScript = async () => {
     const code = await createImpExpScript(extensions, values);
     openNewTab(
-      setOpenedTabs,
       {
         title: 'Shell',
         icon: 'img shell',

packages/web/src/plugins/PluginsList.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
-import { openNewTab } from '../utility/common';
 import { useSetOpenedTabs } from '../utility/globalState';
 import { extractPluginIcon, extractPluginAuthor } from '../plugins/manifestExtractors';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 const Wrapper = styled.div`
   margin: 1px 3px 10px 5px;
@@ -43,8 +43,8 @@ const Version = styled.div`
   margin-left: 5px;
 `;
 
-function openPlugin(setOpenedTabs, packageManifest) {
+function openPlugin(openNewTab, packageManifest) {
-  openNewTab(setOpenedTabs, {
+  openNewTab({
     title: packageManifest.name,
     icon: 'icon plugin',
     tabComponent: 'PluginTab',
@@ -55,10 +55,10 @@ function openPlugin(setOpenedTabs, packageManifest) {
 }
 
 function PluginsListItem({ packageManifest }) {
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const theme = useTheme();
   return (
-    <Wrapper onClick={() => openPlugin(setOpenedTabs, packageManifest)} theme={theme}>
+    <Wrapper onClick={() => openPlugin(openNewTab, packageManifest)} theme={theme}>
       <Icon src={extractPluginIcon(packageManifest)} />
       <Texts>
         <Line>

packages/web/src/query/useNewQuery.js

@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import { useSetOpenedTabs, useCurrentDatabase } from '../utility/globalState';
-import { openNewTab } from '../utility/common';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 export default function useNewQuery() {
-  const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const currentDatabase = useCurrentDatabase();
 
   const connection = _.get(currentDatabase, 'connection') || {};
@@ -13,7 +13,6 @@ export default function useNewQuery() {
 
   return ({ title = undefined, initialData = undefined, ...props } = {}) =>
     openNewTab(
-      setOpenedTabs,
       {
         title: title || 'Query',
         icon: 'img sql-file',

packages/web/src/tabs/MarkdownEditorTab.js

@@ -9,13 +9,14 @@ import SaveTabModal from '../modals/SaveTabModal';
 import useModalState from '../modals/useModalState';
 import LoadingInfo from '../widgets/LoadingInfo';
 import { useOpenedTabs, useSetOpenedTabs } from '../utility/globalState';
-import { openNewTab } from '../utility/common';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef, ...other }) {
   const { editorData, setEditorData, isLoading, saveToStorage } = useEditorData({ tabid });
   const saveFileModalState = useModalState();
   const openedTabs = useOpenedTabs();
   const setOpenedTabs = useSetOpenedTabs();
+  const openNewTab = useOpenNewTab();
 
   const handleKeyDown = (data, hash, keyString, keyCode, event) => {
     if (keyCode == keycodes.f5) {
@@ -36,7 +37,7 @@ export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef,
       );
     } else {
       const thisTab = (openedTabs || []).find((x) => x.tabid == tabid);
-      openNewTab(setOpenedTabs, {
+      openNewTab({
         title: thisTab.title,
         icon: 'img preview',
         tabComponent: 'MarkdownPreviewTab',

packages/web/src/utility/common.js

@@ -1,5 +1,3 @@
-import uuidv1 from 'uuid/v1';
-import localforage from 'localforage';
 
 export class LoadingToken {
   constructor() {
@@ -15,21 +13,6 @@ export function sleep(milliseconds) {
   return new Promise((resolve) => window.setTimeout(() => resolve(null), milliseconds));
 }
 
-export async function openNewTab(setOpenedTabs, newTab, initialData = undefined) {
-  const tabid = uuidv1();
-  if (initialData) {
-    await localforage.setItem(`tabdata_${tabid}`, initialData);
-  }
-  setOpenedTabs((files) => [
-    ...(files || []).map((x) => ({ ...x, selected: false })),
-    {
-      tabid,
-      selected: true,
-      ...newTab,
-    },
-  ]);
-}
-
 export function changeTab(tabid, setOpenedTabs, changeFunc) {
   setOpenedTabs((files) => files.map((tab) => (tab.tabid == tabid ? changeFunc(tab) : tab)));
 }

packages/web/src/utility/useOpenNewTab.js

@@ -0,0 +1,28 @@
+import uuidv1 from 'uuid/v1';
+import React from 'react';
+import localforage from 'localforage';
+import { useSetOpenedTabs } from './globalState';
+
+export default function useOpenNewTab() {
+  const setOpenedTabs = useSetOpenedTabs();
+
+  const openNewTab = React.useCallback(
+    async (newTab, initialData = undefined) => {
+      const tabid = uuidv1();
+      if (initialData) {
+        await localforage.setItem(`tabdata_${tabid}`, initialData);
+      }
+      setOpenedTabs((files) => [
+        ...(files || []).map((x) => ({ ...x, selected: false })),
+        {
+          tabid,
+          selected: true,
+          ...newTab,
+        },
+      ]);
+    },
+    [setOpenedTabs]
+  );
+
+  return openNewTab;
+}

packages/web/src/widgets/Toolbar.js

@@ -6,7 +6,6 @@ import ToolbarButton, { ToolbarButtonExternalImage } from './ToolbarButton';
 import useNewQuery from '../query/useNewQuery';
 import { useConfig, useMarkdownManifest } from '../utility/metadataLoaders';
 import { useSetOpenedTabs, useOpenedTabs, useCurrentTheme, useSetCurrentTheme } from '../utility/globalState';
-import { openNewTab } from '../utility/common';
 import useNewFreeTable from '../freetable/useNewFreeTable';
 import ImportExportModal from '../modals/ImportExportModal';
 import useShowModal from '../modals/showModal';
@@ -14,6 +13,7 @@ import useExtensions from '../utility/useExtensions';
 import { getDefaultFileFormat } from '../utility/fileformats';
 import getElectron from '../utility/getElectron';
 import AboutModal from '../modals/AboutModal';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -28,6 +28,7 @@ export default function ToolBar({ toolbarPortalRef }) {
   // const toolbar = config.toolbar || [];
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
+  const openNewTab = useOpenNewTab();
   const showModal = useShowModal();
   const currentTheme = useCurrentTheme();
   const setCurrentTheme = useSetCurrentTheme();
@@ -68,7 +69,7 @@ export default function ToolBar({ toolbarPortalRef }) {
   };
 
   const newMarkdown = () => {
-    openNewTab(setOpenedTabs, {
+    openNewTab({
       title: 'Page',
       tabComponent: 'MarkdownEditorTab',
       icon: 'img markdown',
@@ -88,7 +89,7 @@ export default function ToolBar({ toolbarPortalRef }) {
         }))
       );
     } else {
-      openNewTab(setOpenedTabs, {
+      openNewTab({
         title: page.button || page.file,
         tabComponent: 'MarkdownViewTab',
         icon: page.icon || 'img markdown',