#RI-4061 - add json upload

Author: AmirAllayarovSofteq

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

@@ -12,6 +12,7 @@ import styles from './styles.modules.scss'
 
 export interface Props {
   value: string
+  updatedValue: string
   onChange: (value: string) => void
   disabled?: boolean
   wrapperClassName?: string
@@ -20,6 +21,7 @@ export interface Props {
 const MonacoJson = (props: Props) => {
   const {
     value: valueProp,
+    updatedValue,
     onChange,
     disabled,
     wrapperClassName,
@@ -34,6 +36,10 @@ const MonacoJson = (props: Props) => {
     monacoObjects.current?.editor.updateOptions({ readOnly: disabled })
   }, [disabled])
 
+  useEffect(() => {
+    setValue(updatedValue)
+  }, [updatedValue])
+
   const handleChange = (val: string) => {
     setValue(val)
     onChange(val)

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

@@ -2,6 +2,7 @@ import React from 'react'
 import { instance, mock } from 'ts-mockito'
 
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import AddKeyReJSON, { Props } from './AddKeyReJSON'
 import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
@@ -14,6 +15,11 @@ jest.mock('../AddKeyFooter/AddKeyFooter', () => ({
   default: jest.fn()
 }))
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 const MockAddKeyFooter = (props: any) => (
   <div {...props} />
 )
@@ -61,4 +67,20 @@ describe('AddKeyReJSON', () => {
     )
     expect(screen.getByTestId('add-key-json-btn')).not.toBeDisabled()
   })
+
+  it('should call proper telemetry events after click Upload', () => {
+    const sendEventTelemetryMock = jest.fn()
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+    render(<AddKeyReJSON {...instance(mockedProps)} />)
+
+    fireEvent.click(screen.getByTestId('upload-input-file'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.BROWSER_JSON_VALUE_IMPORT_CLICKED,
+      eventData: {
+        databaseId: 'instanceId',
+      }
+    })
+  })
 })

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

@@ -1,18 +1,23 @@
 import React, { FormEvent, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useParams } from 'react-router-dom'
 import {
   EuiButton,
   EuiFormRow,
+  EuiIcon,
+  EuiText,
   EuiTextColor,
   EuiForm,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
 } from '@elastic/eui'
+
 import { Maybe, stringToBuffer } from 'uiSrc/utils'
 import { addKeyStateSelector, addReJSONKey, } from 'uiSrc/slices/browser/keys'
 
 import MonacoJson from 'uiSrc/components/monaco-json'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { CreateRejsonRlWithExpireDto } from 'apiSrc/modules/browser/dto'
 
 import {
@@ -21,6 +26,8 @@ import {
 
 import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
 
+import styles from './styles.module.scss'
+
 export interface Props {
   keyName: string
   keyTTL: Maybe<number>
@@ -31,10 +38,11 @@ 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()
+  const { instanceId } = useParams<{ instanceId: string }>()
 
   useEffect(() => {
     try {
@@ -68,15 +76,56 @@ const AddKeyReJSON = (props: Props) => {
     dispatch(addReJSONKey(data, onCancel))
   }
 
+  const onFileChange = ({ target: { files } }: { target: { files: FileList | null } }) => {
+    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])
+    }
+  }
+
+  const onClick = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.BROWSER_JSON_VALUE_IMPORT_CLICKED,
+      eventData: {
+        databaseId: instanceId,
+      }
+    })
+  }
+
   return (
     <EuiForm component="form" onSubmit={onFormSubmit}>
       <EuiFormRow label={config.value.label} fullWidth>
-        <MonacoJson
-          value={ReJSONValue}
-          onChange={setReJSONValue}
-          disabled={loading}
-          data-testid="json-value"
-        />
+        <>
+          <MonacoJson
+            value={ReJSONValue}
+            updatedValue={valueFromFile}
+            onChange={setReJSONValue}
+            disabled={loading}
+            data-testid="json-value"
+          />
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <label htmlFor="upload-input-file" className={styles.uploadBtn}>
+                <EuiIcon className={styles.uploadIcon} type="folderOpen" />
+                <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>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
       </EuiFormRow>
 
       <EuiButton type="submit" fill style={{ display: 'none' }}>

redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/styles.module.scss

@@ -0,0 +1,20 @@
+.fileDrop {
+  display: none;
+}
+
+.uploadBtn {
+  display: flex;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
+.uploadIcon {
+  margin-right: 4px;
+}
+
+.label {
+  color: var(--inputTextColor) !important;
+  line-height: 16px !important;
+  font-weight: 400 !important;
+  font-size: 12px !important;
+}

redisinsight/ui/src/telemetry/events.ts

@@ -61,6 +61,7 @@ export enum TelemetryEvent {
   BROWSER_JSON_PROPERTY_EDITED = 'BROWSER_JSON_PROPERTY_EDITED',
   BROWSER_JSON_PROPERTY_DELETED = 'BROWSER_JSON_PROPERTY_DELETED',
   BROWSER_JSON_PROPERTY_ADDED = 'BROWSER_JSON_PROPERTY_ADDED',
+  BROWSER_JSON_VALUE_IMPORT_CLICKED = 'BROWSER_JSON_VALUE_IMPORT_CLICKED',
   BROWSER_KEYS_SCANNED = 'BROWSER_KEYS_SCANNED',
   BROWSER_KEYS_ADDITIONALLY_SCANNED = 'BROWSER_KEYS_ADDITIONALLY_SCANNED',
   BROWSER_KEYS_SCANNED_WITH_FILTER_ENABLED = 'BROWSER_KEYS_SCANNED_WITH_FILTER_ENABLED',