Skip to content

Commit 25aefa0

Browse files
arunjaindevarunjaindev
authored
Merge pull request #412 from devtron-labs/feat/marked-version-bump
feat: marked version bump
2 parents 5f3046d + 0550b4a commit 25aefa0

File tree

6 files changed

+45
-53
lines changed

6 files changed

+45
-53
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.1.3",
3+
"version": "1.1.4",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
@@ -79,7 +79,7 @@
7979
"@rjsf/validator-ajv8": "^5.13.3",
8080
"@typeform/embed-react": "2.20.0",
8181
"dompurify": "^3.0.2",
82-
"marked": "4.3.0",
82+
"marked": "^13.0.3",
8383
"react": "^17.0.2",
8484
"react-dom": "^17.0.2",
8585
"react-draggable": "^4.4.5",

‎src/Common/Markdown/MarkDown.tsx

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,12 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { marked } from 'marked'
17+
import { marked, Tokens } from 'marked'
1818
import DOMPurify from 'dompurify'
1919
import { useEffect, useRef } from 'react'
2020
import { MarkDownProps } from './Types'
2121
import './markdown.scss'
2222

23-
const uncheckedCheckboxInputElement = `<input checked="" disabled="" type="checkbox">`
24-
const checkedCheckboxInputElement = `<input disabled="" type="checkbox">`
2523
const renderer = new marked.Renderer()
2624

2725
const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscapedText, ...props }: MarkDownProps) => {
@@ -39,62 +37,59 @@ const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscap
3937
getHeight()
4038
}, [markdown])
4139

42-
const isReadmeInputCheckbox = (text: string) => {
43-
if (text.includes(uncheckedCheckboxInputElement) || text.includes(checkedCheckboxInputElement)) {
44-
return true
45-
}
46-
return false
47-
}
40+
const renderTableRow = (row: Tokens.TableCell[]) => `
41+
<tr>
42+
${row.map((rowCell) => `<td align="${rowCell.align}">${marked(rowCell.text)}</td>`).join('')}
43+
</tr>
44+
`
4845

49-
renderer.listitem = (text: string) => {
50-
if (isReadmeInputCheckbox(text)) {
51-
// eslint-disable-next-line no-param-reassign
52-
text = text
53-
.replace(
54-
uncheckedCheckboxInputElement,
55-
'<input type="checkbox" style="margin: 0 0.2em 0.25em -1.4em;" class="dc__vertical-align-middle" checked disabled>',
56-
)
57-
.replace(
58-
checkedCheckboxInputElement,
59-
'<input type="checkbox" style="margin: 0 0.2em 0.25em -1.4em;" class="dc__vertical-align-middle" disabled>',
60-
)
61-
return `<li style="list-style: none">${text}</li>`
46+
renderer.listitem = ({ text, task, checked }: Tokens.ListItem) => {
47+
if (task) {
48+
return `<li style="list-style: none">
49+
<input disabled type="checkbox" ${checked ? 'checked' : ''} class="dc__vertical-align-middle" style="margin: 0 0.2em 0.25em -1.4em">
50+
${text}
51+
</li>`
6252
}
6353
return `<li>${text}</li>`
6454
}
6555

66-
renderer.image = (href: string, title: string, text: string) =>
56+
renderer.image = ({ href, title, text }: Tokens.Image) =>
6757
`<img src="${href}" alt="${text}" title="${title}" class="max-w-100">`
6858

69-
renderer.table = (header, body) => `
59+
renderer.table = ({ header, rows }: Tokens.Table) => `
7060
<div class="table-container">
7161
<table>
72-
${header}
73-
${body}
62+
<thead>
63+
<tr>${header.map((headerCell) => `<th align="${headerCell.align}">${headerCell.text}</th>`).join('')}</tr>
64+
</thead>
65+
<tbody>
66+
${rows.map((row) => renderTableRow(row)).join('')}
67+
</tbody>
7468
</table>
7569
</div>
7670
`
7771

78-
renderer.heading = (text, level) => {
72+
renderer.heading = ({ text, depth }: Tokens.Heading) => {
7973
const escapedText = disableEscapedText ? '' : text.toLowerCase().replace(/[^\w]+/g, '-')
8074

8175
return `
8276
<a name="${escapedText}" rel="noreferrer noopener" class="anchor" href="#${escapedText}">
83-
<h${level} data-testid="deployment-template-readme-version">
77+
<h${depth} data-testid="deployment-template-readme-version">
8478
<span class="header-link"></span>
8579
${text}
86-
</h${level}>
80+
</h${depth}>
8781
</a>`
8882
}
8983

9084
marked.setOptions({
9185
renderer,
9286
gfm: true,
93-
smartLists: true,
9487
...(breaks && { breaks: true }),
9588
})
9689

97-
const createMarkup = () => ({ __html: DOMPurify.sanitize(marked(markdown), { USE_PROFILES: { html: true } }) })
90+
const createMarkup = () => ({
91+
__html: DOMPurify.sanitize(marked(markdown) as string, { USE_PROFILES: { html: true } }),
92+
})
9893

9994
return (
10095
<article

‎src/Common/Markdown/markdown.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
border-spacing: 0;
2727
border-collapse: collapse;
2828

29-
tbody {
29+
tbody, thead {
3030
td,
3131
th {
3232
padding: 6px 13px;

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -210,38 +210,37 @@ const HistorySummaryCard = React.memo(
210210
>
211211
<NavLink
212212
to={getPath}
213-
className="w-100 deployment-history-card-container"
213+
className="w-100 deployment-history-card-container p-8 br-4"
214214
data-testid={dataTestId}
215215
activeClassName="active"
216216
ref={assignTargetCardRef}
217217
>
218218
<div className="w-100 deployment-history-card">
219219
{getTriggerStatusIcon(status)}
220220
<div className="flexbox-col dc__gap-8">
221-
<div className="flex column left dc__ellipsis-right">
222-
<div className="cn-9 fs-14">
221+
<div className="flex column left">
222+
<div className="cn-9 fs-13 lh-20">
223223
{moment(startedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
224224
</div>
225225
<div className="flex left cn-7 fs-12">
226226
{isCDType && (
227227
<>
228-
<div className="dc__capitalize">
228+
<div className="dc__first-letter-capitalize dc__no-shrink">
229229
{['pre', 'post'].includes(stage?.toLowerCase())
230230
? `${stage}-deploy`
231231
: stage}
232232
</div>
233233
<span className="dc__bullet dc__bullet--d2 ml-4 mr-4" />
234-
235234
{artifact && (
236-
<div className="dc__app-commit__hash dc__app-commit__hash--no-bg">
235+
<div className="dc__app-commit__hash dc__app-commit__hash--no-bg dc__no-shrink">
237236
<ICDocker className="commit-hash__icon grayscale" />
238237
{artifact.split(':')[1].slice(-12)}
239238
</div>
240239
)}
241240
<span className="dc__bullet dc__bullet--d2 ml-4 mr-4" />
242241
</>
243242
)}
244-
<div className="cn-7 fs-12">
243+
<div className="cn-7 fs-12 dc__ellipsis-right">
245244
{triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}
246245
</div>
247246
</div>
@@ -377,11 +376,10 @@ const Sidebar = React.memo(
377376
</div>
378377
)}
379378

380-
<div className="flex column top left flex-grow-1 dc__hide-hscroll" style={{ overflowY: 'auto' }}>
379+
<div className="flex column top left flex-grow-1 dc__hide-hscroll p-8" style={{ overflowY: 'auto' }}>
381380
{fetchIdData === FetchIdDataStatus.SUCCESS && (
382381
<ViewAllCardsTile handleViewAllHistory={handleViewAllHistory} />
383382
)}
384-
385383
{Array.from(triggerHistory)
386384
.sort(([a], [b]) => b - a)
387385
.map(([triggerId, triggerDetails], index) => (

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,6 @@
190190

191191
.deployment-history-card-container {
192192
text-decoration: unset;
193-
padding: 0 16px;
194193

195194
&:hover {
196195
text-decoration: unset;
@@ -204,8 +203,7 @@
204203
.deployment-history-card {
205204
display: grid;
206205
grid-template-columns: 20px 1fr;
207-
padding: 12px 0;
208-
column-gap: 12px;
206+
column-gap: 8px;
209207
}
210208

211209
.app-status__icon {

0 commit comments

Comments
 (0)