Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/text-area

Author: eshankvaish

.eslintignore

@@ -11,7 +11,6 @@ src/Common/CIPipeline.Types.ts
 src/Common/ChartVersionAndTypeSelector.tsx
 src/Common/Checkbox.tsx
 src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
-src/Common/CodeEditor/CodeEditor.tsx
 src/Common/Common.service.ts
 src/Common/CustomInput/CustomInput.tsx
 src/Common/CustomTagSelector/PropagateTagInfo.tsx

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.5.11",
+    "version": "1.5.14",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -43,6 +43,7 @@
         "@tippyjs/react": "^4.2.0",
         "@typeform/embed-react": "2.20.0",
         "@types/dompurify": "^3.0.5",
+        "@types/json-schema": "^7.0.15",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
@@ -60,10 +61,9 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "glob": "^10.3.3",
         "husky": "^7.0.4",
+        "json-schema": "^0.4.0",
         "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
-        "monaco-editor": "0.44.0",
-        "monaco-yaml": "5.1.1",
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
         "react-toastify": "9.1.3",
@@ -94,17 +94,27 @@
         "yaml": "^2.4.1"
     },
     "dependencies": {
+        "@codemirror/lang-json": "6.0.1",
+        "@codemirror/lang-yaml": "6.1.2",
+        "@codemirror/language": "6.10.8",
+        "@codemirror/legacy-modes": "6.4.2",
+        "@codemirror/lint": "6.8.4",
+        "@codemirror/search": "6.5.8",
+        "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",
+        "@uiw/codemirror-theme-github": "^4.23.7",
+        "@uiw/react-codemirror": "4.23.7",
         "ansi_up": "^5.2.1",
+        "codemirror-json-schema": "0.8.0",
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
         "framer-motion": "^6.5.1",
         "jsonpath-plus": "^10.0.0",
         "marked": "^13.0.3",
         "nanoid": "^3.3.8",
+        "react-codemirror-merge": "4.23.6",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
-        "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
         "tslib": "2.7.0",
@@ -116,9 +126,6 @@
             "react": "^17.0.2",
             "react-dom": "^17.0.2"
         },
-        "react-monaco-editor": {
-            "monaco-editor": "0.44.0"
-        },
         "vite-plugin-svgr": {
             "vite": "5.4.11"
         },

package.json

@@ -0,0 +1 @@
+export * from './ClipboardButton'

patches/codemirror-json-schema+0.8.0.patch

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react'
+
+import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
+import { ReactComponent as Info } from '@Icons/ic-info-filled.svg'
+import { ReactComponent as ErrorIcon } from '@Icons/ic-error-exclamation.svg'
+import { ReactComponent as ICCompare } from '@Icons/ic-compare.svg'
+import { ClipboardButton } from '@Common/ClipboardButton'
+
+import { useCodeEditorContext } from './CodeEditor.context'
+import { CodeEditorHeaderProps, CodeEditorStatusBarProps } from './types'
+
+const SplitPane = () => {
+    const { state, dispatch, readOnly } = useCodeEditorContext()
+
+    const handleToggle = () => {
+        if (readOnly) {
+            return
+        }
+        dispatch({ type: 'setDiff', value: !state.diffMode })
+    }
+
+    return (
+        <div className="code-editor__split-pane flex pointer cn-7 fcn-7 ml-auto" onClick={handleToggle}>
+            <ICCompare className="icon-dim-20 mr-4" />
+            {state.diffMode ? 'Hide comparison' : 'Compare with default'}
+        </div>
+    )
+}
+
+export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEditorHeaderProps) => {
+    const { state, hasCodeEditorContainer } = useCodeEditorContext()
+
+    return (
+        <div
+            data-code-editor-header
+            className={`${hasCodeEditorContainer ? 'dc__top-radius-4' : ''} ${className || 'code-editor__header flex right bcn-1 pt-10 pb-9 px-16 dc__border-bottom'}`}
+        >
+            {children}
+            {!hideDefaultSplitHeader && state.lhsCode && <SplitPane />}
+        </div>
+    )
+}
+
+export const Warning = ({ className, text, children }: CodeEditorStatusBarProps) => (
+    <div
+        className={`code-editor__warning fs-12 fw-4 lh-16 cn-9 py-8 px-16 bcy-1 bw-1 ey-2 dc__height-auto ${className || ''}`}
+    >
+        <ICWarningY5 className="code-editor__status-info-icon" />
+        {text}
+        {children}
+    </div>
+)
+
+export const ErrorBar = ({ className, text, children }: CodeEditorStatusBarProps) => (
+    <div className={`code-editor__error fs-12 fw-4 lh-16 py-8 px-16 dc__border-bottom bco-1 co-5 ${className || ''}`}>
+        <ErrorIcon className="code-editor__status-info-icon" />
+        {text}
+        {children}
+    </div>
+)
+
+export const Information = ({ className, children, text }: CodeEditorStatusBarProps) => (
+    <div
+        className={`code-editor__information fs-12 fw-4 lh-16 cn-9 dc__height-auto py-8 px-16 dc__border-bottom bcb-1 ${className || ''}`}
+    >
+        <Info className="code-editor__status-info-icon" />
+        {text}
+        {children}
+    </div>
+)
+
+export const Clipboard = () => {
+    const { state } = useCodeEditorContext()
+
+    return <ClipboardButton content={state.code} iconSize={16} />
+}
+
+export const Container = ({ children, flexExpand }: { children: ReactNode; flexExpand?: boolean }) => (
+    <div
+        data-code-editor-container
+        className={`code-editor__container w-100 dc__border br-4
+        ${flexExpand ? 'flex-grow-1 flexbox-col' : ''}`}
+    >
+        {children}
+    </div>
+)