chore: CHART_CARD_MAX_LENGTH integration

Author: shivani170

src/components/charts/ChartGroupCard.tsx

@@ -24,6 +24,7 @@ import ChartIcon from './ChartIcon'
 import { getChartGroupURL } from './charts.helper'
 import { ChartGroupCardProps } from './charts.types'
 import { getChartGroupSubgroup, getDescriptionTruncate } from './charts.util'
+import { CHART_CARD_MAX_LENGTH } from './constants'
 
 export const ChartGroupCard = ({ chartGroup }: ChartGroupCardProps) => {
     const chartGroupEntries = getChartGroupSubgroup(chartGroup.chartGroupEntries)
@@ -77,9 +78,18 @@ export const ChartGroupCard = ({ chartGroup }: ChartGroupCardProps) => {
             <div className="flexbox-col h-166 dc__gap-12 px-20 pt-20 pb-16">
                 <div className="flexbox">
                     {chartGroupEntries?.length ? (
-                        chartGroupEntries.map((chart) => (
-                            <ChartIcon icon={chart.chartMetaData.icon} key={chart.id} isChartGroupCard />
-                        ))
+                        <>
+                            {chartGroupEntries.map((chart) => (
+                                <ChartIcon icon={chart.chartMetaData.icon} key={chart.id} isChartGroupCard />
+                            ))}
+                            {chartGroup.chartGroupEntries.length > CHART_CARD_MAX_LENGTH && (
+                                <div className="chart-group-card__icon-wrapper border__secondary-translucent bg__secondary br-8 p-8 dc__w-fit-content h-50">
+                                    <span className="fs-20 lh-1-5 cn-8">
+                                        +{chartGroup.chartGroupEntries.length - CHART_CARD_MAX_LENGTH}
+                                    </span>
+                                </div>
+                            )}
+                        </>
                     ) : (
                         <div className="dc__border-dashed bg__secondary br-8 p-8 dc__w-fit-content h-50">
                             <Icon name="ic-folder-color" size={32} color={null} />

src/components/charts/charts.util.tsx

@@ -16,6 +16,7 @@
 
 import { Icon } from '@devtron-labs/devtron-fe-common-lib'
 import { ChartDescriptionTypes, ChartGroupEntry } from './charts.types'
+import { CHART_CARD_MAX_LENGTH } from './constants'
 
 export const PaginationParams = {
     pageOffset: 0,
@@ -50,7 +51,7 @@ export const renderDeprecatedWarning = () => {
 
 export const getChartGroupSubgroup = (chartGroupEntries): ChartGroupEntry[] => {
     let len = chartGroupEntries.length
-    len = len < 4 ? len : 4
+    len = len < CHART_CARD_MAX_LENGTH ? len : CHART_CARD_MAX_LENGTH
     return chartGroupEntries.slice(0, len)
 }
 

src/components/charts/constants.ts

@@ -47,3 +47,5 @@ export const QueryParams = {
     SearchKey: 'searchKey',
     ChartCategoryId: 'chartCategoryId',
 }
+
+export const CHART_CARD_MAX_LENGTH = 4