feat: StatusComponent - add inprogress icon, code refactor

Author: RohitRaj011

src/Assets/IconV2/ic-in-progress.svg

@@ -45,6 +45,7 @@ import { HISTORY_LABEL, FILTER_STYLE } from './constants'
 import { statusColor as colorMap } from '../../constants'
 import { DeploymentStatus } from '../StatusComponent'
 import { Icon } from '../Icon'
+import { getTriggerStatusIcon } from './utils'
 
 const SummaryTooltipCard = React.memo(
     ({
@@ -217,7 +218,12 @@ const HistorySummaryCard = React.memo(
                     ref={assignTargetCardRef}
                 >
                     <div className="w-100 deployment-history-card">
-                        <DeploymentStatus status={status} hideMessage hideIconTooltip iconSize={20} />
+                        <DeploymentStatus
+                            status={getTriggerStatusIcon(status)}
+                            hideMessage
+                            hideIconTooltip
+                            iconSize={20}
+                        />
                         <div className="flexbox-col dc__gap-8">
                             <div className="flex column left">
                                 <div className="cn-9 fs-13 lh-20">

src/Shared/Components/CICDHistory/Sidebar.tsx

@@ -34,7 +34,8 @@ import {
     NodeFilters,
 } from './types'
 import { Icon } from '../Icon'
-import { AppStatus } from '../StatusComponent'
+import { AppStatus, StatusType } from '../StatusComponent'
+import { TERMINAL_STATUS_MAP } from './constants'
 
 export const getTriggerHistoryFilterCriteria = ({
     appId,
@@ -219,3 +220,17 @@ export const getStatusFilters = ({
 export const getAppStatusIcon = (status: NodeStatus | NodeFilters, hideMessage = false) => (
     <AppStatus status={status} hideMessage={hideMessage} hideIconTooltip />
 )
+
+export const getTriggerStatusIcon = (status: string) => {
+    const triggerStatus = status?.toLowerCase()
+
+    switch (triggerStatus) {
+        case TERMINAL_STATUS_MAP.RUNNING:
+        case TERMINAL_STATUS_MAP.PROGRESSING:
+        case TERMINAL_STATUS_MAP.STARTING:
+        case TERMINAL_STATUS_MAP.INITIATING:
+            return StatusType.INPROGRESS
+        default:
+            return status
+    }
+}

src/Shared/Components/CICDHistory/utils.tsx

@@ -26,6 +26,7 @@ import { ReactComponent as ICHeartGreen } from '@IconsV2/ic-heart-green.svg'
 import { ReactComponent as ICHeartRedAnimated } from '@IconsV2/ic-heart-red-animated.svg'
 import { ReactComponent as ICHeartRed } from '@IconsV2/ic-heart-red.svg'
 import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
+import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
@@ -70,6 +71,7 @@ export const iconMap = {
     'ic-heart-red-animated': ICHeartRedAnimated,
     'ic-heart-red': ICHeartRed,
     'ic-hibernate': ICHibernate,
+    'ic-in-progress': ICInProgress,
     'ic-info-outline': ICInfoOutline,
     'ic-job-color': ICJobColor,
     'ic-missing': ICMissing,

src/Shared/Components/Icon/Icon.tsx

@@ -19,7 +19,7 @@ import { StatusComponent } from './StatusComponent'
 import { APP_STATUS } from './constants'
 
 export const AppStatus = ({ status, isJobView = false, isVirtualEnv = false, ...restProps }: AppStatusProps) => {
-    const appStatus = isVirtualEnv ? APP_STATUS.NOT_AVAILABLE : status
+    const appStatus = isVirtualEnv ? APP_STATUS.NOT_AVAILABLE : (status ?? '')
     const isNotDeployed =
         appStatus.toLowerCase().replace(/ /g, '-') === APP_STATUS.NOT_DEPLOYED ||
         appStatus.toLowerCase() === APP_STATUS.NOT_DEPLOYED_NO_SPACE

src/Shared/Components/StatusComponent/AppStatus.tsx

@@ -34,7 +34,7 @@ export const StatusComponent = ({
     hideIconTooltip = false,
     message,
 }: StatusComponentProps) => {
-    const appStatusLowerCase = status.toLowerCase().replace(/ /g, '-')
+    const appStatusLowerCase = (status || '').toLowerCase().replace(/ /g, '-')
     const textContent = message || status || '-'
 
     const renderIcon = () => {
@@ -73,7 +73,7 @@ export const StatusComponent = ({
     const renderMessage = () => (
         <Tooltip content={textContent}>
             <p
-                data-testid={`${status}-status`}
+                data-testid={`${status || 'status-is-null'}-status`}
                 className="m-0 dc__ellipsis-right dc__first-letter-capitalize fs-13 lh-20 cn-6"
             >
                 {textContent}

src/Shared/Components/StatusComponent/StatusComponent.tsx

@@ -15,6 +15,7 @@ export enum StatusType {
     SUSPENDED = 'SUSPENDED',
     DEGRADED = 'DEGRADED',
     PROGRESSING = 'PROGRESSING',
+    INPROGRESS = 'INPROGRESS',
     HIBERNATING = 'HIBERNATING',
     TIMED_OUT = 'TIMED_OUT',
 }

src/Shared/Components/StatusComponent/types.ts

@@ -1,5 +1,6 @@
 import { TIMELINE_STATUS } from '@Shared/constants'
 import { IconName, IconsProps } from '../Icon'
+import { StatusType } from './types'
 
 export const getIconName = (status: string, showAnimatedIcon: boolean): IconName => {
     switch (status) {
@@ -42,8 +43,9 @@ export const getIconName = (status: string, showAnimatedIcon: boolean): IconName
         case 'running':
         case 'request_accepted':
         case 'starting':
-        case 'inprogress':
             return 'ic-circle-loader'
+        case 'inprogress':
+            return 'ic-in-progress'
         case 'hibernating':
         case 'hibernated':
             return 'ic-hibernate'
@@ -69,7 +71,6 @@ export const getIconColor = (status: string): IconsProps['color'] => {
         case 'running':
         case 'request_accepted':
         case 'starting':
-        case 'inprogress':
             return 'O500'
         case 'timedout':
         case 'timed_out':
@@ -84,13 +85,13 @@ export const getDeploymentStatusFromStatus = (status: string): string => {
 
     switch (deploymentStatus) {
         case TIMELINE_STATUS.ABORTED:
-            return 'Aborted'
+            return StatusType.ABORTED
         case TIMELINE_STATUS.DEGRADED:
-            return 'Failed'
+            return StatusType.FAILED
         case TIMELINE_STATUS.HEALTHY:
-            return 'Succeeded'
+            return StatusType.SUCCEEDED
         case TIMELINE_STATUS.INPROGRESS:
-            return 'Progressing'
+            return StatusType.INPROGRESS
         default:
             return status
     }