feat: show items length next to sections name

kubeshop · Sep 30, 2021 · d361b2a · d361b2a
1 parent d28af6c
commit d361b2a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/organisms/NavigatorPane/NavSectionRenderer/NavSectionRenderer.tsx b/src/components/organisms/NavigatorPane/NavSectionRenderer/NavSectionRenderer.tsx
@@ -42,6 +42,7 @@ function NavSectionHeader(props: {
   isSectionVisible: boolean;
   isCollapsedMode: 'collapsed' | 'expanded' | 'mixed';
   level: number;
+  itemsLength: number;
   expandSection: () => void;
   collapseSection: () => void;
 }) {
@@ -56,6 +57,7 @@ function NavSectionHeader(props: {
     isSectionVisible,
     isCollapsedMode,
     level,
+    itemsLength,
     expandSection,
     collapseSection,
   } = props;
@@ -80,6 +82,7 @@ function NavSectionHeader(props: {
         level={level}
       >
         {name}
+        {itemsLength > 0 && <S.ItemsLength>{itemsLength}</S.ItemsLength>}
       </S.Name>
       {isHovered && isSectionInitialized && (
         <S.Collapsible>
@@ -264,6 +267,7 @@ function NavSectionRenderer<ItemType, ScopeType>(props: NavSectionRendererProps<
         isSectionVisible={isSectionVisible}
         isCollapsedMode={isCollapsedMode}
         level={level}
+        itemsLength={visibleItems.length}
         expandSection={expandSection}
         collapseSection={collapseSection}
       />

diff --git a/src/components/organisms/NavigatorPane/NavSectionRenderer/styled.tsx b/src/components/organisms/NavigatorPane/NavSectionRenderer/styled.tsx
@@ -1,4 +1,4 @@
-import Colors from '@styles/Colors';
+import Colors, {FontColors} from '@styles/Colors';
 import styled from 'styled-components';
 import {Skeleton as RawSkeleton} from 'antd';
 import {PlusSquareOutlined as RawPlusSquareOutlined} from '@ant-design/icons';
@@ -91,3 +91,9 @@ export const PlusSquareOutlined = styled(RawPlusSquareOutlined)<{isSelected: boo
     }
   }}
 `;
+
+export const ItemsLength = styled.span`
+  margin-left: 8px;
+  color: ${FontColors.grey};
+  font-size: 14px;
+`;