Skip to content

Commit 58ce16d

Browse files
eshankvaisheshankvaish
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/calc-cleanup
2 parents 4802c37 + bbec103 commit 58ce16d

31 files changed

+544
-144
lines changed

‎package-lock.json

Lines changed: 14 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.8.3",
3+
"version": "1.8.4",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
@@ -103,6 +103,8 @@
103103
"@codemirror/legacy-modes": "6.4.2",
104104
"@codemirror/lint": "6.8.4",
105105
"@codemirror/search": "6.5.8",
106+
"@lezer/highlight": "1.2.1",
107+
"@replit/codemirror-indentation-markers": "6.5.3",
106108
"@replit/codemirror-vscode-keymap": "6.0.2",
107109
"@types/react-dates": "^21.8.6",
108110
"@uiw/codemirror-theme-github": "^4.23.7",
@@ -118,11 +120,11 @@
118120
"react-codemirror-merge": "4.23.6",
119121
"react-dates": "^21.8.0",
120122
"react-diff-viewer-continued": "^3.4.0",
123+
"react-draggable": "^4.4.5",
121124
"react-monaco-editor": "^0.54.0",
122125
"react-virtualized-sticky-tree": "^3.0.0-beta18",
123126
"sass": "^1.69.7",
124-
"tslib": "2.7.0",
125-
"react-draggable": "^4.4.5"
127+
"tslib": "2.7.0"
126128
},
127129
"overrides": {
128130
"cross-spawn": "^7.0.5",

‎src/Assets/IconV2/ic-arrow-right.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Common/CodeEditor/CodeEditor.tsx

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
355355
<CodeEditorPlaceholder customLoader={customLoader} />
356356
) : (
357357
<>
358-
{shebang && <div className="code-editor__shebang">{shebang}</div>}
358+
{shebang && <div className="code-editor-shebang">{shebang}</div>}
359359
{state.diffMode ? (
360360
<MonacoDiffEditor
361361
original={state.defaultCode}
@@ -391,10 +391,14 @@ const Header: React.FC<CodeEditorHeaderInterface> & CodeEditorHeaderComposition
391391
children,
392392
className,
393393
hideDefaultSplitHeader,
394+
diffViewWidth,
394395
}) => {
395396
const { defaultValue } = useCodeEditorContext()
396397
return (
397-
<div className={className || 'code-editor__header flex right'}>
398+
<div
399+
className={className || 'code-editor__header flex right'}
400+
style={{ ...(diffViewWidth ? { width: 'calc(100% - 30px)' } : {}) }}
401+
>
398402
{children}
399403
{!hideDefaultSplitHeader && defaultValue && <SplitPane />}
400404
</div>
@@ -518,6 +522,24 @@ const CodeEditorPlaceholder = ({ className = '', style = {}, customLoader }): JS
518522
)
519523
}
520524

525+
const Container = ({
526+
children,
527+
flexExpand,
528+
overflowHidden,
529+
}: {
530+
children: React.ReactNode
531+
flexExpand?: boolean
532+
overflowHidden?: boolean
533+
}) => (
534+
<div
535+
data-code-editor-container
536+
className={`code-editor__container w-100 dc__border br-4
537+
${flexExpand ? 'flex-grow-1 flexbox-col' : ''} ${overflowHidden ? 'dc__overflow-hidden' : ''}`}
538+
>
539+
{children}
540+
</div>
541+
)
542+
521543
CodeEditor.LanguageChanger = LanguageChanger
522544
CodeEditor.ThemeChanger = ThemeChanger
523545
CodeEditor.ValidationError = ValidationError
@@ -526,5 +548,6 @@ CodeEditor.Header = Header
526548
CodeEditor.Warning = Warning
527549
CodeEditor.ErrorBar = ErrorBar
528550
CodeEditor.Information = Information
551+
CodeEditor.Container = Container
529552

530553
export default CodeEditor

‎src/Common/CodeEditor/codeEditor.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131
}
132132
}
133133

134-
.code-editor__shebang {
134+
.code-editor-shebang {
135135
padding: 0 52px;
136136
color: var(--N900);
137137
opacity: 0.6;

‎src/Common/CodeEditor/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export interface CodeEditorHeaderInterface {
8282
children?: any
8383
className?: string
8484
hideDefaultSplitHeader?: boolean
85+
diffViewWidth?: boolean
8586
}
8687
export interface CodeEditorComposition {
8788
Header?: React.FC<any>
@@ -92,6 +93,7 @@ export interface CodeEditorComposition {
9293
Warning?: React.FC<InformationBarProps>
9394
ErrorBar?: React.FC<InformationBarProps>
9495
Information?: React.FC<InformationBarProps>
96+
Container?: React.FC<{ children: React.ReactNode; flexExpand?: boolean; overflowHidden?: boolean }>
9597
}
9698
export interface CodeEditorHeaderComposition {
9799
LanguageChanger?: React.FC<any>

‎src/Common/CodeMirror/CodeEditor.constants.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ import { SupportedKeyboardKeysType } from '@Common/Hooks/UseRegisterShortcut/typ
2020
export const PREVIOUS_MATCH_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Shift', 'Enter']
2121
export const NEXT_MATCH_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Enter']
2222
export const REPLACE_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Enter']
23-
export const REPLACE_ALL_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = [IS_PLATFORM_MAC_OS ? 'Meta' : 'Control', 'Enter']
24-
export const SELECT_ALL_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Alt', 'Enter']
23+
export const REPLACE_ALL_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = [
24+
IS_PLATFORM_MAC_OS ? 'Meta' : 'Control',
25+
'Alt',
26+
'Enter',
27+
]
2528
export const CLOSE_SEARCH_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Escape']
29+
30+
export const READ_ONLY_TOOLTIP_TIMEOUT = 2000

‎src/Common/CodeMirror/CodeEditor.theme.ts

Lines changed: 67 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,75 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { githubDarkInit, githubLightStyle, githubDarkStyle, githubLightInit } from '@uiw/codemirror-theme-github'
17+
import { EditorView } from '@uiw/react-codemirror'
18+
import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
19+
import { tags } from '@lezer/highlight'
1820

1921
export const getCodeEditorTheme = (isDark: boolean) => {
2022
const themeInit = isDark ? githubDarkInit : githubLightInit
21-
const styles = isDark ? githubDarkStyle : githubLightStyle
23+
const styles = isDark
24+
? [
25+
{
26+
tag: [tags.className, tags.propertyName],
27+
color: 'var(--code-editor-property-name)',
28+
},
29+
{
30+
tag: [tags.variableName, tags.attributeName, tags.number, tags.operator],
31+
color: 'var(--code-editor-number)',
32+
},
33+
{
34+
tag: [tags.heading, tags.strong],
35+
color: 'var(--code-editor-property-name)',
36+
fontWeight: 'bold',
37+
},
38+
{
39+
tag: [tags.emphasis],
40+
color: 'var(--code-editor-property-name)',
41+
fontStyle: 'italic',
42+
},
43+
{
44+
tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
45+
color: 'var(--code-editor-boolean)',
46+
},
47+
]
48+
: [
49+
{
50+
tag: [tags.className, tags.propertyName],
51+
color: 'var(--code-editor-property-name)',
52+
},
53+
{
54+
tag: [tags.variableName, tags.attributeName, tags.number, tags.operator],
55+
color: 'var(--code-editor-number)',
56+
},
57+
{
58+
tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
59+
color: 'var(--code-editor-boolean)',
60+
},
61+
]
2262

23-
return themeInit({
24-
settings: {
25-
fontSize: '14px',
26-
fontFamily: 'Inconsolata, monospace',
27-
background: 'var(--bg-code-editor-base)',
28-
foreground: 'var(--N900)',
29-
caret: 'var(--N900)',
30-
gutterBackground: 'var(--bg-code-editor-base-gutter)',
31-
gutterForeground: 'var(--N900)',
32-
gutterBorder: 'transparent',
33-
lineHighlight: 'var(--active-line)',
34-
},
35-
styles,
36-
})
63+
return {
64+
themeExtension: EditorView.theme({
65+
'.cm-highlight-number': {
66+
color: 'var(--code-editor-number)',
67+
},
68+
'.cm-highlight-bool': {
69+
color: 'var(--code-editor-boolean)',
70+
},
71+
}),
72+
codeEditorTheme: themeInit({
73+
settings: {
74+
fontSize: '15px',
75+
fontFamily: 'Inconsolata, monospace',
76+
background: 'var(--bg-code-editor-base)',
77+
foreground: 'var(--fg-code-editor)',
78+
caret: 'var(--N900)',
79+
gutterBackground: 'var(--bg-code-editor-base-gutter)',
80+
gutterForeground: 'var(--N500)',
81+
gutterBorder: 'transparent',
82+
lineHighlight: 'var(--active-line)',
83+
},
84+
styles,
85+
theme: isDark ? 'dark' : 'light',
86+
}),
87+
}
3788
}

‎src/Common/CodeMirror/CodeEditor.tsx

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,15 @@ import { foldGutter } from '@codemirror/language'
2727
import { search } from '@codemirror/search'
2828
import { lintGutter } from '@codemirror/lint'
2929
import { vscodeKeymap } from '@replit/codemirror-vscode-keymap'
30+
import { indentationMarkers } from '@replit/codemirror-indentation-markers'
3031

3132
import { AppThemeType, useTheme } from '@Shared/Providers'
3233
import { getUniqueId } from '@Shared/Helpers'
3334
import { cleanKubeManifest, useEffectAfterMount } from '@Common/Helper'
3435
import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
3536

36-
import { codeEditorFindReplace, readOnlyTooltip } from './Extensions'
37+
import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
38+
import { openSearchPanel, openSearchPanelWithReplace, replaceAll, showReplaceFieldState } from './Commands'
3739
import { CodeEditorContextProps, CodeEditorProps } from './types'
3840
import { CodeEditorReducer, initialState, parseValueToCode } from './CodeEditor.reducer'
3941
import { getFoldGutterElement, getLanguageExtension, getValidationSchema } from './utils'
@@ -87,8 +89,9 @@ const CodeEditor = <DiffView extends boolean = false>({
8789
const codeMirrorParentDivRef = useRef<HTMLDivElement>()
8890

8991
// CONSTANTS
90-
const isDarkTheme = (theme ?? appTheme) === AppThemeType.dark
91-
const codeEditorTheme = getCodeEditorTheme(isDarkTheme)
92+
const componentTheme = theme ?? appTheme
93+
const isDarkTheme = componentTheme === AppThemeType.dark
94+
const { codeEditorTheme, themeExtension } = getCodeEditorTheme(isDarkTheme)
9295

9396
// STATES
9497
const [codemirrorMergeKey, setCodemirrorMergeKey] = useState<string>()
@@ -176,7 +179,7 @@ const CodeEditor = <DiffView extends boolean = false>({
176179
searchKeymap: false,
177180
foldGutter: false,
178181
drawSelection: false,
179-
highlightActiveLineGutter: false,
182+
highlightActiveLineGutter: true,
180183
tabSize,
181184
}
182185

@@ -195,13 +198,22 @@ const CodeEditor = <DiffView extends boolean = false>({
195198

196199
const baseExtensions: Extension[] = [
197200
basicSetup(basicSetupOptions),
198-
keymap.of(vscodeKeymap.filter(({ key }) => !disableSearch || key !== 'Mod-f')),
201+
themeExtension,
202+
keymap.of([
203+
...vscodeKeymap.filter(({ key }) => key !== 'Mod-Alt-Enter' && key !== 'Mod-Enter' && key !== 'Mod-f'),
204+
...(!disableSearch ? [{ key: 'Mod-f', run: openSearchPanel, scope: 'editor search-panel' }] : []),
205+
{ key: 'Mod-Enter', run: replaceAll, scope: 'editor search-panel' },
206+
{ key: 'Mod-Alt-f', run: openSearchPanelWithReplace, scope: 'editor search-panel' },
207+
]),
208+
indentationMarkers(),
199209
getLanguageExtension(mode),
200210
foldingCompartment.of(foldConfig),
201211
lintGutter(),
202212
search({
203213
createPanel: codeEditorFindReplace,
204214
}),
215+
showReplaceFieldState,
216+
...(mode === MODES.YAML ? [yamlHighlight] : []),
205217
]
206218

207219
const extensions: Extension[] = [
@@ -221,7 +233,7 @@ const CodeEditor = <DiffView extends boolean = false>({
221233
codemirrorMergeKey={codemirrorMergeKey}
222234
codeMirrorParentDivRef={codeMirrorParentDivRef}
223235
codeEditorTheme={codeEditorTheme}
224-
isDarkTheme={isDarkTheme}
236+
theme={componentTheme}
225237
state={state}
226238
loading={loading}
227239
customLoader={customLoader}

0 commit comments

Comments
 (0)