Merge branch 'develop' of https://github.com/devtron-labs/dashboard i…

…nto feat/confirmation-modal

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.1.3",
+        "@devtron-labs/devtron-fe-common-lib": "1.1.4",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -14,7 +14,6 @@
         "@sentry/tracing": "7.50.0",
         "@tippyjs/react": "4.2.6",
         "@typeform/embed-react": "2.20.0",
-        "@types/marked": "4.0.8",
         "@vitejs/plugin-react": "4.3.1",
         "command-line-parser": "^0.2.10",
         "compute-histogram": "^0.9.11",
@@ -23,7 +22,6 @@
         "fast-json-patch": "^3.1.1",
         "flexsearch": "^0.6.32",
         "jsonpath-plus": "^10.0.0",
-        "marked": "4.3.0",
         "moment": "^2.29.4",
         "monaco-editor": "0.44.0",
         "monaco-yaml": "5.1.1",

src/components/bulkEdits/BulkEdits.tsx

@@ -27,6 +27,7 @@ import {
     ComponentSizeType,
     ToastManager,
     ToastVariantType,
+    MarkDown,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { DOCUMENTATION, SERVER_MODE, ViewType } from '../../config'
 import {
@@ -40,7 +41,6 @@ import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { ReactComponent as PlayButton } from '../../assets/icons/ic-play.svg'
 import { updateBulkList, getSeeExample, updateImpactedObjectsList } from './bulkedits.service'
 import './bulkEdit.scss'
-import { MarkDown } from '../charts/discoverChartDetail/DiscoverChartDetails'
 import '../charts/discoverChartDetail/DiscoverChartDetails.scss'
 import '../charts/modal/DeployChart.scss'
 import EAEmptyState, { EAEmptyStateType } from '../common/eaEmptyState/EAEmptyState'

src/components/charts/AdvancedConfig.tsx

@@ -22,12 +22,12 @@ import {
     useAsync,
     CustomInput,
     CodeEditor,
+    MarkDown,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory } from 'react-router-dom'
 import { Select, mapByKey, useKeyDown, Info, Pencil } from '../common'
 import { getEnvironmentListMin } from '../../services/service'
 import { ChartGroupEntry, AdvancedConfigHelpers, ChartValuesNativeType, ChartVersionType } from './charts.types'
-import { MarkDown } from './discoverChartDetail/DiscoverChartDetails'
 import { getReadme, getChartValues } from './charts.service'
 import { ValuesYamlConfirmDialog } from './dialogs/ValuesYamlConfirmDialog'
 import { ReactComponent as LockIcon } from '../../assets/icons/ic-locked.svg'

src/components/charts/discoverChartDetail/DiscoverChartDetails.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect, useRef } from 'react'
-import { Route, Switch, useRouteMatch, useLocation, useParams, useHistory } from 'react-router-dom'
+import React, { useState, useEffect } from 'react'
+import { Route, Switch, useRouteMatch, useParams, useHistory } from 'react-router-dom'
 import {
     showError,
     Progressing,
@@ -26,9 +26,8 @@ import {
     versionComparatorBySortOrder,
     ToastManager,
     ToastVariantType,
+    MarkDown,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { marked } from 'marked'
-import DOMPurify from 'dompurify'
 import { List } from '../../common'
 import { URLS } from '../../../config'
 import { getChartVersionsMin, getChartVersionDetails, getChartValuesCategorizedListParsed } from '../charts.service'
@@ -47,8 +46,6 @@ import { ChartInstalledConfig, ChartKind } from '../../v2/values/chartValuesDiff
 import { ChartValuesType } from '../charts.types'
 
 const DiscoverDetailsContext = React.createContext(null)
-const uncheckedCheckboxInputElement = `<input checked="" disabled="" type="checkbox">`
-const checkedCheckboxInputElement = `<input disabled="" type="checkbox">`
 export function useDiscoverDetailsContext() {
     const context = React.useContext(DiscoverDetailsContext)
     if (!context) {
@@ -405,97 +402,4 @@ const ReadmeRowHorizontal = ({ readme = null, version = '', ...props }) => {
     )
 }
 
-function isReadmeInputCheckbox(text: string) {
-    if (text.includes(uncheckedCheckboxInputElement) || text.includes(checkedCheckboxInputElement)) {
-        return true
-    }
-    return false
-}
-
-/**
- *
- * @deprecated function is used in common component
- */
-export const MarkDown = ({ markdown = '', className = '', breaks = false, disableEscapedText = false, ...props }) => {
-    const { hash } = useLocation()
-    const renderer = new marked.Renderer()
-    const mdeRef = useRef(null)
-
-    renderer.listitem = function (text: string) {
-        if (isReadmeInputCheckbox(text)) {
-            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>`
-        }
-        return `<li>${text}</li>`
-    }
-
-    renderer.image = function (href: string, title: string, text: string) {
-        return `<img src="${href}" alt="${text}" title="${title}" class="max-w-100">`
-    }
-
-    renderer.table = function (header, body) {
-        return `
-        <div class="table-container">
-            <table>
-                ${header}
-                ${body}
-            </table>
-        </div>
-        `
-    }
-
-    renderer.heading = function (text, level) {
-        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">
-              <span class="header-link"></span>
-              ${text}
-              </h${level}>
-            </a>`
-    }
-
-    marked.setOptions({
-        renderer,
-        gfm: true,
-        smartLists: true,
-        ...(breaks && { breaks: true }),
-    })
-
-    useEffect(() => {
-        getHeight()
-    }, [markdown])
-
-    const getHeight = () => {
-        const editorHeight = mdeRef.current?.clientHeight
-        const minHeight = 320
-        const showExpandableViewIcon = editorHeight > minHeight
-        if (typeof props.setExpandableIcon === 'function') {
-            props.setExpandableIcon(showExpandableViewIcon)
-        }
-    }
-
-    function createMarkup() {
-        return { __html: DOMPurify.sanitize(marked(markdown), { USE_PROFILES: { html: true } }) }
-    }
-    return (
-        <article
-            {...props}
-            ref={mdeRef}
-            className={`deploy-chart__readme-markdown pr-20 ${className}`}
-            dangerouslySetInnerHTML={createMarkup()}
-            data-testid="article-for-bulk-edit"
-        />
-    )
-}
-
 export default DiscoverChartDetails

src/components/common/Description/GenericDescription.tsx

@@ -20,7 +20,7 @@ import Tippy from '@tippyjs/react'
 import moment from 'moment'
 import { patchApplicationNote, patchClusterNote } from '../../ClusterNodes/clusterNodes.service'
 import 'react-mde/lib/styles/css/react-mde-all.css'
-import { showError, TOAST_ACCESS_DENIED, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
+import { MarkDown, showError, TOAST_ACCESS_DENIED, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
 import { MDEditorSelectedTabType } from '../../ClusterNodes/types'
 import { ReactComponent as HeaderIcon } from '../../../assets/icons/mdeditor/ic-header.svg'
 import { ReactComponent as BoldIcon } from '../../../assets/icons/mdeditor/ic-bold.svg'
@@ -47,7 +47,6 @@ import {
     MARKDOWN_EDITOR_COMMAND_TITLE,
 } from '../../ClusterNodes/constants'
 import './GenericDescription.scss'
-import { MarkDown } from '../../charts/discoverChartDetail/DiscoverChartDetails'
 import { AppMetaInfo } from '../../app/types'
 
 export default function GenericDescription({

src/components/v2/appDetails/sourceInfo/environment.type.ts

@@ -15,7 +15,6 @@
  */
 
 import { AppEnvironment as BaseAppEnvironmentType } from '@devtron-labs/devtron-fe-common-lib'
-import { TooltipProps } from '@devtron-labs/devtron-fe-common-lib/dist/Common/Tooltip/types'
 import React from 'react'
 import { DeploymentStatusDetailsBreakdownDataType } from '../../../app/details/appDetails/appDetails.type'
 import { HelmReleaseStatus } from '../../../external-apps/ExternalAppService'
@@ -57,7 +56,7 @@ export interface HelmAppConfigApplyStatusCardType {
 }
 
 export interface ChartToolTipType extends Pick<ChartUsedCardType, 'onClickUpgrade'> {
-    children: TooltipProps['children']
+    children: React.ReactElement<any>
     isDeprecated: boolean
     chartRef: React.RefObject<HTMLDivElement>
 }

src/components/v2/appDetails/sourceInfo/environmentStatus/NotesDrawer.tsx

@@ -14,12 +14,11 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
-import { MarkDown } from '../../../../charts/discoverChartDetail/DiscoverChartDetails'
 import './environmentStatus.scss'
 import { NotesDrawerType } from './notesDrawer.type'
-import { Drawer } from '@devtron-labs/devtron-fe-common-lib'
+import { Drawer, MarkDown } from '@devtron-labs/devtron-fe-common-lib'
 
 const NotesDrawer = ({ notes, close }: NotesDrawerType) => {
     const appNotesRef = useRef<HTMLDivElement>(null)

src/components/v2/devtronStackManager/AboutDevtronView.tsx

@@ -16,12 +16,11 @@
 
 import React, { useEffect } from 'react'
 import AboutDevtron from '../../../assets/img/[email protected]'
-import { MarkDown } from '../../charts/discoverChartDetail/DiscoverChartDetails'
 import { InstallationWrapper } from './DevtronStackManager.component'
 import { AboutDevtronViewType, InstallationType } from './DevtronStackManager.type'
 import './AboutDevtronView.scss'
 import { URLS } from '../../../config'
-import { TabGroup } from '@devtron-labs/devtron-fe-common-lib'
+import { MarkDown, TabGroup } from '@devtron-labs/devtron-fe-common-lib'
 
 const AboutDevtronView = ({
     parentRef,

src/components/v2/devtronStackManager/DevtronStackManager.component.tsx

@@ -32,6 +32,7 @@ import {
     ToastManager,
     ToastVariantType,
     TOAST_ACCESS_DENIED,
+    MarkDown,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -75,7 +76,6 @@ import {
     PENDING_DEPENDENCY_MESSAGE,
     handleEnableAction,
 } from './DevtronStackManager.utils'
-import { MarkDown } from '../../charts/discoverChartDetail/DiscoverChartDetails'
 import './devtronStackManager.component.scss'
 import trivy from '../../../assets/icons/ic-clair-to-trivy.svg'
 import clair from '../../../assets/icons/ic-trivy-to-clair.svg'

src/components/v2/values/chartValuesDiff/ChartRepoSelector.tsx

@@ -147,7 +147,7 @@ export const ChartRepoSelector = ({
 
     return (
         (isExternal || isUpdate) && (
-            <div className="form__row form__row--w-100">
+            <div className="w-100">
                 <div className="flex dc__content-space">
                     <span className="form__label fs-13 fw-4 lh-20 cn-7" data-testid="helm-chart-heading">
                         Helm Chart