Skip to content

Commit 0fe0cec

Browse files
shivani170shivani170
authored
Merge pull request #231 from devtron-labs/feat/commit-card-ui
feat: commit card UI
2 parents 4b8deed + 092ad8f commit 0fe0cec

17 files changed

+341
-228
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "0.1.17",
3+
"version": "0.1.18",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/Icon/ic-circle.svg

Lines changed: 9 additions & 0 deletions
Loading

‎src/Common/ClipboardButton/ClipboardButton.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import { useState, useEffect, useCallback } from 'react'
1818
import Tippy from '@tippyjs/react'
19-
import { copyToClipboard, noop } from '../Helper'
19+
import { copyToClipboard, noop, stopPropagation } from '../Helper'
2020
import ClipboardProps from './types'
2121
import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
2222
import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
@@ -42,10 +42,16 @@ export default function ClipboardButton({
4242
const [copied, setCopied] = useState<boolean>(false)
4343
const [enableTippy, setEnableTippy] = useState<boolean>(false)
4444

45-
const handleTextCopied = () => setCopied(true)
45+
const handleTextCopied = () => {setCopied(true)}
4646
const handleEnableTippy = () => setEnableTippy(true)
4747
const handleDisableTippy = () => setEnableTippy(false)
48-
const handleCopyContent = useCallback(() => copyToClipboard(content, handleTextCopied), [content])
48+
const handleCopyContent = useCallback(
49+
(e?) => {
50+
if(e) stopPropagation(e)
51+
copyToClipboard(content, handleTextCopied)
52+
},
53+
[content],
54+
)
4955

5056
useEffect(() => {
5157
if (!copied) return

‎src/Shared/Components/ArtifactInfoModal/ArtifactInfoModal.component.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,14 @@ const ArtifactInfoModal = ({
9797
}}
9898
>
9999
{isArtifactInfoAvailable ? (
100-
<div className="select-material">
100+
<div className="select-material p-16 flexbox-col dc__gap-12">
101101
{artifactInfo.materials.map((material) => (
102-
<MaterialHistory material={material} pipelineName="" key={material.id} />
102+
<MaterialHistory
103+
material={material}
104+
pipelineName=""
105+
key={material.id}
106+
isCommitInfoModal
107+
/>
103108
))}
104109
<div className="dc__dashed_icon_grid-container">
105110
<hr className="dc__dotted-line" />

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const CIListItem = ({
7070
return (
7171
<>
7272
{type === 'deployed-artifact' && (
73-
<div className="flex mb-12 dc__width-inherit">
73+
<div className="flex dc__width-inherit">
7474
<div className="w-50 text-underline-dashed-300" />
7575
<Down className="icon-dim-16 ml-8 mr-8" style={{ transform: 'rotate(90deg)' }} />
7676
<div className="w-50 text-underline-dashed-300" />
@@ -89,7 +89,7 @@ export const CIListItem = ({
8989
})}
9090

9191
<div
92-
className={`dc__h-fit-content ci-artifact ci-artifact--${type} image-tag-parent-card bcn-0 br-4 dc__border p-12 w-100 dc__mxw-800 ${
92+
className={`dc__h-fit-content ci-artifact image-tag-parent-card bcn-0 br-4 dc__border p-12 w-100 dc__mxw-800 ci-artifact--${type} ${
9393
headerMetaDataPresent && renderCIListHeader ? 'dc__no-top-radius dc__no-top-border' : ''
9494
}`}
9595
data-testid="hover-on-report-artifact"
@@ -215,7 +215,7 @@ const Artifacts = ({
215215
)
216216
}
217217
return (
218-
<div className={`flex left column p-16 ${jobCIClass ?? ''}`}>
218+
<div className={`flex left column dc__gap-12 ${jobCIClass ?? ''}`}>
219219
{!isJobView && type !== HistoryComponentType.CD && (
220220
<CIListItem
221221
type="artifact"

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,12 @@ export const CiPipelineSourceConfig = ({
136136
<div className={`flex left ${showTooltip ? 'branch-name' : ''}`}>
137137
{loading && showIcons && <span className="dc__loading-dots">loading</span>}
138138
{!loading && (
139-
<>
139+
<div className="flex dc__gap-4">
140140
{showIcons && (
141141
<img
142142
src={_isWebhook ? webhookIcon : isRegexOrBranchIcon}
143143
alt="branch"
144-
className="icon-dim-12 mr-5"
144+
className="icon-dim-12"
145145
/>
146146
)}
147147
{showTooltip && (
@@ -151,7 +151,10 @@ export const CiPipelineSourceConfig = ({
151151
placement="bottom"
152152
content={sourceValueAdv}
153153
>
154-
<div className="flex" style={{ maxWidth: !baseText ? 'calc(100% - 15px)' : 'auto' }}>
154+
<div
155+
className="flex left dc__gap-4"
156+
style={{ maxWidth: !baseText ? 'calc(100% - 15px)' : 'auto' }}
157+
>
155158
{!baseText && (
156159
<>
157160
<div
@@ -162,9 +165,7 @@ export const CiPipelineSourceConfig = ({
162165
{sourceValueBase}
163166
</div>
164167
{sourceValue !== DEFAULT_GIT_BRANCH_VALUE && (
165-
<div className="mt-2">
166-
<Info className="icon-dim-12 fcn-5 ml-4" />
167-
</div>
168+
<Info className="icon-dim-12 fcn-5" />
168169
)}
169170
</>
170171
)}
@@ -177,7 +178,7 @@ export const CiPipelineSourceConfig = ({
177178
</Tippy>
178179
)}
179180
{!showTooltip && <span className="dc__ellipsis-right">{sourceValueAdv}</span>}
180-
</>
181+
</div>
181182
)}
182183
</div>
183184
)

‎src/Shared/Components/CICDHistory/History.components.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import GitCommitInfoGeneric from '../GitCommitInfoGeneric/GitCommitInfoGeneric'
2525
import { CIListItem } from './Artifacts'
2626
import { ReactComponent as ZoomIn } from '../../../Assets/Icon/ic-fullscreen.svg'
2727
import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscreen.svg'
28+
import './cicdHistory.scss'
2829

2930
export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResizeButtonType): JSX.Element => {
3031
const { pathname } = useLocation()
@@ -130,14 +131,14 @@ export const GitChanges = ({
130131
const extractImageArtifact = extractImage(artifact)
131132

132133
return (
133-
<div className="flex column left w-100 ">
134+
<div className="history-component__wrapper flex column left w-100 p-16 dc__gap-12">
134135
{ciMaterials?.map((ciMaterial, index) => {
135136
const gitTrigger = gitTriggers[ciMaterial.id]
136137
return gitTrigger && (gitTrigger.Commit || gitTrigger.WebhookData?.data) ? (
137138
<div
138139
// eslint-disable-next-line react/no-array-index-key
139140
key={`mat-${gitTrigger?.Commit}-${index}`}
140-
className="bcn-0 pt-12 br-4 en-2 bw-1 pb-12 mt-16 ml-16"
141+
className="bcn-0 br-4 en-2 bw-1"
141142
data-testid="source-code-git-hash"
142143
style={{ width: 'min( 100%, 800px )' }}
143144
>
@@ -160,7 +161,7 @@ export const GitChanges = ({
160161
) : null
161162
})}
162163
{artifact && (
163-
<div className="flex left column mt-16 mb-16 ml-16" style={{ width: 'min( 100%, 800px )' }}>
164+
<div className="history-component__artifact flex left column dc__gap-12">
164165
<CIListItem
165166
type="deployed-artifact"
166167
userApprovalMetadata={userApprovalMetadata}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -378,15 +378,15 @@ const StartDetails = ({
378378
href={createGitCommitUrl(ciMaterial.url, gitDetail.Commit)}
379379
className="dc__app-commit__hash mr-12 bcn-1 cn-7"
380380
>
381-
{gitDetail.Commit?.substr(0, 8)}
381+
{gitDetail.Commit?.substr(0, 7)}
382382
</a>
383383
)}
384384
{ciMaterial.type === 'WEBHOOK' &&
385385
gitDetail.WebhookData &&
386386
gitDetail.WebhookData.Data && (
387387
<span className="dc__app-commit__hash">
388388
{gitDetail.WebhookData.EventActionType === 'merged'
389-
? gitDetail.WebhookData.Data['target checkout']?.substr(0, 8)
389+
? gitDetail.WebhookData.Data['target checkout']?.substr(0, 7)
390390
: gitDetail.WebhookData.Data['target checkout']}
391391
</span>
392392
)}

‎src/Shared/Components/CICDHistory/cicdHistory.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,4 +304,10 @@
304304
border-radius: 0 0 4px 4px;
305305
border-top: 0;
306306
}
307+
}
308+
309+
.history-component__wrapper{
310+
.history-component__artifact{
311+
width: min( 100%, 800px )
312+
}
307313
}

0 commit comments

Comments
 (0)