Merge pull request #2686 from RedisInsight/fe/feature/RI-4815-portion-of-string

#RI-4815 get a portion of the string (FE)

Author: irinaAbramova-dev

redisinsight/ui/src/constants/api.ts

@@ -38,6 +38,7 @@ enum ApiEndpoints {
 
   STRING = 'string',
   STRING_VALUE = 'string/get-value',
+  STRING_VALUE_DOWNLOAD = 'string/download-value',
 
   HASH = 'hash',
   HASH_FIELDS = 'hash/fields',

redisinsight/ui/src/constants/browser.ts

@@ -8,6 +8,8 @@ export const TEXT_UNPRINTABLE_CHARACTERS = {
   text: 'Use Workbench or CLI to edit without data loss.',
 }
 export const TEXT_DISABLED_FORMATTER_EDITING = 'Cannot edit the value in this format'
+export const TEXT_DISABLED_STRING_EDITING = 'Load the entire value to edit it'
+export const TEXT_DISABLED_STRING_FORMATTING = 'Load the entire value to select a format'
 
 export const TEXT_INVALID_VALUE = {
   title: 'Value will be saved as Unicode',

redisinsight/ui/src/constants/index.ts

@@ -21,6 +21,7 @@ export * from './mocks/mock-tutorials'
 export * from './mocks/mock-custom-tutorials'
 export * from './socketErrors'
 export * from './browser'
+export * from './string'
 export * from './durationUnits'
 export * from './streamViews'
 export * from './bulkActions'

redisinsight/ui/src/constants/prop-types/keys.ts

@@ -9,3 +9,9 @@ export interface IKeyPropTypes {
   size: number
   length: number
 }
+
+export interface IFetchKeyArgs {
+  resetData?: boolean
+  start?: number
+  end?: number
+}

redisinsight/ui/src/constants/string.ts

@@ -0,0 +1 @@
+export const STRING_MAX_LENGTH = 4999

redisinsight/ui/src/pages/browser/BrowserPage.test.tsx

@@ -179,7 +179,7 @@ describe('KeyDetailsWrapper', () => {
           key: unprintableStringBuffer,
           value: {
             type: 'Buffer',
-            data: [172, 237, 0]
+            data: [172, 237, 0, 5, 115, 114, 0]
           },
         }
       }

redisinsight/ui/src/pages/browser/components/key-details-header/KeyDetailsHeader.spec.tsx

@@ -1,13 +1,26 @@
 import React from 'react'
 import { mock } from 'ts-mockito'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import { stringDataSelector } from 'uiSrc/slices/browser/string'
+import { KeyTypes } from 'uiSrc/constants'
 import KeyDetailsHeader, { Props } from './KeyDetailsHeader'
 
 const mockedProps = mock<Props>()
 
 const KEY_INPUT_TEST_ID = 'edit-key-input'
 const KEY_BTN_TEST_ID = 'edit-key-btn'
 const TTL_INPUT_TEST_ID = 'edit-ttl-input'
+const EDIT_VALUE_BTN_TEST_ID = 'edit-key-value-btn'
+
+jest.mock('uiSrc/slices/browser/string', () => ({
+  ...jest.requireActual('uiSrc/slices/browser/string'),
+  stringDataSelector: jest.fn().mockReturnValue({
+    value: {
+      type: 'Buffer',
+      data: [49, 50, 51, 52],
+    }
+  }),
+}))
 
 jest.mock('uiSrc/slices/browser/keys', () => ({
   ...jest.requireActual('uiSrc/slices/browser/keys'),
@@ -16,7 +29,8 @@ jest.mock('uiSrc/slices/browser/keys', () => ({
       type: 'Buffer',
       data: [116, 101, 115, 116]
     },
-    nameString: 'test'
+    nameString: 'test',
+    length: 4
   }),
 }))
 
@@ -92,4 +106,36 @@ describe('KeyDetailsHeader', () => {
 
     expect(screen.getByTestId(TTL_INPUT_TEST_ID)).toHaveValue('100')
   })
+
+  it('should be able to change value (long string fully load)', () => {
+    render(
+      <KeyDetailsHeader
+        {...mockedProps}
+        keyType={KeyTypes.String}
+      />
+    )
+
+    const editValueBtn = screen.getByTestId(`${EDIT_VALUE_BTN_TEST_ID}`)
+    expect(editValueBtn).toHaveProperty('disabled', false)
+  })
+
+  it('should not be able to change value (long string not fully load)', () => {
+    const stringDataSelectorMock = jest.fn().mockReturnValue({
+      value: {
+        type: 'Buffer',
+        data: [49, 50, 51],
+      }
+    })
+    stringDataSelector.mockImplementation(stringDataSelectorMock)
+
+    render(
+      <KeyDetailsHeader
+        {...mockedProps}
+        keyType={KeyTypes.String}
+      />
+    )
+
+    const editValueBtn = screen.getByTestId(`${EDIT_VALUE_BTN_TEST_ID}`)
+    expect(editValueBtn).toHaveProperty('disabled', true)
+  })
 })

redisinsight/ui/src/pages/browser/components/key-details-header/KeyDetailsHeader.tsx

@@ -25,9 +25,10 @@ import {
   LENGTH_NAMING_BY_TYPE,
   ModulesKeyTypes,
   STREAM_ADD_ACTION,
+  TEXT_DISABLED_COMPRESSED_VALUE,
   TEXT_DISABLED_FORMATTER_EDITING,
   TEXT_UNPRINTABLE_CHARACTERS,
-  TEXT_DISABLED_COMPRESSED_VALUE,
+  TEXT_DISABLED_STRING_EDITING,
 } from 'uiSrc/constants'
 import { AddCommonFieldsFormConfig } from 'uiSrc/pages/browser/components/add-key/constants/fields-config'
 import { initialKeyInfo, keysSelector, selectedKeyDataSelector, selectedKeySelector } from 'uiSrc/slices/browser/keys'
@@ -40,12 +41,13 @@ import {
   formatLongName,
   isEqualBuffers,
   isFormatEditable,
+  isFullStringLoaded,
   MAX_TTL_NUMBER,
   replaceSpaces,
   stringToBuffer,
   validateTTLNumber
 } from 'uiSrc/utils'
-import { stringSelector } from 'uiSrc/slices/browser/string'
+import { stringDataSelector, stringSelector } from 'uiSrc/slices/browser/string'
 import KeyValueFormatter from './components/Formatter'
 import AutoRefresh from '../auto-refresh'
 
@@ -95,6 +97,7 @@ const KeyDetailsHeader = ({
     nameString: keyProp,
     name: keyBuffer,
   } = useSelector(selectedKeyDataSelector) ?? initialKeyInfo
+  const { value: keyValue } = useSelector(stringDataSelector)
   const { id: instanceId } = useSelector(connectedInstanceSelector)
   const { isCompressed: isStringCompressed } = useSelector(stringSelector)
   const { viewType } = useSelector(keysSelector)
@@ -307,7 +310,10 @@ const KeyDetailsHeader = ({
 
   const Actions = (width: number) => {
     const isEditable = !isStringCompressed && isFormatEditable(viewFormatProp)
+    const isStringEditable = keyType === KeyTypes.String ? isFullStringLoaded(keyValue?.data?.length, length) : true
     const noEditableText = isStringCompressed ? TEXT_DISABLED_COMPRESSED_VALUE : TEXT_DISABLED_FORMATTER_EDITING
+    const editToolTip = !isEditable ? noEditableText : (!isStringEditable ? TEXT_DISABLED_STRING_EDITING : null)
+
     return (
       <>
         {KEY_TYPES_ACTIONS[keyType] && 'addItems' in KEY_TYPES_ACTIONS[keyType] && (
@@ -388,11 +394,11 @@ const KeyDetailsHeader = ({
         {KEY_TYPES_ACTIONS[keyType] && 'editItem' in KEY_TYPES_ACTIONS[keyType] && (
           <div className={styles.actionBtn}>
             <EuiToolTip
-              content={!isEditable ? noEditableText : null}
+              content={editToolTip}
               data-testid="edit-key-value-tooltip"
             >
               <EuiButtonIcon
-                disabled={!isEditable}
+                disabled={!isEditable || !isStringEditable}
                 iconType="pencil"
                 color="primary"
                 aria-label={KEY_TYPES_ACTIONS[keyType].editItem?.name}

redisinsight/ui/src/pages/browser/components/key-details-header/components/Formatter/KeyValueFormatter.tsx

@@ -4,12 +4,14 @@ import { EuiIcon, EuiSuperSelect, EuiSuperSelectOption, EuiText, EuiTextColor, E
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
-import { KeyValueFormat, Theme } from 'uiSrc/constants'
+import { KeyTypes, KeyValueFormat, TEXT_DISABLED_STRING_FORMATTING, Theme } from 'uiSrc/constants'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { keysSelector, selectedKeyDataSelector, selectedKeySelector, setViewFormat } from 'uiSrc/slices/browser/keys'
 import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import FormattersLight from 'uiSrc/assets/img/icons/formatter_light.svg'
 import FormattersDark from 'uiSrc/assets/img/icons/formatter_dark.svg'
+import { stringDataSelector } from 'uiSrc/slices/browser/string'
+import { isFullStringLoaded } from 'uiSrc/utils'
 import { getKeyValueFormatterOptions } from './constants'
 import { MIDDLE_SCREEN_RESOLUTION } from '../../KeyDetailsHeader'
 import styles from './styles.module.scss'
@@ -24,21 +26,26 @@ const KeyValueFormatter = (props: Props) => {
   const { theme } = useContext(ThemeContext)
   const { viewType } = useSelector(keysSelector)
   const { viewFormat } = useSelector(selectedKeySelector)
-  const { type: keyType } = useSelector(selectedKeyDataSelector) ?? {}
+  const { type: keyType, length } = useSelector(selectedKeyDataSelector) ?? {}
+  const { value: keyValue } = useSelector(stringDataSelector)
 
   const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false)
   const [typeSelected, setTypeSelected] = useState<KeyValueFormat>(viewFormat)
   const [options, setOptions] = useState<EuiSuperSelectOption<KeyValueFormat>[]>([])
 
   const dispatch = useDispatch()
 
+  const isStringFormattingEnabled = keyType === KeyTypes.String
+    ? isFullStringLoaded(keyValue?.data?.length, length)
+    : true
+
   useEffect(() => {
     const newOptions: EuiSuperSelectOption<KeyValueFormat>[] = getKeyValueFormatterOptions(keyType).map(
       ({ value, text }) => ({
         value,
         inputDisplay: (
           <EuiToolTip
-            content={typeSelected}
+            content={!isStringFormattingEnabled ? TEXT_DISABLED_STRING_FORMATTING : typeSelected}
             position="top"
             display="inlineBlock"
             anchorClassName="flex-row"
@@ -63,7 +70,7 @@ const KeyValueFormatter = (props: Props) => {
     )
 
     setOptions(newOptions)
-  }, [viewFormat, keyType, width])
+  }, [viewFormat, keyType, width, isStringFormattingEnabled])
 
   const onChangeType = (value: KeyValueFormat) => {
     sendEventTelemetry({
@@ -92,6 +99,7 @@ const KeyValueFormatter = (props: Props) => {
     <div className={cx(styles.container, { [styles.fullWidth]: width > MIDDLE_SCREEN_RESOLUTION })}>
       <div className={styles.selectWrapper}>
         <EuiSuperSelect
+          disabled={!isStringFormattingEnabled}
           fullWidth
           isOpen={isSelectOpen}
           options={options}

redisinsight/ui/src/pages/browser/components/key-details/KeyDetails/KeyDetails.tsx

@@ -31,6 +31,7 @@ import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 
 import ExploreGuides from 'uiSrc/components/explore-guides'
 import { Nullable } from 'uiSrc/utils'
+import { IFetchKeyArgs } from 'uiSrc/constants/prop-types/keys'
 import KeyDetailsHeader from '../../key-details-header/KeyDetailsHeader'
 import ZSetDetails from '../../zset-details/ZSetDetails'
 import StringDetails from '../../string-details/StringDetails'
@@ -51,7 +52,7 @@ export interface Props {
   onToggleFullScreen: () => void
   onClose: (key: RedisResponseBuffer) => void
   onClosePanel: () => void
-  onRefresh: (key: RedisResponseBuffer, type: KeyTypes | ModulesKeyTypes) => void
+  onRefresh: (key: RedisResponseBuffer, type: KeyTypes | ModulesKeyTypes, args: IFetchKeyArgs) => void
   onDelete: (key: RedisResponseBuffer, type: string) => void
   onRemoveKey: () => void
   onEditTTL: (key: RedisResponseBuffer, ttl: number) => void
@@ -61,7 +62,7 @@ export interface Props {
 }
 
 const KeyDetails = ({ ...props }: Props) => {
-  const { onClosePanel, onRemoveKey, totalKeys, keysLastRefreshTime } = props
+  const { onRefresh, onClosePanel, onRemoveKey, totalKeys, keysLastRefreshTime } = props
   const { loading, error = '', data } = useSelector(selectedKeySelector)
   const { type: selectedKeyType, name: selectedKey } = useSelector(selectedKeyDataSelector) ?? {
     type: KeyTypes.String,
@@ -133,6 +134,7 @@ const KeyDetails = ({ ...props }: Props) => {
       <StringDetails
         isEditItem={editItem}
         setIsEdit={(isEdit) => setEditItem(isEdit)}
+        onRefresh={onRefresh}
       />
     ),
     [KeyTypes.Hash]: <HashDetails isFooterOpen={isAddItemPanelOpen} onRemoveKey={onRemoveKey} />,