clickAction refactor, settings - open detail after keyboard navigation

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -887,7 +887,35 @@
     return createDatabaseObjectMenu(data);
   }
 
-  export function handleObjectClick(data, { forceNewTab = false, tabPreviewMode = false, focusTab = false }) {
+  export function handleObjectClick(data, clickAction) {
+    //   on:click={() => handleObjectClick(data, { tabPreviewMode: true })}
+    // on:middleclick={() => handleObjectClick(data, { forceNewTab: true })}
+    // on:dblclick={() => handleObjectClick(data, { tabPreviewMode: false, focusTab: true })}
+    const openDetailOnArrows = getOpenDetailOnArrowsSettings();
+
+    let forceNewTab = false;
+    let tabPreviewMode = false;
+    let focusTab = false;
+
+    switch (clickAction) {
+      case 'leftClick':
+        tabPreviewMode = true;
+        break;
+      case 'middleClick':
+        forceNewTab = true;
+        break;
+      case 'dblClick':
+        focusTab = true;
+        break;
+      case 'keyEnter':
+        focusTab = true;
+        break;
+      case 'keyArrow':
+        if (!openDetailOnArrows) return;
+        tabPreviewMode = true;
+        break;
+    }
+
     return handleDatabaseObjectClick(data, { forceNewTab, tabPreviewMode, focusTab });
   }
 </script>
@@ -939,16 +967,12 @@
   import { openImportExportTab } from '../utility/importExportTools';
   import { defaultDatabaseObjectAppObjectActions, matchDatabaseObjectAppObject } from './appObjectTools';
   import { getSupportedScriptTemplates } from '../utility/applyScriptTemplate';
-  import { getBoolSettingsValue } from '../settings/settingsTools';
+  import { getBoolSettingsValue, getOpenDetailOnArrowsSettings } from '../settings/settingsTools';
   import { isProApp } from '../utility/proTools';
 
   export let data;
   export let passProps;
 
-  function handleClick({ forceNewTab = false, tabPreviewMode = false, focusTab = false } = {}) {
-    handleDatabaseObjectClick(data, { forceNewTab, tabPreviewMode, focusTab });
-  }
-
   function createMenu() {
     return createDatabaseObjectMenu(data, passProps?.connection);
   }
@@ -983,9 +1007,9 @@
   onUnpin={isPinned ? () => pinnedTables.update(list => list.filter(x => !testEqual(x, data))) : null}
   extInfo={getExtInfo(data)}
   isChoosed={matchDatabaseObjectAppObject($selectedDatabaseObjectAppObject, data)}
-  on:click={() => handleClick({ tabPreviewMode: true })}
+  on:click={() => handleObjectClick(data, 'leftClick')}
-  on:middleclick={() => handleClick({ forceNewTab: true })}
+  on:middleclick={() => handleObjectClick(data, 'middleClick')}
-  on:dblclick={() => handleClick({ tabPreviewMode: false, focusTab: true })}
+  on:dblclick={() => handleObjectClick(data, 'dblClick')}
   on:expand
   on:dragstart
   on:dragenter

packages/web/src/settings/SettingsModal.svelte

@@ -344,6 +344,13 @@ ORDER BY
             to open the table from the "Tables" view, a new tab is dedicated to that table.
           </div>
 
+          <FormCheckboxField
+            name="behaviour.openDetailOnArrows"
+            label="Open detail on keyboard navigation"
+            defaultValue={true}
+            disabled={values['behaviour.useTabPreviewMode'] === false}
+          />
+
           <div class="heading">Confirmations</div>
 
           <FormCheckboxField name="skipConfirm.tableDataSave" label="Skip confirmation when saving table data (SQL)" />

packages/web/src/settings/settingsTools.ts

@@ -36,3 +36,10 @@ export function getConnectionClickActionSetting(): 'connect' | 'openDetails' | '
 export function getDatabaseClickActionSetting(): 'switch' | 'none' {
   return getStringSettingsValue('defaultAction.databaseClick', 'switch');
 }
+
+export function getOpenDetailOnArrowsSettings(): boolean {
+  return (
+    getBoolSettingsValue('behaviour.useTabPreviewMode', true) &&
+    getBoolSettingsValue('behaviour.openDetailOnArrows', true)
+  );
+}

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -41,7 +41,7 @@
 
         if (listInstance[newIndex]) {
           selectedObjectStore.set(listInstance[newIndex]);
-          handleObjectClick?.(listInstance[newIndex], { tabPreviewMode: true });
+          handleObjectClick?.(listInstance[newIndex], 'keyArrow');
         }
 
         if (newIndex == 0) {
@@ -58,7 +58,7 @@
       ev.preventDefault();
     }
     if (ev.keyCode == keycodes.enter) {
-      handleObjectClick?.(getSelectedObject(), { tabPreviewMode: false, focusTab: true });
+      handleObjectClick?.(getSelectedObject(), 'keyEnter');
       ev.preventDefault();
     }
     if (ev.keyCode == keycodes.pageDown) {
@@ -72,14 +72,14 @@
     if (ev.keyCode == keycodes.home) {
       if (listInstance[0]) {
         selectedObjectStore.set(listInstance[0]);
-        handleObjectClick?.(listInstance[0], { tabPreviewMode: true });
+        handleObjectClick?.(listInstance[0], 'keyArrow');
         onScrollTop?.();
       }
     }
     if (ev.keyCode == keycodes.end) {
       if (listInstance[listInstance.length - 1]) {
         selectedObjectStore.set(listInstance[listInstance.length - 1]);
-        handleObjectClick?.(listInstance[listInstance.length - 1], { tabPreviewMode: true });
+        handleObjectClick?.(listInstance[listInstance.length - 1], 'keyArrow');
       }
     }
     if (ev.keyCode == keycodes.numPadAdd) {
@@ -110,7 +110,7 @@
     domDiv?.focus();
     if (listInstance[0]) {
       selectedObjectStore.set(listInstance[0]);
-      handleObjectClick?.(listInstance[0], { tabPreviewMode: true });
+      handleObjectClick?.(listInstance[0], 'keyArrow');
       onScrollTop?.();
     }
   }
@@ -130,7 +130,7 @@
         const index2 = _.findIndex(listInstance, x => selectedObjectMatcher(x, focused));
         if (index2 >= 0) {
           selectedObjectStore.set(focused);
-          handleObjectClick?.(focused, { tabPreviewMode: true });
+          handleObjectClick?.(focused, 'keyArrow');
           return;
         }
       }

packages/web/src/widgets/ConnectionList.svelte

@@ -40,7 +40,12 @@
   import { switchCurrentDatabase } from '../utility/common';
   import openNewTab from '../utility/openNewTab';
   import { openConnection } from '../appobj/ConnectionAppObject.svelte';
-  import { getConnectionClickActionSetting } from '../settings/settingsTools';
+  import {
+    getBoolSettingsValue,
+    getConnectionClickActionSetting,
+    getDatabaseClickActionSetting,
+    getOpenDetailOnArrowsSettings,
+  } from '../settings/settingsTools';
   import DropDownButton from '../buttons/DropDownButton.svelte';
 
   const connections = useConnectionList();
@@ -258,30 +263,35 @@
     onFocusFilterBox={text => {
       domFilter?.focus(text);
     }}
-    handleObjectClick={(data, options) => {
+    handleObjectClick={(data, clickAction) => {
       const connectionClickAction = getConnectionClickActionSetting();
+      const databaseClickAction = getDatabaseClickActionSetting();
+      const openDetailOnArrows = getOpenDetailOnArrowsSettings();
 
       if (data.database) {
-        if (options.focusTab) {
+        if (databaseClickAction == 'switch' && clickAction == 'leftClick') {
-          if ($openedSingleDatabaseConnections.includes(data.conid)) {
-            switchCurrentDatabase({ connection: data.connection, name: data.database });
-          } else {
           switchCurrentDatabase({ connection: data.connection, name: data.database });
         }
-          // console.log('FOCUSING DB', passProps);
+
-          // passProps?.onFocusSqlObjectList?.();
+        if (clickAction == 'keyEnter' || clickAction == 'dblClick') {
+          switchCurrentDatabase({ connection: data.connection, name: data.database });
         }
       } else {
-        if (options.focusTab) {
+        if (clickAction == 'keyEnter' || clickAction == 'dblClick') {
           openConnection(data.connection);
         } else {
           const config = getCurrentConfig();
-          if (config.runAsPortal == false && !config.storageDatabase && connectionClickAction == 'openDetails') {
+          if (
+            config.runAsPortal == false &&
+            !config.storageDatabase &&
+            connectionClickAction == 'openDetails' &&
+            (clickAction == 'leftClick' || (clickAction == 'keyArrow' && openDetailOnArrows))
+          ) {
             openNewTab({
               title: getConnectionLabel(data.connection),
               icon: 'img connection',
               tabComponent: 'ConnectionTab',
-              tabPreviewMode: options.tabPreviewMode,
+              tabPreviewMode: true,
               props: {
                 conid: data.conid,
               },

packages/web/src/widgets/SingleConnectionDatabaseList.svelte

@@ -13,6 +13,7 @@
   import { filterName } from 'dbgate-tools';
   import { currentDatabase, focusedConnectionOrDatabase, getFocusedConnectionOrDatabase } from '../stores';
   import { switchCurrentDatabase } from '../utility/common';
+  import { getConnectionClickActionSetting, getDatabaseClickActionSetting } from '../settings/settingsTools';
 
   export let connection;
 
@@ -81,9 +82,16 @@
     onFocusFilterBox={text => {
       domFilter?.focus(text);
     }}
-    handleObjectClick={(data, options) => {
+    handleObjectClick={(data, clickAction) => {
+      const connectionClickAction = getConnectionClickActionSetting();
+      const databaseClickAction = getDatabaseClickActionSetting();
+
       if (data.database) {
-        if (options.focusTab) {
+        if (databaseClickAction == 'switch' && clickAction == 'leftClick') {
+          switchCurrentDatabase({ connection: data.connection, name: data.database });
+        }
+
+        if (clickAction == 'keyEnter' || clickAction == 'dblClick') {
           switchCurrentDatabase({ connection: data.connection, name: data.database });
         }
       }

packages/web/src/widgets/SqlObjectList.svelte

@@ -249,7 +249,7 @@
         selectedObjectStore={selectedDatabaseObjectAppObject}
         getSelectedObject={getSelectedDatabaseObjectAppObject}
         selectedObjectMatcher={matchDatabaseObjectAppObject}
-        handleObjectClick={(data, options) => databaseObjectAppObject.handleObjectClick(data, options)}
+        handleObjectClick={(data, clickAction) => databaseObjectAppObject.handleObjectClick(data, clickAction)}
         onScrollTop={() => {
           domContainer?.scrollTop();
         }}