Skip to content

Commit c6fc4d5

Browse files
AbhishekA1509AbhishekA1509
committed
fix: adjust margin and improve tooltip display in GitTriggerList and Sidebar components
1 parent 2347029 commit c6fc4d5

File tree

4 files changed

+39
-37
lines changed

4 files changed

+39
-37
lines changed

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

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const GitTriggerList = memo(
3030
}
3131

3232
return (
33-
<div className={`${addMarginTop ? 'mt-22' : ''}`} key={ciMaterial.id}>
33+
<div className={`${addMarginTop ? 'mt-16' : ''}`} key={ciMaterial.id}>
3434
{sourceType === SourceTypeMap.WEBHOOK ? (
3535
<div className="flex left column">
3636
<CiPipelineSourceConfig
@@ -40,29 +40,20 @@ const GitTriggerList = memo(
4040
/>
4141
</div>
4242
) : (
43-
<div className="flexbox-col dc__gap-8">
44-
<div className="flexbox dc__gap-4 dc__align-start flex-wrap">
43+
<div className="flexbox-col dc__gap-4">
44+
<div className="flexbox dc__gap-6 dc__align-start">
4545
{renderMaterialIcon(gitMaterialUrl)}
4646

4747
{gitDetail?.GitRepoName && (
48-
<>
49-
<span className="cn-9 fs-13 fw-6 lh-20 dc__word-break">
50-
{gitDetail.GitRepoName}
51-
</span>
52-
53-
<span className="cn-5 fs-13 fw-4 lh-20 dc__no-shrink">/</span>
54-
</>
48+
<span className="cn-9 fs-13 fw-6 lh-20 dc__word-break">
49+
{gitDetail.GitRepoName}
50+
</span>
5551
)}
52+
</div>
5653

57-
<a
58-
href={createGitCommitUrl(gitMaterialUrl, gitDetail?.Commit)}
59-
target="_blank"
60-
rel="noopener noreferrer"
61-
className="anchor flexbox dc__gap-2 dc__align-items-center dc__word-break"
62-
>
63-
<ICBranch className="icon-dim-12 dc__no-shrink fcn-7" />
64-
{sourceValue}
65-
</a>
54+
<div className="flexbox dc__gap-6 dc__align-start">
55+
<ICBranch className="icon-dim-20 p-2 dc__no-shrink fcn-7" />
56+
<span className="cn-7 dc__word-break fs-13 fw-4 lh-16">{sourceValue}</span>
6657
</div>
6758

6859
{gitDetail?.Commit && (

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

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
import BuildAndTaskSummaryTooltipCard from './BuildAndTaskSummaryTooltipCard'
3535
import { getCustomOptionSelectionStyle } from '../ReactSelect'
3636
import { DetectBottom } from '../DetectBottom'
37-
import { ConditionalWrap, DATE_TIME_FORMATS, DropdownIndicator } from '../../../Common'
37+
import { ConditionalWrap, DATE_TIME_FORMATS, DropdownIndicator, Tooltip } from '../../../Common'
3838
import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap } from './constants'
3939
import { getHistoryItemStatusIconFromWorkflowStages, getTriggerStatusIcon, getWorkflowNodeStatusTitle } from './utils'
4040
import GitTriggerList from './GitTriggerList'
@@ -50,22 +50,32 @@ const DeploymentSummaryTooltipCard = memo(
5050
triggeredByEmail,
5151
ciMaterials,
5252
gitTriggers,
53-
}: DeploymentSummaryTooltipCardType): JSX.Element => (
54-
<div className="shadow__overlay p-16 br-4 w-400 bg__overlay border__primary mxh-300 dc__overflow-auto">
55-
<span className="fw-6 fs-16 mb-4" style={{ color: colorMap[status.toLowerCase()] }}>
56-
{getWorkflowNodeStatusTitle(status)}
57-
</span>
58-
<div className="flex column left">
59-
<div className="flex left fs-12 cn-7">
60-
<div>{moment(startedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}</div>
61-
<div className="dc__bullet ml-6 mr-6" />
62-
<div>{triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}</div>
63-
</div>
53+
}: DeploymentSummaryTooltipCardType): JSX.Element => {
54+
const triggeredByText = triggeredBy === 1 ? 'auto trigger' : triggeredByEmail
55+
56+
return (
57+
<div className="shadow__overlay p-16 br-4 w-400 bg__overlay border__primary mxh-300 dc__overflow-auto">
58+
<span className="fw-6 fs-16 mb-4" style={{ color: colorMap[status.toLowerCase()] }}>
59+
{getWorkflowNodeStatusTitle(status)}
60+
</span>
61+
<div className="flex column left">
62+
<div className="flex left fs-12 cn-7">
63+
<div className="dc__no-shrink">
64+
{moment(startedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
65+
</div>
66+
67+
<div className="dc__bullet ml-6 mr-6 dc__no-shrink" />
68+
69+
<Tooltip content={triggeredByText}>
70+
<span className="dc__truncate">{triggeredByText}</span>
71+
</Tooltip>
72+
</div>
6473

65-
<GitTriggerList addMarginTop ciMaterials={ciMaterials} gitTriggers={gitTriggers} />
74+
<GitTriggerList addMarginTop ciMaterials={ciMaterials} gitTriggers={gitTriggers} />
75+
</div>
6676
</div>
67-
</div>
68-
),
77+
)
78+
},
6979
)
7080

7181
const ViewAllCardsTile = memo(

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,15 +141,16 @@ export const TERMINAL_STATUS_COLOR_CLASS_MAP = {
141141
[TERMINAL_STATUS_MAP.FAILED]: 'cr-5',
142142
[TERMINAL_STATUS_MAP.CANCELLED]: 'cr-5',
143143
[TERMINAL_STATUS_MAP.ERROR]: 'cr-5',
144-
}
144+
} as const
145145

146146
export const PROGRESSING_STATUS = {
147+
[WorkflowStatusEnum.WAITING_TO_START.toLowerCase()]: 'running',
147148
[TERMINAL_STATUS_MAP.RUNNING]: 'running',
148149
[TERMINAL_STATUS_MAP.PROGRESSING]: 'progressing',
149150
[TERMINAL_STATUS_MAP.STARTING]: 'starting',
150151
[TERMINAL_STATUS_MAP.INITIATING]: 'initiating',
151152
[TERMINAL_STATUS_MAP.QUEUED]: 'queued',
152-
}
153+
} as const
153154

154155
export const FAILED_WORKFLOW_STAGE_STATUS_MAP: Record<
155156
Extract<

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ export const getWorkflowNodeStatusTitle = (status: string) => {
338338
}
339339

340340
if (status.toLowerCase() === 'cancelled') {
341-
return 'ABORTED'
341+
return 'Aborted'
342342
}
343343

344344
if (status === WorkflowStatusEnum.WAITING_TO_START) {

0 commit comments

Comments
 (0)