#RI-3784 - add monaco editor for adding json key, update eslint

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

@@ -223,7 +223,7 @@ export default merge(baseConfig, {
 
     new ReactRefreshWebpackPlugin(),
 
-    new MonacoWebpackPlugin({ languages: [], features: ['!rename'] }),
+    new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
   ],
 
   node: {

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

@@ -187,7 +187,7 @@ export default merge(baseConfig, {
   },
 
   plugins: [
-    new MonacoWebpackPlugin({ languages: [], features: ['!rename'] }),
+    new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
 
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production',

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

@@ -71,7 +71,7 @@ export default {
   plugins: [
     new HtmlWebpackPlugin({ template: 'index.html.ejs' }),
 
-    new MonacoWebpackPlugin({ languages: [], features: ['!rename'] }),
+    new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
 
     new webpack.IgnorePlugin({
       checkResource(resource) {

package.json

@@ -126,7 +126,6 @@
     "@types/node": "14.14.10",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.5",
-    "@types/react-monaco-editor": "^0.16.0",
     "@types/react-redux": "^7.1.12",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-virtualized": "^9.21.10",
@@ -243,7 +242,7 @@
     "react-hotkeys-hook": "^3.3.1",
     "react-json-pretty": "^2.2.0",
     "react-jsx-parser": "^1.28.4",
-    "react-monaco-editor": "^0.44.0",
+    "react-monaco-editor": "^0.45.0",
     "react-redux": "^7.2.2",
     "react-rnd": "^10.3.5",
     "react-router-dom": "^5.2.0",

redisinsight/__mocks__/monacoMock.js

@@ -15,7 +15,8 @@ export default function MonacoEditor(props) {
         createContextKey: jest.fn(),
         focus: jest.fn(),
         onDidChangeCursorPosition: jest.fn(),
-        executeEdits: jest.fn()
+        executeEdits: jest.fn(),
+        updateOptions: jest.fn()
       },
       // monaco
       {
@@ -31,12 +32,21 @@ export default function MonacoEditor(props) {
           }),
           setLanguageConfiguration: jest.fn(),
           setMonarchTokensProvider: jest.fn(),
+          json: {
+            jsonDefaults:{
+              setDiagnosticsOptions: jest.fn()
+            }
+          }
         },
         KeyMod: {},
         KeyCode: {}
       })
   }, [])
-  return <input {...props} data-testid="monaco"/>;
+  return <textarea
+    {...props}
+    onChange={(e) => props.onChange && props.onChange(e.target.value)}
+    data-testid={props['data-testid'] ? props['data-testid'] : 'monaco'}
+  />;
 }
 
 export const languages = {

redisinsight/ui/.eslintrc.js

@@ -79,6 +79,11 @@ module.exports = {
           'index',
         ],
         pathGroups: [
+          {
+            pattern: 'uiSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
           {
             pattern: 'apiSrc/**',
             group: 'internal',

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+
+import MonacoJson from './MonacoJson'
+
+describe('', () => {
+  it('should render', () => {
+    expect(render(<MonacoJson value="val" onChange={jest.fn()} />)).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,96 @@
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
+import MonacoEditor, { monaco } from 'react-monaco-editor'
+import cx from 'classnames'
+import { darkTheme, lightTheme, MonacoThemes } from 'uiSrc/constants/monaco/cypher'
+
+import { Nullable } from 'uiSrc/utils'
+import { IEditorMount } from 'uiSrc/pages/workbench/interfaces'
+import { Theme } from 'uiSrc/constants'
+import { ThemeContext } from 'uiSrc/contexts/themeContext'
+import styles from './styles.modules.scss'
+
+export interface Props {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  wrapperClassName?: string
+  'data-testid'?: string
+}
+const MonacoJson = (props: Props) => {
+  const {
+    value: valueProp,
+    onChange,
+    disabled,
+    wrapperClassName,
+    'data-testid': dataTestId
+  } = props
+  const [value, setValue] = useState<string>(valueProp)
+  const monacoObjects = useRef<Nullable<IEditorMount>>(null)
+
+  const { theme } = useContext(ThemeContext)
+
+  useEffect(() => {
+    monacoObjects.current?.editor.updateOptions({ readOnly: disabled })
+  }, [disabled])
+
+  const handleChange = (val: string) => {
+    setValue(val)
+    onChange(val)
+  }
+
+  const editorDidMount = (
+    editor: monacoEditor.editor.IStandaloneCodeEditor,
+    monaco: typeof monacoEditor,
+  ) => {
+    monacoObjects.current = { editor, monaco }
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemaValidation: 'error',
+      schemaRequest: 'error',
+      trailingCommas: 'error'
+    })
+  }
+
+  if (monaco?.editor) {
+    monaco.editor.defineTheme(MonacoThemes.Dark, darkTheme)
+    monaco.editor.defineTheme(MonacoThemes.Light, lightTheme)
+  }
+
+  const options: monacoEditor.editor.IStandaloneEditorConstructionOptions = {
+    wordWrap: 'on',
+    automaticLayout: true,
+    formatOnPaste: false,
+    padding: { top: 10 },
+    suggest: {
+      preview: false,
+      showStatusBar: false,
+      showIcons: false,
+    },
+    quickSuggestions: false,
+    minimap: {
+      enabled: false,
+    },
+    overviewRulerLanes: 0,
+    hideCursorInOverviewRuler: true,
+    overviewRulerBorder: false,
+    lineNumbersMinChars: 4,
+  }
+
+  return (
+    <div className={cx(styles.wrapper, wrapperClassName, { disabled })}>
+      <MonacoEditor
+        language="json"
+        theme={theme === Theme.Dark ? 'dark' : 'light'}
+        value={value}
+        onChange={handleChange}
+        options={options}
+        className="json-monaco-editor"
+        editorDidMount={editorDidMount}
+        data-testid={dataTestId}
+      />
+    </div>
+  )
+}
+
+export default MonacoJson

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

@@ -0,0 +1,3 @@
+import MonacoJson from './MonacoJson'
+
+export default MonacoJson

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

@@ -0,0 +1,24 @@
+.wrapper {
+  height: 200px;
+  max-width: 100% !important;
+  border: 1px solid var(--controlsBorderColor) !important;
+  box-shadow: none !important;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.14px;
+
+  &:global(.disabled) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  :global {
+    .monaco-editor, .monaco-editor .margin, .monaco-editor .minimap-decorations-layer, .monaco-editor-background {
+      background-color: var(--euiColorEmptyShade) !important;
+    }
+
+    .monaco-editor .hover-row.status-bar {
+      display: none;
+    }
+  }
+}

redisinsight/ui/src/components/query/Query/Query.tsx

@@ -36,7 +36,7 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 import { IEditorMount, ISnippetController } from 'uiSrc/pages/workbench/interfaces'
 import { CommandExecutionUI } from 'uiSrc/slices/interfaces'
-import { darkTheme, lightTheme } from 'uiSrc/constants/monaco/cypher'
+import { darkTheme, lightTheme, MonacoThemes } from 'uiSrc/constants/monaco/cypher'
 import { RunQueryMode, ResultsMode } from 'uiSrc/slices/interfaces/workbench'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { stopProcessing, workbenchResultsSelector } from 'uiSrc/slices/workbench/wb-results'
@@ -466,8 +466,8 @@ const Query = (props: Props) => {
   }
 
   if (monaco?.editor) {
-    monaco.editor.defineTheme('dark', darkTheme)
-    monaco.editor.defineTheme('light', lightTheme)
+    monaco.editor.defineTheme(MonacoThemes.Dark, darkTheme)
+    monaco.editor.defineTheme(MonacoThemes.Light, lightTheme)
   }
 
   const isLoading = loading || processing

redisinsight/ui/src/constants/monaco/cypher/theme.ts

@@ -8,6 +8,11 @@ export const lightThemeRules = [
   { token: 'function', foreground: '795E26' }
 ]
 
+export enum MonacoThemes {
+  Dark = 'dark',
+  Light = 'light'
+}
+
 export const darkTheme: monaco.editor.IStandaloneThemeData = {
   base: 'vs-dark',
   inherit: true,

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

@@ -1,35 +1,81 @@
 import React from 'react'
-import { render, screen } from 'uiSrc/utils/test-utils'
+import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 
 import { ADD_KEY_TYPE_OPTIONS } from 'uiSrc/pages/browser/components/add-key/constants/key-type-options'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
 import AddKey from './AddKey'
 
 const handleAddKeyPanelMock = () => {}
 const handleCloseKeyMock = () => {}
 
+jest.mock('uiSrc/slices/instances/instances', () => ({
+  ...jest.requireActual('uiSrc/slices/instances/instances'),
+  connectedInstanceSelector: jest.fn().mockReturnValue({
+    id: '1',
+    modules: []
+  }),
+}))
+
 describe('AddKey', () => {
   it('should render', () => {
     expect(render(<AddKey
-      handleAddKeyPanel={handleAddKeyPanelMock}
-      handleCloseKey={handleCloseKeyMock}
+      onAddKeyPanel={handleAddKeyPanelMock}
+      onClosePanel={handleCloseKeyMock}
     />)).toBeTruthy()
   })
 
   it('should render type select label', () => {
     render(<AddKey
-      handleAddKeyPanel={handleAddKeyPanelMock}
-      handleCloseKey={handleCloseKeyMock}
+      onAddKeyPanel={handleAddKeyPanelMock}
+      onClosePanel={handleCloseKeyMock}
     />)
 
     expect(screen.getByText(/Key Type\*/i)).toBeInTheDocument()
   })
 
   it('should have key type select with predefined first value from options', () => {
     render(<AddKey
-      handleAddKeyPanel={handleAddKeyPanelMock}
-      handleCloseKey={handleCloseKeyMock}
+      onAddKeyPanel={handleAddKeyPanelMock}
+      onClosePanel={handleCloseKeyMock}
     />)
 
     expect(screen.getByDisplayValue(ADD_KEY_TYPE_OPTIONS[0].value)).toBeInTheDocument()
   })
+
+  it('should show text if db not contains ReJSON module', async () => {
+    render(<AddKey
+      onAddKeyPanel={handleAddKeyPanelMock}
+      onClosePanel={handleCloseKeyMock}
+    />)
+
+    fireEvent.click(screen.getByTestId('select-key-type'))
+    await act(() => {
+      fireEvent.click(
+        screen.queryByText('JSON') || document
+      )
+    })
+
+    expect(screen.getByTestId('json-not-loaded-text')).toBeInTheDocument()
+  })
+
+  it('should not show text if db contains ReJSON module', async () => {
+    (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
+      modules: [{ name: RedisDefaultModules.FT }, { name: RedisDefaultModules.ReJSON }]
+    }))
+
+    render(<AddKey
+      onAddKeyPanel={handleAddKeyPanelMock}
+      onClosePanel={handleCloseKeyMock}
+    />)
+
+    fireEvent.click(screen.getByTestId('select-key-type'))
+    await act(() => {
+      fireEvent.click(
+        screen.queryByText('JSON') || document
+      )
+    })
+
+    expect(screen.queryByTestId('json-not-loaded-text')).not.toBeInTheDocument()
+  })
 })

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

@@ -16,8 +16,9 @@ import AddKeyCommonFields from 'uiSrc/pages/browser/components/add-key/AddKeyCom
 import { addKeyStateSelector, resetAddKey, keysSelector } from 'uiSrc/slices/browser/keys'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent, getBasedOnViewTypeEvent } from 'uiSrc/telemetry'
-import { Maybe, stringToBuffer } from 'uiSrc/utils'
+import { isContainJSONModule, Maybe, stringToBuffer } from 'uiSrc/utils'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+
 import { ADD_KEY_TYPE_OPTIONS } from './constants/key-type-options'
 import AddKeyHash from './AddKeyHash/AddKeyHash'
 import AddKeyZset from './AddKeyZset/AddKeyZset'
@@ -38,7 +39,7 @@ const AddKey = (props: Props) => {
   const dispatch = useDispatch()
 
   const { loading } = useSelector(addKeyStateSelector)
-  const { id: instanceId } = useSelector(connectedInstanceSelector)
+  const { id: instanceId, modules = [] } = useSelector(connectedInstanceSelector)
   const { viewType } = useSelector(keysSelector)
 
   useEffect(() =>
@@ -161,9 +162,11 @@ const AddKey = (props: Props) => {
               )}
               {typeSelected === KeyTypes.ReJSON && (
                 <>
-                  <span className={styles.helpText}>
-                    {HelpTexts.REJSON_SHOULD_BE_LOADED}
-                  </span>
+                  {!isContainJSONModule(modules) && (
+                    <span className={styles.helpText} data-testid="json-not-loaded-text">
+                      {HelpTexts.REJSON_SHOULD_BE_LOADED}
+                    </span>
+                  )}
                   <AddKeyReJSON onCancel={closeAddKeyPanel} {...defaultFields} />
                 </>
               )}

redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx

@@ -66,6 +66,7 @@ const AddKeyCommonFields = (props: Props) => {
                 options={options}
                 valueOfSelected={typeSelected}
                 onChange={(value: string) => onChangeType(value)}
+                data-testid="select-key-type"
               />
             </EuiFormRow>
           </EuiFormFieldset>