Merge pull request #472 from dbeaver/fix/node-editing

fix(core-app): CB-1239 check if the new name is not empty

webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
 
 import { useService } from '@cloudbeaver/core-di';
-import { NotificationService } from '@cloudbeaver/core-events';
+import { EventContext, EventStopPropagationFlag, NotificationService } from '@cloudbeaver/core-events';
 
 import { InlineEditor } from '../../../shared/InlineEditor/InlineEditor';
 import type { NavNode } from '../../../shared/NodesManager/EntityTypes';
@@ -34,7 +34,7 @@ export const NavigationNodeEditor = observer<Props>(function NavigationNodeEdito
     }
 
     try {
-      if (node.name !== name) {
+      if (node.name !== name && name.trim().length) {
         setLoading(true);
         await navTreeResource.changeName(node, name);
       }
@@ -46,6 +46,10 @@ export const NavigationNodeEditor = observer<Props>(function NavigationNodeEdito
     }
   }, [name, onClose, node, loading, navTreeResource, notificationService]);
 
+  const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => {
+    EventContext.set(event, EventStopPropagationFlag);
+  };
+
   return (
     <InlineEditor
       value={name}
@@ -57,6 +61,8 @@ export const NavigationNodeEditor = observer<Props>(function NavigationNodeEdito
       onSave={save}
       onReject={onClose}
       onBlur={onClose}
+      onClick={stopPropagation}
+      onDoubleClick={stopPropagation}
     />
   );
 });

webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx

@@ -37,6 +37,8 @@ export interface InlineEditorProps extends Omit<React.InputHTMLAttributes<HTMLIn
   onSave: () => void;
   onReject?: () => void;
   onUndo?: () => void;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onDoubleClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   className?: string;
 }
 
@@ -55,6 +57,8 @@ export const InlineEditor = observer<InlineEditorProps, HTMLInputElement | null>
   onSave,
   onUndo,
   onReject,
+  onClick,
+  onDoubleClick,
   className,
   ...rest
 }, ref) {
@@ -103,7 +107,7 @@ export const InlineEditor = observer<InlineEditorProps, HTMLInputElement | null>
   useImperativeHandle(ref, () => inputRef.current!);
 
   return styled(useStyles(InlineEditorStyles))(
-    <editor className={className} {...use({ active })}>
+    <editor as='div' className={className} {...use({ active })} onClick={onClick} onDoubleClick={onDoubleClick}>
       <editor-container>
         <input
           ref={inputRef}

webapp/packages/core-app/src/shared/NodesManager/NavNodeContextMenuService.ts

@@ -226,7 +226,7 @@ export class NavNodeContextMenuService extends Bootstrap {
             });
 
             if (result !== DialogueStateResult.Rejected && result !== DialogueStateResult.Resolved) {
-              if (name !== result) {
+              if (name !== result && result.trim().length) {
                 try {
                   await this.navTreeResource.changeName(node, result);
                 } catch (exception) {

webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx

@@ -9,7 +9,7 @@
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 
-import { EventContext } from '@cloudbeaver/core-events';
+import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 
 import { EventTreeNodeExpandFlag } from './EventTreeNodeExpandFlag';
 import { EventTreeNodeSelectFlag } from './EventTreeNodeSelectFlag';
@@ -33,7 +33,7 @@ export const TreeNodeControl = observer<Props>(function TreeNodeControl({
   const context = useContext(TreeNodeContext);
 
   const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag)) {
+    if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag, EventStopPropagationFlag)) {
       return;
     }
 
@@ -47,7 +47,7 @@ export const TreeNodeControl = observer<Props>(function TreeNodeControl({
   };
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag)) {
+    if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag, EventStopPropagationFlag)) {
       return;
     }
 
@@ -57,7 +57,7 @@ export const TreeNodeControl = observer<Props>(function TreeNodeControl({
   };
 
   const handleDbClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag)) {
+    if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag, EventStopPropagationFlag)) {
       return;
     }
     context.open();