Skip to content

Commit 3836bab

Browse files
AbhishekA1509AbhishekA1509
committed
feat: enhance CICD components with improved styling and new props for better customization
1 parent 25e1b52 commit 3836bab

File tree

6 files changed

+45
-12
lines changed

6 files changed

+45
-12
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,12 @@ export const CiPipelineSourceConfig = ({
119119
}, [])
120120

121121
return (
122-
<div className={`flex left ${showTooltip ? 'fw-5' : ''} ${rootClassName}`}>
122+
<div className={`flex left dc__align-start ${showTooltip ? 'fw-5' : ''} ${rootClassName}`}>
123123
{loading && showIcons && <span className="dc__loading-dots">loading</span>}
124124
{!loading && (
125125
<div className="flex dc__gap-4">
126126
{showIcons && (
127-
<span className="icon-dim-12 flex dc__no-shrink dc__fill-available-space">
127+
<span className="icon-dim-12 flex dc__no-shrink dc__fill-available-space mt-4">
128128
{getBranchIcon(sourceType, _isRegex, sourceValueBase)}
129129
</span>
130130
)}

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import { ReactComponent as ICCalendar } from '@Icons/ic-calendar.svg'
2626
import { ReactComponent as ICUserCircle } from '@Icons/ic-user-circle.svg'
2727
import { ReactComponent as ICGithub } from '@Icons/ic-github.svg'
2828
import { ReactComponent as ICBranch } from '@Icons/ic-branch.svg'
29+
import { DeploymentStageType } from '@Shared/constants'
30+
import { getHandleOpenURL } from '@Shared/Helpers'
2931
import {
3032
SidebarType,
3133
CICDSidebarFilterOptionType,
@@ -56,6 +58,7 @@ import {
5658
sanitizeWorkflowExecutionStages,
5759
} from './utils'
5860
import { WorkerStatus } from './TriggerOutput'
61+
import { CommitChipCell } from '../CommitChipCell'
5962

6063
const GitTriggerList = memo(
6164
({
@@ -92,7 +95,7 @@ const GitTriggerList = memo(
9295
</div>
9396
) : (
9497
<div className="flexbox-col dc__gap-8">
95-
<div className="flexbox dc__gap-4">
98+
<div className="flexbox dc__gap-4 dc__align-start">
9699
<ICGithub className="icon-dim-20 dc__no-shrink" />
97100

98101
{gitDetail?.GitRepoName && (
@@ -111,13 +114,22 @@ const GitTriggerList = memo(
111114
href={createGitCommitUrl(gitMaterialUrl, gitDetail.Commit)}
112115
target="_blank"
113116
rel="noopener noreferrer"
114-
className="anchor flexbox dc__gap-2"
117+
className="anchor flexbox dc__gap-2 dc__align-items-center"
115118
>
116119
<ICBranch className="icon-dim-12 dc__no-shrink fcn-7" />
117120
{sourceValue}
118121
</a>
119122
</div>
120123

124+
{gitDetail?.Commit && (
125+
<CommitChipCell
126+
commits={[gitDetail.Commit]}
127+
handleClick={getHandleOpenURL(
128+
createGitCommitUrl(ciMaterial.url, gitDetail.Commit),
129+
)}
130+
/>
131+
)}
132+
121133
{gitDetail?.Message && (
122134
<Tooltip content={gitDetail.Message}>
123135
<p className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate--clamp-3">
@@ -194,9 +206,16 @@ const BuildAndTaskSummaryTooltipCard = memo(
194206
clusterId={executionInfo?.workerDetails?.clusterId || DEFAULT_CLUSTER_ID}
195207
workerPodName={podName}
196208
namespace={namespace}
209+
workerMessageContainerClassName="cn-7 fs-12 fw-4 lh-18"
210+
titleClassName="cn-9 fs-12 fw-4 lh-20"
211+
viewWorkerPodClassName="fs-12"
197212
/>
198213
</div>
199214

215+
{Object.keys(gitTriggers ?? {}).length > 0 && ciMaterials?.length > 0 && (
216+
<div className="dc__border-bottom-n1" />
217+
)}
218+
200219
<GitTriggerList gitTriggers={gitTriggers} ciMaterials={ciMaterials} />
201220
</div>
202221
)
@@ -323,7 +342,7 @@ const HistorySummaryCard = memo(
323342
ref={assignTargetCardRef}
324343
>
325344
<div className="w-100 deployment-history-card">
326-
{workflowExecutionStages
345+
{stage !== DeploymentStageType.DEPLOY && !!workflowExecutionStages
327346
? getHistoryItemStatusIconFromWorkflowStages(workflowExecutionStages)
328347
: getTriggerStatusIcon(status)}
329348
<div className="flexbox-col dc__gap-8">

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,9 @@ export const WorkerStatus = React.memo(
120120
finishedOn,
121121
clusterId,
122122
namespace,
123+
workerMessageContainerClassName,
124+
titleClassName = 'cn-9 fs-13 fw-4 lh-20',
125+
viewWorkerPodClassName = 'fs-13',
123126
}: WorkerStatusType): JSX.Element | null => {
124127
if (!message && !podStatus) {
125128
return null
@@ -136,7 +139,7 @@ export const WorkerStatus = React.memo(
136139
target="_blank"
137140
className="anchor"
138141
>
139-
<span className="mr-10 fs-13">View worker pod</span>
142+
<span className={`mr-10 ${viewWorkerPodClassName}`}>View worker pod</span>
140143
</NavLink>
141144
) : null
142145

@@ -152,7 +155,7 @@ export const WorkerStatus = React.memo(
152155

153156
<div className="flexbox-col">
154157
<div className="flexbox dc__gap-8">
155-
<div className="flexbox cn-9 fs-13 fw-4 lh-20">
158+
<div className={`flexbox cn-9 ${titleClassName}`}>
156159
<span>{stage === DeploymentStageType.DEPLOY && !podStatus ? 'Message' : 'Worker'}</span>
157160
&nbsp;
158161
{podStatus && (
@@ -167,7 +170,14 @@ export const WorkerStatus = React.memo(
167170
</div>
168171

169172
{/* Need key since using ref inside of this component as useEffect dependency, so there were issues while switching builds */}
170-
{message && <ShowMoreText text={message} key={message} textClass="cn-7" />}
173+
{message && (
174+
<ShowMoreText
175+
text={message}
176+
key={message}
177+
textClass="cn-7"
178+
containerClass={workerMessageContainerClassName}
179+
/>
180+
)}
171181
</div>
172182
</>
173183
)
@@ -192,7 +202,7 @@ const ProgressingStatus = React.memo(({ stage, type }: ProgressingStatusType): J
192202
let abort = null
193203
if (type === HistoryComponentType.CI) {
194204
abort = (isForceAbort: boolean) => cancelCiTrigger({ pipelineId, workflowId: buildId }, isForceAbort)
195-
} else if (stage !== 'DEPLOY') {
205+
} else if (stage !== DeploymentStageType.DEPLOY) {
196206
abort = () => cancelPrePostCdTrigger(pipelineId, triggerId)
197207
}
198208

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,9 @@ export interface WorkerStatusType
344344
stage: DeploymentStageType
345345
finishedOn?: string
346346
workerPodName?: string
347+
workerMessageContainerClassName?: string
348+
titleClassName?: string
349+
viewWorkerPodClassName?: string
347350
}
348351

349352
export type FinishedType = { artifact: string; type: HistoryComponentType } & (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ export const getHistoryItemStatusIconFromWorkflowStages = (
323323
return renderFailedTriggerIcon()
324324

325325
case WorkflowStageStatusType.SUCCEEDED:
326-
return <ICCheck className={baseClass} />
326+
return renderSuccessTriggerIcon()
327327

328328
default:
329329
return <ICHelpFilled className={baseClass} />

‎src/Shared/Components/ShowMoreText/ShowMoreText.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
2020
interface ShowMoreTextProps {
2121
text: string
2222
textClass?: string
23+
containerClass?: string
2324
}
2425

25-
const ShowMoreText = ({ text, textClass }: ShowMoreTextProps) => {
26+
const ShowMoreText = ({ text, textClass, containerClass = 'min-w-385 pr-20' }: ShowMoreTextProps) => {
2627
const ellipsisText = useRef(null)
2728
const [showToggle, setShowToggle] = useState(false)
2829
const [showAllText, setShowAllText] = useState(false)
@@ -42,7 +43,7 @@ const ShowMoreText = ({ text, textClass }: ShowMoreTextProps) => {
4243
}
4344

4445
return (
45-
<div className="min-w-385 pr-20">
46+
<div className={containerClass}>
4647
<span
4748
ref={ellipsisText}
4849
className={`${textClass || ''} ${!showAllText ? 'dc__truncate' : ''} dc__word-break`}

0 commit comments

Comments
 (0)