fix: use appStatus for debug button, rename to updateDeploymentStatusDetailsBreakdownData, minor css enhancement

Author: AbhishekA1509

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -4,7 +4,6 @@ import { getAIAnalyticsEvents } from '@Common/Helper'
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
 import { getAppDetailsURL } from '@Shared/Helpers'
-import { AppType } from '@Shared/types'
 
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
 import { DeploymentStatusDetailBreakdown } from '../CICDHistory'
@@ -106,21 +105,18 @@ export const AppStatusBody = ({
                         envId={appDetails.environmentId}
                         actionItem={
                             ExplainWithAIButton &&
-                            appDetails.appStatus?.toLowerCase() !== StatusType.HEALTHY.toLowerCase() &&
+                            appStatus?.toLowerCase() !== StatusType.HEALTHY.toLowerCase() &&
                             (debugNode || message) ? (
                                 <ExplainWithAIButton
                                     intelligenceConfig={{
                                         clusterId: appDetails.clusterId,
                                         metadata: {
                                             ...(debugNode ? { object: debugObject } : { message }),
                                             namespace: appDetails.namespace,
-                                            status: debugNode?.health?.status ?? appDetails.appStatus,
+                                            status: debugNode?.health?.status ?? appStatus,
                                         },
                                         prompt: `Debug ${message || 'error'} ${debugNode ? `of ${debugObject}` : ''} in ${appDetails.namespace}`,
-                                        analyticsCategory: getAIAnalyticsEvents(
-                                            'APP_STATUS',
-                                            appDetails.appStatus as AppType,
-                                        ),
+                                        analyticsCategory: getAIAnalyticsEvents('APP_STATUS', appDetails.appType),
                                     }}
                                 />
                             ) : null

src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx

@@ -29,7 +29,7 @@ const AppStatusModal = ({
     type,
     appDetails: appDetailsProp,
     processVirtualEnvironmentDeploymentData,
-    handleUpdateDeploymentStatusDetailsBreakdownData,
+    updateDeploymentStatusDetailsBreakdownData,
     isConfigDriftEnabled,
     configDriftModal: ConfigDriftModal,
     appId,
@@ -95,7 +95,7 @@ const AppStatusModal = ({
             deploymentStatusAbortControllerRef,
         )
 
-        handleUpdateDeploymentStatusDetailsBreakdownData?.(response)
+        updateDeploymentStatusDetailsBreakdownData?.(response)
 
         return response
     }

src/Shared/Components/AppStatusModal/types.ts

@@ -30,13 +30,13 @@ export type AppStatusModalProps = {
           envId: number
           appDetails?: never
           initialTab?: never
-          handleUpdateDeploymentStatusDetailsBreakdownData?: never
+          updateDeploymentStatusDetailsBreakdownData?: never
       }
     | {
           type: 'devtron-app' | 'other-apps' | 'stack-manager'
           appDetails: AppDetails
           initialTab: AppStatusModalTabType
-          handleUpdateDeploymentStatusDetailsBreakdownData: (data: DeploymentStatusDetailsBreakdownDataType) => void
+          updateDeploymentStatusDetailsBreakdownData: (data: DeploymentStatusDetailsBreakdownDataType) => void
           appId?: never
           envId?: never
       }

src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx

@@ -163,13 +163,12 @@ const DeploymentDetailSteps = ({
                 {renderDeploymentApprovalInfo &&
                     getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) &&
                     renderDeploymentApprovalInfo(userApprovalMetadata)}
-                <div className="p-20 w-100">
-                    <DeploymentStatusDetailBreakdown
-                        deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
-                        isVirtualEnvironment={isVirtualEnv.current}
-                        appDetails={appDetails}
-                    />
-                </div>
+                <DeploymentStatusDetailBreakdown
+                    deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
+                    isVirtualEnvironment={isVirtualEnv.current}
+                    appDetails={appDetails}
+                    rootClassName="p-20"
+                />
             </div>
         )
 

src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.scss

@@ -56,4 +56,8 @@
         border-radius: 0 0 4px 4px;
         border-top: 0;
     }
-}
+}
+
+.deployment-approval-container + .deployment-status-breakdown-container {
+    padding-top: 0px;
+}

src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx

@@ -25,6 +25,7 @@ const DeploymentStatusDetailBreakdown = ({
     deploymentStatusDetailsBreakdownData,
     isVirtualEnvironment,
     appDetails,
+    rootClassName = '',
 }: DeploymentStatusDetailBreakdownType) => {
     const isHelmManifestPushed =
         deploymentStatusDetailsBreakdownData.deploymentStatusBreakdown[
@@ -38,7 +39,10 @@ const DeploymentStatusDetailBreakdown = ({
         }
 
     return (
-        <div className="deployment-status-breakdown-container" data-testid="deployment-history-steps-status">
+        <div
+            className={`deployment-status-breakdown-container ${rootClassName}`}
+            data-testid="deployment-history-steps-status"
+        >
             <DeploymentStatusDetailRow
                 type={TIMELINE_STATUS.DEPLOYMENT_INITIATED}
                 {...deploymentStatusDetailRowProps}

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -186,7 +186,9 @@ export const DeploymentStatusDetailRow = ({
                                 {statusBreakDownType.displayText}
                             </span>
                             {statusBreakDownType.displaySubText && (
-                                <span className={`app-summary__status-name f-${statusBreakDownType.icon || 'waiting'}`}>
+                                <span
+                                    className={`app-summary__status-name dc__first-letter-capitalize--imp f-${statusBreakDownType.icon || 'waiting'}`}
+                                >
                                     {statusBreakDownType.displaySubText}
                                 </span>
                             )}

src/Shared/Components/CICDHistory/types.tsx

@@ -519,6 +519,7 @@ export interface DeploymentStatusDetailBreakdownType {
      * Won't be available if coming directly to deployment history from url
      */
     appDetails: AppDetails | null
+    rootClassName?: string
 }
 
 export interface DeploymentStatusDetailRowType extends Pick<DeploymentStatusDetailBreakdownType, 'appDetails'> {