CB-5955 Add create connection/folder actions in navigator tree (#3130)

* CB-5955 adds create menu (connection, folder)

* CB-5955 hides folder creation for non authorized users

* CB-5955 fixes label

* CB-5955 disable new connection

* CB-5955 shows create actions only for folders and connections nodes

* CB-5955 cleanup

* CB-5955 Add handler to hide create menu when no items are available

* CB-5955 Refactor handler to directly bind elementsTreeActionHandler for folder creation

* CB-5955 pr fixes

* CB-5955 creates connection according to the selected in tree project + tree selection refactor

* CB-5955 reverts old behavior with Generate SQL submenu for connections

* CB-5955 cleanup

* CB-5955 adds connection via menu into any folder

* CB-5955 updates TS references

* CB-5955 cleanup

* CB-5955 pr fixes

* CB-5955 pr fixes

* CB-5955 pr fixes

* CB-5955 cleanup

* CB-5955 fixes bug with dissapeared create connection button at top bar

* CB-5955 pr fixes

---------

Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>

webapp/packages/core-connections/src/NavTree/getFolderPath.ts

@@ -0,0 +1,12 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 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 { getFolderPathWithProjectId } from './getFolderPathWithProjectId.js';
+
+export function getFolderPath(folderId: string): string {
+  return getFolderPathWithProjectId(folderId).split('/').slice(1).join('/');
+}

webapp/packages/core-connections/src/NavTree/getFolderPathWithProjectId.ts

@@ -0,0 +1,16 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 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 { isFolderNodeId } from './isFolderNodeId.js';
+
+export function getFolderPathWithProjectId(folderId: string): string {
+  if (!isFolderNodeId(folderId)) {
+    throw new Error('Invalid folder id');
+  }
+
+  return folderId.replace('folder://', '');
+}

webapp/packages/core-connections/src/NavTree/isConnectionNode.ts

@@ -0,0 +1,14 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 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 type { NavNode } from '@cloudbeaver/core-navigation-tree';
+
+import { NAV_NODE_TYPE_CONNECTION } from './NAV_NODE_TYPE_CONNECTION.js';
+
+export function isConnectionNode(node: NavNode | undefined): boolean {
+  return node?.nodeType === NAV_NODE_TYPE_CONNECTION;
+}

webapp/packages/core-connections/src/index.ts

@@ -22,9 +22,12 @@ export * from './NavTree/ConnectionNavNodeService.js';
 export * from './NavTree/NavNodeExtensionsService.js';
 export * from './NavTree/getConnectionFolderIdFromNodeId.js';
 export * from './NavTree/getConnectionFolderId.js';
+export * from './NavTree/getFolderPathWithProjectId.js';
+export * from './NavTree/getFolderPath.js';
 export * from './NavTree/getConnectionParentId.js';
 export * from './NavTree/getFolderNodeParents.js';
 export * from './NavTree/NAV_NODE_TYPE_CONNECTION.js';
+export * from './NavTree/isConnectionNode.js';
 
 export * from './extensions/IConnectionProvider.js';
 export * from './extensions/IConnectionSetter.js';

webapp/packages/core-navigation-tree/src/NodesManager/isConnectionFolder.ts

@@ -0,0 +1,13 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 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 type { NavNode } from './EntityTypes.js';
+import { NAV_NODE_TYPE_FOLDER } from './NAV_NODE_TYPE_FOLDER.js';
+
+export function isConnectionFolder(node: NavNode | undefined): boolean {
+  return node?.nodeType === NAV_NODE_TYPE_FOLDER;
+}

webapp/packages/core-navigation-tree/src/NodesManager/isProjectNode.ts

@@ -0,0 +1,14 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 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 { NAV_NODE_TYPE_PROJECT } from '@cloudbeaver/core-projects';
+
+import type { NavNode } from './EntityTypes.js';
+
+export function isProjectNode(node: NavNode | undefined): boolean {
+  return node?.nodeType === NAV_NODE_TYPE_PROJECT;
+}

webapp/packages/core-navigation-tree/src/index.ts

@@ -24,6 +24,8 @@ export * from './NodesManager/navNodeMoveContext.js';
 export * from './NodesManager/getNodesFromContext.js';
 export * from './NodesManager/NAV_NODE_TYPE_FOLDER.js';
 export * from './NodesManager/NAV_NODE_TYPE_ROOT.js';
+export * from './NodesManager/isConnectionFolder.js';
+export * from './NodesManager/isProjectNode.js';
 
 export * from './NodesManager/ENodeFeature.js';
 export * from './NodesManager/EObjectFeature.js';

webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx

@@ -66,7 +66,7 @@ export const SubMenuElement = observer<ISubMenuElementProps, HTMLButtonElement>(
       ['handleItemClose', 'hasBindings', 'handleVisibleSwitch'],
     );
 
-    if (hidden) {
+    if (hidden || !subMenuData.items.length) {
       return null;
     }
 

webapp/packages/plugin-app-logo-administration/tsconfig.json

@@ -19,6 +19,16 @@
       "path": "../plugin-app-logo/tsconfig.json"
     }
   ],
-  "include": ["__custom_mocks__/**/*", "src/**/*", "src/**/*.json", "src/**/*.css", "src/**/*.scss"],
-  "exclude": ["**/node_modules", "lib/**/*", "dist/**/*"]
+  "include": [
+    "__custom_mocks__/**/*",
+    "src/**/*",
+    "src/**/*.json",
+    "src/**/*.css",
+    "src/**/*.scss"
+  ],
+  "exclude": [
+    "**/node_modules",
+    "lib/**/*",
+    "dist/**/*"
+  ]
 }

webapp/packages/plugin-connection-custom/package.json

@@ -20,16 +20,19 @@
   "dependencies": {
     "@cloudbeaver/core-blocks": "^0",
     "@cloudbeaver/core-connections": "^0",
+    "@cloudbeaver/core-data-context": "^0",
     "@cloudbeaver/core-di": "^0",
     "@cloudbeaver/core-dialogs": "^0",
     "@cloudbeaver/core-events": "^0",
     "@cloudbeaver/core-localization": "^0",
+    "@cloudbeaver/core-navigation-tree": "^0",
     "@cloudbeaver/core-projects": "^0",
     "@cloudbeaver/core-resource": "^0",
     "@cloudbeaver/core-settings": "^0",
     "@cloudbeaver/core-utils": "^0",
     "@cloudbeaver/core-view": "^0",
     "@cloudbeaver/plugin-connections": "^0",
+    "@cloudbeaver/plugin-navigation-tree": "^0",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^18"

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

@@ -6,13 +6,16 @@
  * you may not use this file except in compliance with the License.
  */
 import { importLazyComponent } from '@cloudbeaver/core-blocks';
-import { ConnectionsManagerService } from '@cloudbeaver/core-connections';
+import { ConnectionsManagerService, getFolderPath, isConnectionNode } from '@cloudbeaver/core-connections';
+import type { IDataContextProvider } from '@cloudbeaver/core-data-context';
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 import { CommonDialogService } from '@cloudbeaver/core-dialogs';
-import { ProjectInfoResource } from '@cloudbeaver/core-projects';
+import { DATA_CONTEXT_NAV_NODE, isConnectionFolder, isProjectNode } from '@cloudbeaver/core-navigation-tree';
+import { getProjectNodeId, ProjectInfoResource } from '@cloudbeaver/core-projects';
 import { CachedMapAllKey, getCachedMapResourceLoaderState } from '@cloudbeaver/core-resource';
-import { ActionService, MenuService } from '@cloudbeaver/core-view';
-import { MENU_CONNECTIONS } from '@cloudbeaver/plugin-connections';
+import { ActionService, type IAction, MenuService } from '@cloudbeaver/core-view';
+import { ACTION_TREE_CREATE_CONNECTION, MENU_CONNECTIONS } from '@cloudbeaver/plugin-connections';
+import { DATA_CONTEXT_ELEMENTS_TREE, MENU_NAVIGATION_TREE_CREATE, TreeSelectionService } from '@cloudbeaver/plugin-navigation-tree';
 
 import { ACTION_CONNECTION_CUSTOM } from './Actions/ACTION_CONNECTION_CUSTOM.js';
 import { CustomConnectionSettingsService } from './CustomConnectionSettingsService.js';
@@ -28,6 +31,7 @@ export class CustomConnectionPluginBootstrap extends Bootstrap {
     private readonly actionService: ActionService,
     private readonly connectionsManagerService: ConnectionsManagerService,
     private readonly customConnectionSettingsService: CustomConnectionSettingsService,
+    private readonly treeSelectionService: TreeSelectionService,
   ) {
     super();
   }
@@ -38,33 +42,70 @@ export class CustomConnectionPluginBootstrap extends Bootstrap {
       getItems: (context, items) => [...items, ACTION_CONNECTION_CUSTOM],
     });
 
-    this.actionService.addHandler({
-      id: 'connection-custom',
-      actions: [ACTION_CONNECTION_CUSTOM],
-      isHidden: (context, action) => {
-        if (this.connectionsManagerService.createConnectionProjects.length === 0) {
-          return true;
-        }
+    this.menuService.addCreator({
+      menus: [MENU_NAVIGATION_TREE_CREATE],
+      isApplicable: context => {
+        const node = context.get(DATA_CONTEXT_NAV_NODE);
 
-        if (action === ACTION_CONNECTION_CUSTOM) {
-          return this.customConnectionSettingsService.disabled;
+        if (![isConnectionNode, isConnectionFolder, isProjectNode].some(check => check(node)) || this.isConnectionFeatureDisabled(true)) {
+          return false;
         }
 
-        return false;
+        return true;
       },
+      getItems: (context, items) => [...items, ACTION_TREE_CREATE_CONNECTION],
+    });
+
+    this.actionService.addHandler({
+      id: 'nav-tree-create-create-connection-handler',
+      menus: [MENU_NAVIGATION_TREE_CREATE],
+      actions: [ACTION_TREE_CREATE_CONNECTION],
+      contexts: [DATA_CONTEXT_ELEMENTS_TREE],
       getLoader: (context, action) => getCachedMapResourceLoaderState(this.projectInfoResource, () => CachedMapAllKey),
-      handler: async (context, action) => {
-        switch (action) {
-          case ACTION_CONNECTION_CUSTOM: {
-            await this.openConnectionsDialog();
-            break;
-          }
-        }
-      },
+      handler: this.createConnectionHandler.bind(this),
     });
+
+    this.actionService.addHandler({
+      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),
+    });
+  }
+
+  private async createConnectionHandler(context: IDataContextProvider, action: IAction) {
+    switch (action) {
+      case ACTION_TREE_CREATE_CONNECTION: {
+        const tree = context.get(DATA_CONTEXT_ELEMENTS_TREE)!;
+        const projectId = this.treeSelectionService.getSelectedProject(tree)?.id;
+        const selectedNode = this.treeSelectionService.getFirstSelectedNode(tree, getProjectNodeId);
+        const folderPath = selectedNode?.folderId ? getFolderPath(selectedNode.folderId) : undefined;
+        await this.openConnectionsDialog(projectId, folderPath);
+        break;
+      }
+      case ACTION_CONNECTION_CUSTOM:
+        await this.openConnectionsDialog();
+        break;
+    }
   }
 
-  private async openConnectionsDialog() {
-    await this.commonDialogService.open(DriverSelectorDialog, null);
+  private isConnectionFeatureDisabled(hasSettings: boolean) {
+    if (this.connectionsManagerService.createConnectionProjects.length === 0) {
+      return true;
+    }
+
+    if (hasSettings) {
+      return this.customConnectionSettingsService.disabled;
+    }
+
+    return false;
+  }
+
+  private async openConnectionsDialog(projectId?: string, folderPath?: string) {
+    await this.commonDialogService.open(DriverSelectorDialog, {
+      projectId,
+      folderPath,
+    });
   }
 }

webapp/packages/plugin-connection-custom/src/DriverSelector/DriverSelectorDialog.tsx

@@ -8,7 +8,6 @@
 import { observer } from 'mobx-react-lite';
 
 import { CommonDialogBody, CommonDialogHeader, CommonDialogWrapper, s, useResource, useS, useTranslate } from '@cloudbeaver/core-blocks';
-import { DBDriverResource } from '@cloudbeaver/core-connections';
 import type { DialogComponent } from '@cloudbeaver/core-dialogs';
 import { ProjectInfoResource } from '@cloudbeaver/core-projects';
 import { CachedMapAllKey } from '@cloudbeaver/core-resource';
@@ -17,23 +16,26 @@ import { DriverSelector } from './DriverSelector.js';
 import styles from './DriverSelectorDialog.module.css';
 import { useDriverSelectorDialog } from './useDriverSelectorDialog.js';
 
-export const DriverSelectorDialog: DialogComponent<null> = observer(function DriverSelectorDialog({ rejectDialog }) {
+type Payload = {
+  projectId?: string;
+  folderPath?: string;
+};
+
+export const DriverSelectorDialog: DialogComponent<Payload> = observer(function DriverSelectorDialog({ rejectDialog, payload }) {
   const translate = useTranslate();
   const style = useS(styles);
   useResource(DriverSelectorDialog, ProjectInfoResource, CachedMapAllKey, { forceSuspense: true });
-  const dbDriverResource = useResource(DriverSelectorDialog, DBDriverResource, CachedMapAllKey);
-
-  const enabledDrivers = dbDriverResource.resource.enabledDrivers;
-  const dialog = useDriverSelectorDialog(
-    enabledDrivers.map(driver => driver.id),
-    rejectDialog,
-  );
+  const dialog = useDriverSelectorDialog({
+    projectId: payload.projectId,
+    folderPath: payload.folderPath,
+    onSelect: rejectDialog,
+  });
 
   return (
     <CommonDialogWrapper size="large" autofocus={false} fixedSize>
       <CommonDialogHeader title={translate('plugin_connections_new_connection_dialog_title')} />
       <CommonDialogBody noBodyPadding noOverflow>
-        <DriverSelector className={s(style, { driverSelector: true })} drivers={enabledDrivers} onSelect={dialog.select} />
+        <DriverSelector className={s(style, { driverSelector: true })} drivers={dialog.enabledDrivers} onSelect={dialog.select} />
       </CommonDialogBody>
     </CommonDialogWrapper>
   );

webapp/packages/plugin-connection-custom/src/DriverSelector/useDriverSelectorDialog.ts

@@ -5,42 +5,56 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { action } from 'mobx';
+import { action, observable } from 'mobx';
 
-import { useObservableRef } from '@cloudbeaver/core-blocks';
-import { ConnectionsManagerService } from '@cloudbeaver/core-connections';
+import { useObservableRef, useResource } from '@cloudbeaver/core-blocks';
+import { ConnectionsManagerService, DBDriverResource } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
+import { CachedMapAllKey } from '@cloudbeaver/core-resource';
 import { PublicConnectionFormService } from '@cloudbeaver/plugin-connections';
 
+import type { IDriver } from './Driver.js';
+
 interface State {
   select(driverId: string): Promise<void>;
+  enabledDrivers: IDriver[];
+}
+
+interface DriverSelectorDialogArgs {
+  onSelect?: () => void;
+  projectId: string | undefined;
+  folderPath: string | undefined;
 }
 
-export function useDriverSelectorDialog(drivers: string[], onSelect?: () => void) {
+export function useDriverSelectorDialog({ onSelect, projectId, folderPath }: DriverSelectorDialogArgs) {
   const notificationService = useService(NotificationService);
   const connectionsManagerService = useService(ConnectionsManagerService);
   const publicConnectionFormService = useService(PublicConnectionFormService);
+  const dbDriverResource = useResource(useDriverSelectorDialog, DBDriverResource, CachedMapAllKey);
+  const enabledDrivers = dbDriverResource.resource.enabledDrivers;
 
   const state: State = useObservableRef(
     () => ({
       async select(driverId: string) {
         const projects = this.connectionsManagerService.createConnectionProjects;
+        const drivers = this.enabledDrivers.map(driver => driver.id);
 
         if (projects.length === 0) {
           this.notificationService.logError({ title: 'core_projects_no_default_project' });
           return;
         }
 
-        const state = await this.publicConnectionFormService.open(projects[0]!.id, { driverId }, this.drivers);
+        const selectedProjectId = projects.find(project => project.id === projectId)?.id || projects[0]!.id;
+        const state = await this.publicConnectionFormService.open(selectedProjectId, { driverId, folder: folderPath }, drivers);
 
         if (state) {
           onSelect?.();
         }
       },
     }),
-    { select: action.bound },
-    { drivers, notificationService, connectionsManagerService, publicConnectionFormService },
+    { select: action.bound, enabledDrivers: observable.ref },
+    { notificationService, connectionsManagerService, publicConnectionFormService, enabledDrivers },
   );
 
   return state;

webapp/packages/plugin-connection-custom/tsconfig.json

@@ -24,6 +24,9 @@
     {
       "path": "../core-localization/tsconfig.json"
     },
+    {
+      "path": "../core-navigation-tree/tsconfig.json"
+    },
     {
       "path": "../core-projects/tsconfig.json"
     },
@@ -41,6 +44,9 @@
     },
     {
       "path": "../plugin-connections/tsconfig.json"
+    },
+    {
+      "path": "../plugin-navigation-tree/tsconfig.json"
     }
   ],
   "include": [