Skip to content

Commit aed5e24

Browse files
AbhishekA1509AbhishekA1509
committed
refactor: simplify TriggerDetails component by removing TriggerDetailsStatusIcon and restructuring layout
1 parent 488914b commit aed5e24

File tree

2 files changed

+78
-79
lines changed

2 files changed

+78
-79
lines changed

‎src/Shared/Components/CICDHistory/TriggerOutput.tsx

Lines changed: 78 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ import {
4949
HistoryComponentType,
5050
ProgressingStatusType,
5151
StartDetailsType,
52-
TriggerDetailsStatusIconType,
5352
TriggerDetailsType,
5453
TriggerOutputProps,
5554
WorkerStatusType,
@@ -476,37 +475,6 @@ const CurrentStatusIcon = React.memo(({ status }: { status: string }): JSX.Eleme
476475
return <NonProgressingStatus status={status.toLowerCase()} />
477476
})
478477

479-
const TriggerDetailsStatusIcon = React.memo(
480-
({
481-
status,
482-
renderDeploymentHistoryTriggerMetaText,
483-
triggerMetadata,
484-
executionInfo,
485-
}: TriggerDetailsStatusIconType): JSX.Element => (
486-
<div className="flexbox-col">
487-
{renderDetailsSuccessIconBlock()}
488-
489-
{!!triggerMetadata && (
490-
<>
491-
{renderDeploymentHistoryTriggerMetaText?.(triggerMetadata, true)}
492-
493-
<div className="flex flex-grow-1">
494-
<div className="dc__border-left--n7 h-100" />
495-
</div>
496-
</>
497-
)}
498-
499-
{executionInfo?.executionStartedOn && renderDetailsSuccessIconBlock()}
500-
501-
{executionInfo ? (
502-
<CurrentStatusIcon status={executionInfo.currentStatus} />
503-
) : (
504-
<CurrentStatusIcon status={status} />
505-
)}
506-
</div>
507-
),
508-
)
509-
510478
export const TriggerDetails = React.memo(
511479
({
512480
status,
@@ -537,52 +505,89 @@ export const TriggerDetails = React.memo(
537505

538506
return (
539507
<div className="trigger-details flexbox-col pb-12">
540-
<div className="display-grid trigger-details__grid py-12">
541-
<div className="flexbox dc__content-center">
542-
<TriggerDetailsStatusIcon
543-
status={status?.toLowerCase()}
544-
renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
545-
triggerMetadata={triggerMetadata}
546-
executionInfo={executionInfo}
547-
/>
548-
</div>
549-
<div className="trigger-details__summary flexbox-col flex-grow-1 lh-20">
550-
<StartDetails
551-
startedOn={executionInfo?.triggeredOn ?? startedOn}
552-
triggeredBy={triggeredBy}
553-
triggeredByEmail={triggeredByEmail}
554-
ciMaterials={ciMaterials}
555-
gitTriggers={gitTriggers}
556-
artifact={artifact}
557-
type={type}
558-
environmentName={environmentName}
559-
isJobView={isJobView}
560-
triggerMetadata={triggerMetadata}
561-
renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
562-
renderTargetConfigInfo={renderTargetConfigInfo}
563-
stage={stage}
564-
/>
508+
{/* */}
509+
<div className="flexbox-col py-12">
510+
<div className="trigger-details__summary lh-20">
511+
<div className="display-grid trigger-details__grid">
512+
<div className="flexbox dc__content-center">
513+
<div className="flexbox-col">
514+
{renderDetailsSuccessIconBlock()}
515+
516+
{!!triggerMetadata && renderDeploymentHistoryTriggerMetaText && (
517+
<>
518+
{renderDeploymentHistoryTriggerMetaText(triggerMetadata, true)}
519+
520+
<div className="flex flex-grow-1">
521+
<div className="dc__border-left--n7 h-100" />
522+
</div>
523+
</>
524+
)}
525+
</div>
526+
</div>
565527

566-
{executionInfo?.executionStartedOn && (
567-
<div className="w-100 pr-20 flexbox dc__gap-8 pt-12">
568-
<h3 className="m-0 cn-9 fs-13 fw-6 lh-20">Execution started</h3>
528+
<div className="flexbox-col flex-grow-1">
529+
<StartDetails
530+
startedOn={executionInfo?.triggeredOn ?? startedOn}
531+
triggeredBy={triggeredBy}
532+
triggeredByEmail={triggeredByEmail}
533+
ciMaterials={ciMaterials}
534+
gitTriggers={gitTriggers}
535+
artifact={artifact}
536+
type={type}
537+
environmentName={environmentName}
538+
isJobView={isJobView}
539+
triggerMetadata={triggerMetadata}
540+
renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
541+
renderTargetConfigInfo={renderTargetConfigInfo}
542+
stage={stage}
543+
/>
544+
</div>
545+
</div>
569546

570-
<time className="cn-7 fs-13">
571-
{moment(startedOn, 'YYYY-MM-DDTHH:mm:ssZ').format(
572-
DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT,
573-
)}
574-
</time>
547+
{executionInfo?.executionStartedOn && (
548+
<div className="display-grid trigger-details__grid">
549+
<div className="flexbox dc__content-center">
550+
<div className="flexbox-col">
551+
<div className="flex flex-grow-1">
552+
<div className="dc__border-left--n7 h-100" />
553+
</div>
554+
555+
{renderDetailsSuccessIconBlock()}
556+
</div>
557+
</div>
558+
559+
<div className="w-100 pr-20 flexbox dc__gap-8 py-12">
560+
<h3 className="m-0 cn-9 fs-13 fw-6 lh-20">Execution started</h3>
561+
562+
<time className="cn-7 fs-13">
563+
{moment(startedOn, 'YYYY-MM-DDTHH:mm:ssZ').format(
564+
DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT,
565+
)}
566+
</time>
567+
</div>
575568
</div>
576569
)}
577570

578-
<CurrentStatus
579-
executionInfo={executionInfo}
580-
status={status}
581-
finishedOn={finishedOn}
582-
artifact={artifact}
583-
stage={stage}
584-
type={type}
585-
/>
571+
<div className="display-grid trigger-details__grid">
572+
<div className="flexbox dc__content-center">
573+
<div className="flexbox-col">
574+
<div className="flex flex-grow-1">
575+
<div className="dc__border-left--n7 h-100" />
576+
</div>
577+
578+
<CurrentStatusIcon status={executionInfo ? executionInfo.currentStatus : status} />
579+
</div>
580+
</div>
581+
582+
<CurrentStatus
583+
executionInfo={executionInfo}
584+
status={status}
585+
finishedOn={finishedOn}
586+
artifact={artifact}
587+
stage={stage}
588+
type={type}
589+
/>
590+
</div>
586591
</div>
587592
</div>
588593

‎src/Shared/Components/CICDHistory/types.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -354,12 +354,6 @@ export type FinishedType = { artifact: string; type: HistoryComponentType } & (
354354
}
355355
)
356356

357-
export interface TriggerDetailsStatusIconType
358-
extends Pick<TriggerDetailsType, 'renderDeploymentHistoryTriggerMetaText' | 'triggerMetadata'> {
359-
status: string
360-
executionInfo: ExecutionInfoType
361-
}
362-
363357
export interface SyncStageResourceDetail {
364358
id: number
365359
cdWorkflowRunnerId: number

0 commit comments

Comments
 (0)