Skip to content

Commit a404b48

Browse files
shivani170shivani170
committed
fix css fo commit card date grouping
1 parent 8818386 commit a404b48

File tree

4 files changed

+81
-40
lines changed

4 files changed

+81
-40
lines changed

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

Lines changed: 3 additions & 2 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,7 +131,7 @@ export const GitChanges = ({
130131
const extractImageArtifact = extractImage(artifact)
131132

132133
return (
133-
<div className="flex column left w-100 p-16 dc__gap-12">
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) ? (
@@ -160,7 +161,7 @@ export const GitChanges = ({
160161
) : null
161162
})}
162163
{artifact && (
163-
<div className="flex left column dc__gap-12" 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/cicdHistory.scss

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

‎src/Shared/Components/GitCommitInfoGeneric/GitCommitInfoGeneric.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,22 @@ import { useState } from 'react'
1919
import moment from 'moment'
2020
import Tippy from '@tippyjs/react'
2121
import ClipboardButton from '@Common/ClipboardButton/ClipboardButton'
22-
import { stopPropagation } from '../../../Common/Helper'
23-
import { ReactComponent as Commit } from '../../../Assets/Icon/ic-commit.svg'
24-
import { ReactComponent as CommitIcon } from '../../../Assets/Icon/ic-code-commit.svg'
25-
import { ReactComponent as PersonIcon } from '../../../Assets/Icon/ic-person.svg'
26-
import { ReactComponent as CalendarIcon } from '../../../Assets/Icon/ic-calendar.svg'
27-
import { ReactComponent as MessageIcon } from '../../../Assets/Icon/ic-message.svg'
28-
import { ReactComponent as BranchIcon } from '../../../Assets/Icon/ic-branch.svg'
29-
import { ReactComponent as BranchMain } from '../../../Assets/Icon/ic-branch-main.svg'
30-
import { ReactComponent as Check } from '../../../Assets/Icon/ic-check-circle.svg'
31-
import { ReactComponent as Abort } from '../../../Assets/Icon/ic-abort.svg'
32-
import { SourceTypeMap, createGitCommitUrl } from '../../../Common/Common.service'
22+
import { ReactComponent as Circle } from '@Icons/ic-circle.svg'
23+
import { ReactComponent as Commit } from '@Icons/ic-commit.svg'
24+
import { ReactComponent as CommitIcon } from '@Icons/ic-code-commit.svg'
25+
import { ReactComponent as PersonIcon } from '@Icons/ic-person.svg'
26+
import { ReactComponent as CalendarIcon } from '@Icons/ic-calendar.svg'
27+
import { ReactComponent as MessageIcon } from '@Icons/ic-message.svg'
28+
import { ReactComponent as BranchIcon } from '@Icons/ic-branch.svg'
29+
import { ReactComponent as BranchMain } from '@Icons/ic-branch-main.svg'
30+
import { ReactComponent as Check } from '@Icons/ic-check-circle.svg'
31+
import { ReactComponent as Abort } from '@Icons/ic-abort.svg'
32+
import { SourceTypeMap, createGitCommitUrl } from '@Common/Common.service'
33+
import { stopPropagation } from '@Common/Helper'
34+
import { DATE_TIME_FORMATS } from '@Common/Constants'
3335
import GitMaterialInfoHeader from './GitMaterialInfoHeader'
34-
import { DATE_TIME_FORMATS } from '../../../Common/Constants'
3536
import { MATERIAL_EXCLUDE_TIPPY_TEXT } from '../../constants'
3637
import { GitCommitInfoGenericProps } from './types'
37-
import { ReactComponent as Circle } from '../../../Assets/Icon/ic-circle.svg'
3838

3939
const GitCommitInfoGeneric = ({
4040
materialSourceType,
@@ -245,7 +245,10 @@ const GitCommitInfoGeneric = ({
245245
{_lowerCaseCommitInfo.commit.slice(0, 7)}
246246
</div>
247247
</a>
248-
<span className="git-commit-info-generic__copy" data-testid="git-commit-copy">
248+
<span
249+
className="git-commit-info-generic__copy dc__visibility-hidden"
250+
data-testid="git-commit-copy"
251+
>
249252
<ClipboardButton content={_lowerCaseCommitInfo.commit} />
250253
</span>
251254
</div>

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

Lines changed: 55 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,66 @@ const MaterialHistory = ({ material, pipelineName, ciPipelineId, selectCommit }:
2626
}
2727
}
2828

29+
const getMaterialHistoryMapWithTime = () => {
30+
const historyTimeMap = {}
31+
32+
material.history?.forEach((history) => {
33+
const newDate = history.date.substring(0, 16)
34+
35+
if (!historyTimeMap[newDate]) {
36+
historyTimeMap[newDate] = []
37+
}
38+
historyTimeMap[newDate].push(history)
39+
})
40+
41+
return historyTimeMap
42+
}
43+
// Retrieve the history map
44+
const materialHistoryMapWithTime = getMaterialHistoryMapWithTime()
45+
// Retrieve the keys of the history map
46+
const dateKeys = Object.keys(materialHistoryMapWithTime)
47+
2948
return (
3049
// added for consistent typing
3150
// eslint-disable-next-line react/jsx-no-useless-fragment
3251
<>
33-
{material?.history?.map((history, index) => {
34-
const _commitId =
35-
material.type === SourceTypeMap.WEBHOOK && history.webhookData
36-
? history.webhookData.id.toString()
37-
: history.commit
38-
52+
{dateKeys.map((date) => {
53+
const historyList = materialHistoryMapWithTime[date]
3954
return (
40-
<div
41-
data-testid={`material-history-${index}`}
42-
key={_commitId}
43-
className={`material-history w-auto cursor ${history.isSelected ? 'material-history-selected' : ''}`}
44-
onClick={(e) => onClickMaterialHistory(e, _commitId, history.excluded)}
45-
>
46-
<GitCommitInfoGeneric
47-
index={index}
48-
materialUrl={material.gitURL}
49-
showMaterialInfoHeader={pipelineName === ''}
50-
commitInfo={history}
51-
materialSourceType={material.type}
52-
selectedCommitInfo={selectCommit}
53-
materialSourceValue={material.value}
54-
canTriggerBuild={!history.excluded}
55-
isExcluded={history.excluded}
56-
/>
57-
</div>
55+
<>
56+
<div className="flex left dc__gap-8">
57+
<span className="fs-12 lh-18 cn-7 fw-6 w-126">{date}</span>
58+
<div className="h-1 bcn-2 w-100" />
59+
</div>
60+
61+
{historyList?.map((history, index) => {
62+
const _commitId =
63+
material.type === SourceTypeMap.WEBHOOK && history.webhookData
64+
? history.webhookData.id.toString()
65+
: history.commit
66+
67+
return (
68+
<div
69+
data-testid={`material-history-${index}`}
70+
key={_commitId}
71+
className={`material-history w-auto cursor ${history.isSelected ? 'material-history-selected' : ''}`}
72+
onClick={(e) => onClickMaterialHistory(e, _commitId, history.excluded)}
73+
>
74+
<GitCommitInfoGeneric
75+
index={index}
76+
materialUrl={material.gitURL}
77+
showMaterialInfoHeader={pipelineName === ''}
78+
commitInfo={history}
79+
materialSourceType={material.type}
80+
selectedCommitInfo={selectCommit}
81+
materialSourceValue={material.value}
82+
canTriggerBuild={!history.excluded}
83+
isExcluded={history.excluded}
84+
/>
85+
</div>
86+
)
87+
})}
88+
</>
5889
)
5990
})}
6091
</>

0 commit comments

Comments
 (0)