fix: expand/collapse of k8s resource section

kubeshop · Nov 11, 2021 · 767c408 · 767c408
1 parent 8da5665
commit 767c408
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 20 deletions.
diff --git a/src/components/molecules/SectionRenderer/SectionHeader.tsx b/src/components/molecules/SectionRenderer/SectionHeader.tsx
@@ -1,6 +1,9 @@
 import {useState} from 'react';
-import {MinusSquareOutlined} from '@ant-design/icons';
+
 import {SectionCustomComponent, SectionInstance} from '@models/navigator';
+
+import {MinusSquareOutlined} from '@ant-design/icons';
+
 import * as S from './styled';
 
 interface SectionHeaderProps {
@@ -19,6 +22,7 @@ interface SectionHeaderProps {
   expandSection: () => void;
   collapseSection: () => void;
   CustomNameDisplay?: SectionCustomComponent;
+  CustomNameSuffix?: SectionCustomComponent;
   disableHoverStyle: boolean;
 }
 
@@ -39,6 +43,7 @@ function SectionHeader(props: SectionHeaderProps) {
     expandSection,
     collapseSection,
     CustomNameDisplay,
+    CustomNameSuffix,
     disableHoverStyle,
   } = props;
   const [isHovered, setIsHovered] = useState<boolean>(false);
@@ -68,6 +73,7 @@ function SectionHeader(props: SectionHeaderProps) {
           >
             {name}
             {itemsLength > 0 && <S.ItemsLength>{itemsLength}</S.ItemsLength>}
+            {CustomNameSuffix && <CustomNameSuffix sectionInstance={sectionInstance} />}
           </S.Name>
           {isHovered && isSectionInitialized && (
             <S.Collapsible>

diff --git a/src/components/molecules/SectionRenderer/SectionRenderer.tsx b/src/components/molecules/SectionRenderer/SectionRenderer.tsx
@@ -30,7 +30,7 @@ function SectionRenderer<ItemType, ScopeType>(props: SectionRendererProps<ItemTy
 
   const dispatch = useAppDispatch();
 
-  const {NameDisplay, EmptyDisplay} = useSectionCustomization(sectionBlueprint.customization);
+  const {NameDisplay, EmptyDisplay, NameSuffix} = useSectionCustomization(sectionBlueprint.customization);
 
   const collapsedSectionIds = useAppSelector(state => state.navigator.collapsedSectionIds);
 
@@ -175,6 +175,7 @@ function SectionRenderer<ItemType, ScopeType>(props: SectionRendererProps<ItemTy
         expandSection={expandSection}
         collapseSection={collapseSection}
         CustomNameDisplay={NameDisplay ? NameDisplay.Component : undefined}
+        CustomNameSuffix={NameSuffix ? NameSuffix.Component : undefined}
         disableHoverStyle={Boolean(sectionBlueprint.customization?.disableHoverStyle)}
       />
       {sectionInstance &&

diff --git a/src/components/molecules/SectionRenderer/useSectionCustomization.ts b/src/components/molecules/SectionRenderer/useSectionCustomization.ts
@@ -4,10 +4,11 @@ import {SectionCustomization} from '@models/navigator';
 
 export function useSectionCustomization(customization: SectionCustomization = {}) {
   const NameDisplay = useMemo(() => ({Component: customization.nameDisplay?.component}), [customization.nameDisplay]);
+  const NameSuffix = useMemo(() => ({Component: customization.nameSuffix?.component}), [customization.nameSuffix]);
   const EmptyDisplay = useMemo(
     () => ({Component: customization.emptyDisplay?.component}),
     [customization.emptyDisplay]
   );
 
-  return {NameDisplay, EmptyDisplay};
+  return {NameDisplay, EmptyDisplay, NameSuffix};
 }
diff --git a/src/models/navigator.ts b/src/models/navigator.ts
@@ -47,6 +47,9 @@ export interface SectionCustomization {
   nameDisplay?: {
     component: SectionCustomComponent;
   };
+  nameSuffix?: {
+    component: SectionCustomComponent;
+  };
   emptyDisplay?: {
     component: SectionCustomComponent;
   };

diff --git a/src/navsections/K8sResourceSectionBlueprint/K8sResourceSectionBlueprint.ts b/src/navsections/K8sResourceSectionBlueprint/K8sResourceSectionBlueprint.ts
@@ -9,7 +9,7 @@ import {ResourceKindHandlers} from '@src/kindhandlers';
 import sectionBlueprintMap from '@src/navsections/sectionBlueprintMap';
 
 import K8sResourceSectionEmptyDisplay from './K8sResourceSectionEmptyDisplay';
-import K8sResourceSectionNameDisplay from './K8sResourceSectionNameDisplay';
+import K8sResourceSectionNameSuffix from './K8sResourceSectionNameSuffix';
 import {makeResourceKindNavSection} from './ResourceKindSectionBlueprint';
 
 const childSectionNames = navSectionNames.representation[navSectionNames.K8S_RESOURCES];
@@ -98,8 +98,8 @@ const K8sResourceSectionBlueprint: SectionBlueprint<K8sResource, K8sResourceScop
     emptyDisplay: {
       component: K8sResourceSectionEmptyDisplay,
     },
-    nameDisplay: {
-      component: K8sResourceSectionNameDisplay,
+    nameSuffix: {
+      component: K8sResourceSectionNameSuffix,
     },
   },
 };

diff --git a/...ueprint/K8sResourceSectionNameDisplay.tsx → ...lueprint/K8sResourceSectionNameSuffix.tsx b/...ueprint/K8sResourceSectionNameDisplay.tsx → ...lueprint/K8sResourceSectionNameSuffix.tsx
@@ -8,32 +8,31 @@ import {isInPreviewModeSelector} from '@redux/selectors';
 import Colors, {BackgroundColors} from '@styles/Colors';
 
 const S = {
-  Container: styled.div`
+  Container: styled.span`
     display: flex;
     align-items: center;
   `,
-  TitleSpan: styled.span`
-    padding: 2px 16px;
-    font-size: 24px;
-  `,
   PreviewOutputTag: styled(Tag)`
     font-size: 12px;
     font-weight: 600;
     background: ${BackgroundColors.previewModeBackground};
     color: ${Colors.blackPure};
-    margin-top: 3px;
+    margin-bottom: 10px;
   `,
 };
 
-function K8sResourceSectionNameDisplay() {
+function K8sResourceSectionNameSuffix() {
   const isInPreviewMode = useAppSelector(isInPreviewModeSelector);
 
-  return (
-    <S.Container>
-      <S.TitleSpan>K8s Resources</S.TitleSpan>
-      {isInPreviewMode && <S.PreviewOutputTag>Preview Output</S.PreviewOutputTag>}
-    </S.Container>
-  );
+  if (isInPreviewMode) {
+    return (
+      <S.Container>
+        <S.PreviewOutputTag>Preview Output</S.PreviewOutputTag>
+      </S.Container>
+    );
+  }
+
+  return null;
 }
 
-export default K8sResourceSectionNameDisplay;
+export default K8sResourceSectionNameSuffix;