extracted getConnectionLabel functionality

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -16,6 +16,7 @@
   import openNewTab from '../utility/openNewTab';
   import { getDatabaseMenuItems } from './DatabaseAppObject.svelte';
   import getElectron from '../utility/getElectron';
+  import getConnectionLabel from '../utility/getConnectionLabel';
 
   export let data;
 
@@ -66,7 +67,7 @@
     };
     const handleDelete = () => {
       showModal(ConfirmModal, {
-        message: `Really delete connection ${data.displayName || data.server}?`,
+        message: `Really delete connection ${getConnectionLabel(data)}?`,
         onConfirm: () => axiosInstance.post('connections/delete', data),
       });
     };
@@ -74,7 +75,7 @@
       axiosInstance.post('connections/save', {
         ...data,
         _id: undefined,
-        displayName: `${data.displayName || data.server} - copy`,
+        displayName: `${getConnectionLabel(data)} - copy`,
       });
     };
     const handleCreateDatabase = () => {
@@ -90,7 +91,7 @@
       });
     };
     const handleNewQuery = () => {
-      const tooltip = `${data.displayName || data.server}`;
+      const tooltip = `${getConnectionLabel(data)}`;
       openNewTab({
         title: 'Query #',
         icon: 'img sql-file',
@@ -172,30 +173,12 @@
       statusTitle = null;
     }
   }
-
-  // const handleEdit = () => {
-  //   showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
-  // };
-  // const handleDelete = () => {
-  //   showModal(modalState => (
-  //     <ConfirmModal
-  //       modalState={modalState}
-  //       message={`Really delete connection ${data.displayName || data.server}?`}
-  //       onConfirm={() => axios.post('connections/delete', data)}
-  //     />
-  //   ));
-  // };
-  // const handleCreateDatabase = () => {
-  //   showModal(modalState => <CreateDatabaseModal modalState={modalState} conid={data._id} />);
-  // };
 </script>
 
 <AppObjectCore
   {...$$restProps}
   {data}
-  title={data.singleDatabase
+  title={getConnectionLabel(data)}
-    ? data.displayName || `${data.defaultDatabase} on ${data.server}`
-    : data.displayName || data.server}
   icon={data.singleDatabase ? 'img database' : 'img server'}
   isBold={data.singleDatabase
     ? _.get($currentDatabase, 'connection._id') == data._id && _.get($currentDatabase, 'name') == data.defaultDatabase

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -4,7 +4,7 @@
 
   export function getDatabaseMenuItems(connection, name, $extensions, $currentDatabase) {
     const handleNewQuery = () => {
-      const tooltip = `${connection.displayName || connection.server}\n${name}`;
+      const tooltip = `${getConnectionLabel(connection)}\n${name}`;
       openNewTab({
         title: 'Query #',
         icon: 'img sql-file',
@@ -66,6 +66,8 @@
 </script>
 
 <script lang="ts">
+  import getConnectionLabel from '../utility/getConnectionLabel';
+
   import _ from 'lodash';
   import ImportExportModal from '../modals/ImportExportModal.svelte';
   import { showModal } from '../modals/modalTools';

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -228,7 +228,7 @@
     initialData
   ) {
     const connection = await getConnectionInfo({ conid });
-    const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
+    const tooltip = `${getConnectionLabel(connection)}\n${database}\n${fullDisplayName({
       schemaName,
       pureName,
     })}`;
@@ -267,6 +267,7 @@
   import { findEngineDriver } from 'dbgate-tools';
   import uuidv1 from 'uuid/v1';
   import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
+import getConnectionLabel from '../utility/getConnectionLabel';
 
   export let data;
 

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -67,6 +67,7 @@
   import { currentDatabase } from '../stores';
 
   import axiosInstance from '../utility/axiosInstance';
+  import getConnectionLabel from '../utility/getConnectionLabel';
   import hasPermission from '../utility/hasPermission';
   import openNewTab from '../utility/openNewTab';
 
@@ -130,7 +131,7 @@
       const database = _.get($currentDatabase, 'name');
       connProps.conid = connection._id;
       connProps.database = database;
-      tooltip = `${connection.displayName || connection.server}\n${database}`;
+      tooltip = `${getConnectionLabel(connection)}\n${database}`;
     }
 
     openNewTab(

packages/web/src/commands/recentDatabaseSwitch.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { recentDatabases, currentDatabase, getRecentDatabases } from '../stores';
+import getConnectionLabel from '../utility/getConnectionLabel';
 import registerCommand from './registerCommand';
 
 currentDatabase.subscribe(value => {
@@ -15,7 +16,7 @@ currentDatabase.subscribe(value => {
 
 function switchDatabaseCommand(db) {
   return {
-    text: `${db.name} on ${db?.connection?.displayName || db?.connection?.server}`,
+    text: `${db.name} on ${getConnectionLabel(db?.connection, { allowExplicitDatabase: false })}`,
     onClick: () => currentDatabase.set(db),
   };
 }

packages/web/src/impexp/FormConnectionSelect.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import _ from 'lodash';
   import FormSelectField from '../forms/FormSelectField.svelte';
+  import getConnectionLabel from '../utility/getConnectionLabel';
   import { useConnectionList } from '../utility/metadataLoaders';
 
   $: connections = useConnectionList();
   $: connectionOptions = _.sortBy(
     ($connections || []).map(conn => ({
       value: conn._id,
-      label: conn.displayName || conn.server,
+      label: getConnectionLabel(conn),
     })),
     'label'
   );

packages/web/src/query/newQuery.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { get } from 'svelte/store';
 import { currentDatabase } from '../stores';
+import getConnectionLabel from '../utility/getConnectionLabel';
 import openNewTab from '../utility/openNewTab';
 
 export default function newQuery({
@@ -14,7 +15,7 @@ export default function newQuery({
   const connection = _.get($currentDatabase, 'connection') || {};
   const database = _.get($currentDatabase, 'name');
 
-  const tooltip = `${connection.displayName || connection.server}\n${database}`;
+  const tooltip = `${getConnectionLabel(connection)}\n${database}`;
 
   openNewTab(
     {

packages/web/src/utility/getConnectionLabel.ts

@@ -0,0 +1,20 @@
+export default function getConnectionLabel(connection, { allowExplicitDatabase = true } = {}) {
+  if (!connection) {
+    return null;
+  }
+  if (connection.displayName) {
+    return connection.displayName;
+  }
+  if (connection.singleDatabase && connection.server && allowExplicitDatabase && connection.defaultDatabase) {
+    return `${connection.defaultDatabase} on ${connection.server}`;
+  }
+  if (connection.databaseFile) {
+    const m = connection.databaseFile.match(/[\/]([^\/]+)$/);
+    if (m) return m[1];
+    return connection.databaseFile;
+  }
+  if (connection.server) {
+    return connection.server;
+  }
+  return '';
+}

packages/web/src/widgets/StatusBar.svelte

@@ -15,6 +15,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
 
   import { activeTabId, currentDatabase } from '../stores';
+  import getConnectionLabel from '../utility/getConnectionLabel';
   import { useDatabaseServerVersion, useDatabaseStatus } from '../utility/metadataLoaders';
 
   $: databaseName = $currentDatabase && $currentDatabase.name;
@@ -23,6 +24,7 @@
   $: serverVersion = useDatabaseServerVersion(connection ? { conid: connection._id, database: databaseName } : {});
 
   $: contextItems = $statusBarTabInfo[$activeTabId] as any[];
+  $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });
 </script>
 
 <div class="main">
@@ -33,10 +35,10 @@
         {databaseName}
       </div>
     {/if}
-    {#if connection && (connection.displayName || connection.server)}
+    {#if connectionLabel}
       <div class="item">
         <FontIcon icon="icon server" />
-        {connection.displayName || connection.server}
+        {connectionLabel}
       </div>
     {/if}
     {#if connection && connection.user}

packages/web/src/widgets/TabsPanel.svelte

@@ -49,7 +49,7 @@
     if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
     if (tab.props && tab.props.conid) {
       const connection = connectionList?.find(x => x._id == tab.props.conid);
-      if (connection) return connection.displayName || connection.server;
+      if (connection) return getConnectionLabel(connection.displayName, { allowExplicitDatabase: false });
       return '???';
     }
     if (tab.props && tab.props.archiveFolder) return tab.props.archiveFolder;
@@ -124,6 +124,7 @@
   import tabs from '../tabs';
   import { setSelectedTab } from '../utility/common';
   import contextMenu from '../utility/contextMenu';
+  import getConnectionLabel from '../utility/getConnectionLabel';
   import { getConnectionInfo, useConnectionList } from '../utility/metadataLoaders';
   import { duplicateTab } from '../utility/openNewTab';