open existing tab, when possible

packages/web/src/appobj/SavedFileAppObject.js

@@ -109,6 +109,8 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
         newQuery({
           title: file,
           initialData: data,
+          // @ts-ignore
+          savedFile: file,
         });
       }}
     />
@@ -131,6 +133,9 @@ export function SavedShellFileAppObject({ data, commonProps }) {
             title: file,
             icon: 'img shell',
             tabComponent: 'ShellTab',
+            props: {
+              savedFile: file,
+            },
           },
           data
         );
@@ -165,6 +170,7 @@ export function SavedChartFileAppObject({ data, commonProps }) {
             props: {
               conid: connection._id,
               database,
+              savedFile: file,
             },
             tabComponent: 'ChartTab',
           },
@@ -201,6 +207,9 @@ export function SavedMarkdownFileAppObject({ data, commonProps }) {
             title: file,
             icon: 'img markdown',
             tabComponent: 'MarkdownEditorTab',
+            props: {
+              savedFile: file,
+            },
           },
           data
         );

packages/web/src/modals/SaveTabModal.js

@@ -8,8 +8,13 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
 
-  const name = openedTabs.find((x) => x.tabid == tabid).title;
+  const { savedFile } = openedTabs.find((x) => x.tabid == tabid).props || {};
-  const onSave = (name) => changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, title: name }));
+  const onSave = (name) =>
+    changeTab(tabid, setOpenedTabs, (tab) => ({
+      ...tab,
+      title: name,
+      props: { ...tab.props, savedFile: name },
+    }));
 
   const handleKeyboard = React.useCallback(
     (e) => {
@@ -31,6 +36,13 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
   }, [tabVisible, handleKeyboard]);
 
   return (
-    <SaveFileModal data={data} folder={folder} format={format} modalState={modalState} name={name} onSave={onSave} />
+    <SaveFileModal
+      data={data}
+      folder={folder}
+      format={format}
+      modalState={modalState}
+      name={savedFile || 'newFile'}
+      onSave={onSave}
+    />
   );
 }

packages/web/src/tabs/ArchiveFileTab.js

@@ -4,3 +4,5 @@ import JslDataGrid from '../sqleditor/JslDataGrid';
 export default function ArchiveFileTab({ archiveFolder, archiveFile, tabVisible, toolbarPortalRef, tabid }) {
   return <JslDataGrid jslid={`archive://${archiveFolder}/${archiveFile}`} />;
 }
+
+ArchiveFileTab.matchingProps = ['archiveFile', 'archiveFolder'];

packages/web/src/tabs/TableDataTab.js

@@ -26,3 +26,5 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
     />
   );
 }
+
+TableDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName'];

packages/web/src/tabs/ViewDataTab.js

@@ -54,3 +54,5 @@ export default function ViewDataTab({ conid, database, schemaName, pureName, tab
       />
   );
 }
+
+ViewDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName'];

packages/web/src/utility/useOpenNewTab.js

@@ -1,13 +1,49 @@
 import uuidv1 from 'uuid/v1';
 import React from 'react';
 import localforage from 'localforage';
-import { useSetOpenedTabs } from './globalState';
+import stableStringify from 'json-stable-stringify';
+import _ from 'lodash';
+import { useOpenedTabs, useSetOpenedTabs } from './globalState';
+import tabs from '../tabs';
 
 export default function useOpenNewTab() {
   const setOpenedTabs = useSetOpenedTabs();
+  const openedTabs = useOpenedTabs();
 
   const openNewTab = React.useCallback(
     async (newTab, initialData = undefined) => {
+      let existing = null;
+
+      const { savedFile } = newTab.props || {};
+      if (savedFile) {
+        existing = openedTabs.find(
+          (x) =>
+            x.props && x.tabComponent == newTab.tabComponent && x.closedTime == null && x.props.savedFile == savedFile
+        );
+      }
+
+      const component = tabs[newTab.tabComponent];
+      if (!existing && component && component.matchingProps) {
+        const testString = stableStringify(_.pick(newTab.props || {}, component.matchingProps));
+        existing = openedTabs.find(
+          (x) =>
+            x.props &&
+            x.tabComponent == newTab.tabComponent &&
+            x.closedTime == null &&
+            stableStringify(_.pick(x.props || {}, component.matchingProps)) == testString
+        );
+      }
+
+      if (existing) {
+        setOpenedTabs((tabs) =>
+          tabs.map((x) => ({
+            ...x,
+            selected: x.tabid == existing.tabid,
+          }))
+        );
+        return;
+      }
+
       const tabid = uuidv1();
       if (initialData) {
         await localforage.setItem(`tabdata_${tabid}`, initialData);