chore: chart group created by integration

Author: shivani170

src/components/charts/ChartGroupCard.tsx

@@ -16,7 +16,7 @@
 
 import { Link } from 'react-router-dom'
 
-import { handleAnalyticsEvent, Icon } from '@devtron-labs/devtron-fe-common-lib'
+import { getAlphabetIcon, handleAnalyticsEvent, Icon } from '@devtron-labs/devtron-fe-common-lib'
 
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
 
@@ -27,6 +27,7 @@ import { getChartGroupSubgroup, getDescriptionTruncate } from './charts.util'
 
 export const ChartGroupCard = ({ chartGroup }: ChartGroupCardProps) => {
     const chartGroupEntries = getChartGroupSubgroup(chartGroup.chartGroupEntries)
+
     const GROUP_EDIT_LINK = getChartGroupURL(chartGroup.id)
 
     const renderCardInfo = () => (
@@ -56,9 +57,9 @@ export const ChartGroupCard = ({ chartGroup }: ChartGroupCardProps) => {
 
     const renderFooter = () => (
         <div className="flex left dc__content-space dc__border-top-n1 px-20 py-16 dc__gap-6">
-            <div className="flex dc__gap-6">
-                <Icon name="ic-folder-color" size={18} color={null} />
-                <InteractiveCellText text="" rootClassName="cn-7 lh-1-5" fontSize={12} />
+            <div className="flex">
+                {getAlphabetIcon(chartGroup.createdBy)}
+                <InteractiveCellText text={chartGroup.createdBy} rootClassName="cn-7 lh-1-5" fontSize={12} />
             </div>
             <span className="lh-20 dc__truncate m-0 dc__align-item-left cn-7 lh-1-5 dc__mxw-120 fs-12">
                 {chartGroup.chartGroupEntries?.length || 0} charts
@@ -75,7 +76,15 @@ export const ChartGroupCard = ({ chartGroup }: ChartGroupCardProps) => {
         >
             <div className="flexbox-col h-166 dc__gap-12 px-20 pt-20 pb-16">
                 <div className="flexbox">
-                    {chartGroupEntries?.map((chart) => <ChartIcon icon={chart.chartMetaData.icon} key={chart.id} />)}
+                    {chartGroupEntries?.length ? (
+                        chartGroupEntries.map((chart) => (
+                            <ChartIcon icon={chart.chartMetaData.icon} key={chart.id} isChartGroupCard />
+                        ))
+                    ) : (
+                        <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} />
+                        </div>
+                    )}
                 </div>
                 {renderCardInfo()}
             </div>

src/components/charts/ChartIcon.tsx

@@ -2,18 +2,20 @@ import { ImageWithFallback } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Helm } from '../../assets/icons/ic-default-chart.svg'
 
-const ChartIcon = ({ icon }: { icon: string }) => {
-    const chartIconClass = 'dc__chart-grid-item__icon chart-icon-dim br-4 dc__no-shrink'
+const ChartIcon = ({ icon, isChartGroupCard }: { icon: string; isChartGroupCard?: boolean }) => {
+    const chartIconClass = `dc__chart-grid-item__icon icon-dim-32 ${isChartGroupCard ? 'chart-group-card__icon' : 'chart-icon-dim'} br-4 dc__no-shrink`
 
     return (
-        <div className="icon-wrapper">
+        <div
+            className={`${isChartGroupCard ? 'chart-group-card__icon-wrapper' : 'chart-card__icon-wrapper'} border__secondary-translucent bg__secondary br-8 p-8 dc__w-fit-content h-50`}
+        >
             <ImageWithFallback
                 imageProps={{
                     height: 32,
                     width: 32,
                     src: icon,
                     alt: 'chart',
-                    className: 'dc__chart-grid-item__icon chart-icon-dim br-4 dc__no-shrink',
+                    className: chartIconClass,
                 }}
                 fallbackImage={<Helm className={chartIconClass} />}
             />

src/components/charts/charts.scss

@@ -22,18 +22,8 @@
         background-color: var(--B50);
     }
 
-    .icon-wrapper {
-        border: 1px solid var(--border-secondary-translucent);
-        background-color: var(--bg-secondary);
-        border-radius: 8px;
-        padding: 8px;
-        width: fit-content;
-        height: 50px;
-    }
 
     .chart-icon-dim {
-        width: 32px;
-        height: 32px;
         transition: transform 0.17s ease-out;
     }
 }
@@ -54,7 +44,7 @@
         color: var(--B500);
     }
 
-    .icon-wrapper {
+    .chart-card__icon-wrapper {
         border: 1px solid transparent;
         background-color: transparent;
     }
@@ -67,6 +57,10 @@
         transform: translateX(30%);
         visibility: visible;
     }
+
+    .chart-group-card__icon-wrapper {
+        margin-right: -12px;
+    }
 }
 
 .devtron-stepper {
@@ -152,6 +146,11 @@
     overflow: hidden;
 }
 
+.chart-group-card__icon-wrapper {
+    margin-right: -24px;
+    transition: transform 0.17s ease-out, margin-right 0.3s ease-out;
+}
+
 .deploy-selected-charts__applications-edit {
     background-color: transparent;
     padding: 0px;

src/components/charts/charts.types.tsx

@@ -160,6 +160,7 @@ export interface ChartGroup {
     name: string
     description: string
     chartGroupEntries: ChartGroupEntry[]
+    createdBy: string
 }
 
 export interface ChartEntryIdType {

src/components/charts/charts.util.tsx

@@ -50,7 +50,7 @@ export const renderDeprecatedWarning = () => {
 
 export const getChartGroupSubgroup = (chartGroupEntries): ChartGroupEntry[] => {
     let len = chartGroupEntries.length
-    len = len < 8 ? len : 8
+    len = len < 4 ? len : 4
     return chartGroupEntries.slice(0, len)
 }
 

src/css/base.scss

@@ -3306,6 +3306,10 @@ button.anchor {
     height: 48px !important;
 }
 
+.h-50 {
+    height: 50px !important;
+}
+
 .h-56 {
     height: 56px !important;
 }