feat: enhance SegmentedBarChart with hideLegend prop and update types

Author: AbhishekA1509

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -23,6 +23,7 @@ import { Entity, SegmentedBarChartProps } from './types'
 import './styles.scss'
 
 const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
+    hideLegend,
     entities: userEntities = [FALLBACK_ENTITY],
     rootClassName,
     countClassName,
@@ -36,7 +37,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     const total = entities.reduce((sum, entity) => entity.value + sum, 0)
     const filteredEntities = entities.filter((entity) => !!entity.value)
 
-    const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
+    const calcSegmentWidth = (entityValue: Entity['value']) => `${(entityValue / total) * 100}%`
 
     const renderLabel = (label: Entity['label']) =>
         isLoading ? (
@@ -88,11 +89,17 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
         ))
     }
 
-    const renderLegend = () => (
-        <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
-            {renderContent()}
-        </div>
-    )
+    const renderLegend = () => {
+        if (hideLegend) {
+            return null
+        }
+
+        return (
+            <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
+                {renderContent()}
+            </div>
+        )
+    }
 
     const renderBar = () => (
         <motion.div
@@ -112,7 +119,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
                     className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
                         index === map.length - 1 ? 'dc__right-radius-4' : ''
                     } ${isLoading ? 'shimmer' : ''}`}
-                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
+                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity.value) }}
                 />
             ))}
         </motion.div>

src/Common/SegmentedBarChart/types.ts

@@ -20,13 +20,22 @@ export type Entity = {
     value: number
 }
 
-export interface SegmentedBarChartProps {
-    entities: NonNullable<Entity[]>
+type EntityPropType =
+    | {
+          hideLegend?: false
+          entities: NonNullable<Entity[]>
+      }
+    | {
+          hideLegend: true
+          entities: NonNullable<Omit<Entity, 'label'> & { label?: never }>[]
+      }
+
+export type SegmentedBarChartProps = {
     rootClassName?: string
     countClassName?: string
     labelClassName?: string
     isProportional?: boolean
     swapLegendAndBar?: boolean
     showAnimationOnBar?: boolean
     isLoading?: boolean
-}
+} & EntityPropType

src/Pages/ResourceBrowser/types.ts

@@ -16,6 +16,8 @@
 
 import { Dispatch, ReactElement, SetStateAction } from 'react'
 
+import { TabProps } from '@Shared/Components'
+
 import { NodeActionRequest } from './ResourceBrowser.Types'
 
 export enum ClusterFiltersType {
@@ -99,3 +101,5 @@ export interface AdditionalConfirmationModalOptionsProps<T = unknown> {
     setOptionsData: Dispatch<SetStateAction<T>>
     children?: ReactElement
 }
+
+export type NodeDetailTabsInfoType = (Pick<TabProps, 'label' | 'icon'> & { id: string; node: () => JSX.Element })[]

src/Shared/Components/Security/SecurityModal/types.ts

@@ -16,7 +16,7 @@
 
 import React from 'react'
 
-import { SegmentedBarChartProps } from '@Common/SegmentedBarChart'
+import { Entity } from '@Common/SegmentedBarChart/types'
 import { ServerErrors } from '@Common/ServerError'
 import { GenericEmptyStateType } from '@Common/Types'
 import { LastExecutionResultType, Nodes, NodeType } from '@Shared/types'
@@ -103,7 +103,7 @@ export interface StatusType {
 }
 
 export interface InfoCardPropsType extends Pick<StatusType, 'scanToolName' | 'scanToolUrl'> {
-    entities: SegmentedBarChartProps['entities']
+    entities: NonNullable<Entity[]>
     lastScanTimeString?: string
 }