Skip to content

Commit 9936d2c

Browse files
vlad-dargelvlad-dargel
authored
Merge pull request #1599 from RedisInsight/feature/RI-3784_add-key-json-monaco
Feature/ri 3784 add key json monaco
2 parents 0555bc1 + 17812ab commit 9936d2c

File tree

20 files changed

+263
-55
lines changed

20 files changed

+263
-55
lines changed

‎configs/webpack.config.renderer.dev.babel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export default merge(baseConfig, {
223223

224224
new ReactRefreshWebpackPlugin(),
225225

226-
new MonacoWebpackPlugin({ languages: [], features: ['!rename'] }),
226+
new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
227227
],
228228

229229
node: {

‎configs/webpack.config.renderer.prod.babel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export default merge(baseConfig, {
187187
},
188188

189189
plugins: [
190-
new MonacoWebpackPlugin({ languages: [], features: ['!rename'] }),
190+
new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
191191

192192
new webpack.EnvironmentPlugin({
193193
NODE_ENV: 'production',

‎configs/webpack.config.web.common.babel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default {
7171
plugins: [
7272
new HtmlWebpackPlugin({ template: 'index.html.ejs' }),
7373

74-
new MonacoWebpackPlugin({ languages: [], features: ['!rename'] }),
74+
new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
7575

7676
new webpack.IgnorePlugin({
7777
checkResource(resource) {

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@
126126
"@types/node": "14.14.10",
127127
"@types/react": "^18.0.20",
128128
"@types/react-dom": "^18.0.5",
129-
"@types/react-monaco-editor": "^0.16.0",
130129
"@types/react-redux": "^7.1.12",
131130
"@types/react-router-dom": "^5.1.6",
132131
"@types/react-virtualized": "^9.21.10",
@@ -243,7 +242,7 @@
243242
"react-hotkeys-hook": "^3.3.1",
244243
"react-json-pretty": "^2.2.0",
245244
"react-jsx-parser": "^1.28.4",
246-
"react-monaco-editor": "^0.44.0",
245+
"react-monaco-editor": "^0.45.0",
247246
"react-redux": "^7.2.2",
248247
"react-rnd": "^10.3.5",
249248
"react-router-dom": "^5.2.0",

‎redisinsight/__mocks__/monacoMock.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export default function MonacoEditor(props) {
1515
createContextKey: jest.fn(),
1616
focus: jest.fn(),
1717
onDidChangeCursorPosition: jest.fn(),
18-
executeEdits: jest.fn()
18+
executeEdits: jest.fn(),
19+
updateOptions: jest.fn()
1920
},
2021
// monaco
2122
{
@@ -31,12 +32,21 @@ export default function MonacoEditor(props) {
3132
}),
3233
setLanguageConfiguration: jest.fn(),
3334
setMonarchTokensProvider: jest.fn(),
35+
json: {
36+
jsonDefaults:{
37+
setDiagnosticsOptions: jest.fn()
38+
}
39+
}
3440
},
3541
KeyMod: {},
3642
KeyCode: {}
3743
})
3844
}, [])
39-
return <input {...props} data-testid="monaco"/>;
45+
return <textarea
46+
{...props}
47+
onChange={(e) => props.onChange && props.onChange(e.target.value)}
48+
data-testid={props['data-testid'] ? props['data-testid'] : 'monaco'}
49+
/>;
4050
}
4151

4252
export const languages = {

‎redisinsight/ui/.eslintrc.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ module.exports = {
7979
'index',
8080
],
8181
pathGroups: [
82+
{
83+
pattern: 'uiSrc/**',
84+
group: 'internal',
85+
position: 'after'
86+
},
8287
{
8388
pattern: 'apiSrc/**',
8489
group: 'internal',

‎redisinsight/ui/src/components/monaco-json/MonacoJson.spec.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import { render } from 'uiSrc/utils/test-utils'
3+
4+
import MonacoJson from './MonacoJson'
5+
6+
describe('', () => {
7+
it('should render', () => {
8+
expect(render(<MonacoJson value="val" onChange={jest.fn()} />)).toBeTruthy()
9+
})
10+
})

‎redisinsight/ui/src/components/monaco-json/MonacoJson.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, { useContext, useEffect, useRef, useState } from 'react'
2+
import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
3+
import MonacoEditor, { monaco } from 'react-monaco-editor'
4+
import cx from 'classnames'
5+
import { darkTheme, lightTheme, MonacoThemes } from 'uiSrc/constants/monaco/cypher'
6+
7+
import { Nullable } from 'uiSrc/utils'
8+
import { IEditorMount } from 'uiSrc/pages/workbench/interfaces'
9+
import { Theme } from 'uiSrc/constants'
10+
import { ThemeContext } from 'uiSrc/contexts/themeContext'
11+
import styles from './styles.modules.scss'
12+
13+
export interface Props {
14+
value: string
15+
onChange: (value: string) => void
16+
disabled?: boolean
17+
wrapperClassName?: string
18+
'data-testid'?: string
19+
}
20+
const MonacoJson = (props: Props) => {
21+
const {
22+
value: valueProp,
23+
onChange,
24+
disabled,
25+
wrapperClassName,
26+
'data-testid': dataTestId
27+
} = props
28+
const [value, setValue] = useState<string>(valueProp)
29+
const monacoObjects = useRef<Nullable<IEditorMount>>(null)
30+
31+
const { theme } = useContext(ThemeContext)
32+
33+
useEffect(() => {
34+
monacoObjects.current?.editor.updateOptions({ readOnly: disabled })
35+
}, [disabled])
36+
37+
const handleChange = (val: string) => {
38+
setValue(val)
39+
onChange(val)
40+
}
41+
42+
const editorDidMount = (
43+
editor: monacoEditor.editor.IStandaloneCodeEditor,
44+
monaco: typeof monacoEditor,
45+
) => {
46+
monacoObjects.current = { editor, monaco }
47+
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
48+
validate: true,
49+
schemaValidation: 'error',
50+
schemaRequest: 'error',
51+
trailingCommas: 'error'
52+
})
53+
}
54+
55+
if (monaco?.editor) {
56+
monaco.editor.defineTheme(MonacoThemes.Dark, darkTheme)
57+
monaco.editor.defineTheme(MonacoThemes.Light, lightTheme)
58+
}
59+
60+
const options: monacoEditor.editor.IStandaloneEditorConstructionOptions = {
61+
wordWrap: 'on',
62+
automaticLayout: true,
63+
formatOnPaste: false,
64+
padding: { top: 10 },
65+
suggest: {
66+
preview: false,
67+
showStatusBar: false,
68+
showIcons: false,
69+
},
70+
quickSuggestions: false,
71+
minimap: {
72+
enabled: false,
73+
},
74+
overviewRulerLanes: 0,
75+
hideCursorInOverviewRuler: true,
76+
overviewRulerBorder: false,
77+
lineNumbersMinChars: 4,
78+
}
79+
80+
return (
81+
<div className={cx(styles.wrapper, wrapperClassName, { disabled })}>
82+
<MonacoEditor
83+
language="json"
84+
theme={theme === Theme.Dark ? 'dark' : 'light'}
85+
value={value}
86+
onChange={handleChange}
87+
options={options}
88+
className="json-monaco-editor"
89+
editorDidMount={editorDidMount}
90+
data-testid={dataTestId}
91+
/>
92+
</div>
93+
)
94+
}
95+
96+
export default MonacoJson

‎redisinsight/ui/src/components/monaco-json/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import MonacoJson from './MonacoJson'
2+
3+
export default MonacoJson

‎redisinsight/ui/src/components/monaco-json/styles.modules.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.wrapper {
2+
height: 200px;
3+
max-width: 100% !important;
4+
border: 1px solid var(--controlsBorderColor) !important;
5+
box-shadow: none !important;
6+
font-size: 14px;
7+
line-height: 24px;
8+
letter-spacing: -0.14px;
9+
10+
&:global(.disabled) {
11+
pointer-events: none;
12+
opacity: 0.5;
13+
}
14+
15+
:global {
16+
.monaco-editor, .monaco-editor .margin, .monaco-editor .minimap-decorations-layer, .monaco-editor-background {
17+
background-color: var(--euiColorEmptyShade) !important;
18+
}
19+
20+
.monaco-editor .hover-row.status-bar {
21+
display: none;
22+
}
23+
}
24+
}

0 commit comments

Comments
 (0)