Skip to content

Commit 7b23aac

Browse files
rsergeenkorsergeenko
committed
#RI-3784 - add monaco editor for adding json key, update eslint
1 parent feed320 commit 7b23aac

File tree

16 files changed

+240
-48
lines changed

16 files changed

+240
-48
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.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 } 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('dark', darkTheme)
57+
monaco.editor.defineTheme('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+
}

‎redisinsight/ui/src/pages/browser/components/add-key/AddKey.spec.tsx‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,81 @@
11
import React from 'react'
2-
import { render, screen } from 'uiSrc/utils/test-utils'
2+
import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
33

44
import { ADD_KEY_TYPE_OPTIONS } from 'uiSrc/pages/browser/components/add-key/constants/key-type-options'
5+
import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
6+
import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
57
import AddKey from './AddKey'
68

79
const handleAddKeyPanelMock = () => {}
810
const handleCloseKeyMock = () => {}
911

12+
jest.mock('uiSrc/slices/instances/instances', () => ({
13+
...jest.requireActual('uiSrc/slices/instances/instances'),
14+
connectedInstanceSelector: jest.fn().mockReturnValue({
15+
id: '1',
16+
modules: []
17+
}),
18+
}))
19+
1020
describe('AddKey', () => {
1121
it('should render', () => {
1222
expect(render(<AddKey
13-
handleAddKeyPanel={handleAddKeyPanelMock}
14-
handleCloseKey={handleCloseKeyMock}
23+
onAddKeyPanel={handleAddKeyPanelMock}
24+
onClosePanel={handleCloseKeyMock}
1525
/>)).toBeTruthy()
1626
})
1727

1828
it('should render type select label', () => {
1929
render(<AddKey
20-
handleAddKeyPanel={handleAddKeyPanelMock}
21-
handleCloseKey={handleCloseKeyMock}
30+
onAddKeyPanel={handleAddKeyPanelMock}
31+
onClosePanel={handleCloseKeyMock}
2232
/>)
2333

2434
expect(screen.getByText(/Key Type\*/i)).toBeInTheDocument()
2535
})
2636

2737
it('should have key type select with predefined first value from options', () => {
2838
render(<AddKey
29-
handleAddKeyPanel={handleAddKeyPanelMock}
30-
handleCloseKey={handleCloseKeyMock}
39+
onAddKeyPanel={handleAddKeyPanelMock}
40+
onClosePanel={handleCloseKeyMock}
3141
/>)
3242

3343
expect(screen.getByDisplayValue(ADD_KEY_TYPE_OPTIONS[0].value)).toBeInTheDocument()
3444
})
45+
46+
it('should show text if db not contains ReJSON module', async () => {
47+
render(<AddKey
48+
onAddKeyPanel={handleAddKeyPanelMock}
49+
onClosePanel={handleCloseKeyMock}
50+
/>)
51+
52+
fireEvent.click(screen.getByTestId('select-key-type'))
53+
await act(() => {
54+
fireEvent.click(
55+
screen.queryByText('JSON') || document
56+
)
57+
})
58+
59+
expect(screen.getByTestId('json-not-loaded-text')).toBeInTheDocument()
60+
})
61+
62+
it('should not show text if db contains ReJSON module', async () => {
63+
(connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
64+
modules: [{ name: RedisDefaultModules.FT }, { name: RedisDefaultModules.ReJSON }]
65+
}))
66+
67+
render(<AddKey
68+
onAddKeyPanel={handleAddKeyPanelMock}
69+
onClosePanel={handleCloseKeyMock}
70+
/>)
71+
72+
fireEvent.click(screen.getByTestId('select-key-type'))
73+
await act(() => {
74+
fireEvent.click(
75+
screen.queryByText('JSON') || document
76+
)
77+
})
78+
79+
expect(screen.queryByTestId('json-not-loaded-text')).not.toBeInTheDocument()
80+
})
3581
})

0 commit comments

Comments
 (0)