feat: add support for showing environment name and target info

Author: eshankvaish

src/Assets/Icon/ic-arrow-right.svg

@@ -0,0 +1 @@
+export { getDeploymentStageTitle } from './utils'

src/Pages/App/AppConfigurations/index.ts

@@ -0,0 +1,14 @@
+import { DeploymentStageType } from '@Shared/constants'
+
+export const getDeploymentStageTitle = (stage: DeploymentStageType) => {
+    switch (stage) {
+        case DeploymentStageType.PRE:
+            return 'pre-deployment'
+        case DeploymentStageType.POST:
+            return 'post-deployment'
+        case DeploymentStageType.DEPLOY:
+            return 'deployment'
+        default:
+            return '-'
+    }
+}

src/Pages/App/AppConfigurations/utils.ts

@@ -0,0 +1 @@
+export * from './AppConfigurations'

src/Pages/App/index.ts

@@ -17,3 +17,4 @@
 export * from './GlobalConfigurations'
 export * from './ResourceBrowser'
 export * from './CDPipeline'
+export * from './App'

src/Pages/index.ts

@@ -24,6 +24,8 @@ import { ImageChipCell } from '@Shared/Components/ImageChipCell'
 import { CommitChipCell } from '@Shared/Components/CommitChipCell'
 import { ReactComponent as ICLines } from '@Icons/ic-lines.svg'
 import { ReactComponent as ICPulsateStatus } from '@Icons/ic-pulsate-status.svg'
+import { ReactComponent as ICArrowRight } from '@Icons/ic-arrow-right.svg'
+import { getDeploymentStageTitle } from '@Pages/App'
 import {
     ConfirmationDialog,
     DATE_TIME_FORMATS,
@@ -284,16 +286,33 @@ const StartDetails = ({
     isJobView,
     triggerMetadata,
     renderDeploymentHistoryTriggerMetaText,
+    renderTargetConfigInfo,
+    stage,
 }: StartDetailsType): JSX.Element => {
     const { url } = useRouteMatch()
     const { pathname } = useLocation()
 
     return (
         <div className="w-100 pr-20 flex column left dc__border-bottom-n1">
             <div className="flexbox dc__gap-8 dc__align-items-center pb-12">
-                <span className="cn-9 fs-13 fw-6 lh-20" data-testid="deployment-history-start-heading">
-                    Start
-                </span>
+                <div className="flex left dc__gap-4 cn-9 fs-13 fw-6 lh-20">
+                    <div className="flex left dc__no-shrink dc__gap-4" data-testid="deployment-history-start-heading">
+                        <div>Start</div>
+                        {stage && (
+                            <>
+                                <div className="dc__bullet" />
+                                <div className="dc__first-letter-capitalize">{getDeploymentStageTitle(stage)}</div>
+                            </>
+                        )}
+                    </div>
+                    {environmentName && (
+                        <>
+                            <ICArrowRight className="icon-dim-14 scn-9 dc__no-shrink" />
+                            <span className="dc__truncate">{environmentName}</span>
+                        </>
+                    )}
+                    {renderTargetConfigInfo?.()}
+                </div>
 
                 <time className="cn-7 fs-13">
                     {moment(startedOn, 'YYYY-MM-DDTHH:mm:ssZ').format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
@@ -417,6 +436,7 @@ export const TriggerDetails = React.memo(
         workerPodName,
         triggerMetadata,
         renderDeploymentHistoryTriggerMetaText,
+        renderTargetConfigInfo,
     }: TriggerDetailsType): JSX.Element => (
         <div className="trigger-details flexbox-col pb-12">
             <div className="display-grid trigger-details__grid py-12">
@@ -436,6 +456,8 @@ export const TriggerDetails = React.memo(
                         isJobView={isJobView}
                         triggerMetadata={triggerMetadata}
                         renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
+                        renderTargetConfigInfo={renderTargetConfigInfo}
+                        stage={stage}
                     />
 
                     <CurrentStatus
@@ -657,6 +679,7 @@ const TriggerOutput = ({
     resourceId,
     scrollToTop,
     scrollToBottom,
+    renderTargetConfigInfo,
 }: TriggerOutputProps) => {
     const { appId, triggerId, envId, pipelineId } = useParams<{
         appId: string
@@ -686,12 +709,15 @@ const TriggerOutput = ({
             const appliedFiltersTimestamp = triggerHistory.get(syncTriggerId)?.appliedFiltersTimestamp
             const promotionApprovalMetadata = triggerHistory.get(syncTriggerId)?.promotionApprovalMetadata
             const runSource = triggerHistory.get(syncTriggerId)?.runSource
+            const targetConfig = triggerHistory.get(syncTriggerId)?.targetConfig
+
             // These changes are not subject to change after refresh, add data which will not change
             const additionalDataObject = {
                 ...(appliedFilters.length ? { appliedFilters } : {}),
                 ...(appliedFiltersTimestamp ? { appliedFiltersTimestamp } : {}),
                 ...(promotionApprovalMetadata ? { promotionApprovalMetadata } : {}),
                 ...(runSource ? { runSource } : {}),
+                ...(targetConfig ? { targetConfig } : {}),
             }
             setTriggerHistory((newTriggerHistory) => {
                 newTriggerHistory.set(syncTriggerId, { ...syncTriggerDetail, ...additionalDataObject })
@@ -808,6 +834,8 @@ const TriggerOutput = ({
                         artifact={triggerDetails.artifact}
                         triggerMetadata={triggerDetails.triggerMetadata}
                         renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
+                        environmentName={selectedEnvironmentName}
+                        renderTargetConfigInfo={renderTargetConfigInfo}
                     />
                     <ul className="pl-50 pr-20 pt-8 tab-list tab-list--nodes dc__border-bottom dc__position-sticky dc__top-0 bcn-0 dc__zi-3">
                         {triggerDetails.stage === 'DEPLOY' && deploymentAppType !== DeploymentAppTypes.HELM && (

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { CSSProperties } from 'react'
+import { CSSProperties, ReactElement } from 'react'
 import {
     OptionType,
     UserApprovalMetadataType,
@@ -82,6 +82,17 @@ export interface CICDSidebarFilterOptionType extends OptionType {
     deploymentAppDeleteRequest?: boolean
 }
 
+// The values can be undefined because of old data
+export interface TargetConfigType {
+    tenantIcon?: string
+    tenantId?: string
+    tenantName?: string
+    installationId?: string
+    installationName?: string
+    releaseChannelId?: string
+    releaseChannelName?: string
+}
+
 export interface History {
     id: number
     name: string
@@ -116,6 +127,7 @@ export interface History {
     promotionApprovalMetadata?: PromotionApprovalMetadataType
     triggerMetadata?: string
     runSource?: RunSourceType
+    targetConfig?: TargetConfigType
 }
 
 export interface DeploymentHistoryResultObject {
@@ -199,9 +211,14 @@ export interface StartDetailsType {
     isJobView?: boolean
     triggerMetadata?: string
     renderDeploymentHistoryTriggerMetaText: (triggerMetaData: string) => JSX.Element
+    /**
+     * Callback handler for showing the target config
+     */
+    renderTargetConfigInfo?: () => ReactElement
+    stage: DeploymentStageType
 }
 
-export interface TriggerDetailsType {
+export interface TriggerDetailsType extends Pick<StartDetailsType, 'renderTargetConfigInfo'> {
     status: string
     startedOn: string
     finishedOn: string
@@ -356,7 +373,7 @@ export interface VirtualHistoryArtifactProps {
         workflowId: number
     }
 }
-export interface TriggerOutputProps extends RenderRunSourceType {
+export interface TriggerOutputProps extends RenderRunSourceType, Pick<TriggerDetailsType, 'renderTargetConfigInfo'> {
     fullScreenView: boolean
     triggerHistory: Map<number, History>
     setFullScreenView: React.Dispatch<React.SetStateAction<boolean>>