configurable search in connections

packages/web/src/appobj/ColumnAppObject.svelte

@@ -2,7 +2,7 @@
   export const extractKey = ({ columnName }) => columnName;
 
   export const createMatcher =
-    (filter, cfg = DEFAULT_SEARCH_SETTINGS) =>
+    (filter, cfg = DEFAULT_OBJECT_SEARCH_SETTINGS) =>
     data => {
       const filterArgs = [];
       if (cfg.columnName) filterArgs.push(data.columnName);
@@ -21,7 +21,7 @@
   import { renameDatabaseObjectDialog, alterDatabaseDialog } from '../utility/alterDatabaseTools';
 
   import AppObjectCore from './AppObjectCore.svelte';
-  import { DEFAULT_SEARCH_SETTINGS } from '../stores';
+  import { DEFAULT_OBJECT_SEARCH_SETTINGS } from '../stores';
   import { filterName } from 'dbgate-tools';
 
   export let data;

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -1,12 +1,22 @@
 <script context="module">
   export const extractKey = data => data._id;
-  export const createMatcher = filter => props => {
+  export const createMatcher =
-    const { _id, displayName, server } = props;
+    (filter, cfg = DEFAULT_CONNECTION_SEARCH_SETTINGS) =>
+    props => {
+      const { _id, displayName, server, user, engine } = props;
       const databases = getLocalStorage(`database_list_${_id}`) || [];
+      const match = (engine || '').match(/^([^@]*)@/);
+      const engineDisplay = match ? match[1] : engine;
+
       return filterNameCompoud(
         filter,
-      [displayName, server],
+        [
-      databases.map(x => x.name)
+          cfg.displayName ? displayName : null,
+          cfg.server ? server : null,
+          cfg.user ? user : null,
+          cfg.engine ? engineDisplay : null,
+        ],
+        cfg.database ? databases.map(x => x.name) : []
       );
     };
   export function openConnection(connection, disableExpand = false) {
@@ -92,6 +102,7 @@
   import AppObjectCore from './AppObjectCore.svelte';
   import {
     currentDatabase,
+    DEFAULT_CONNECTION_SEARCH_SETTINGS,
     expandedConnections,
     extensions,
     focusedConnectionOrDatabase,

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -3,7 +3,7 @@
 
   export const extractKey = ({ schemaName, pureName }) => (schemaName ? `${schemaName}.${pureName}` : pureName);
   export const createMatcher =
-    (filter, cfg = DEFAULT_SEARCH_SETTINGS) =>
+    (filter, cfg = DEFAULT_OBJECT_SEARCH_SETTINGS) =>
     ({ schemaName, pureName, objectComment, tableEngine, columns, objectTypeField, createSql }) => {
       const mainArgs = [];
       const childArgs = [];
@@ -18,6 +18,8 @@
           if (cfg.columnComment) childArgs.push(column.columnComment);
           if (cfg.columnDataType) childArgs.push(column.dataType);
         }
+      } else if (objectTypeField == 'collections') {
+        if (cfg.collectionName) mainArgs.push(pureName);
       } else {
         if (cfg.sqlObjectName) mainArgs.push(pureName);
         if (cfg.sqlObjectText) childArgs.push(createSql);
@@ -895,7 +897,7 @@
   import AppObjectCore from './AppObjectCore.svelte';
   import {
     currentDatabase,
-    DEFAULT_SEARCH_SETTINGS,
+    DEFAULT_OBJECT_SEARCH_SETTINGS,
     extensions,
     getActiveTab,
     getCurrentSettings,

packages/web/src/appobj/ProcedureLineAppObject.svelte

@@ -2,7 +2,7 @@
   export const extractKey = ({ columnName }) => columnName;
 
   export const createMatcher =
-    (filter, cfg = DEFAULT_SEARCH_SETTINGS) =>
+    (filter, cfg = DEFAULT_OBJECT_SEARCH_SETTINGS) =>
     data => {
       const filterArgs = [];
       if (cfg.sqlObjectText) filterArgs.push(data.lineData);
@@ -15,7 +15,7 @@
 <script lang="ts">
   import AppObjectCore from './AppObjectCore.svelte';
   import { filterName } from 'dbgate-tools';
-  import { DEFAULT_SEARCH_SETTINGS } from '../stores';
+  import { DEFAULT_OBJECT_SEARCH_SETTINGS } from '../stores';
 
   export let data;
 </script>

packages/web/src/buttons/DropDownButton.svelte

@@ -8,6 +8,7 @@
   export let icon = 'icon chevron-down';
   export let menu;
   export let narrow = false;
+  export let square = true;
   export let disabled = false;
   let domButton;
 
@@ -21,6 +22,6 @@
   }
 </script>
 
-<InlineButton square {narrow} on:click={handleClick} bind:this={domButton} {disabled}>
+<InlineButton {square} {narrow} on:click={handleClick} bind:this={domButton} {disabled}>
   <FontIcon {icon} />
 </InlineButton>

packages/web/src/stores.ts

@@ -161,7 +161,7 @@ export const lastUsedDefaultActions = writableWithStorage({}, 'lastUsedDefaultAc
 export const selectedDatabaseObjectAppObject = writable(null);
 export const focusedConnectionOrDatabase = writable<{ conid: string; database?: string; connection: any }>(null);
 
-export const DEFAULT_SEARCH_SETTINGS = {
+export const DEFAULT_OBJECT_SEARCH_SETTINGS = {
   collectionName: true,
   schemaName: false,
   tableName: true,
@@ -175,11 +175,24 @@ export const DEFAULT_SEARCH_SETTINGS = {
   tableEngine: false,
 };
 
+export const DEFAULT_CONNECTION_SEARCH_SETTINGS = {
+  displayName: true,
+  server: true,
+  user: false,
+  engine: false,
+  database: true,
+};
+
 export const databaseObjectAppObjectSearchSettings = writableWithStorage(
-  DEFAULT_SEARCH_SETTINGS,
+  DEFAULT_OBJECT_SEARCH_SETTINGS,
   'databaseObjectAppObjectSearchSettings'
 );
 
+export const connectionAppObjectSearchSettings = writableWithStorage(
+  DEFAULT_CONNECTION_SEARCH_SETTINGS,
+  'connectionAppObjectSearchSettings'
+);
+
 export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
   $extensions.themes.find(x => x.themeClassName == $currentTheme)
 );
@@ -379,10 +392,18 @@ lastUsedDefaultActions.subscribe(value => {
 });
 export const getLastUsedDefaultActions = () => lastUsedDefaultActionsValue;
 
-let databaseObjectAppObjectSearchSettingsValue: typeof DEFAULT_SEARCH_SETTINGS = {
+let databaseObjectAppObjectSearchSettingsValue: typeof DEFAULT_OBJECT_SEARCH_SETTINGS = {
-  ...DEFAULT_SEARCH_SETTINGS,
+  ...DEFAULT_OBJECT_SEARCH_SETTINGS,
 };
 databaseObjectAppObjectSearchSettings.subscribe(value => {
   databaseObjectAppObjectSearchSettingsValue = value;
 });
 export const getDatabaseObjectAppObjectSearchSettings = () => databaseObjectAppObjectSearchSettingsValue;
+
+let connectionAppObjectSearchSettingsValue: typeof DEFAULT_CONNECTION_SEARCH_SETTINGS = {
+  ...DEFAULT_CONNECTION_SEARCH_SETTINGS,
+};
+connectionAppObjectSearchSettings.subscribe(value => {
+  connectionAppObjectSearchSettingsValue = value;
+});
+export const getConnectionAppObjectSearchSettings = () => connectionAppObjectSearchSettingsValue;

packages/web/src/widgets/ConnectionList.svelte

@@ -20,6 +20,8 @@
     getFocusedConnectionOrDatabase,
     currentDatabase,
     getCurrentConfig,
+    connectionAppObjectSearchSettings,
+    getConnectionAppObjectSearchSettings,
   } from '../stores';
   import runCommand from '../commands/runCommand';
   import { filterName, getConnectionLabel } from 'dbgate-tools';
@@ -39,6 +41,7 @@
   import openNewTab from '../utility/openNewTab';
   import { openConnection } from '../appobj/ConnectionAppObject.svelte';
   import { getConnectionClickActionSetting } from '../settings/settingsTools';
+  import DropDownButton from '../buttons/DropDownButton.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -182,6 +185,20 @@
       { text: 'Delete', onClick: handleDelete },
     ];
   }
+
+  function createSearchMenu() {
+    const res = [];
+    res.push({ label: 'Display name', switchValue: 'displayName' });
+    res.push({ label: 'Server', switchValue: 'server' });
+    res.push({ label: 'User', switchValue: 'user' });
+    res.push({ label: 'Database engine', switchValue: 'engine' });
+    res.push({ label: 'Database name', switchValue: 'database' });
+    return res.map(item => ({
+      ...item,
+      switchStore: connectionAppObjectSearchSettings,
+      switchStoreGetter: getConnectionAppObjectSearchSettings,
+    }));
+  }
 </script>
 
 <SearchBoxWrapper>
@@ -194,6 +211,7 @@
     }}
   />
   <CloseSearchButton bind:filter />
+  <DropDownButton icon="icon filter" menu={createSearchMenu} square={!!filter} narrow={false} />
   {#if $commandsCustomized['new.connection']?.enabled}
     <InlineButton
       on:click={() => runCommand('new.connection')}
@@ -289,6 +307,7 @@
         ...passProps,
         connectionColorFactory: $connectionColorFactory,
         showPinnedInsteadOfUnpin: true,
+        searchSettings: $connectionAppObjectSearchSettings,
       }}
       getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
       setIsExpanded={(data, value) => {
@@ -316,6 +335,7 @@
       passProps={{
         connectionColorFactory: $connectionColorFactory,
         showPinnedInsteadOfUnpin: true,
+        searchSettings: $connectionAppObjectSearchSettings,
       }}
       getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
       setIsExpanded={(data, value) => {

packages/web/src/widgets/SqlObjectList.svelte

@@ -130,7 +130,7 @@
   function createSearchMenu() {
     const res = [];
     if (driver?.databaseEngineTypes?.includes('document')) {
-      res.push({ label: 'Collection names' });
+      res.push({ label: 'Collection names', switchValue: 'collectionName' });
     }
     if (driver?.databaseEngineTypes?.includes('sql')) {
       res.push({ label: 'Schema name', switchValue: 'schemaName' });
@@ -216,7 +216,7 @@
       }}
     />
     <CloseSearchButton bind:filter />
-    <DropDownButton icon="icon filter" menu={createSearchMenu} />
+    <DropDownButton icon="icon filter" menu={createSearchMenu} square={!!filter} narrow={false} />
     {#if !filter}
       <DropDownButton icon="icon plus-thick" menu={createAddMenu} />
     {/if}