Skip to content

Commit a590083

Browse files
RohitRaj011RohitRaj011
committed
feat: DeployedCommitCard - add support for multiple repos, refactor to use useQuery
1 parent c32cb69 commit a590083

File tree

2 files changed

+87
-68
lines changed

2 files changed

+87
-68
lines changed

‎src/components/app/details/appDetails/DeployedCommitCard.tsx

Lines changed: 55 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -14,97 +14,84 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useEffect, useState } from 'react'
18-
import Tippy from '@tippyjs/react'
17+
import { memo } from 'react'
1918

2019
import {
2120
getCITriggerInfo,
21+
getParsedCIMaterialInfo,
2222
GitProviderIcon,
2323
GitProviderType,
24+
Icon,
2425
LoadingCard,
25-
showError,
26+
useQuery,
2627
} from '@devtron-labs/devtron-fe-common-lib'
2728

2829
import { ReactComponent as CommitIcon } from '../../../../assets/icons/ic-code-commit.svg'
29-
import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
3030
import { DeployedCommitCardType } from './appDetails.type'
3131

3232
const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifactId }: DeployedCommitCardType) => {
33-
const [commitId, setCommitId] = useState<string>(null)
34-
const [commitMessage, setCommitMessage] = useState<string>(null)
35-
const [noValidCommit, setNoValidCommit] = useState<boolean>(false)
33+
const { data: materials, isLoading } = useQuery({
34+
queryFn: () => getCITriggerInfo({ envId, ciArtifactId }),
35+
queryKey: [envId, ciArtifactId],
36+
select: ({ result }) => getParsedCIMaterialInfo(result).materials ?? [],
37+
})
3638

37-
useEffect(() => {
38-
if (envId && ciArtifactId) {
39-
const params = {
40-
envId,
41-
ciArtifactId,
42-
}
43-
44-
getCITriggerInfo(params)
45-
.then((result) => {
46-
const materials = result?.materials
47-
if (materials && materials.length > 0) {
48-
const lastCommit = materials[0]?.history[0]
49-
const shortenCommitId = lastCommit?.commit?.slice(0, 7)
50-
setCommitId(shortenCommitId)
51-
setCommitMessage(lastCommit?.message)
52-
} else {
53-
setNoValidCommit(true)
54-
}
55-
})
56-
.catch((error) => {
57-
showError(error)
58-
setNoValidCommit(true)
59-
})
60-
}
61-
}, [envId, ciArtifactId])
62-
63-
if (cardLoading) {
39+
if (cardLoading || isLoading) {
6440
return <LoadingCard />
6541
}
6642

67-
if (!commitId || noValidCommit) {
43+
if (materials.length === 0 || !materials[0].history[0]?.commit?.slice(0, 7)) {
6844
return null
6945
}
7046

7147
return (
72-
<div
73-
data-testid="deployed-commit-card"
74-
onClick={showCommitInfoDrawer}
75-
className="app-details-info-card pointer flex left bg__primary br-8 mr-12 lh-20 w-200"
76-
>
77-
<div className="app-details-info-card__top-container flex">
78-
<div className="app-details-info-card__top-container__content">
79-
<div className="app-details-info-card__top-container__content__title-wrapper">
80-
<div className="fs-12 fw-4 cn-7 mr-5">Deployed commit</div>
81-
<Tippy
82-
className="default-tt"
83-
arrow={false}
84-
placement="top"
85-
content="Last deployment was triggered with this commit"
86-
maxWidth={250}
87-
>
88-
<div className="flex">
89-
<ICHelpOutline className="icon-dim-16 mt-2" />
48+
<div className="flexbox deployed-commit-card">
49+
{materials.map((material) => {
50+
const lastCommit = material.history[0]
51+
52+
return (
53+
<div
54+
data-testid="deployed-commit-card"
55+
onClick={showCommitInfoDrawer}
56+
className="app-details-info-card pointer flex left bg__primary br-8 mr-12 lh-20 w-200"
57+
>
58+
<div className="app-details-info-card__top-container flex">
59+
<div className="app-details-info-card__top-container__content">
60+
<div className="app-details-info-card__top-container__content__title-wrapper">
61+
<div className="fs-12 fw-4 cn-7 mr-5">Deployed commit</div>
62+
<Icon
63+
name="ic-help-outline"
64+
color="N500"
65+
size={14}
66+
tooltipProps={{
67+
alwaysShowTippyOnHover: true,
68+
content: 'Last deployment was triggered with this commit',
69+
className: 'dc__mxw-250',
70+
}}
71+
/>
72+
</div>
73+
<div className="flex fs-12 fw-4">
74+
<CommitIcon className="icon-dim-20" />
75+
<div className="dc__ellipsis-right cn-7 ml-2 fw-4 fs-12 mono">
76+
{lastCommit?.commit?.slice(0, 7) ?? ''}
77+
</div>
78+
</div>
9079
</div>
91-
</Tippy>
92-
</div>
93-
<div className="flex fs-12 fw-4">
94-
<CommitIcon className="icon-dim-20" />
95-
<div className="dc__ellipsis-right cn-7 ml-2 fw-4 fs-12 mono">{commitId}</div>
80+
<GitProviderIcon gitProvider={GitProviderType.GIT} size={24} />
81+
{/* @TODO: This should be dynamic, dependent on the source */}
82+
{/* <GitHub className="github-icon" /> */}
83+
</div>
84+
<div className="app-details-info-card__bottom-container dc__content-space">
85+
<span className="app-details-info-card__bottom-container__message fs-12 fw-4">
86+
{lastCommit?.message ?? ''}
87+
</span>
88+
<div className="app-details-info-card__bottom-container__details fs-12 fw-6">Details</div>
89+
</div>
9690
</div>
97-
</div>
98-
<GitProviderIcon gitProvider={GitProviderType.GIT} size={24} />
99-
{/* @TODO: This should be dynamic, dependent on the source */}
100-
{/* <GitHub className="github-icon" /> */}
101-
</div>
102-
<div className="app-details-info-card__bottom-container dc__content-space">
103-
<span className="app-details-info-card__bottom-container__message fs-12 fw-4">{commitMessage}</span>
104-
<div className="app-details-info-card__bottom-container__details fs-12 fw-6">Details</div>
105-
</div>
91+
)
92+
})}
10693
</div>
10794
)
10895
}
10996

110-
export default React.memo(DeployedCommitCard)
97+
export default memo(DeployedCommitCard)

‎src/components/app/details/appDetails/appDetails.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1384,3 +1384,35 @@ table.resource-tree {
13841384
outline: none !important;
13851385
}
13861386
}
1387+
1388+
.deployed-commit-card {
1389+
&:hover {
1390+
.app-details-info-card:not(:first-child) {
1391+
margin-left: -170px;
1392+
}
1393+
}
1394+
1395+
.app-details-info-card {
1396+
transition: margin 0.2s ease-in-out;
1397+
1398+
&:not(:first-child) {
1399+
margin-left: -185px;
1400+
}
1401+
1402+
&:nth-of-type(1n + 4) {
1403+
display: none;
1404+
}
1405+
1406+
&:nth-child(1) {
1407+
z-index: 3;
1408+
}
1409+
1410+
&:nth-child(2) {
1411+
z-index: 2;
1412+
}
1413+
1414+
&:nth-child(3) {
1415+
z-index: 1;
1416+
}
1417+
}
1418+
}

0 commit comments

Comments
 (0)