feat: Add DeploymentStatusBreakdown component with types and utility functions

- Created new component for deployment status breakdown.
- Added types for workflow runner status and deployment status details.
- Implemented utility functions to process deployment status details and update timeline data.
- Updated constants and types to include new deployment statuses and timeline statuses.
- Refactored existing status component to utilize new types.
- Cleaned up unused code and imports in Helpers and StatusComponent.

Author: AbhishekA1509

src/Common/Helper.tsx

@@ -17,7 +17,7 @@
 import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import DOMPurify from 'dompurify'
 import { JSONPath, JSONPathOptions } from 'jsonpath-plus'
-import { compare as compareJSON, applyPatch, unescapePathComponent,deepClone } from 'fast-json-patch'
+import { compare as compareJSON, applyPatch, unescapePathComponent, deepClone } from 'fast-json-patch'
 import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
@@ -516,7 +516,7 @@ export const getUrlWithSearchParams = <T extends string | number = string | numb
 /**
  * Custom exception logger function for logging errors to sentry
  */
-export const logExceptionToSentry: typeof Sentry.captureException  = Sentry.captureException.bind(window)
+export const logExceptionToSentry: typeof Sentry.captureException = Sentry.captureException.bind(window)
 
 export const customStyles = {
     control: (base, state) => ({
@@ -614,7 +614,10 @@ const buildObjectFromPathTokens = (index: number, tokens: string[], value: any)
     const numberKey = Number(key)
     const isKeyNumber = !Number.isNaN(numberKey)
     return isKeyNumber
-        ? [...Array(numberKey).fill(UNCHANGED_ARRAY_ELEMENT_SYMBOL), buildObjectFromPathTokens(index + 1, tokens, value)]
+        ? [
+              ...Array(numberKey).fill(UNCHANGED_ARRAY_ELEMENT_SYMBOL),
+              buildObjectFromPathTokens(index + 1, tokens, value),
+          ]
         : { [unescapePathComponent(key)]: buildObjectFromPathTokens(index + 1, tokens, value) }
 }
 
@@ -664,7 +667,12 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
     })
 
 export const convertJSONPointerToJSONPath = (pointer: string) =>
-    unescapePathComponent(pointer.replace(/\/([\*0-9]+)\//g, '[$1].').replace(/\//g, '.').replace(/\./, '$.'))
+    unescapePathComponent(
+        pointer
+            .replace(/\/([\*0-9]+)\//g, '[$1].')
+            .replace(/\//g, '.')
+            .replace(/\./, '$.'),
+    )
 
 export const flatMapOfJSONPaths = (
     paths: string[],
@@ -1001,7 +1009,7 @@ export const getBranchIcon = (sourceType, _isRegex?: boolean, webhookEventName?:
             return <ICPullRequest className="scn-6" />
         }
         if (webhookEventName === WebhookEventNameType.TAG_CREATION) {
-        return <ICTag className="scn-6" />
+            return <ICTag className="scn-6" />
         }
         return <ICWebhook />
     }
@@ -1025,7 +1033,6 @@ export const getIframeWithDefaultAttributes = (iframeString: string, defaultName
     const parentDiv = document.createElement('div')
     parentDiv.innerHTML = getSanitizedIframe(iframeString)
 
-
     const iframe = parentDiv.querySelector('iframe')
     if (iframe) {
         if (!iframe.hasAttribute('title') && !!defaultName) {
@@ -1094,5 +1101,15 @@ export const getTTLInHumanReadableFormat = (ttl: number): string => {
     }
     const humanizedDuration = moment.duration(absoluteTTL, 'seconds').humanize(false)
     // Since moment.js return "a" or "an" for singular values so replacing with 1.
-    return humanizedDuration.replace(/^(a|an) /, '1 ');
-}
+    return humanizedDuration.replace(/^(a|an) /, '1 ')
+}
+
+export const findRight = <T,>(arr: T[], predicate: (item: T) => boolean): T => {
+    for (let i = arr.length - 1; i >= 0; i--) {
+        if (predicate(arr[i])) {
+            return arr[i]
+        }
+    }
+
+    return null
+}

src/Shared/Components/AppStatusModal/service.ts

@@ -1,10 +1,14 @@
 import { get, getIsRequestAborted } from '@Common/API'
 import { ROUTES } from '@Common/Constants'
 import { getUrlWithSearchParams, showError } from '@Common/Helper'
-import { processDeploymentStatusDetailsData } from '@Shared/Helpers'
-import { AppDetails, AppType } from '@Shared/types'
+import {
+    AppDetails,
+    AppType,
+    DeploymentStatusDetailsBreakdownDataType,
+    DeploymentStatusDetailsType,
+} from '@Shared/types'
 
-import { DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType } from '../CICDHistory'
+import { processDeploymentStatusDetailsData } from '../DeploymentStatusBreakdown'
 import { GetAppDetailsParamsType } from './types'
 
 export const getAppDetails = async ({

src/Shared/Components/AppStatusModal/types.ts

@@ -1,9 +1,12 @@
 import { FunctionComponent } from 'react'
 
 import { APIOptions } from '@Common/Types'
-import { AppDetails, ConfigDriftModalProps } from '@Shared/types'
-
-import { DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType } from '../CICDHistory'
+import {
+    AppDetails,
+    ConfigDriftModalProps,
+    DeploymentStatusDetailsBreakdownDataType,
+    DeploymentStatusDetailsType,
+} from '@Shared/types'
 
 export enum AppStatusModalTabType {
     APP_STATUS = 'appStatus',

src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx

@@ -18,21 +18,19 @@ import { useEffect, useRef, useState } from 'react'
 import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
 
 import { IndexStore } from '@Shared/Store'
+import { DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType, TIMELINE_STATUS } from '@Shared/types'
 
 import { ReactComponent as Arrow } from '../../../Assets/Icon/ic-arrow-forward.svg'
 import mechanicalOperation from '../../../Assets/Icon/ic-mechanical-operation.svg'
 import { DeploymentAppTypes, GenericEmptyState, Progressing, URLS } from '../../../Common'
-import { DEPLOYMENT_STATUS, EMPTY_STATE_STATUS, TIMELINE_STATUS } from '../../constants'
-import { getHandleOpenURL, getIsApprovalPolicyConfigured, processDeploymentStatusDetailsData } from '../../Helpers'
+import { DEPLOYMENT_STATUS, EMPTY_STATE_STATUS } from '../../constants'
+import { getHandleOpenURL, getIsApprovalPolicyConfigured } from '../../Helpers'
+import { processDeploymentStatusDetailsData } from '../DeploymentStatusBreakdown'
 import CDEmptyState from './CDEmptyState'
 import { DEPLOYMENT_STATUS_QUERY_PARAM } from './constants'
 import DeploymentStatusDetailBreakdown from './DeploymentStatusBreakdown'
 import { getDeploymentStatusDetail } from './service'
-import {
-    DeploymentDetailStepsType,
-    DeploymentStatusDetailsBreakdownDataType,
-    DeploymentStatusDetailsType,
-} from './types'
+import { DeploymentDetailStepsType } from './types'
 
 let deploymentStatusTimer = null
 const DeploymentDetailSteps = ({

src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx

@@ -17,12 +17,12 @@
 import { Fragment } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 
+import { TIMELINE_STATUS } from '@Shared/types'
+
 import { URLS } from '../../../Common'
-import { TIMELINE_STATUS } from '../../constants'
 import ErrorBar from '../Error/ErrorBar'
 import { DeploymentStatusDetailRow } from './DeploymentStatusDetailRow'
-import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
-import { DeploymentStatusDetailBreakdownType, DeploymentStatusDetailRowType, ErrorInfoStatusBarType } from './types'
+import { DeploymentStatusDetailBreakdownType, DeploymentStatusDetailRowType } from './types'
 
 import './DeploymentStatusBreakdown.scss'
 
@@ -43,11 +43,6 @@ const DeploymentStatusDetailBreakdown = ({
             deploymentDetailedData: deploymentStatusDetailsBreakdownData,
         }
 
-    const errorInfoStatusBarProps: Pick<ErrorInfoStatusBarType, 'lastFailedStatusType' | 'errorMessage'> = {
-        lastFailedStatusType: deploymentStatusDetailsBreakdownData.nonDeploymentError,
-        errorMessage: deploymentStatusDetailsBreakdownData.deploymentError,
-    }
-
     return (
         <>
             {!url.includes(`/${URLS.CD_DETAILS}`) && <ErrorBar appDetails={appDetails} />}
@@ -63,17 +58,17 @@ const DeploymentStatusDetailBreakdown = ({
                     ]
                 ) ? (
                     <>
-                        {[TIMELINE_STATUS.GIT_COMMIT, TIMELINE_STATUS.ARGOCD_SYNC, TIMELINE_STATUS.KUBECTL_APPLY].map(
-                            (timelineStatus) => (
-                                <Fragment key={timelineStatus}>
-                                    <ErrorInfoStatusBar type={timelineStatus} {...errorInfoStatusBarProps} />
-                                    <DeploymentStatusDetailRow
-                                        type={timelineStatus}
-                                        {...deploymentStatusDetailRowProps}
-                                    />
-                                </Fragment>
-                            ),
-                        )}
+                        {(
+                            [
+                                TIMELINE_STATUS.GIT_COMMIT,
+                                TIMELINE_STATUS.ARGOCD_SYNC,
+                                TIMELINE_STATUS.KUBECTL_APPLY,
+                            ] as DeploymentStatusDetailRowType['type'][]
+                        ).map((timelineStatus) => (
+                            <Fragment key={timelineStatus}>
+                                <DeploymentStatusDetailRow type={timelineStatus} {...deploymentStatusDetailRowProps} />
+                            </Fragment>
+                        ))}
 
                         <DeploymentStatusDetailRow
                             type={TIMELINE_STATUS.APP_HEALTH}

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -20,18 +20,17 @@ import { useParams } from 'react-router-dom'
 import moment from 'moment'
 
 import { ShowMoreText } from '@Shared/Components/ShowMoreText'
-import { AppType } from '@Shared/types'
+import { AppType, TIMELINE_STATUS } from '@Shared/types'
 
 import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { DATE_TIME_FORMATS, showError } from '../../../Common'
-import { ComponentSizeType, DEPLOYMENT_STATUS, statusIcon, TIMELINE_STATUS } from '../../constants'
+import { ComponentSizeType, DEPLOYMENT_STATUS, statusIcon } from '../../constants'
 import { AppStatusContent } from '../AppStatusModal'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { APP_HEALTH_DROP_DOWN_LIST, MANIFEST_STATUS_HEADERS, TERMINAL_STATUS_MAP } from './constants'
-import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
 import { getManualSync } from './service'
 import { DeploymentStatusDetailRowType } from './types'
-import { renderIcon } from './utils'
+import { getDeploymentTimelineBGColorFromIcon, renderDeploymentTimelineIcon } from './utils'
 
 export const DeploymentStatusDetailRow = ({
     type,
@@ -43,19 +42,22 @@ export const DeploymentStatusDetailRow = ({
     // Can't use appDetails directly as in case of deployment history, appDetails will be null
     const { appId: paramAppId, envId: paramEnvId } = useParams<{ appId: string; envId: string }>()
 
+    const [isManualSyncLoading, setIsManualSyncLoading] = useState<boolean>(false)
+
     const statusBreakDownType = deploymentDetailedData.deploymentStatusBreakdown[type]
-    const [collapsed, toggleCollapsed] = useState<boolean>(statusBreakDownType.isCollapsed)
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(statusBreakDownType.isCollapsed)
 
     const isHelmManifestPushFailed =
         type === TIMELINE_STATUS.HELM_MANIFEST_PUSHED_TO_HELM_REPO &&
         deploymentDetailedData.deploymentStatus === statusIcon.failed
 
     useEffect(() => {
-        toggleCollapsed(statusBreakDownType.isCollapsed)
+        setIsCollapsed(statusBreakDownType.isCollapsed)
     }, [statusBreakDownType.isCollapsed])
 
     const manualSyncData = async () => {
         try {
+            setIsManualSyncLoading(true)
             const { appId: appDetailsAppId, appType, environmentId: appDetailsEnvId, installedAppId } = appDetails || {}
             const parsedAppIdFromAppDetails = appType === AppType.DEVTRON_HELM_CHART ? installedAppId : appDetailsAppId
 
@@ -65,10 +67,12 @@ export const DeploymentStatusDetailRow = ({
             await getManualSync({ appId, envId })
         } catch (error) {
             showError(error)
+        } finally {
+            setIsManualSyncLoading(false)
         }
     }
     const toggleDropdown = () => {
-        toggleCollapsed(!collapsed)
+        setIsCollapsed(!isCollapsed)
     }
 
     const renderDetailedData = () => {
@@ -78,16 +82,15 @@ export const DeploymentStatusDetailRow = ({
 
         return (
             <div className="px-8 py-12">
-                <div className="">
-                    {deploymentDetailedData.deploymentStatusBreakdown[TIMELINE_STATUS.KUBECTL_APPLY].kubeList?.map(
-                        (items, index) => (
-                            // eslint-disable-next-line react/no-array-index-key
-                            <div className="flex left lh-20 mb-8" key={`item-${index}`}>
-                                {renderIcon(items.icon)}
-                                <span className="ml-12">{items.message}</span>
-                            </div>
-                        ),
-                    )}
+                <div>
+                    {/* TODO: Can be statusBreakDownType */}
+                    {statusBreakDownType.subSteps?.map((items, index) => (
+                        // eslint-disable-next-line react/no-array-index-key
+                        <div className="flex left lh-20 mb-8" key={`item-${index}`}>
+                            {renderDeploymentTimelineIcon(items.icon)}
+                            <span className="ml-12">{items.message}</span>
+                        </div>
+                    ))}
                 </div>
                 {statusBreakDownType.resourceDetails?.length ? (
                     <div className="pl-32">
@@ -129,24 +132,30 @@ export const DeploymentStatusDetailRow = ({
         )
     }
 
-    const renderErrorInfoBar = () => (
-        <ErrorInfoStatusBar
-            type={TIMELINE_STATUS.HELM_MANIFEST_PUSHED_TO_HELM_REPO}
-            lastFailedStatusType={deploymentDetailedData.nonDeploymentError}
-            errorMessage={deploymentDetailedData.deploymentError}
-            hideVerticalConnector
-            hideErrorIcon
-        />
-    )
+    const renderErrorInfoBar = () => {
+        if (deploymentDetailedData.lastFailedStatusType !== TIMELINE_STATUS.HELM_MANIFEST_PUSHED_TO_HELM_REPO) {
+            return null
+        }
+
+        return (
+            <div className="bcr-1 fs-13 p-8">
+                <span className="dc__word-break lh-20">{deploymentDetailedData.deploymentError}</span>
+                <ol className="m-0 pl-20">
+                    <li>Ensure provided repository path is valid</li>
+                    <li>Check if credentials provided for OCI registry are valid and have PUSH permission</li>
+                </ol>
+            </div>
+        )
+    }
 
     const isAccordion =
-        (type === TIMELINE_STATUS.KUBECTL_APPLY && statusBreakDownType.kubeList?.length) ||
+        statusBreakDownType.subSteps?.length ||
         (type === TIMELINE_STATUS.APP_HEALTH && APP_HEALTH_DROP_DOWN_LIST.includes(statusBreakDownType.icon)) ||
         ((type === TIMELINE_STATUS.GIT_COMMIT || type === TIMELINE_STATUS.ARGOCD_SYNC) &&
             statusBreakDownType.icon === 'failed')
 
     const renderAccordionDetails = () => {
-        if (!isAccordion || !collapsed) {
+        if (isCollapsed) {
             return null
         }
 
@@ -158,9 +167,7 @@ export const DeploymentStatusDetailRow = ({
                             statusBreakDownType.icon !== 'inprogress' ? 'bcr-1' : 'bcy-2'
                         }`}
                     >
-                        {type === TIMELINE_STATUS.APP_HEALTH
-                            ? statusBreakDownType.timelineStatus
-                            : deploymentDetailedData.deploymentStatusBreakdown[type].timelineStatus}
+                        {statusBreakDownType.timelineStatus}
 
                         {(deploymentDetailedData.deploymentStatus === DEPLOYMENT_STATUS.TIMED_OUT ||
                             deploymentDetailedData.deploymentStatus === DEPLOYMENT_STATUS.UNABLE_TO_FETCH) && (
@@ -170,6 +177,7 @@ export const DeploymentStatusDetailRow = ({
                                 variant={ButtonVariantType.text}
                                 size={ComponentSizeType.xxs}
                                 onClick={manualSyncData}
+                                isLoading={isManualSyncLoading}
                             />
                         )}
                     </div>
@@ -190,10 +198,10 @@ export const DeploymentStatusDetailRow = ({
         <>
             <div className="bw-1 en-2">
                 <div
-                    className={`flexbox dc__align-items-center dc__content-space dc__gap-12 py-8 px-8 bg__primary ${collapsed ? (!isHelmManifestPushFailed ? 'br-4' : '') : 'border-collapse'}`}
+                    className={`flexbox dc__align-items-center dc__content-space dc__gap-12 py-8 px-8 bg__primary ${isCollapsed ? (!isHelmManifestPushFailed ? 'br-4' : '') : 'border-collapse'}`}
                 >
                     <div className="flexbox dc__align-items-center dc__gap-12 flex-grow-1">
-                        {renderIcon(statusBreakDownType.icon)}
+                        {renderDeploymentTimelineIcon(statusBreakDownType.icon)}
                         <span className="fs-13 flexbox dc__gap-6">
                             <span data-testid="deployment-status-step-name" className="dc__truncate">
                                 {statusBreakDownType.displayText}
@@ -208,9 +216,9 @@ export const DeploymentStatusDetailRow = ({
                         {statusBreakDownType.time !== '' && statusBreakDownType.icon !== 'inprogress' && (
                             <span
                                 data-testid="deployment-status-kubernetes-dropdown dc__no-shrink"
-                                className={`px-8 py-4 br-12 ${
-                                    statusBreakDownType.icon === 'failed' ? 'bcr-1 cr-5' : 'bcg-1 cg-7'
-                                }`}
+                                className={`px-8 py-4 br-12 ${getDeploymentTimelineBGColorFromIcon(
+                                    statusBreakDownType.icon,
+                                )}`}
                             >
                                 {moment(statusBreakDownType.time, 'YYYY-MM-DDTHH:mm:ssZ').format(
                                     DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT,
@@ -229,7 +237,7 @@ export const DeploymentStatusDetailRow = ({
                                 <DropDownIcon
                                     style={{
                                         marginLeft: 'auto',
-                                        ['--rotateBy' as any]: `${180 * Number(!!collapsed)}deg`,
+                                        ['--rotateBy' as any]: `${180 * Number(!isCollapsed)}deg`,
                                     }}
                                     className="rotate"
                                 />