Merge pull request #3251 from RedisInsight/fe/feature/RI-4989-refactor-json_update

#RI-4989 - refactor json type

Author: vlad-dargel

redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx

@@ -9,7 +9,7 @@ export interface Props {
   text: JSX.Element | string
   item: string
   itemRaw?: RedisString
-  suffix: string
+  suffix?: string
   deleting: string
   closePopover: () => void
   showPopover: (item: string) => void
@@ -26,7 +26,7 @@ const PopoverDelete = (props: Props) => {
     text,
     item,
     itemRaw,
-    suffix,
+    suffix = '',
     deleting,
     closePopover,
     updateLoading,

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx

@@ -1,15 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { EuiProgress } from '@elastic/eui'
 
+import { isUndefined } from 'lodash'
 import { rejsonDataSelector, rejsonSelector } from 'uiSrc/slices/browser/rejson'
 import { selectedKeyDataSelector, keysSelector } from 'uiSrc/slices/browser/keys'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent, getBasedOnViewTypeEvent } from 'uiSrc/telemetry'
 import { KeyDetailsHeader, KeyDetailsHeaderProps } from 'uiSrc/pages/browser/modules'
 
 import { KeyTypes } from 'uiSrc/constants'
-import RejsonDetails from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/rejson-details/RejsonDetails'
+import { stringToBuffer } from 'uiSrc/utils'
+import { IJSONData } from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/interfaces'
+import RejsonDetails from './rejson-details/RejsonDetails'
 
 import styles from './styles.module.scss'
 
@@ -19,13 +22,11 @@ const RejsonDetailsWrapper = (props: Props) => {
   const keyType = KeyTypes.ReJSON
   const { loading } = useSelector(rejsonSelector)
   const { data, downloaded, type, path } = useSelector(rejsonDataSelector)
-  const { name: selectedKey = '' } = useSelector(selectedKeyDataSelector) || {}
+  const { name: selectedKey } = useSelector(selectedKeyDataSelector) || {}
   const { id: instanceId } = useSelector(connectedInstanceSelector)
   const { viewType } = useSelector(keysSelector)
 
-  const handleSubmitJsonUpdateValue = async () => {}
-
-  const handleEditValueUpdate = () => {}
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
 
   const reportJSONKeyCollapsed = (level: number) => {
     sendEventTelemetry({
@@ -63,6 +64,14 @@ const RejsonDetailsWrapper = (props: Props) => {
     } else {
       reportJSONKeyCollapsed(levelFromPath)
     }
+
+    setExpandedRows((rows) => {
+      const copyOfSet = new Set(rows)
+      if (isExpanded) copyOfSet.add(path)
+      else copyOfSet.delete(path)
+
+      return copyOfSet
+    })
   }
 
   return (
@@ -73,35 +82,32 @@ const RejsonDetailsWrapper = (props: Props) => {
         keyType={keyType}
       />
       <div className="key-details-body" key="key-details-body">
-        {!loading && (
-          <div className="flex-column" style={{ flex: '1', height: '100%' }}>
-            <div
-              data-testid="json-details"
-              className={`${[styles.container].join(' ')}`}
-            >
-              {loading && (
-                <EuiProgress
-                  color="primary"
-                  size="xs"
-                  position="absolute"
-                  data-testid="progress-key-json"
-                />
-              )}
-              {!(loading && data === undefined) && (
-                <RejsonDetails
-                  selectedKey={selectedKey}
-                  dataType={type || ''}
-                  data={data}
-                  parentPath={path}
-                  onJsonKeyExpandAndCollapse={reportJsonKeyExpandAndCollapse}
-                  shouldRejsonDataBeDownloaded={!downloaded}
-                  handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
-                  handleSubmitUpdateValue={handleEditValueUpdate}
-                />
-              )}
-            </div>
+        <div className="flex-column" style={{ flex: '1', height: '100%' }}>
+          <div
+            data-testid="json-details"
+            className={styles.container}
+          >
+            {loading && (
+              <EuiProgress
+                color="primary"
+                size="xs"
+                position="absolute"
+                data-testid="progress-key-json"
+              />
+            )}
+            {!isUndefined(data) && (
+              <RejsonDetails
+                selectedKey={selectedKey || stringToBuffer('')}
+                dataType={type || ''}
+                data={data as IJSONData}
+                parentPath={path}
+                expadedRows={expandedRows}
+                onJsonKeyExpandAndCollapse={reportJsonKeyExpandAndCollapse}
+                isDownloaded={downloaded}
+              />
+            )}
           </div>
-        )}
+        </div>
       </div>
     </div>
   )

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details-actions/add-item-field-action/AddItemFieldAction.spec.tsx renamed to redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item-field-action/AddItemFieldAction.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
-import { AddItemFieldAction, Props } from './AddItemFieldAction'
+import AddItemFieldAction, { Props } from './AddItemFieldAction'
 
 const mockedProps = mock<Props>()
 

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item-field-action/AddItemFieldAction.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { EuiButtonIcon } from '@elastic/eui'
+import { getBrackets } from '../../utils'
+import styles from '../../styles.module.scss'
+
+export interface Props {
+  leftPadding: number
+  type: string
+  onClickSetKVPair: () => void
+}
+
+const AddItemFieldAction = ({
+  leftPadding,
+  type,
+  onClickSetKVPair,
+}: Props) => (
+  <div
+    className={styles.row}
+    style={{ paddingLeft: `${leftPadding}em` }}
+  >
+    <span className={styles.defaultFont}>{getBrackets(type, 'end')}</span>
+    <EuiButtonIcon
+      iconType="plus"
+      className={styles.jsonButtonStyle}
+      onClick={onClickSetKVPair}
+      aria-label="Add field"
+      data-testid="add-field-btn"
+    />
+  </div>
+)
+
+export default AddItemFieldAction

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item-field-action/index.ts

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

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { mock } from 'ts-mockito'
+import { fireEvent } from '@testing-library/react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+import AddItem, { Props } from './AddItem'
+import { JSONErrors } from '../../constants'
+
+const mockedProps = mock<Props>()
+
+describe('AddItem', () => {
+  it('should render', () => {
+    expect(render(<AddItem {...mockedProps} />)).toBeTruthy()
+  })
+
+  it('should show error with invalid key', () => {
+    render(<AddItem {...mockedProps} isPair onCancel={jest.fn} />)
+
+    fireEvent.change(screen.getByTestId('json-key'), { target: { value: '"' } })
+    fireEvent.click(screen.getByTestId('apply-btn'))
+
+    expect(screen.getByTestId('edit-json-error')).toHaveTextContent(JSONErrors.keyCorrectSyntax)
+  })
+
+  it('should show error with invalid value', () => {
+    render(<AddItem {...mockedProps} onCancel={jest.fn} />)
+
+    expect(screen.queryByTestId('json-key')).not.toBeInTheDocument()
+
+    fireEvent.change(screen.getByTestId('json-value'), { target: { value: '"' } })
+    fireEvent.click(screen.getByTestId('apply-btn'))
+
+    expect(screen.getByTestId('edit-json-error')).toHaveTextContent(JSONErrors.valueJSONFormat)
+  })
+
+  it('should submit with proper key and value', () => {
+    const onSubmit = jest.fn()
+    render(<AddItem {...mockedProps} isPair onCancel={jest.fn} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByTestId('json-key'), { target: { value: '"key"' } })
+    fireEvent.change(screen.getByTestId('json-value'), { target: { value: '1' } })
+    fireEvent.click(screen.getByTestId('apply-btn'))
+
+    expect(onSubmit).toBeCalledWith({ key: '"key"', value: '1' })
+  })
+})

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react'
+import cx from 'classnames'
+import {
+  EuiButtonIcon,
+  EuiFieldText,
+  EuiFlexItem,
+  EuiFocusTrap,
+  EuiForm,
+  EuiOutsideClickDetector,
+  EuiWindowEvent,
+  keys
+} from '@elastic/eui'
+
+import FieldMessage from 'uiSrc/components/field-message/FieldMessage'
+import { Nullable } from 'uiSrc/utils'
+import { isValidJSON, isValidKey } from '../../utils'
+import { JSONErrors } from '../../constants'
+
+import styles from '../../styles.module.scss'
+
+export interface Props {
+  isPair: boolean
+  onCancel: () => void
+  onSubmit: (pair: { key?: string, value: string }) => void
+  leftPadding?: number
+}
+
+const AddItem = (props: Props) => {
+  const {
+    isPair,
+    leftPadding = 0,
+    onCancel,
+    onSubmit
+  } = props
+
+  const [key, setKey] = useState<string>('')
+  const [value, setValue] = useState<string>('')
+  const [error, setError] = useState<Nullable<string>>(null)
+
+  useEffect(() => {
+    setError(null)
+  }, [key, value])
+
+  const handleOnEsc = (e: KeyboardEvent) => {
+    if (e.code?.toLowerCase() === keys.ESCAPE) {
+      e.stopPropagation()
+      onCancel?.()
+    }
+  }
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (isPair && !isValidKey(key)) {
+      setError(JSONErrors.keyCorrectSyntax)
+      return
+    }
+
+    if (!isValidJSON(value)) {
+      setError(JSONErrors.valueJSONFormat)
+      return
+    }
+
+    onSubmit({ key, value })
+  }
+
+  return (
+    <div className={styles.row} style={{ display: 'flex', flexDirection: 'row', paddingLeft: `${leftPadding}em` }}>
+      <EuiOutsideClickDetector onOutsideClick={onCancel}>
+        <div>
+          <EuiWindowEvent event="keydown" handler={(e) => handleOnEsc(e)} />
+          <EuiFocusTrap>
+            <EuiForm
+              component="form"
+              className="relative"
+              onSubmit={(e) => handleFormSubmit(e)}
+              style={{ display: 'flex' }}
+              noValidate
+            >
+              {isPair && (
+                <EuiFlexItem grow component="span">
+                  <EuiFieldText
+                    name="newRootKey"
+                    value={key}
+                    isInvalid={!!error}
+                    placeholder="Enter JSON key"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setKey(e.target.value)}
+                    data-testid="json-key"
+                  />
+                </EuiFlexItem>
+              )}
+              <EuiFlexItem grow component="span">
+                <EuiFieldText
+                  name="newValue"
+                  value={value}
+                  placeholder="Enter JSON value"
+                  isInvalid={!!error}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
+                  data-testid="json-value"
+                />
+              </EuiFlexItem>
+              <div className={cx(styles.controls)}>
+                <EuiButtonIcon
+                  iconSize="m"
+                  iconType="cross"
+                  color="primary"
+                  aria-label="Cancel editing"
+                  className={styles.declineBtn}
+                  onClick={() => onCancel?.()}
+                />
+                <EuiButtonIcon
+                  iconSize="m"
+                  iconType="check"
+                  color="primary"
+                  type="submit"
+                  aria-label="Apply"
+                  className={styles.applyBtn}
+                  data-testid="apply-btn"
+                />
+              </div>
+            </EuiForm>
+            {!!error && (
+              <div className={cx(styles.errorMessage)}>
+                <FieldMessage
+                  scrollViewOnAppear
+                  icon="alert"
+                  testID="edit-json-error"
+                >
+                  {error}
+                </FieldMessage>
+              </div>
+            )}
+          </EuiFocusTrap>
+        </div>
+      </EuiOutsideClickDetector>
+    </div>
+  )
+}
+
+export default AddItem

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/index.ts

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