Merge branch 'develop' into feat/dynamic-data-table

devtron-labs · Nov 26, 2024 · 446feb4 · 446feb4
2 parents d3c3b2f + 25aefa0
commit 446feb4
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -79,7 +79,7 @@
         "@rjsf/validator-ajv8": "^5.13.3",
         "@typeform/embed-react": "2.20.0",
         "dompurify": "^3.0.2",
-        "marked": "4.3.0",
+        "marked": "^13.0.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",

diff --git a/src/Common/Markdown/MarkDown.tsx b/src/Common/Markdown/MarkDown.tsx
@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 
-import { marked } from 'marked'
+import { marked, Tokens } from 'marked'
 import DOMPurify from 'dompurify'
 import { useEffect, useRef } from 'react'
 import { MarkDownProps } from './Types'
 import './markdown.scss'
 
-const uncheckedCheckboxInputElement = `<input checked="" disabled="" type="checkbox">`
-const checkedCheckboxInputElement = `<input disabled="" type="checkbox">`
 const renderer = new marked.Renderer()
 
 const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscapedText, ...props }: MarkDownProps) => {
@@ -39,62 +37,59 @@ const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscap
         getHeight()
     }, [markdown])
 
-    const isReadmeInputCheckbox = (text: string) => {
-        if (text.includes(uncheckedCheckboxInputElement) || text.includes(checkedCheckboxInputElement)) {
-            return true
-        }
-        return false
-    }
+    const renderTableRow = (row: Tokens.TableCell[]) => `
+            <tr>
+                ${row.map((rowCell) => `<td align="${rowCell.align}">${marked(rowCell.text)}</td>`).join('')}
+            </tr>
+        `
 
-    renderer.listitem = (text: string) => {
-        if (isReadmeInputCheckbox(text)) {
-            // eslint-disable-next-line no-param-reassign
-            text = text
-                .replace(
-                    uncheckedCheckboxInputElement,
-                    '<input type="checkbox" style="margin: 0 0.2em 0.25em -1.4em;" class="dc__vertical-align-middle" checked disabled>',
-                )
-                .replace(
-                    checkedCheckboxInputElement,
-                    '<input type="checkbox" style="margin: 0 0.2em 0.25em -1.4em;" class="dc__vertical-align-middle" disabled>',
-                )
-            return `<li style="list-style: none">${text}</li>`
+    renderer.listitem = ({ text, task, checked }: Tokens.ListItem) => {
+        if (task) {
+            return `<li style="list-style: none">
+                        <input disabled type="checkbox" ${checked ? 'checked' : ''} class="dc__vertical-align-middle" style="margin: 0 0.2em 0.25em -1.4em">
+                        ${text}
+                    </li>`
         }
         return `<li>${text}</li>`
     }
 
-    renderer.image = (href: string, title: string, text: string) =>
+    renderer.image = ({ href, title, text }: Tokens.Image) =>
         `<img src="${href}" alt="${text}" title="${title}" class="max-w-100">`
 
-    renderer.table = (header, body) => `
+    renderer.table = ({ header, rows }: Tokens.Table) => `
         <div class="table-container">
             <table>
-                ${header}
-                ${body}
+                <thead>
+                    <tr>${header.map((headerCell) => `<th align="${headerCell.align}">${headerCell.text}</th>`).join('')}</tr>
+                </thead>
+                <tbody>
+                    ${rows.map((row) => renderTableRow(row)).join('')}
+                </tbody>
             </table>
         </div>
         `
 
-    renderer.heading = (text, level) => {
+    renderer.heading = ({ text, depth }: Tokens.Heading) => {
         const escapedText = disableEscapedText ? '' : text.toLowerCase().replace(/[^\w]+/g, '-')
 
         return `
           <a name="${escapedText}" rel="noreferrer noopener" class="anchor" href="#${escapedText}">
-                <h${level} data-testid="deployment-template-readme-version">
+                <h${depth} data-testid="deployment-template-readme-version">
               <span class="header-link"></span>
               ${text}
-              </h${level}>
+              </h${depth}>
             </a>`
     }
 
     marked.setOptions({
         renderer,
         gfm: true,
-        smartLists: true,
         ...(breaks && { breaks: true }),
     })
 
-    const createMarkup = () => ({ __html: DOMPurify.sanitize(marked(markdown), { USE_PROFILES: { html: true } }) })
+    const createMarkup = () => ({
+        __html: DOMPurify.sanitize(marked(markdown) as string, { USE_PROFILES: { html: true } }),
+    })
 
     return (
         <article

diff --git a/src/Common/Markdown/markdown.scss b/src/Common/Markdown/markdown.scss
@@ -26,7 +26,7 @@
         border-spacing: 0;
         border-collapse: collapse;
 
-        tbody {
+        tbody, thead {
             td,
             th {
                 padding: 6px 13px;

diff --git a/src/Shared/Components/CICDHistory/Sidebar.tsx b/src/Shared/Components/CICDHistory/Sidebar.tsx
@@ -210,38 +210,37 @@ const HistorySummaryCard = React.memo(
             >
                 <NavLink
                     to={getPath}
-                    className="w-100 deployment-history-card-container"
+                    className="w-100 deployment-history-card-container p-8 br-4"
                     data-testid={dataTestId}
                     activeClassName="active"
                     ref={assignTargetCardRef}
                 >
                     <div className="w-100 deployment-history-card">
                         {getTriggerStatusIcon(status)}
                         <div className="flexbox-col dc__gap-8">
-                            <div className="flex column left dc__ellipsis-right">
-                                <div className="cn-9 fs-14">
+                            <div className="flex column left">
+                                <div className="cn-9 fs-13 lh-20">
                                     {moment(startedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
                                 </div>
                                 <div className="flex left cn-7 fs-12">
                                     {isCDType && (
                                         <>
-                                            <div className="dc__capitalize">
+                                            <div className="dc__first-letter-capitalize dc__no-shrink">
                                                 {['pre', 'post'].includes(stage?.toLowerCase())
                                                     ? `${stage}-deploy`
                                                     : stage}
                                             </div>
                                             <span className="dc__bullet dc__bullet--d2 ml-4 mr-4" />
-
                                             {artifact && (
-                                                <div className="dc__app-commit__hash dc__app-commit__hash--no-bg">
+                                                <div className="dc__app-commit__hash dc__app-commit__hash--no-bg dc__no-shrink">
                                                     <ICDocker className="commit-hash__icon grayscale" />
                                                     {artifact.split(':')[1].slice(-12)}
                                                 </div>
                                             )}
                                             <span className="dc__bullet dc__bullet--d2 ml-4 mr-4" />
                                         </>
                                     )}
-                                    <div className="cn-7 fs-12">
+                                    <div className="cn-7 fs-12 dc__ellipsis-right">
                                         {triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}
                                     </div>
                                 </div>
@@ -377,11 +376,10 @@ const Sidebar = React.memo(
                     </div>
                 )}
 
-                <div className="flex column top left flex-grow-1 dc__hide-hscroll" style={{ overflowY: 'auto' }}>
+                <div className="flex column top left flex-grow-1 dc__hide-hscroll p-8" style={{ overflowY: 'auto' }}>
                     {fetchIdData === FetchIdDataStatus.SUCCESS && (
                         <ViewAllCardsTile handleViewAllHistory={handleViewAllHistory} />
                     )}
-
                     {Array.from(triggerHistory)
                         .sort(([a], [b]) => b - a)
                         .map(([triggerId, triggerDetails], index) => (

diff --git a/src/Shared/Components/CICDHistory/cicdHistory.scss b/src/Shared/Components/CICDHistory/cicdHistory.scss
@@ -190,7 +190,6 @@
 
 .deployment-history-card-container {
     text-decoration: unset;
-    padding: 0 16px;
 
     &:hover {
         text-decoration: unset;
@@ -204,8 +203,7 @@
     .deployment-history-card {
         display: grid;
         grid-template-columns: 20px 1fr;
-        padding: 12px 0;
-        column-gap: 12px;
+        column-gap: 8px;
     }
 
     .app-status__icon {