Merge pull request #435 from devtron-labs/release-candidate-v0.24.0

release: Release candidate v0.24.0

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.0-patch-1",
+    "version": "1.2.0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -79,7 +79,6 @@
         "@rjsf/validator-ajv8": "^5.13.3",
         "@typeform/embed-react": "2.20.0",
         "dompurify": "^3.0.2",
-        "marked": "4.3.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",
@@ -92,11 +91,14 @@
     },
     "dependencies": {
         "@types/react-dates": "^21.8.6",
+        "marked": "^13.0.3",
         "ansi_up": "^5.2.1",
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
+        "framer-motion": "^6.5.1",
         "jsonpath-plus": "^10.0.0",
         "react-dates": "^21.8.0",
+        "react-diff-viewer-continued": "^3.4.0",
         "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "2.7.0"

package.json

@@ -69,9 +69,13 @@ export const CustomInput = ({
     const handleOnBlur = (event) => {
         // NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
         if (!noTrim) {
-            event.stopPropagation()
-            event.target.value = event.target.value?.trim()
-            onChange(event)
+            const trimmedValue = event.target.value?.trim()
+
+            if (event.target.value !== trimmedValue) {
+                event.stopPropagation()
+                event.target.value = trimmedValue
+                onChange(event)
+            }
         }
         if (typeof onBlur === 'function') {
             onBlur(event)

src/Assets/Icon/ic-info-outline.svg

@@ -25,6 +25,8 @@ export const KEYBOARD_KEYS_MAP = {
     E: 'E',
     R: 'R',
     K: 'K',
+    Escape: 'Escape',
+    Enter: 'Enter',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Assets/Icon/ic-medium-info.svg

@@ -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

src/Common/CustomInput/CustomInput.tsx

@@ -26,7 +26,7 @@
         border-spacing: 0;
         border-collapse: collapse;
 
-        tbody {
+        tbody, thead {
             td,
             th {
                 padding: 6px 13px;

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -34,8 +34,8 @@ export class VisibleModal extends React.Component<{
     }
 
     escFunction(event) {
-        stopPropagation(event)
         if (event.keyCode === 27 || event.key === 'Escape') {
+            stopPropagation(event)
             if (this.props.onEscape) {
                 this.props.onEscape(event)
             } else if (this.props.close) {

src/Common/Markdown/MarkDown.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
@@ -31,6 +31,12 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
     const [showHeadingInfo, setShowHeadingInfo] = useState(false)
     const isWhiteTheme = props.theme === TippyTheme.white
 
+    const closeOnEsc = (e) => {
+        if (e.keyCode === 27) {
+            closeTippy(e)
+        }
+    }
+
     const onTippyMount = (tippyInstance) => {
         tippyRef.current = tippyInstance
         document.addEventListener('keydown', closeOnEsc)
@@ -47,12 +53,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
             }
         }
         setShowHeadingInfo(false)
-    }
-
-    const closeOnEsc = (e) => {
-        if (e.keyCode === 27) {
-            closeTippy(e)
-        }
+        document.removeEventListener('keydown', closeOnEsc)
     }
 
     const toggleHeadingInfo = (e) => {