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) {
-  openNewTab(setOpenedTabs, {
+function openArchive(openNewTab, fileName, folderName) {
+  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',