SYNC: [skip ci] Show server name alongside database name in title of the tab group #1041

packages/web/src/settings/SettingsModal.svelte

@@ -121,6 +121,8 @@ ORDER BY
             {/if}
           {/if}
 
+          <FormCheckboxField name="tabGroup.showServerName" label="Show server name alongside database name in title of the tab group" defaultValue={false} />
+
           <div class="heading">Data grid</div>
           <FormTextField
             name="dataGrid.pageSize"

packages/web/src/tabpanel/TabsPanel.svelte

@@ -196,6 +196,15 @@
     return '(no DB)';
   }
 
+  function getTabDbServer(tab, connectionList) {
+    if (tab.props && tab.props.conid && tab.props.database) {
+      const connection = connectionList?.find(x => x._id == tab.props.conid);
+      if (connection) return getConnectionLabel(connection, { allowExplicitDatabase: false });
+      return null;
+    }
+    return null;
+  }
+
   function getDbIcon(key) {
     if (key) {
       if (key.startsWith('database://')) return 'icon database';
@@ -330,7 +339,7 @@
   import { setSelectedTab, switchCurrentDatabase } from '../utility/common';
   import contextMenu from '../utility/contextMenu';
   import { isElectronAvailable } from '../utility/getElectron';
-  import { getConnectionInfo, useConnectionList } from '../utility/metadataLoaders';
+  import { getConnectionInfo, useConnectionList, useSettings } from '../utility/metadataLoaders';
   import { duplicateTab, getTabDbKey, sortTabs, groupTabs } from '../utility/openNewTab';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
   import TabCloseButton from '../elements/TabCloseButton.svelte';
@@ -338,6 +347,7 @@
   import SwitchDatabaseModal from '../modals/SwitchDatabaseModal.svelte';
   import { getConnectionLabel } from 'dbgate-tools';
   import { handleAfterTabClick } from '../utility/changeCurrentDbByTab';
+  import { getBoolSettingsValue } from '../settings/settingsTools';
 
   export let multiTabIndex;
   export let shownTab;
@@ -357,6 +367,7 @@
     ...tab,
     tabDbName: getTabDbName(tab, $connectionList),
     tabDbKey: getTabDbKey(tab),
+    tabDbServer: getTabDbServer(tab, $connectionList),
   }));
 
   $: groupedTabs = groupTabs(tabsWithDb);
@@ -370,6 +381,8 @@
   $: allowSplitTab =
     _.uniq(filteredTabsFromAllParts.map(x => x.multiTabIndex || 0)).length == 1 && filteredTabsFromAllParts.length >= 2;
 
+  $: settings = useSettings();
+
   const connectionColorFactory = useConnectionColorFactory(3, null, true);
 
   const handleTabClick = (e, tabid) => {
@@ -595,6 +608,10 @@
             }}
           >
             <div class="db-name-inner">
+              {#if $settings?.['tabGroup.showServerName'] && tabGroup.tabDbServer}
+                <FontIcon icon="icon server" />
+                {tabGroup.tabDbServer}
+              {/if}
               <FontIcon icon={getDbIcon(tabGroup.tabDbKey)} />
               {tabGroup.tabDbName}
               {#if $connectionList?.find(x => x._id == tabGroup.tabs[0]?.props?.conid)?.isReadOnly}

packages/web/src/utility/openNewTab.ts

@@ -209,6 +209,7 @@ export function groupTabs(tabs: any[]) {
       res.push({
         tabDbKey: tab.tabDbKey,
         tabDbName: tab.tabDbName,
+        tabDbServer: tab.tabDbServer,
         tabs: [tab],
         grpid: tab.tabid,
       });