Merge pull request #541 from devtron-labs/feat/animate-segmented-bar

arunjaindev · web-flow · commit 100c634c78a0 · 2025-01-31T18:51:48.000+05:30
feat: add animation in segmented bar
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.6.1",
+    "version": "1.6.2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Common/Dialogs/ConfirmationDialog.tsx b/src/Common/Dialogs/ConfirmationDialog.tsx
@@ -23,6 +23,9 @@ import {
     ConfirmationDialogType,
 } from './Types'
 
+/**
+ * @deprecated use confirmation modal instead
+ */
 const ConfirmationDialog = ({ className = '', children, close }: ConfirmationDialogType) => (
     <VisibleModal2 className="confirmation-dialog" close={close}>
         <div onClick={stopPropagation} className={`confirmation-dialog__body ${className}`}>{children}</div>
diff --git a/src/Common/SegmentedBarChart/SegmentedBarChart.tsx b/src/Common/SegmentedBarChart/SegmentedBarChart.tsx
@@ -15,6 +15,7 @@
  */
 
 import React from 'react'
+import { motion } from 'framer-motion'
 import { SegmentedBarChartProps, Entity } from './types'
 import { FALLBACK_ENTITY } from './constants'
 import './styles.scss'
@@ -26,9 +27,10 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     labelClassName,
     isProportional,
     swapLegendAndBar = false,
+    showAnimationOnBar = false,
 }) => {
     const total = entities.reduce((sum, entity) => entity.value + sum, 0)
-    const filteredEntities = entities.filter((entity) => entity.value)
+    const filteredEntities = entities.filter((entity) => !!entity.value)
 
     const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
 
@@ -46,20 +48,20 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
 
     const renderContent = () => {
         if (isProportional) {
-            return entities
-                .filter((entity) => !!entity.value)
-                .map((entity) => (
-                    <div className="flexbox-col">
-                        {renderValue(entity.value, entity.label)}
-                        <div className="flex left dc__gap-6">
-                            <span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
-                            {renderLabel(entity.label)}
-                        </div>
+            return filteredEntities.map((entity, idx) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={idx} className="flexbox-col">
+                    {renderValue(entity.value, entity.label)}
+                    <div className="flex left dc__gap-6">
+                        <span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
+                        {renderLabel(entity.label)}
                     </div>
-                ))
+                </div>
+            ))
         }
-        return entities.map((entity) => (
-            <div className={`${isProportional ? 'flexbox-col' : 'flexbox  dc__gap-4 dc__align-items-center'}`}>
+        return entities.map((entity, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={idx} className="flexbox  dc__gap-4 dc__align-items-center">
                 <div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
                 {renderValue(entity.value, entity.label)}
                 {renderLabel(entity.label)}
@@ -78,8 +80,17 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     )
 
     const renderBar = () => (
-        <div className="flexbox dc__gap-2">
-            {filteredEntities?.map((entity, index, map) => (
+        <motion.div
+            {...(showAnimationOnBar
+                ? {
+                      initial: { width: 0 },
+                      animate: { width: '100%' },
+                      transition: { duration: 0.6 },
+                  }
+                : {})}
+            className="flexbox dc__gap-2"
+        >
+            {filteredEntities.map((entity, index, map) => (
                 <div
                     key={entity.label}
                     className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
@@ -88,7 +99,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
                     style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
                 />
             ))}
-        </div>
+        </motion.div>
     )
 
     return (
diff --git a/src/Common/SegmentedBarChart/types.ts b/src/Common/SegmentedBarChart/types.ts
@@ -27,4 +27,5 @@ export interface SegmentedBarChartProps {
     labelClassName?: string
     isProportional?: boolean
     swapLegendAndBar?: boolean
+    showAnimationOnBar?: boolean
 }
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
@@ -70,7 +70,9 @@ export const DeploymentHistoryConfigDiffCompare = ({
         // Set fullscreen for comparing deployment history config
         setFullScreenView(true)
         // Set default initial sorting
-        handleSorting(DEPLOYMENT_CONFIG_DIFF_SORT_KEY)
+        if (sortBy !== DEPLOYMENT_CONFIG_DIFF_SORT_KEY) {
+            handleSorting(DEPLOYMENT_CONFIG_DIFF_SORT_KEY)
+        }
 
         return () => {
             setConvertVariables(false)
diff --git a/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx b/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx
@@ -82,17 +82,20 @@ const ConfirmationModalBody = ({
                 initial={{ y: 100, opacity: 0, scale: 0.75 }}
                 animate={{ y: 0, opacity: 1, scale: 1 }}
             >
-                <div className="flexbox-col dc__gap-12 p-20">
+                <div className="flexbox-col dc__gap-16 p-20">
                     {cloneElement(RenderIcon, {
                         className: `${RenderIcon.props?.className ?? ''} icon-dim-48 dc__no-shrink`,
                     })}
-                    <span className="cn-9 fs-16 fw-6 lh-24 dc__word-break">{title}</span>
 
-                    {typeof subtitle === 'string' ? (
-                        <span className="cn-8 fs-13 fw-4 lh-20 dc__word-break">{subtitle}</span>
-                    ) : (
-                        subtitle
-                    )}
+                    <div className="flexbox-col dc__gap-8">
+                        <span className="cn-9 fs-16 fw-6 lh-24 dc__word-break">{title}</span>
+
+                        {typeof subtitle === 'string' ? (
+                            <span className="cn-8 fs-13 fw-4 lh-20 dc__word-break">{subtitle}</span>
+                        ) : (
+                            subtitle
+                        )}
+                    </div>
 
                     {children}
 
diff --git a/src/Shared/Components/Security/SecurityDetailsCards/SecurityCard.tsx b/src/Shared/Components/Security/SecurityDetailsCards/SecurityCard.tsx
@@ -119,6 +119,7 @@ const SecurityCard = ({
                         labelClassName="fs-13 fw-4 lh-20 cn-9"
                         countClassName="fs-13 fw-6 lh-20 cn-7"
                         swapLegendAndBar
+                        showAnimationOnBar
                     />
                 )}
                 {subtitle && <span className="cn-9 fs-13 lh-20">{subtitle}</span>}
diff --git a/src/Shared/Components/Security/SecurityModal/SecurityModal.tsx b/src/Shared/Components/Security/SecurityModal/SecurityModal.tsx
@@ -138,6 +138,8 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
             <div className="flexbox-col p-20 dc__gap-16">
                 {!entities?.length ? null : (
                     <InfoCard
+                        // Added key so that segmented chart animation is visible on changing category/ subCategory
+                        key={`${state.category}-${state.subCategory}`}
                         entities={entities}
                         lastScanTimeString={lastScanTimeString}
                         scanToolName={scanToolName}
diff --git a/src/Shared/Components/Security/SecurityModal/components/InfoCard.tsx b/src/Shared/Components/Security/SecurityModal/components/InfoCard.tsx
@@ -24,7 +24,7 @@ import { InfoCardPropsType } from '../types'
 
 const InfoCard: React.FC<InfoCardPropsType> = ({ entities, lastScanTimeString, scanToolName, scanToolUrl }) => (
     <div className="info-card">
-        <SegmentedBarChart entities={entities} rootClassName="p-16 fs-13" countClassName="fw-6" />
+        <SegmentedBarChart entities={entities} rootClassName="p-16 fs-13" countClassName="fw-6" showAnimationOnBar />
 
         {(lastScanTimeString || scanToolName) && (
             <>
diff --git a/src/Shared/Components/Security/SecurityModal/config/CodeScan.tsx b/src/Shared/Components/Security/SecurityModal/config/CodeScan.tsx
@@ -443,11 +443,8 @@ export const getCodeScanInfoCardData = (
     }
     switch (subCategory) {
         case SUB_CATEGORIES.VULNERABILITIES:
-            return {
-                entities: mapSeveritiesToSegmentedBarChartEntities(data[subCategory]?.summary.severities),
-                ...scanInfo,
-            }
         case SUB_CATEGORIES.LICENSE:
+        case SUB_CATEGORIES.EXPOSED_SECRETS:
             return {
                 entities: mapSeveritiesToSegmentedBarChartEntities(data[subCategory]?.summary.severities),
                 ...scanInfo,
@@ -457,11 +454,6 @@ export const getCodeScanInfoCardData = (
                 entities: mapSeveritiesToSegmentedBarChartEntities(data[subCategory]?.misConfSummary.status),
                 ...scanInfo,
             }
-        case SUB_CATEGORIES.EXPOSED_SECRETS:
-            return {
-                entities: mapSeveritiesToSegmentedBarChartEntities(data[subCategory]?.summary.severities),
-                ...scanInfo,
-            }
         default:
             return null
     }
diff --git a/src/Shared/Components/Security/SecurityModal/config/ImageScan.tsx b/src/Shared/Components/Security/SecurityModal/config/ImageScan.tsx
@@ -321,24 +321,12 @@ export const getImageScanInfoCardData = (
     subCategory: SecurityModalStateType['subCategory'],
 ): InfoCardPropsType => {
     const image = data[subCategory]?.list?.[0]
-    const scanInfo: Pick<InfoCardPropsType, 'scanToolName' | 'scanToolUrl'> = {
+
+    return {
+        entities: mapSeveritiesToSegmentedBarChartEntities(data[subCategory]?.summary.severities),
         scanToolName: image?.scanToolName,
         scanToolUrl: image?.scanToolUrl,
-    }
-
-    switch (subCategory) {
-        case SUB_CATEGORIES.VULNERABILITIES:
-            return {
-                entities: mapSeveritiesToSegmentedBarChartEntities(data[subCategory]?.summary.severities),
-                ...scanInfo,
-            }
-        case SUB_CATEGORIES.LICENSE:
-            return {
-                entities: mapSeveritiesToSegmentedBarChartEntities(data[subCategory]?.summary.severities),
-                ...scanInfo,
-            }
-        default:
-            return null
+        lastScanTimeString: image?.StartedOn,
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "1.6.1",`
	`3`	`+ "version": "1.6.2",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,5 @@ export interface SegmentedBarChartProps {`
`27`	`27`	`labelClassName?: string`
`28`	`28`	`isProportional?: boolean`
`29`	`29`	`swapLegendAndBar?: boolean`
	`30`	`+ showAnimationOnBar?: boolean`
`30`	`31`	`}`