fix: mixed collapse/expand state of nav sections

kubeshop · Sep 17, 2021 · 413d4e2 · 413d4e2
1 parent ba86233
commit 413d4e2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 24 deletions.
diff --git a/src/components/organisms/NewNavigatorPane/NavPane.styled.tsx b/src/components/organisms/NewNavigatorPane/NavPane.styled.tsx
@@ -12,6 +12,7 @@ export const List = styled.ol<{height: number}>`
     background: transparent;
   }
   ${props => `height: ${props.height}px;`}
+  padding-bottom: 20px;
 `;
 
 export const TitleBar = styled.div`

diff --git a/src/components/organisms/NewNavigatorPane/NavPane.tsx b/src/components/organisms/NewNavigatorPane/NavPane.tsx
@@ -36,7 +36,7 @@ const NavPane = () => {
   };
 
   return (
-    <nav>
+    <>
       <S.TitleBar>
         <MonoPaneTitle>Navigator</MonoPaneTitle>
         <S.TitleBarRightButtons>
@@ -62,7 +62,7 @@ const NavPane = () => {
         <NavSectionRenderer<K8sResource, KustomizationNavSectionScope> navSection={KustomizationNavSection} level={0} />
         <NavSectionRenderer<K8sResource, K8sResourceNavSectionScope> navSection={K8sResourceNavSection} level={0} />
       </S.List>
-    </nav>
+    </>
   );
 };
 

diff --git a/src/components/organisms/NewNavigatorPane/NavSectionRenderer/NavSectionRenderer.tsx b/src/components/organisms/NewNavigatorPane/NavSectionRenderer/NavSectionRenderer.tsx
@@ -52,45 +52,56 @@ function NavSectionRenderer<ItemType, ScopeType>(props: NavSectionRendererProps<
   const [isHovered, setIsHovered] = useState<boolean>(false);
   const collapsedNavSectionNames = useAppSelector(state => state.ui.navPane.collapsedNavSectionNames);
 
+  const allNestedSubsectionNames = useMemo(() => {
+    if (!subsections) {
+      return undefined;
+    }
+    const nestedSubsectionNames: string[] = [];
+    loopSubsectionNamesDeep(subsections, subsectionName => nestedSubsectionNames.push(subsectionName));
+    return nestedSubsectionNames;
+  }, [subsections]);
+
   const isCollapsedMode = useMemo(() => {
-    if (collapsedNavSectionNames.includes(name)) {
-      return 'collapsed';
+    if (allNestedSubsectionNames) {
+      if (
+        collapsedNavSectionNames.includes(name) &&
+        allNestedSubsectionNames.every(s => collapsedNavSectionNames.includes(s))
+      ) {
+        return 'collapsed';
+      }
+      if (
+        !collapsedNavSectionNames.includes(name) &&
+        allNestedSubsectionNames.every(s => !collapsedNavSectionNames.includes(s))
+      ) {
+        return 'expanded';
+      }
+      return 'mixed';
     }
-    if (subsections && subsections.every(s => collapsedNavSectionNames.includes(s.name))) {
+    if (collapsedNavSectionNames.includes(name)) {
       return 'collapsed';
     }
-    if (subsections && subsections.every(s => !collapsedNavSectionNames.includes(s.name))) {
-      return 'expanded';
-    }
-    if (!subsections || subsections.length === 0) {
-      return 'expanded';
-    }
-    return 'mixed';
-  }, [collapsedNavSectionNames, name]);
+    return 'expanded';
+  }, [collapsedNavSectionNames, name, allNestedSubsectionNames]);
 
   const isCollapsed = useMemo(() => {
     return isCollapsedMode === 'collapsed';
   }, [isCollapsedMode]);
 
   const expandSection = useCallback(() => {
-    if (!subsections || subsections.length === 0) {
+    if (!allNestedSubsectionNames || allNestedSubsectionNames.length === 0) {
       dispatch(expandNavSections([name]));
     } else {
-      const allSubsectionNames: string[] = [];
-      loopSubsectionNamesDeep(subsections, subsectionName => allSubsectionNames.push(subsectionName));
-      dispatch(expandNavSections([name, ...allSubsectionNames]));
+      dispatch(expandNavSections([name, ...allNestedSubsectionNames]));
     }
-  }, [name, subsections, dispatch, expandNavSections]);
+  }, [name, allNestedSubsectionNames, dispatch, expandNavSections]);
 
   const collapseSection = useCallback(() => {
-    if (!subsections || subsections.length === 0) {
+    if (!allNestedSubsectionNames || allNestedSubsectionNames.length === 0) {
       dispatch(collapseNavSections([name]));
     } else {
-      const allSubsectionNames: string[] = [];
-      loopSubsectionNamesDeep(subsections, subsectionName => allSubsectionNames.push(subsectionName));
-      dispatch(collapseNavSections([name, ...allSubsectionNames]));
+      dispatch(collapseNavSections([name, ...allNestedSubsectionNames]));
     }
-  }, [name, subsections, dispatch, collapseNavSections]);
+  }, [name, allNestedSubsectionNames, dispatch, collapseNavSections]);
 
   useEffect(() => {
     if (shouldSectionExpand) {

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -6,6 +6,6 @@ export const ROOT_FILE_ENTRY = '<root>';
 export const APP_MIN_WIDTH = 800;
 export const APP_MIN_HEIGHT = 600;
 export const TOOLTIP_DELAY = 1.0;
-export const NAVIGATOR_HEIGHT_OFFSET = 112;
+export const NAVIGATOR_HEIGHT_OFFSET = 110;
 export const FILE_TREE_HEIGHT_OFFSET = 122;
 export const REF_PATH_SEPARATOR = '#';