feat: DeploymentDetailSteps - virtual environment - show deployed by exception user

Author: RohitRaj011

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -36,7 +36,6 @@ import {
     useGetUserRoles,
 } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
-import { Icon } from '../Icon'
 import { TargetPlatformBadgeList } from '../TargetPlatforms'
 import { TERMINAL_STATUS_MAP } from './constants'
 import { ArtifactType, CIListItemType } from './types'
@@ -75,6 +74,8 @@ export const CIListItem = ({
         !!appliedFilters?.length ||
         !!promotionApprovalMetadata?.promotedFromType
 
+    const showCIListHeader = (headerMetaDataPresent || isDeploymentWithoutApproval) && !!renderCIListHeader
+
     return (
         <>
             {type === 'deployed-artifact' && (
@@ -85,29 +86,20 @@ export const CIListItem = ({
                 </div>
             )}
 
-            {isDeploymentWithoutApproval && (
-                <div className="w-100 bg__primary flex left dc__gap-6 px-12 pt-8 pb-7 border__secondary--bottom border__primary--top border__primary--left border__primary--right dc__top-radius-4">
-                    <Icon name="ic-lightning-fill" color="Y500" />
-                    <p className="m-0 fs-13 lh-20 cn-9">Deployed by an exception user</p>
-                </div>
-            )}
-
-            {headerMetaDataPresent &&
-                renderCIListHeader &&
+            {showCIListHeader &&
                 renderCIListHeader({
                     userApprovalMetadata,
                     triggeredBy,
                     appliedFilters,
                     appliedFiltersTimestamp,
                     promotionApprovalMetadata,
                     selectedEnvironmentName,
+                    isDeploymentWithoutApproval,
                 })}
 
             <div
                 className={`dc__h-fit-content ci-artifact image-tag-parent-card bg__primary br-4 dc__border p-12 w-100 dc__mxw-800 ci-artifact--${type} ${
-                    (headerMetaDataPresent && renderCIListHeader) || isDeploymentWithoutApproval
-                        ? 'dc__no-top-radius dc__no-top-border'
-                        : ''
+                    showCIListHeader ? 'dc__no-top-radius dc__no-top-border' : ''
                 }`}
                 data-testid="hover-on-report-artifact"
             >

src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx

@@ -43,6 +43,7 @@ const DeploymentDetailSteps = ({
     isVirtualEnvironment,
     processVirtualEnvironmentDeploymentData,
     renderDeploymentApprovalInfo,
+    isDeploymentWithoutApproval,
 }: DeploymentDetailStepsType) => {
     const history = useHistory()
     const { url } = useRouteMatch()
@@ -51,6 +52,8 @@ const DeploymentDetailSteps = ({
         deploymentStatus?.toUpperCase() !== TIMELINE_STATUS.ABORTED,
     )
     const isVirtualEnv = useRef(isVirtualEnvironment)
+    const isDeploymentWithoutApprovalRef = useRef(isDeploymentWithoutApproval)
+
     const processedData =
         isVirtualEnv.current && processVirtualEnvironmentDeploymentData
             ? processVirtualEnvironmentDeploymentData()
@@ -69,7 +72,10 @@ const DeploymentDetailSteps = ({
             .then((deploymentStatusDetailRes) => {
                 if (deploymentStatus !== 'Aborted') {
                     // eslint-disable-next-line no-use-before-define
-                    processDeploymentStatusData(deploymentStatusDetailRes.result)
+                    processDeploymentStatusData({
+                        ...deploymentStatusDetailRes.result,
+                        isDeploymentWithoutApproval: isDeploymentWithoutApprovalRef.current,
+                    })
                 }
             })
             .catch(() => {
@@ -97,6 +103,10 @@ const DeploymentDetailSteps = ({
         isVirtualEnv.current = isVirtualEnvironment
     }, [isVirtualEnvironment])
 
+    useEffect(() => {
+        isDeploymentWithoutApprovalRef.current = isDeploymentWithoutApproval
+    }, [isDeploymentWithoutApproval])
+
     const processDeploymentStatusData = (deploymentStatusDetailRes: DeploymentStatusDetailsType): void => {
         const processedDeploymentStatusDetailsData =
             isVirtualEnv.current && processVirtualEnvironmentDeploymentData

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -176,7 +176,9 @@ export const DeploymentStatusDetailRow = ({
                 >
                     {renderIcon(statusBreakDownType.icon)}
                     <span className="ml-12 mr-12 fs-13">
-                        <span data-testid="deployment-status-step-name">{statusBreakDownType.displayText}</span>
+                        <span data-testid="deployment-status-step-name" className="flex left">
+                            {statusBreakDownType.displayText}
+                        </span>
                         {statusBreakDownType.displaySubText && (
                             <span className={`ml-12 f-${statusBreakDownType.icon || 'waiting'}`}>
                                 {statusBreakDownType.displaySubText}

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -133,6 +133,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
                                 isVirtualEnvironment={triggerDetails.IsVirtualEnvironment}
                                 processVirtualEnvironmentDeploymentData={processVirtualEnvironmentDeploymentData}
                                 renderDeploymentApprovalInfo={renderDeploymentApprovalInfo}
+                                isDeploymentWithoutApproval={triggerDetails.isDeploymentWithoutApproval ?? false}
                             />
                         </Route>
                     )}

src/Shared/Components/CICDHistory/types.tsx

@@ -390,7 +390,7 @@ export interface DeploymentStatusDetailsTimelineType {
     statusTime: string
     resourceDetails?: SyncStageResourceDetail[]
 }
-export interface DeploymentStatusDetailsType {
+export interface DeploymentStatusDetailsType extends Pick<History, 'isDeploymentWithoutApproval'> {
     deploymentFinishedOn: string
     deploymentStartedOn: string
     triggeredBy: string
@@ -406,7 +406,7 @@ export interface DeploymentStatusDetailsResponse extends ResponseType {
 
 interface DeploymentStatusDetailRow {
     icon: string
-    displayText: string
+    displayText: ReactNode
     displaySubText: string
     time: string
     resourceDetails?: any
@@ -432,7 +432,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
     }
 }
 
-export interface DeploymentDetailStepsType {
+export interface DeploymentDetailStepsType extends Pick<History, 'isDeploymentWithoutApproval'> {
     deploymentStatus?: string
     deploymentAppType?: DeploymentAppTypes
     isHelmApps?: boolean
@@ -446,7 +446,7 @@ export interface DeploymentDetailStepsType {
     renderDeploymentApprovalInfo: (userApprovalMetadata: UserApprovalMetadataType) => JSX.Element
 }
 
-export interface RenderCIListHeaderProps {
+export interface RenderCIListHeaderProps extends Required<Pick<History, 'isDeploymentWithoutApproval'>> {
     userApprovalMetadata: UserApprovalMetadataType
     triggeredBy: string
     appliedFilters: FilterConditionsListType[]