numbering tabs

packages/web/src/appobj/DatabaseAppObject.js

@@ -20,7 +20,7 @@ function Menu({ data }) {
 
   const handleNewQuery = () => {
     openNewTab({
-      title: 'Query',
+      title: 'Query #',
       icon: 'img sql-file',
       tooltip,
       tabComponent: 'QueryTab',

packages/web/src/appobj/SavedFileAppObject.js

@@ -104,7 +104,7 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
 
     openNewTab(
       {
-        title: 'Shell',
+        title: 'Shell #',
         icon: 'img shell',
         tabComponent: 'ShellTab',
       },

packages/web/src/datagrid/DataGridCore.js

@@ -353,7 +353,7 @@ export default function DataGridCore(props) {
   const handleOpenFreeTable = () => {
     openNewTab(
       {
-        title: 'selection',
+        title: 'Data #',
         icon: 'img free-table',
         tabComponent: 'FreeTableTab',
         props: {},
@@ -365,7 +365,7 @@ export default function DataGridCore(props) {
   const handleOpenChart = () => {
     openNewTab(
       {
-        title: 'Chart',
+        title: 'Chart #',
         icon: 'img chart',
         tabComponent: 'ChartTab',
         props: {},

packages/web/src/datagrid/SqlDataGridCore.js

@@ -83,7 +83,7 @@ export default function SqlDataGridCore(props) {
   function openActiveChart() {
     openNewTab(
       {
-        title: 'Chart',
+        title: 'Chart #',
         icon: 'img chart',
         tabComponent: 'ChartTab',
         props: {
@@ -104,7 +104,7 @@ export default function SqlDataGridCore(props) {
   function openQuery() {
     openNewTab(
       {
-        title: 'Query',
+        title: 'Query #',
         icon: 'img sql-file',
         tabComponent: 'QueryTab',
         props: {

packages/web/src/freetable/useNewFreeTable.js

@@ -6,7 +6,7 @@ export default function useNewFreeTable() {
 
   return ({ title = undefined, ...props } = {}) =>
     openNewTab({
-      title: title || 'Table',
+      title: title || 'Data #',
       icon: 'img free-table',
       tabComponent: 'FreeTableTab',
       props,

packages/web/src/modals/ImportExportModal.js

@@ -100,7 +100,7 @@ function GenerateSctriptButton({ modalState }) {
     const code = await createImpExpScript(extensions, values);
     openNewTab(
       {
-        title: 'Shell',
+        title: 'Shell #',
         icon: 'img shell',
         tabComponent: 'ShellTab',
       },

packages/web/src/query/useNewQuery.js

@@ -14,7 +14,7 @@ export default function useNewQuery() {
   return ({ title = undefined, initialData = undefined, ...props } = {}) =>
     openNewTab(
       {
-        title: title || 'Query',
+        title: title || 'Query #',
         icon: 'img sql-file',
         tooltip,
         tabComponent: 'QueryTab',
@@ -40,7 +40,7 @@ export function useNewQueryDesign() {
   return ({ title = undefined, initialData = undefined, ...props } = {}) =>
     openNewTab(
       {
-        title: title || 'Query',
+        title: title || 'Query #',
         icon: 'img query-design',
         tooltip,
         tabComponent: 'QueryDesignTab',

packages/web/src/utility/useOpenNewTab.js

@@ -42,6 +42,15 @@ export default function useOpenNewTab() {
         return;
       }
 
+      // new tab will be created
+      if (newTab.title.endsWith('#')) {
+        const numbers = openedTabs
+          .filter(x => x.title && x.title.startsWith(newTab.title))
+          .map(x => parseInt(x.title.substring(newTab.title.length)));
+
+        newTab.title = `${newTab.title}${numbers.length > 0 ? _.max(numbers) + 1 : 1}`;
+      }
+
       const tabid = uuidv1();
       if (initialData) {
         for (const key of _.keys(initialData)) {
@@ -61,7 +70,7 @@ export default function useOpenNewTab() {
         },
       ]);
     },
-    [setOpenedTabs]
+    [setOpenedTabs, openedTabs]
   );
 
   return openNewTab;

packages/web/src/widgets/Toolbar.js

@@ -91,7 +91,7 @@ export default function ToolBar({ toolbarPortalRef }) {
 
   const newMarkdown = () => {
     openNewTab({
-      title: 'Page',
+      title: 'Page #',
       tabComponent: 'MarkdownEditorTab',
       icon: 'img markdown',
     });
@@ -103,7 +103,7 @@ export default function ToolBar({ toolbarPortalRef }) {
 
   const newShell = () => {
     openNewTab({
-      title: 'Shell',
+      title: 'Shell #',
       icon: 'img shell',
       tabComponent: 'ShellTab',
     });