fix(Groups): expand group tree on non-empty group filter [#853]

ytsaurus · Nov 28, 2024 · 1255e14 · 1255e14
1 parent 38842f4
commit 1255e14
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git a/...rc/ui/components/ExpandIcon/ExpandIcon.js → ...c/ui/components/ExpandIcon/ExpandIcon.tsx b/...rc/ui/components/ExpandIcon/ExpandIcon.js → ...c/ui/components/ExpandIcon/ExpandIcon.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
 import Icon from '../../components/Icon/Icon';
@@ -8,23 +7,23 @@ import './ExpandIcon.scss';
 
 const block = cn('expand-icon');
 
-ExpandIcon.propTypes = {
-    className: PropTypes.string,
+type ExpandIconProps = {
+    className?: string;
 
-    expanded: PropTypes.bool,
-    visible: PropTypes.bool,
-    onClick: PropTypes.func,
+    expanded?: boolean;
+    visible?: boolean;
+    onClick?: (data?: string, expanded?: boolean) => void;
 
-    data: PropTypes.any,
+    data?: string;
 };
 
-export default function ExpandIcon({className, data, expanded, visible, onClick}) {
+export default function ExpandIcon({className, data, expanded, visible, onClick}: ExpandIconProps) {
     const icon = expanded ? 'angle-up' : 'angle-down';
     const onClickCb = React.useCallback(() => {
         if (onClick) {
-            onClick(data);
+            onClick(data, expanded);
         }
-    }, [data, onClick]);
+    }, [data, onClick, expanded]);
 
     return (
         <span

diff --git a/packages/ui/src/ui/pages/groups/GroupsPageTable/GroupsPageTable.tsx b/packages/ui/src/ui/pages/groups/GroupsPageTable/GroupsPageTable.tsx
@@ -105,9 +105,9 @@ class GroupsPageTable extends React.Component<GroupsPageTableProps> {
         );
     }
 
-    toggleExpand = (groupName: string) => {
+    toggleExpand = (groupName?: string, isExpanded?: boolean) => {
         const {toggleGroupExpand} = this.props;
-        toggleGroupExpand(groupName);
+        toggleGroupExpand(groupName!, !isExpanded);
     };
 
     renderIdmCell(col: string, {row}: {row: GroupsTreeNode}) {

diff --git a/packages/ui/src/ui/store/actions/groups.ts b/packages/ui/src/ui/store/actions/groups.ts
@@ -70,15 +70,11 @@ export function setGroupsPageSorting(column: string, order: OrderType) {
     };
 }
 
-export function toggleGroupExpand(groupName: string) {
+export function toggleGroupExpand(groupName: string, isExpanded: boolean) {
     return (dispatch: Dispatch, getState: () => RootState) => {
         const expanded = {...getGroupsExpanded(getState())};
-        const current = expanded[groupName];
-        if (current) {
-            delete expanded[groupName];
-        } else {
-            expanded[groupName] = true;
-        }
+
+        expanded[groupName] = isExpanded;
 
         return dispatch({type: GROUPS_TABLE_DATA_FIELDS, data: {expanded}});
     };

diff --git a/packages/ui/src/ui/store/selectors/groups.ts b/packages/ui/src/ui/store/selectors/groups.ts
@@ -88,15 +88,38 @@ const getGroupsTreeFiltered = createSelector(
 );
 
 const getGroupsTreeFilteredAndExpanded = createSelector(
-    [getGroupsTreeFiltered, getGroupsExpanded],
-    (root, expanded) => {
-        const res = cloneDeep_(root);
+    [getGroupsTree, getGroupsTreeFiltered, getGroupsExpanded, getGroupsNameFilter],
+    (groupTree, groupsTreeFiltered, expandedByUser, groupNameFilter) => {
+        const expandedBySearch: Record<string, boolean> = {};
+
+        const res = cloneDeep_(groupsTreeFiltered);
+
         hammer.treeList.treeForEach(res.children, (node: GroupsTreeNode) => {
-            const {name} = node;
-            if (!expanded[name]) {
+            const isNodeMatchedFilter = groupNameFilter && node.name.includes(groupNameFilter);
+
+            if (isNodeMatchedFilter) {
+                let parentName = node.parent!;
+
+                while (groupTree[parentName]) {
+                    expandedBySearch[parentName] = true;
+                    parentName = groupTree[parentName].parent!;
+                }
+            }
+        });
+
+        hammer.treeList.treeForEach(res.children, (node: GroupsTreeNode) => {
+            const userInteractedWithNode = typeof expandedByUser[node.name] !== 'undefined';
+
+            const expanded = userInteractedWithNode ? expandedByUser : expandedBySearch;
+
+            if (!expanded[node.name]) {
+                node.expanded = false;
                 node.children = [];
+            } else {
+                node.expanded = true;
             }
         });
+
         return res;
     },
 );