Merge branch 'devel' into CB-5074-error-on-start

webapp/packages/core-blocks/src/Menu/Menu.tsx

@@ -16,7 +16,7 @@ import { useCombinedRef } from '../useCombinedRef.js';
 import { useObjectRef } from '../useObjectRef.js';
 import { useS } from '../useS.js';
 import style from './Menu.module.css';
-import { type IMenuPanelProps, MenuPanel } from './MenuPanel.js';
+import { MenuPanel } from './MenuPanel.js';
 import { type IMenuState, MenuStateContext } from './MenuStateContext.js';
 import type { IMouseContextMenu } from './useMouseContextMenu.js';
 
@@ -33,7 +33,6 @@ interface IMenuProps extends React.ButtonHTMLAttributes<any> {
   rtl?: boolean;
   hasBindings?: boolean;
   panelAvailable?: boolean;
-  panelProps?: Partial<IMenuPanelProps>;
   getHasBindings?: () => boolean;
   onVisibleSwitch?: (visible: boolean) => void;
 }
@@ -56,7 +55,6 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
       modal,
       submenu,
       rtl,
-      panelProps,
       className,
       ...props
     },
@@ -155,7 +153,6 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
               panelAvailable={panelAvailable}
               hasBindings={hasBindings}
               getHasBindings={getHasBindings}
-              {...panelProps}
             >
               {items}
             </MenuPanel>
@@ -190,7 +187,6 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
             panelAvailable={panelAvailable}
             hasBindings={hasBindings}
             getHasBindings={getHasBindings}
-            {...panelProps}
           >
             {items}
           </MenuPanel>

webapp/packages/core-blocks/src/Menu/MenuPanel.tsx

@@ -17,7 +17,7 @@ import { useS } from '../useS.js';
 import { MenuEmptyItem } from './MenuEmptyItem.js';
 import style from './MenuPanel.module.css';
 
-export interface IMenuPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface IMenuPanelProps {
   label: string;
   menu: MenuStateReturn; // from reakit useMenuState
   panelAvailable?: boolean;
@@ -26,13 +26,11 @@ export interface IMenuPanelProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   children: React.ReactNode | (() => React.ReactNode);
   rtl?: boolean;
   submenu?: boolean;
+  className?: string;
 }
 
 export const MenuPanel = observer<IMenuPanelProps, HTMLDivElement>(
-  forwardRef(function MenuPanel(
-    { label, menu, submenu, panelAvailable = true, rtl, getHasBindings, hasBindings, children, className, ...rest },
-    ref,
-  ) {
+  forwardRef(function MenuPanel({ label, menu, submenu, panelAvailable = true, rtl, getHasBindings, hasBindings, children, className }, ref) {
     const translate = useTranslate();
     const styles = useS(style);
     const visible = menu.visible;
@@ -57,7 +55,6 @@ export const MenuPanel = observer<IMenuPanelProps, HTMLDivElement>(
           {...menu}
           aria-label={translate(label)}
           visible={panelAvailable}
-          {...rest}
         >
           <div dir={rtl ? 'rtl' : undefined} data-s-has-bindings={hasBindings} className={s(styles, { menuBox: true })}>
             {Children.count(renderedChildren) === 0 && <MenuEmptyItem />}

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/ContextMenu.tsx

@@ -17,7 +17,7 @@ import { MenuItemRenderer } from './MenuItemRenderer.js';
 // TODO the click doesn't work for React components as children
 export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
   forwardRef(function ContextMenu(
-    { mouseContextMenu, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, panelProps, ...props },
+    { mouseContextMenu, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, ...props },
     ref,
   ) {
     const translate = useTranslate();
@@ -82,7 +82,6 @@ export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
         placement={placement}
         disabled={disabled}
         disclosure={disclosure}
-        panelProps={panelProps}
         getHasBindings={handlers.hasBindings}
         onVisibleSwitch={handlers.handleVisibleSwitch}
       >

webapp/packages/core-ui/src/ContextMenu/IContextMenuProps.ts

@@ -8,7 +8,7 @@
 import type { ButtonHTMLAttributes } from 'react';
 import type { MenuInitialState } from 'reakit';
 
-import type { IMenuPanelProps, IMouseContextMenu } from '@cloudbeaver/core-blocks';
+import type { IMouseContextMenu } from '@cloudbeaver/core-blocks';
 import type { IMenuData } from '@cloudbeaver/core-view';
 
 export interface IContextMenuBaseProps extends React.PropsWithChildren {
@@ -26,7 +26,6 @@ export interface IContextMenuProps extends Omit<ButtonHTMLAttributes<any>, 'chil
   modal?: boolean;
   visible?: boolean;
   rtl?: boolean;
-  panelProps?: Partial<IMenuPanelProps>;
   children?: React.ReactNode | ContextMenuRenderingChildren;
   onVisibleSwitch?: (visible: boolean) => void;
 }

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,
+    });
   }
 }