Merge pull request #609 from devtron-labs/feat/codemirror-diff-minimap

feat: CodeMirror - Add Diff Minimap

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.4",
+    "version": "1.8.5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -391,16 +391,19 @@ const Header: React.FC<CodeEditorHeaderInterface> & CodeEditorHeaderComposition
     children,
     className,
     hideDefaultSplitHeader,
-    diffViewWidth,
 }) => {
-    const { defaultValue } = useCodeEditorContext()
+    const { defaultValue, state } = useCodeEditorContext()
     return (
-        <div
-            className={className || 'code-editor__header flex right'}
-            style={{ ...(diffViewWidth ? { width: 'calc(100% - 30px)' } : {}) }}
-        >
-            {children}
-            {!hideDefaultSplitHeader && defaultValue && <SplitPane />}
+        <div className="flexbox w-100 dc__border-bottom ">
+            <div
+                data-code-editor-header
+                className={`code-editor__header flex-grow-1 bg__secondary ${className || 'px-16 pt-6 pb-5'} ${state.diffMode ? 'dc__grid-half vertical-divider' : ''}`}
+
+            >
+                {children}
+                {!hideDefaultSplitHeader && defaultValue && <SplitPane />}
+            </div>
+            {state.diffMode ? <div className="bg__secondary px-15 dc__align-self-stretch" /> : null}
         </div>
     )
 }

src/Common/CodeEditor/CodeEditor.tsx

@@ -15,11 +15,6 @@
  */
 
  .code-editor__header {
-  height: 40px;
-  background: var(--N100);
-  padding: 0 16px;
-  border-bottom: 1px solid var(--N200);
-
   .radio-group {
       height: 24px;
       overflow: hidden;

src/Common/CodeEditor/codeEditor.scss

@@ -82,7 +82,6 @@ export interface CodeEditorHeaderInterface {
     children?: any
     className?: string
     hideDefaultSplitHeader?: boolean
-    diffViewWidth?: boolean
 }
 export interface CodeEditorComposition {
     Header?: React.FC<any>

src/Common/CodeEditor/types.ts

@@ -21,38 +21,42 @@ 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 { getComponentSpecificThemeClass } from '@Shared/Providers'
 
 import { useCodeEditorContext } from './CodeEditor.context'
 import { CodeEditorHeaderProps, CodeEditorStatusBarProps } from './types'
 
 const SplitPane = () => {
-    const { state, dispatch, readOnly } = useCodeEditorContext()
+    const { diffMode, setDiffMode, readOnly } = useCodeEditorContext()
 
     const handleToggle = () => {
         if (readOnly) {
             return
         }
-        dispatch({ type: 'setDiff', value: !state.diffMode })
+        setDiffMode(!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'}
+            {diffMode ? 'Hide comparison' : 'Compare with default'}
         </div>
     )
 }
 
 export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEditorHeaderProps) => {
-    const { state, hasCodeEditorContainer } = useCodeEditorContext()
+    const { diffMode, lhsValue, hasCodeEditorContainer, theme } = 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 className={`${getComponentSpecificThemeClass(theme)} flexbox w-100 border__primary--bottom`}>
+            <div
+                data-code-editor-header
+                className={`${hasCodeEditorContainer ? 'dc__top-radius-4' : ''} code-editor__header flex-grow-1 bg__secondary ${className || 'px-16 pt-6 pb-5'} ${diffMode ? 'dc__grid-half vertical-divider' : ''}`}
+            >
+                {children}
+                {!hideDefaultSplitHeader && lhsValue && <SplitPane />}
+            </div>
+            {diffMode ? <div className="bg__secondary px-5 dc__align-self-stretch" /> : null}
         </div>
     )
 }
@@ -86,9 +90,9 @@ export const Information = ({ className, children, text }: CodeEditorStatusBarPr
 )
 
 export const Clipboard = () => {
-    const { state } = useCodeEditorContext()
+    const { value } = useCodeEditorContext()
 
-    return <ClipboardButton content={state.code} iconSize={16} />
+    return <ClipboardButton content={value} iconSize={16} />
 }
 
 export const Container = ({ children, flexExpand }: { children: ReactNode; flexExpand?: boolean }) => (

src/Common/CodeMirror/CodeEditor.components.tsx

@@ -28,3 +28,9 @@ export const REPLACE_ALL_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = [
 export const CLOSE_SEARCH_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Escape']
 
 export const READ_ONLY_TOOLTIP_TIMEOUT = 2000
+
+export const CODE_EDITOR_FONT_SIZE = 15
+
+export const CODE_EDITOR_LINE_HEIGHT = 1.4
+
+export const CODE_EDITOR_MIN_OVERLAY_HEIGHT = 20

src/Common/CodeMirror/CodeEditor.constants.ts

@@ -18,6 +18,8 @@ import { EditorView } from '@uiw/react-codemirror'
 import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
 import { tags } from '@lezer/highlight'
 
+import { CODE_EDITOR_FONT_SIZE } from './CodeEditor.constants'
+
 export const getCodeEditorTheme = (isDark: boolean) => {
     const themeInit = isDark ? githubDarkInit : githubLightInit
     const styles = isDark
@@ -71,7 +73,7 @@ export const getCodeEditorTheme = (isDark: boolean) => {
         }),
         codeEditorTheme: themeInit({
             settings: {
-                fontSize: '15px',
+                fontSize: `${CODE_EDITOR_FONT_SIZE}px`,
                 fontFamily: 'Inconsolata, monospace',
                 background: 'var(--bg-code-editor-base)',
                 foreground: 'var(--fg-code-editor)',
@@ -80,6 +82,8 @@ export const getCodeEditorTheme = (isDark: boolean) => {
                 gutterForeground: 'var(--N500)',
                 gutterBorder: 'transparent',
                 lineHighlight: 'var(--active-line)',
+                selection: 'var(--selection-color)',
+                selectionMatch: 'var(--selection-match-color)',
             },
             styles,
             theme: isDark ? 'dark' : 'light',