#RI-4061 - resolve comments

Author: AmirAllayarovSofteq

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
 import MonacoEditor, { monaco } from 'react-monaco-editor'
 import cx from 'classnames'
@@ -12,22 +12,19 @@ import styles from './styles.modules.scss'
 
 export interface Props {
   value: string
-  updatedValue: string
   onChange: (value: string) => void
   disabled?: boolean
   wrapperClassName?: string
   'data-testid'?: string
 }
 const MonacoJson = (props: Props) => {
   const {
-    value: valueProp,
-    updatedValue,
+    value,
     onChange,
     disabled,
     wrapperClassName,
     'data-testid': dataTestId
   } = props
-  const [value, setValue] = useState<string>(valueProp)
   const monacoObjects = useRef<Nullable<IEditorMount>>(null)
 
   const { theme } = useContext(ThemeContext)
@@ -36,15 +33,6 @@ const MonacoJson = (props: Props) => {
     monacoObjects.current?.editor.updateOptions({ readOnly: disabled })
   }, [disabled])
 
-  useEffect(() => {
-    setValue(updatedValue)
-  }, [updatedValue])
-
-  const handleChange = (val: string) => {
-    setValue(val)
-    onChange(val)
-  }
-
   const editorDidMount = (
     editor: monacoEditor.editor.IStandaloneCodeEditor,
     monaco: typeof monacoEditor,
@@ -89,7 +77,7 @@ const MonacoJson = (props: Props) => {
         language="json"
         theme={theme === Theme.Dark ? 'dark' : 'light'}
         value={value}
-        onChange={handleChange}
+        onChange={onChange}
         options={options}
         className="json-monaco-editor"
         editorDidMount={editorDidMount}

redisinsight/ui/src/components/uploadFile/UploadFile.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+
+import UploadFile, { Props } from './UploadFile'
+
+const mockedProps = mock<Props>()
+
+describe('UploadFile', () => {
+  it('should render', () => {
+    expect(
+      render(<UploadFile {...instance(mockedProps)} />)
+    ).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/uploadFile/UploadFile.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { EuiButtonEmpty, EuiText } from '@elastic/eui'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  onFileChange: ({ target: { files } }: { target: { files: FileList | null } }) => void
+  onClick: () => void
+}
+
+const UploadFile = ({ onFileChange, onClick }: Props) => (
+  <EuiButtonEmpty
+    iconType="folderOpen"
+    className={styles.emptyBtn}
+  >
+    <label htmlFor="upload-input-file" className={styles.uploadBtn}>
+      <EuiText className={styles.label}>Upload</EuiText>
+      <input
+        type="file"
+        id="upload-input-file"
+        data-testid="upload-input-file"
+        accept="application/json, text/plain"
+        onChange={onFileChange}
+        onClick={onClick}
+        className={styles.fileDrop}
+        aria-label="Select file"
+      />
+    </label>
+  </EuiButtonEmpty>
+)
+
+export default UploadFile

redisinsight/ui/src/components/uploadFile/index.ts

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

redisinsight/ui/src/components/uploadFile/styles.module.scss

@@ -0,0 +1,24 @@
+.fileDrop {
+  display: none;
+}
+
+.uploadBtn {
+  display: flex;
+  cursor: pointer;
+}
+
+.emptyBtn:global(.euiButtonEmpty) {
+  height: 22px;
+  margin-top: 7px;
+}
+
+.emptyBtn:global(.euiButtonEmpty .euiButtonEmpty__content) {
+  padding: 0 12px;
+}
+
+:global(.euiButtonEmpty.euiButtonEmpty--primary).emptyBtn .label {
+  color: var(--inputTextColor) !important;
+  line-height: 16px !important;
+  font-weight: 400 !important;
+  font-size: 12px !important;
+}

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

@@ -1,7 +1,8 @@
 import React from 'react'
+import userEvent from '@testing-library/user-event'
 import { instance, mock } from 'ts-mockito'
 
-import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import AddKeyReJSON, { Props } from './AddKeyReJSON'
@@ -83,4 +84,54 @@ describe('AddKeyReJSON', () => {
       }
     })
   })
+
+  it('should load file', async () => {
+    render(<AddKeyReJSON {...instance(mockedProps)} keyName="name" />)
+
+    const jsonString = JSON.stringify({ a: 12 })
+    const blob = new Blob([jsonString])
+    const file = new File([blob], 'empty.json', {
+      type: 'application/JSON',
+    })
+    const fileInput = screen.getByTestId('upload-input-file')
+
+    expect(fileInput).toHaveAttribute('accept', 'application/json, text/plain')
+    expect(fileInput.files.length).toBe(0)
+
+    await userEvent.upload(fileInput, file)
+
+    expect(fileInput.files.length).toBe(1)
+  })
+
+  it('should set the incorrect value from json file', async () => {
+    render(<AddKeyReJSON {...instance(mockedProps)} keyName="name" />)
+
+    const jsonString = JSON.stringify({ a: 12 })
+    const blob = new Blob([jsonString])
+    const file = new File([blob], 'empty.json', {
+      type: 'application/JSON',
+    })
+    const fileInput = screen.getByTestId('upload-input-file')
+
+    expect(fileInput).toHaveAttribute('accept', 'application/json, text/plain')
+
+    await userEvent.upload(fileInput, file)
+
+    await waitFor(() => expect(screen.getByTestId('json-value')).toHaveValue('{"a":12}'))
+  })
+
+  it('should set the value from json file', async () => {
+    render(<AddKeyReJSON {...instance(mockedProps)} keyName="name" />)
+
+    const jsonString = JSON.stringify('{ a: 12')
+    const blob = new Blob([jsonString])
+    const file = new File([blob], 'empty.json', {
+      type: 'application/JSON',
+    })
+    const fileInput = screen.getByTestId('upload-input-file')
+
+    await userEvent.upload(fileInput, file)
+
+    await waitFor(() => expect(screen.getByTestId('json-value')).toHaveValue('"{ a: 12"'))
+  })
 })

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

@@ -3,9 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import {
   EuiButton,
-  EuiButtonEmpty,
   EuiFormRow,
-  EuiText,
   EuiTextColor,
   EuiForm,
   EuiFlexGroup,
@@ -17,6 +15,7 @@ import { Maybe, stringToBuffer } from 'uiSrc/utils'
 import { addKeyStateSelector, addReJSONKey, } from 'uiSrc/slices/browser/keys'
 
 import MonacoJson from 'uiSrc/components/monaco-json'
+import UploadFile from 'uiSrc/components/uploadFile'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { CreateRejsonRlWithExpireDto } from 'apiSrc/modules/browser/dto'
 
@@ -26,8 +25,6 @@ import {
 
 import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
 
-import styles from './styles.module.scss'
-
 export interface Props {
   keyName: string
   keyTTL: Maybe<number>
@@ -38,7 +35,6 @@ const AddKeyReJSON = (props: Props) => {
   const { keyName = '', keyTTL, onCancel } = props
   const { loading } = useSelector(addKeyStateSelector)
   const [ReJSONValue, setReJSONValue] = useState<string>('')
-  const [valueFromFile, setValueFromFile] = useState<string>('')
   const [isFormValid, setIsFormValid] = useState<boolean>(false)
 
   const dispatch = useDispatch()
@@ -80,7 +76,6 @@ const AddKeyReJSON = (props: Props) => {
     if (files && files[0]) {
       const reader = new FileReader()
       reader.onload = async (e) => {
-        setValueFromFile(e?.target?.result as string)
         setReJSONValue(e?.target?.result as string)
       }
       reader.readAsText(files[0])
@@ -102,31 +97,13 @@ const AddKeyReJSON = (props: Props) => {
         <>
           <MonacoJson
             value={ReJSONValue}
-            updatedValue={valueFromFile}
             onChange={setReJSONValue}
             disabled={loading}
             data-testid="json-value"
           />
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                iconType="folderOpen"
-                className={styles.emptyBtn}
-              >
-                <label htmlFor="upload-input-file" className={styles.uploadBtn}>
-                  <EuiText className={styles.label}>Upload</EuiText>
-                  <input
-                    type="file"
-                    id="upload-input-file"
-                    data-testid="upload-input-file"
-                    accept="application/json, text/plain"
-                    onChange={onFileChange}
-                    onClick={onClick}
-                    className={styles.fileDrop}
-                    aria-label="Select file"
-                  />
-                </label>
-              </EuiButtonEmpty>
+              <UploadFile onClick={onClick} onFileChange={onFileChange} />
             </EuiFlexItem>
           </EuiFlexGroup>
         </>