dbeaver/pro#6744 fix: elements order

webapp/common-react/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "arcanis.vscode-zipfs",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

webapp/common-react/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "eslint.nodePath": "../.yarn/sdks",
+  "prettier.prettierPath": "../.yarn/sdks/prettier/index.cjs",
+  "typescript.tsdk": "../.yarn/sdks/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

webapp/common-typescript/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "arcanis.vscode-zipfs",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

webapp/common-typescript/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "eslint.nodePath": "../.yarn/sdks",
+  "prettier.prettierPath": "../.yarn/sdks/prettier/index.cjs",
+  "typescript.tsdk": "../.yarn/sdks/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

webapp/packages/plugin-connection-custom/src/CustomConnectionPluginBootstrap.ts

@@ -52,12 +52,12 @@
     this.navigationTabsService.welcomeContainer.add(WelcomeNewConnection, undefined, () => this.isConnectionFeatureDisabled(true));
     this.menuService.addCreator({
       menus: [MENU_CONNECTIONS],
-      getItems: (context, items) => [...items, ACTION_CONNECTION_CUSTOM],
+      getItems: (context, items) => [ACTION_CONNECTION_CUSTOM, ...items],
     });
 
     this.menuService.addCreator({
       menus: [MENU_TREE_CREATE_CONNECTION],
-      getItems: (context, items) => [...items, ACTION_TREE_CREATE_CONNECTION],
+      getItems: (context, items) => [ACTION_TREE_CREATE_CONNECTION, ...items],
       isApplicable: () => !this.isConnectionFeatureDisabled(true),
     });
 
@@ -81,7 +81,7 @@
 
         return true;
       },
-      getItems: (context, items) => [...items, ACTION_TREE_CREATE_CONNECTION],
+      getItems: (context, items) => [ACTION_TREE_CREATE_CONNECTION, ...items],
     });
 
     this.actionService.addHandler({
@@ -94,7 +94,7 @@
         }
         return action.info;
       },
       getLoader: (context, action) => getCachedMapResourceLoaderState(this.projectInfoResource, () => CachedMapAllKey),
       handler: this.createConnectionHandler.bind(this),
     });
 
@@ -102,7 +102,7 @@
       id: 'connection-custom',
       actions: [ACTION_CONNECTION_CUSTOM],
       isHidden: (context, action) => this.isConnectionFeatureDisabled(action === ACTION_CONNECTION_CUSTOM),
       getLoader: (context, action) => getCachedMapResourceLoaderState(this.projectInfoResource, () => CachedMapAllKey),
       handler: this.createConnectionHandler.bind(this),
     });
   }

webapp/packages/plugin-connection-search/src/SearchConnectionPluginBootstrap.ts

@@ -10,7 +10,7 @@ import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 import { ProjectInfoResource } from '@cloudbeaver/core-projects';
 import { CachedMapAllKey, getCachedMapResourceLoaderState } from '@cloudbeaver/core-resource';
 import { EAdminPermission, PermissionsService } from '@cloudbeaver/core-root';
-import { ActionService, MenuService } from '@cloudbeaver/core-view';
+import { ActionService, menuExtractItems, MenuService } from '@cloudbeaver/core-view';
 import { MENU_CONNECTIONS, MENU_TREE_CREATE_CONNECTION } from '@cloudbeaver/plugin-connections';
 
 import { ACTION_CONNECTION_SEARCH } from './Actions/ACTION_CONNECTION_SEARCH.js';
@@ -43,6 +43,13 @@ export class SearchConnectionPluginBootstrap extends Bootstrap {
     this.menuService.addCreator({
       menus: [MENU_CONNECTIONS, MENU_TREE_CREATE_CONNECTION],
       getItems: (context, items) => [...items, ACTION_CONNECTION_SEARCH],
+      orderItems: (context, items) => {
+        const actions = menuExtractItems(items, [ACTION_CONNECTION_SEARCH]);
+
+        items.push(...actions);
+
+        return items;
+      },
     });
 
     this.actionService.addHandler({

webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts

@@ -5,7 +5,6 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import React from 'react';
 
 import { DBDriverResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections';
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
@@ -14,15 +13,10 @@ import { DriverConfigurationType } from '@cloudbeaver/core-sdk';
 import { ConnectionFormService } from '../ConnectionFormService.js';
 import { getConnectionFormOptionsPart } from '../Options/getConnectionFormOptionsPart.js';
 import { getCachedMapResourceLoaderState } from '@cloudbeaver/core-resource';
+import { importLazyComponent } from '@cloudbeaver/core-blocks';
 
-const SSHTab = React.lazy(async () => {
-  const { SSHTab } = await import('./SSHTab.js');
-  return { default: SSHTab };
-});
-const SSHPanel = React.lazy(async () => {
-  const { SSHPanel } = await import('./SSHPanel.js');
-  return { default: SSHPanel };
-});
+const SSHTab = importLazyComponent(() => import('./SSHTab.js').then(m => m.SSHTab));
+const SSHPanel = importLazyComponent(() => import('./SSHPanel.js').then(m => m.SSHPanel));
 
 @injectable(() => [DBDriverResource, ConnectionFormService])
 export class ConnectionSSHTabService extends Bootstrap {
@@ -37,7 +31,7 @@ export class ConnectionSSHTabService extends Bootstrap {
     this.connectionFormService.parts.add({
       key: 'ssh',
       name: 'plugin_connections_connection_form_part_main',
-      order: 3,
+      order: 2.5,
       tab: () => SSHTab,
       panel: () => SSHPanel,
       getLoader: (_, props) => {

webapp/packages/plugin-datasource-transaction-manager/package.json

@@ -39,6 +39,7 @@
     "@cloudbeaver/plugin-data-grid": "workspace:*",
     "@cloudbeaver/plugin-datasource-context-switch": "workspace:*",
     "@cloudbeaver/plugin-sql-editor-new": "workspace:*",
+    "@cloudbeaver/plugin-tools-panel": "workspace:*",
     "@cloudbeaver/plugin-top-app-bar": "workspace:*",
     "@dbeaver/js-helpers": "workspace:^",
     "mobx": "^6",

webapp/packages/plugin-datasource-transaction-manager/src/TransactionManagerBootstrap.ts

@@ -24,9 +24,10 @@
 import { LocalizationService } from '@cloudbeaver/core-localization';
 import { OptionsPanelService } from '@cloudbeaver/core-ui';
 import { isNotNullDefined } from '@dbeaver/js-helpers';
-import { ActionService, MenuCustomItem, MenuService } from '@cloudbeaver/core-view';
+import { ActionService, MenuCustomItem, menuExtractItems, MenuService } from '@cloudbeaver/core-view';
 import { ConnectionSchemaManagerService } from '@cloudbeaver/plugin-datasource-context-switch';
 import { MENU_APP_ACTIONS } from '@cloudbeaver/plugin-top-app-bar';
+import { MENU_TOOLS } from '@cloudbeaver/plugin-tools-panel';
 
 import { ACTION_DATASOURCE_TRANSACTION_COMMIT } from './actions/ACTION_DATASOURCE_TRANSACTION_COMMIT.js';
 import { ACTION_DATASOURCE_TRANSACTION_COMMIT_MODE_TOGGLE } from './actions/ACTION_DATASOURCE_TRANSACTION_COMMIT_MODE_TOGGLE.js';
@@ -77,7 +78,7 @@
     super();
   }
 
   override register() {
     this.connectionsManagerService.onDisconnect.addHandler(this.disconnectHandler.bind(this));
 
     this.menuService.addCreator({
@@ -125,6 +126,26 @@
 
         return result;
       },
+      orderItems: (context, items) => {
+        const actions = menuExtractItems(items, [
+          ACTION_DATASOURCE_TRANSACTION_COMMIT,
+          ACTION_DATASOURCE_TRANSACTION_ROLLBACK,
+          ACTION_DATASOURCE_TRANSACTION_COMMIT_MODE_TOGGLE,
+        ]);
+
+        const infoElementIndex = items.findIndex(item => item.id === 'transaction-info');
+
+        if (infoElementIndex !== -1) {
+          actions.push(...items.splice(infoElementIndex, 1));
+        }
+
+        if (actions.length > 0) {
+          const toolsItem = items.indexOf(MENU_TOOLS);
+          items.splice(toolsItem === -1 ? items.length : toolsItem + 1, 0, ...actions);
+        }
+
+        return items;
+      },
     });
 
     this.actionService.addHandler({

webapp/packages/plugin-datasource-transaction-manager/tsconfig.json

@@ -67,6 +67,9 @@
     {
       "path": "../plugin-sql-editor-new"
     },
+    {
+      "path": "../plugin-tools-panel"
+    },
     {
       "path": "../plugin-top-app-bar"
     }

webapp/packages/plugin-sql-editor-navigation-tab/src/SqlEditorBootstrap.ts

@@ -23,7 +23,7 @@ import { ExtensionUtils } from '@cloudbeaver/core-extensions';
 import { LocalizationService } from '@cloudbeaver/core-localization';
 import { DATA_CONTEXT_NAV_NODE, EObjectFeature, NodeManagerUtils } from '@cloudbeaver/core-navigation-tree';
 import { type ISessionAction, sessionActionContext, SessionActionService } from '@cloudbeaver/core-root';
-import { ACTION_RENAME, ActionService, menuExtractItems, MenuService, ViewService } from '@cloudbeaver/core-view';
+import { ACTION_OPEN, ACTION_RENAME, ActionService, menuExtractItems, MenuService, ViewService } from '@cloudbeaver/core-view';
 import { MENU_CONNECTIONS } from '@cloudbeaver/plugin-connections';
 import { NavigationTabsService } from '@cloudbeaver/plugin-navigation-tabs';
 import {
@@ -118,6 +118,15 @@ export class SqlEditorBootstrap extends Bootstrap {
         return true;
       },
       getItems: (context, items) => [...items, ACTION_SQL_EDITOR_OPEN],
+      orderItems: (context, items) => {
+        const actions = menuExtractItems(items, [ACTION_OPEN, ACTION_SQL_EDITOR_OPEN]);
+
+        if (actions.length > 0) {
+          items.unshift(...actions);
+        }
+
+        return items;
+      },
     });
 
     this.actionService.addHandler({

webapp/packages/plugin-tools-panel/src/PluginBootstrap.ts

@@ -1,24 +1,21 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2025 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import React from 'react';
 
 import { AppScreenService } from '@cloudbeaver/core-app';
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 import { MenuService } from '@cloudbeaver/core-view';
 import { MENU_APP_ACTIONS } from '@cloudbeaver/plugin-top-app-bar';
+import { importLazyComponent } from '@cloudbeaver/core-blocks';
 
 import { MENU_TOOLS } from './Menu/MENU_TOOLS.js';
 import { ToolsPanelService } from './ToolsPanel/ToolsPanelService.js';
 
-const ToolsPanel = React.lazy(async () => {
-  const { ToolsPanel } = await import('./ToolsPanel/ToolsPanel.js');
-  return { default: ToolsPanel };
-});
+const ToolsPanel = importLazyComponent(() => import('./ToolsPanel/ToolsPanel.js').then(module => module.ToolsPanel));
 
 @injectable(() => [AppScreenService, MenuService, ToolsPanelService])
 export class PluginBootstrap extends Bootstrap {

webapp/yarn.lock

@@ -2996,6 +2996,7 @@ __metadata:
     "@cloudbeaver/plugin-data-grid": "workspace:*"
     "@cloudbeaver/plugin-datasource-context-switch": "workspace:*"
     "@cloudbeaver/plugin-sql-editor-new": "workspace:*"
+    "@cloudbeaver/plugin-tools-panel": "workspace:*"
     "@cloudbeaver/plugin-top-app-bar": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@dbeaver/js-helpers": "workspace:^"