Merge pull request #1378 from kubeshop/devcatalin/refactor/helm-chart…

…s-styling refactor: helm charts sections styling
kubeshop · Feb 17, 2022 · 3bd4953 · 3bd4953
2 parents acb0708 + ecf107c
commit 3bd4953
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 15 deletions.
diff --git a/src/components/molecules/SectionRenderer/SectionHeader.tsx b/src/components/molecules/SectionRenderer/SectionHeader.tsx
@@ -35,7 +35,7 @@ function SectionHeader(props: SectionHeaderProps) {
   const dispatch = useAppDispatch();
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
-  const {NameDisplay, NameSuffix, NameContext} = useSectionCustomization(sectionBlueprint.customization);
+  const {NameDisplay, NamePrefix, NameSuffix, NameContext} = useSectionCustomization(sectionBlueprint.customization);
 
   const toggleCollapse = useCallback(() => {
     if (isCollapsed) {
@@ -111,29 +111,38 @@ function SectionHeader(props: SectionHeaderProps) {
             </span>
           )}
         {NameDisplay.Component ? (
-          <NameDisplay.Component sectionInstance={sectionInstance} />
+          <NameDisplay.Component sectionInstance={sectionInstance} onClick={toggleCollapse} />
         ) : (
           <>
+            {NamePrefix.Component && (
+              <NamePrefix.Component sectionInstance={sectionInstance} onClick={toggleCollapse} />
+            )}
             <S.Name
               $isSelected={sectionInstance.isSelected && isCollapsed}
               $isHighlighted={sectionInstance.isSelected && isCollapsed}
               $isCheckable={Boolean(sectionInstance.checkable)}
               $nameColor={sectionBlueprint.customization?.nameColor}
+              $nameSize={sectionBlueprint.customization?.nameSize}
+              $nameWeight={sectionBlueprint.customization?.nameWeight}
+              $nameVerticalPadding={sectionBlueprint.customization?.nameVerticalPadding}
+              $nameHorizontalPadding={sectionBlueprint.customization?.nameHorizontalPadding}
               $level={level}
               onClick={toggleCollapse}
             >
               {name}
             </S.Name>
             {counter && <S.Counter selected={sectionInstance.isSelected && isCollapsed}>{counter}</S.Counter>}
             <S.BlankSpace level={level} onClick={toggleCollapse} />
-            {NameSuffix.Component && NameSuffix.options?.isVisibleOnHover && isHovered && (
-              <NameSuffix.Component sectionInstance={sectionInstance} />
+            {NameSuffix.Component && (NameSuffix.options?.isVisibleOnHover ? isHovered : true) && (
+              <NameSuffix.Component sectionInstance={sectionInstance} onClick={toggleCollapse} />
             )}
           </>
         )}
       </S.NameContainer>
       <S.NameDisplayContainer>
-        {!NameDisplay.Component && NameContext.Component && <NameContext.Component sectionInstance={sectionInstance} />}
+        {!NameDisplay.Component && NameContext.Component && (
+          <NameContext.Component sectionInstance={sectionInstance} onClick={toggleCollapse} />
+        )}
       </S.NameDisplayContainer>
     </S.SectionContainer>
   );

diff --git a/src/components/molecules/SectionRenderer/styled.tsx b/src/components/molecules/SectionRenderer/styled.tsx
@@ -85,18 +85,27 @@ type NameProps = {
   $isCheckable?: boolean;
   $level: number;
   $nameColor?: string;
+  $nameSize?: number;
+  $nameWeight?: number;
+  $nameVerticalPadding?: number;
+  $nameHorizontalPadding?: number;
 };
 
 export const Name = styled.span<NameProps>`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-left: 5px;
+  ${props =>
+    `padding: ${props.$nameVerticalPadding !== undefined ? props.$nameVerticalPadding : 0}px ${
+      props.$nameHorizontalPadding !== undefined ? props.$nameHorizontalPadding : 5
+    }px;`}
   cursor: pointer;
   ${props => {
+    if (props.$nameSize) {
+      return `font-size: ${props.$nameSize}px;`;
+    }
     return `font-size: ${24 - 4 * props.$level}px;`;
   }}
-
   ${props => {
     if (props.$isSelected) {
       return `font-weight: 700;`;
@@ -109,8 +118,9 @@ export const Name = styled.span<NameProps>`
     if (props.$isSelected) {
       return `color: ${Colors.blackPure};`;
     }
-    return props.$nameColor ? `color: ${props.$nameColor}` : `color: ${Colors.whitePure};`;
+    return props.$nameColor ? `color: ${props.$nameColor};` : `color: ${Colors.whitePure};`;
   }}
+  ${props => props.$nameWeight && `font-weight: ${props.$nameWeight};`}
 `;
 
 export const EmptyGroupText = styled.p`

diff --git a/src/components/molecules/SectionRenderer/useSectionCustomization.ts b/src/components/molecules/SectionRenderer/useSectionCustomization.ts
@@ -4,6 +4,12 @@ import {SectionCustomization} from '@models/navigator';
 
 export function useSectionCustomization(customization: SectionCustomization = {}) {
   const NameDisplay = useMemo(() => ({Component: customization.nameDisplay?.component}), [customization.nameDisplay]);
+  const NamePrefix = useMemo(
+    () => ({
+      Component: customization.namePrefix?.component,
+    }),
+    [customization.namePrefix]
+  );
   const NameSuffix = useMemo(
     () => ({
       Component: customization.nameSuffix?.component,
@@ -17,5 +23,5 @@ export function useSectionCustomization(customization: SectionCustomization = {}
   );
   const NameContext = useMemo(() => ({Component: customization.nameContext?.component}), [customization.nameContext]);
 
-  return {NameDisplay, EmptyDisplay, NameSuffix, NameContext};
+  return {NameDisplay, EmptyDisplay, NamePrefix, NameSuffix, NameContext};
 }
diff --git a/src/models/navigator.ts b/src/models/navigator.ts
@@ -43,6 +43,7 @@ export interface ItemCustomization {
 
 export type SectionCustomComponentProps = {
   sectionInstance: SectionInstance;
+  onClick?: () => void;
 };
 
 export type SectionCustomComponent = React.ComponentType<SectionCustomComponentProps>;
@@ -63,11 +64,18 @@ export interface SectionCustomization {
   nameContext?: {
     component: SectionCustomComponent;
   };
+  namePrefix?: {
+    component: SectionCustomComponent;
+  };
   /** If no value is provided, default value will be "descendants" */
   counterDisplayMode?: 'descendants' | 'items' | 'subsections' | 'none';
   /** Number of pixels to indent this section, by default all sections/susections are aligned */
   indentation?: number;
   nameColor?: string;
+  nameSize?: number;
+  nameWeight?: number;
+  nameHorizontalPadding?: number;
+  nameVerticalPadding?: number;
   emptyGroupText?: string;
   disableHoverStyle?: boolean;
   beforeInitializationText?: string;

diff --git a/src/navsections/HelmChartSectionBlueprint/CollapseSectionPrefix.tsx b/src/navsections/HelmChartSectionBlueprint/CollapseSectionPrefix.tsx
@@ -0,0 +1,36 @@
+import {useMemo} from 'react';
+
+import {MinusSquareOutlined, PlusSquareOutlined} from '@ant-design/icons';
+
+import {SectionCustomComponentProps} from '@models/navigator';
+
+import {useAppSelector} from '@redux/hooks';
+
+import Colors from '@styles/Colors';
+
+const CollapseSectionPrefix = (props: SectionCustomComponentProps) => {
+  const {sectionInstance, onClick} = props;
+
+  const isSectionCollapsed = useAppSelector(state => state.navigator.collapsedSectionIds.includes(sectionInstance.id));
+
+  const iconProps = useMemo(() => {
+    return {
+      style: {
+        color: sectionInstance.isSelected && isSectionCollapsed ? Colors.blackPure : Colors.grey9,
+        marginLeft: 4,
+        marginRight: 8,
+      },
+      fontSize: 10,
+      cursor: 'pointer',
+      onClick,
+    };
+  }, [sectionInstance.isSelected, isSectionCollapsed, onClick]);
+
+  if (isSectionCollapsed) {
+    return <PlusSquareOutlined {...iconProps} />;
+  }
+
+  return <MinusSquareOutlined {...iconProps} />;
+};
+
+export default CollapseSectionPrefix;
diff --git a/src/navsections/HelmChartSectionBlueprint/FileItemPrefix.tsx b/src/navsections/HelmChartSectionBlueprint/FileItemPrefix.tsx
@@ -0,0 +1,32 @@
+import {useMemo} from 'react';
+
+import {FileOutlined} from '@ant-design/icons';
+
+import {ItemCustomComponentProps} from '@models/navigator';
+
+import Colors from '@styles/Colors';
+
+const FileItemPrefix = (props: ItemCustomComponentProps) => {
+  const {itemInstance} = props;
+
+  const {fileItemPrefixStyle} = itemInstance.meta;
+
+  const style = useMemo(() => {
+    const baseStyle = {
+      marginLeft: 4,
+      marginRight: 8,
+      color: itemInstance.isSelected ? Colors.blackPure : Colors.whitePure,
+    };
+    if (fileItemPrefixStyle) {
+      return {
+        ...baseStyle,
+        ...fileItemPrefixStyle,
+      };
+    }
+    return baseStyle;
+  }, [fileItemPrefixStyle, itemInstance.isSelected]);
+
+  return <FileOutlined style={style} />;
+};
+
+export default FileItemPrefix;
diff --git a/src/navsections/HelmChartSectionBlueprint/HelmChartSectionBlueprint.ts b/src/navsections/HelmChartSectionBlueprint/HelmChartSectionBlueprint.ts
@@ -8,13 +8,16 @@ import {selectFile, selectHelmValuesFile} from '@redux/reducers/main';
 
 import Colors from '@styles/Colors';
 
+import CollapseSectionPrefix from './CollapseSectionPrefix';
+import FileItemPrefix from './FileItemPrefix';
 import HelmChartQuickAction from './HelmChartQuickAction';
 
 export type ValuesFilesScopeType = {
   helmValuesMap: HelmValuesMapType;
   previewValuesFileId: string | undefined;
   isInClusterMode: boolean;
   isFolderOpen: boolean;
+  selectedPath: string | undefined;
 };
 
 type HelmChartScopeType = {
@@ -39,6 +42,7 @@ export function makeHelmChartSectionBlueprint(helmChart: HelmChart) {
           : false,
         previewValuesFileId: state.main.previewValuesFileId,
         isFolderOpen: Boolean(state.main.fileMap[ROOT_FILE_ENTRY]),
+        selectedPath: state.main.selectedPath,
       };
     },
     builder: {
@@ -56,18 +60,31 @@ export function makeHelmChartSectionBlueprint(helmChart: HelmChart) {
     },
     customization: {
       counterDisplayMode: 'items',
-      indentation: 8,
-      nameColor: Colors.grey400,
+      indentation: 10,
+      nameWeight: 400,
+      nameSize: 14,
+      nameColor: Colors.grey9,
+      nameHorizontalPadding: 0,
+      namePrefix: {
+        component: CollapseSectionPrefix,
+      },
     },
     itemBlueprint: {
       getName: rawItem => rawItem.name,
       getInstanceId: rawItem => rawItem.id,
       builder: {
-        isSelected: rawItem => {
-          return rawItem.isSelected;
+        isSelected: (rawItem, scope) => {
+          return rawItem.filePath === scope.selectedPath;
         },
         isDisabled: (rawItem, scope) =>
           Boolean((scope.previewValuesFileId && scope.previewValuesFileId !== rawItem.id) || scope.isInClusterMode),
+        getMeta: () => {
+          return {
+            fileItemPrefixStyle: {
+              paddingLeft: 10,
+            },
+          };
+        },
       },
       instanceHandler: {
         onClick: (itemInstance, dispatch) => {
@@ -79,6 +96,9 @@ export function makeHelmChartSectionBlueprint(helmChart: HelmChart) {
           component: HelmChartQuickAction,
           options: {isVisibleOnHover: true},
         },
+        prefix: {
+          component: FileItemPrefix,
+        },
       },
     },
   };
@@ -100,7 +120,6 @@ export function makeHelmChartSectionBlueprint(helmChart: HelmChart) {
         [helmChart.id]: state.main.helmChartMap[helmChart.id],
       };
     },
-
     builder: {
       transformName: (_, scope) => {
         const currentHelmChart = scope[helmChart.id] as HelmChart | undefined;
@@ -139,10 +158,16 @@ export function makeHelmChartSectionBlueprint(helmChart: HelmChart) {
           dispatch(selectFile({filePath}));
         },
       },
+      customization: {
+        prefix: {component: FileItemPrefix},
+      },
     },
     customization: {
       counterDisplayMode: 'none',
-      indentation: 8,
+      indentation: 0,
+      nameWeight: 600,
+      nameSize: 14,
+      nameColor: Colors.grey9,
     },
   };
 

diff --git a/src/navsections/HelmChartSectionBlueprint/RootHelmChartsSectionBlueprint.ts b/src/navsections/HelmChartSectionBlueprint/RootHelmChartsSectionBlueprint.ts
@@ -57,6 +57,7 @@ const RootHelmChartsSectionBlueprint: SectionBlueprint<HelmValuesFile, RootHelmC
     emptyDisplay: {
       component: RootHelmChartsSectionEmptyDisplay,
     },
+    nameSize: 16,
   },
 };
-Original file line number
+Diff line change
@@ Expand Up @@
         emptyDisplay: {
           component: RootHelmChartsSectionEmptyDisplay,
         },
+        nameSize: 16,
       },
     };
@@ Expand Down @@