From 7140230b4e1aa2ae66105835051d6a485459fdfa Mon Sep 17 00:00:00 2001 From: Wroud Date: Tue, 22 Mar 2022 00:38:27 +0300 Subject: [PATCH] fix(core-app): CB-1739 CB-1829 nav tree behaviour --- .../ElementsTree/ElementsTree.tsx | 11 +++++++---- .../ElementsTree/ElementsTreeContext.ts | 2 +- .../NavigationTreeNode/useNavigationNode.ts | 4 ++-- .../ElementsTree/useElementsTree.ts | 18 ++++++++++-------- .../src/NavigationTree/useNavigationTree.ts | 8 +++++--- .../core-blocks/src/Tree/TreeNode/TreeNode.tsx | 4 ++-- .../src/SqlEditor/SqlEditor.tsx | 5 +++-- 7 files changed, 30 insertions(+), 22 deletions(-) diff --git a/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTree.tsx b/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTree.tsx index d1e9a963ef..36c667ecc4 100644 --- a/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTree.tsx +++ b/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTree.tsx @@ -64,7 +64,7 @@ interface Props extends IElementsTreeOptions { className?: string; navNodeFilterCompare?: NavNodeFilterCompareFn; onClick?: (node: NavNode) => Promise | void; - onOpen?: (node: NavNode) => Promise | void; + onOpen?: (node: NavNode, folder: boolean) => Promise | void; } export const ElementsTree = observer(function ElementsTree({ @@ -177,9 +177,10 @@ export const ElementsTree = observer(function ElementsTree({ folderExplorer, selectionTree, control, - onOpen, - onClick: async (node, path, leaf) => { - await onClick?.(node); + onOpen: async (node, path, leaf) => { + const folder = !leaf && tree.settings?.foldersTree || false; + + await onOpen?.(node, folder); if (!leaf && tree.settings?.foldersTree) { const nodeId = node.id; @@ -187,9 +188,11 @@ export const ElementsTree = observer(function ElementsTree({ if (loaded) { await autoOpenFolders(nodeId, path); + tree.setFilter(''); } } }, + onClick, }), [control, folderExplorer, selectionTree, onOpen, onClick, folderExplorer] ); diff --git a/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTreeContext.ts b/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTreeContext.ts index af393f9dfe..972d9de321 100644 --- a/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTreeContext.ts +++ b/webapp/packages/core-app/src/NavigationTree/ElementsTree/ElementsTreeContext.ts @@ -19,7 +19,7 @@ export interface IElementsTreeContext { folderExplorer: IFolderExplorerContext; selectionTree: boolean; control?: NavTreeControlComponent; - onOpen?: (node: NavNode, path: string[]) => Promise | void; + onOpen?: (node: NavNode, path: string[], leaf: boolean) => Promise | void; onClick?: (node: NavNode, path: string[], leaf: boolean) => Promise | void; } diff --git a/webapp/packages/core-app/src/NavigationTree/ElementsTree/NavigationTreeNode/useNavigationNode.ts b/webapp/packages/core-app/src/NavigationTree/ElementsTree/NavigationTreeNode/useNavigationNode.ts index 09866928cf..c80767baa5 100644 --- a/webapp/packages/core-app/src/NavigationTree/ElementsTree/NavigationTreeNode/useNavigationNode.ts +++ b/webapp/packages/core-app/src/NavigationTree/ElementsTree/NavigationTreeNode/useNavigationNode.ts @@ -30,7 +30,7 @@ interface INavigationNode { leaf: boolean; empty: boolean; handleExpand: () => Promise; - handleOpen: () => Promise; + handleOpen: (leaf: boolean) => Promise; handleClick: (leaf: boolean) => Promise; handleSelect: (isMultiple?: boolean, nested?: boolean) => Promise; } @@ -54,7 +54,7 @@ export function useNavigationNode(node: NavNode, path: string[]): INavigationNod const selected = getComputed(() => contextRef.context?.tree.isNodeSelected(node.id) || false); const handleClick = async (leaf: boolean) => await contextRef.context?.onClick?.(node, path, leaf); - const handleOpen = async () => await contextRef.context?.onOpen?.(node, path); + const handleOpen = async (leaf: boolean) => await contextRef.context?.onOpen?.(node, path, leaf); const handleExpand = async () => await contextRef.context?.tree.expand(node, !expanded); const handleSelect = async ( multiple = false, diff --git a/webapp/packages/core-app/src/NavigationTree/ElementsTree/useElementsTree.ts b/webapp/packages/core-app/src/NavigationTree/ElementsTree/useElementsTree.ts index d7c3780614..dae139f6a5 100644 --- a/webapp/packages/core-app/src/NavigationTree/ElementsTree/useElementsTree.ts +++ b/webapp/packages/core-app/src/NavigationTree/ElementsTree/useElementsTree.ts @@ -237,15 +237,17 @@ export function useElementsTree(options: IOptions): IElementsTree { data.filter = ''; } - if (options.settings?.saveExpanded) { - state.sync(data.nodeState); + if (!options.settings?.saveExpanded) { + data.nodeState = []; + } - elementsTree.loading = true; - try { - await functionsRef.loadTree(options.root); - } finally { - elementsTree.loading = false; - } + state.sync(data.nodeState); + + elementsTree.loading = true; + try { + await functionsRef.loadTree(options.root); + } finally { + elementsTree.loading = false; } }, data => ( diff --git a/webapp/packages/core-app/src/NavigationTree/useNavigationTree.ts b/webapp/packages/core-app/src/NavigationTree/useNavigationTree.ts index 99e26f55c6..c7bc635dda 100644 --- a/webapp/packages/core-app/src/NavigationTree/useNavigationTree.ts +++ b/webapp/packages/core-app/src/NavigationTree/useNavigationTree.ts @@ -14,7 +14,7 @@ import { NavigationTreeService } from './NavigationTreeService'; interface INavigationTree { navigationTreeService: NavigationTreeService; - handleOpen: (node: NavNode) => Promise; + handleOpen: (node: NavNode, folder: boolean) => Promise; handleSelect: (node: NavNode, state: boolean) => void; } @@ -25,8 +25,10 @@ export function useNavigationTree(): INavigationTree { return useObjectRef(() => ({ navigationTreeService, - handleOpen(node: NavNode) { - return this.navigationTreeService.navToNode(node.id, node.parentId); + async handleOpen(node: NavNode, folder: boolean) { + if (!folder) { + await this.navigationTreeService.navToNode(node.id, node.parentId); + } }, handleSelect(node: NavNode, state: boolean) { return this.navigationTreeService.selectNode(node.id, state); diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx index ec4b2a3614..1bc8463d30 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx @@ -23,7 +23,7 @@ interface Props extends ITreeNodeState { onClick?: (leaf: boolean) => Promise | void; onExpand?: () => Promise | void; onSelect?: (multiple?: boolean, nested?: boolean) => Promise | void; - onOpen?: () => Promise | void; + onOpen?: (leaf: boolean) => Promise | void; } interface IInnerTreeNodeContext extends ITreeNodeContext { @@ -76,7 +76,7 @@ export const TreeNode = observer(function TreeNode }, async open() { await processAction(async () => { - await handlersRef.onOpen?.(); + await handlersRef.onOpen?.(this.leaf); }); }, }), { diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditor.tsx b/webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditor.tsx index 7527f92adf..c828f3073d 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditor.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditor.tsx @@ -38,11 +38,11 @@ const styles = css` display: flex; flex-direction: column; justify-content: space-between; + overflow: auto; } actions { width: 32px; - height: 100%; display: flex; flex-direction: column; align-items: center; @@ -66,6 +66,7 @@ const styles = css` display: flex; justify-content: center; align-items: center; + flex-shrink: 0; } StaticImage { @@ -91,7 +92,7 @@ export const SqlEditor = observer(function SqlEditor({ state, c editor?.focus(); }, [editor]); - function preventFocus(event: React.MouseEvent) { + function preventFocus(event: React.MouseEvent) { event.preventDefault(); }