feat: custom name display for nav sections

kubeshop · Nov 2, 2021 · 27b94d8 · 27b94d8
1 parent 9af363f
commit 27b94d8
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 20 deletions.
diff --git a/src/components/molecules/SectionRenderer/SectionHeader.tsx b/src/components/molecules/SectionRenderer/SectionHeader.tsx
@@ -1,9 +1,11 @@
 import React, {useState} from 'react';
 import {MinusSquareOutlined} from '@ant-design/icons';
+import {SectionCustomComponent, SectionInstance} from '@models/navigator';
 import * as S from './styled';
 
 function SectionHeader(props: {
   name: string;
+  sectionInstance: SectionInstance;
   isSectionSelected: boolean;
   isCollapsed: boolean;
   isSectionHighlighted: boolean;
@@ -16,9 +18,11 @@ function SectionHeader(props: {
   itemsLength: number;
   expandSection: () => void;
   collapseSection: () => void;
+  CustomNameDisplay?: SectionCustomComponent;
 }) {
   const {
     name,
+    sectionInstance,
     isSectionSelected,
     isCollapsed,
     isSectionHighlighted,
@@ -31,6 +35,7 @@ function SectionHeader(props: {
     itemsLength,
     expandSection,
     collapseSection,
+    CustomNameDisplay,
   } = props;
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
@@ -47,23 +52,29 @@ function SectionHeader(props: {
       onMouseLeave={() => setIsHovered(false)}
       isVisible={isSectionVisible}
     >
-      <S.Name
-        isSelected={isSectionSelected && isCollapsed}
-        isHighlighted={isSectionSelected && isCollapsed}
-        level={level}
-      >
-        {name}
-        {itemsLength > 0 && <S.ItemsLength>{itemsLength}</S.ItemsLength>}
-      </S.Name>
-      {isHovered && isSectionInitialized && (
-        <S.Collapsible>
-          {(isCollapsedMode === 'collapsed' || isCollapsedMode === 'mixed') && (
-            <S.PlusSquareOutlined isSelected={isSectionSelected} onClick={expandSection} />
+      {CustomNameDisplay ? (
+        <CustomNameDisplay sectionInstance={sectionInstance} />
+      ) : (
+        <>
+          <S.Name
+            isSelected={isSectionSelected && isCollapsed}
+            isHighlighted={isSectionSelected && isCollapsed}
+            level={level}
+          >
+            {name}
+            {itemsLength > 0 && <S.ItemsLength>{itemsLength}</S.ItemsLength>}
+          </S.Name>
+          {isHovered && isSectionInitialized && (
+            <S.Collapsible>
+              {(isCollapsedMode === 'collapsed' || isCollapsedMode === 'mixed') && (
+                <S.PlusSquareOutlined isSelected={isSectionSelected} onClick={expandSection} />
+              )}
+              {(isCollapsedMode === 'expanded' || isCollapsedMode === 'mixed') && (
+                <MinusSquareOutlined onClick={collapseSection} style={{marginLeft: '5px'}} />
+              )}
+            </S.Collapsible>
           )}
-          {(isCollapsedMode === 'expanded' || isCollapsedMode === 'mixed') && (
-            <MinusSquareOutlined onClick={collapseSection} style={{marginLeft: '5px'}} />
-          )}
-        </S.Collapsible>
+        </>
       )}
     </S.NameContainer>
   );

diff --git a/src/components/molecules/SectionRenderer/SectionRenderer.tsx b/src/components/molecules/SectionRenderer/SectionRenderer.tsx
@@ -6,6 +6,7 @@ import {collapseSectionIds, expandSectionIds} from '@redux/reducers/navigator';
 import ItemRenderer, {ItemRendererOptions} from './ItemRenderer';
 import SectionHeader from './SectionHeader';
 import * as S from './styled';
+import {useSectionCustomization} from './useSectionCustomization';
 
 type SectionRendererProps<ItemType, ScopeType> = {
   sectionBlueprint: SectionBlueprint<ItemType, ScopeType>;
@@ -25,6 +26,8 @@ function SectionRenderer<ItemType, ScopeType>(props: SectionRendererProps<ItemTy
 
   const dispatch = useAppDispatch();
 
+  const {NameDisplay} = useSectionCustomization(sectionBlueprint.customization);
+
   const collapsedSectionIds = useAppSelector(state => state.navigator.collapsedSectionIds);
 
   const isCollapsedMode = useMemo(() => {
@@ -138,6 +141,7 @@ function SectionRenderer<ItemType, ScopeType>(props: SectionRendererProps<ItemTy
     <>
       <SectionHeader
         name={sectionName}
+        sectionInstance={sectionInstance}
         isSectionSelected={Boolean(sectionInstance?.isSelected)}
         isCollapsed={isCollapsed}
         isCollapsedMode={isCollapsedMode}
@@ -150,6 +154,7 @@ function SectionRenderer<ItemType, ScopeType>(props: SectionRendererProps<ItemTy
         itemsLength={sectionInstance?.visibleDescendantItemsCount || 0}
         expandSection={expandSection}
         collapseSection={collapseSection}
+        CustomNameDisplay={NameDisplay ? NameDisplay.Component : undefined}
       />
       {sectionInstance &&
         sectionInstance.isVisible &&

diff --git a/src/components/molecules/SectionRenderer/styled.tsx b/src/components/molecules/SectionRenderer/styled.tsx
@@ -18,6 +18,7 @@ export const NameContainer = styled.li<NameContainerProps>`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
   width: 100%;
   user-select: none;
   ${props => {

diff --git a/src/components/molecules/SectionRenderer/useSectionCustomization.ts b/src/components/molecules/SectionRenderer/useSectionCustomization.ts
@@ -0,0 +1,8 @@
+import {useMemo} from 'react';
+import {SectionCustomization} from '@models/navigator';
+
+export function useSectionCustomization(customization: SectionCustomization = {}) {
+  const NameDisplay = useMemo(() => ({Component: customization.nameDisplay?.component}), [customization.nameDisplay]);
+
+  return {NameDisplay};
+}
diff --git a/src/models/navigator.ts b/src/models/navigator.ts
@@ -35,6 +35,18 @@ export interface ItemCustomization {
   };
 }
 
+export type SectionCustomComponentProps = {
+  sectionInstance: SectionInstance;
+};
+
+export type SectionCustomComponent = React.ComponentType<SectionCustomComponentProps>;
+
+export interface SectionCustomization {
+  nameDisplay?: {
+    component: SectionCustomComponent;
+  };
+}
+
 export interface ItemBlueprint<RawItemType, ScopeType> {
   getName: (rawItem: RawItemType, scope: ScopeType) => string;
   getInstanceId: (rawItem: RawItemType, scope: ScopeType) => string;
@@ -73,6 +85,7 @@ export interface SectionBlueprint<RawItemType, ScopeType = any> {
     isInitialized?: (scope: ScopeType, items: RawItemType[]) => boolean;
     shouldBeVisibleBeforeInitialized?: boolean;
   };
+  customization?: SectionCustomization;
   itemBlueprint?: ItemBlueprint<RawItemType, ScopeType>;
 }
 

diff --git a/src/navsections/ClusterDiffSectionBlueprint/ClusterDiffSectionBlueprint.ts b/src/navsections/ClusterDiffSectionBlueprint/ClusterDiffSectionBlueprint.ts
@@ -1,7 +1,8 @@
 import {ClusterToLocalResourcesMatch, ResourceMapType} from '@models/appstate';
 import {SectionBlueprint} from '@models/navigator';
 import sectionBlueprintMap from '../sectionBlueprintMap';
-import ClusterDiffNameDisplay from './ClusterDiffNameDisplay';
+import ResourceDiffSectionNameDisplay from './ResourceDiffSectionNameDisplay';
+import ResourceMatchNameDisplay from './ResourceMatchNameDisplay';
 
 export type ClusterDiffScopeType = {
   resourceMap: ResourceMapType;
@@ -44,6 +45,11 @@ const ClusterDiffSectionBlueprint: SectionBlueprint<ClusterToLocalResourcesMatch
       return scope.clusterToLocalResourcesMatches.length > 0;
     },
   },
+  customization: {
+    nameDisplay: {
+      component: ResourceDiffSectionNameDisplay,
+    },
+  },
   itemBlueprint: {
     getName(rawItem) {
       return rawItem.resourceName;
@@ -62,7 +68,7 @@ const ClusterDiffSectionBlueprint: SectionBlueprint<ClusterToLocalResourcesMatch
       },
     },
     customization: {
-      nameDisplay: {component: ClusterDiffNameDisplay},
+      nameDisplay: {component: ResourceMatchNameDisplay},
     },
   },
 };

diff --git a/src/navsections/ClusterDiffSectionBlueprint/ResourceDiffSectionNameDisplay.tsx b/src/navsections/ClusterDiffSectionBlueprint/ResourceDiffSectionNameDisplay.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import {Tag} from 'antd';
+
+const NameDisplayContainer = styled.div`
+  margin-left: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+`;
+
+const TagsContainer = styled.div`
+  width: 800px;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 24px;
+  font-size: 16px;
+`;
+
+const TagWrapper = styled.div`
+  width: 300px;
+`;
+
+const Spacing = styled.div`
+  width: 60px;
+`;
+
+const Title = styled.h1`
+  display: block;
+  width: 100%;
+  flex: 0 0 100%;
+`;
+
+function ResourceDiffSectionNameDisplay() {
+  return (
+    <NameDisplayContainer>
+      <Title>K8s Resource Diff</Title>
+      <TagsContainer>
+        <TagWrapper>
+          <Tag>Local</Tag>
+        </TagWrapper>
+        <Spacing />
+        <TagWrapper>
+          <Tag>Cluster</Tag>
+        </TagWrapper>
+      </TagsContainer>
+    </NameDisplayContainer>
+  );
+}
+
+export default ResourceDiffSectionNameDisplay;
diff --git a/...ctionBlueprint/ClusterDiffNameDisplay.tsx → ...ionBlueprint/ResourceMatchNameDisplay.tsx b/...ctionBlueprint/ClusterDiffNameDisplay.tsx → ...ionBlueprint/ResourceMatchNameDisplay.tsx
@@ -30,7 +30,7 @@ const IconsContainer = styled.div`
   font-size: 14px;
 `;
 
-function ClusterDiffNameDisplay(props: ItemCustomComponentProps) {
+function ResourceMatchNameDisplay(props: ItemCustomComponentProps) {
   const {itemInstance} = props;
   const dispatch = useAppDispatch();
   const resourceMap = useAppSelector(state => state.main.resourceMap);
@@ -88,4 +88,4 @@ function ClusterDiffNameDisplay(props: ItemCustomComponentProps) {
   );
 }
 
-export default ClusterDiffNameDisplay;
+export default ResourceMatchNameDisplay;