#RI-6522 - [Regression] Long vector string is not displayed

Author: egor-zalenski

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { KeyValueCompressor } from 'uiSrc/constants'
+import { KeyValueCompressor, KeyValueFormat } from 'uiSrc/constants'
 import {
   fetchDownloadStringValue,
   stringDataSelector
@@ -16,6 +16,7 @@ import {
 } from 'uiSrc/utils/tests/decompressors'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { downloadFile } from 'uiSrc/utils/dom/downloadFile'
+import { selectedKeySelector } from 'uiSrc/slices/browser/keys'
 import { StringDetailsValue, Props } from './StringDetailsValue'
 
 const STRING_VALUE = 'string-value'
@@ -46,6 +47,7 @@ jest.mock('uiSrc/slices/browser/keys', () => ({
     type: 'string',
     length: STRING_LENGTH
   }),
+  selectedKeySelector: jest.fn(),
 }))
 
 jest.mock('uiSrc/constants', () => ({
@@ -70,6 +72,13 @@ jest.mock('react-redux', () => ({
   useDispatch: () => jest.fn().mockReturnValue(() => jest.fn()),
 }))
 
+beforeEach(async () => {
+  const selectedKeySelectorMock = jest.fn().mockReturnValue({
+    viewFormat: KeyValueFormat.Unicode,
+  });
+  (selectedKeySelector as jest.Mock).mockImplementation(selectedKeySelectorMock)
+})
+
 describe('StringDetailsValue', () => {
   it('should render', () => {
     expect(
@@ -204,6 +213,26 @@ describe('StringDetailsValue', () => {
     expect(screen.getByTestId(STRING_VALUE)).toHaveTextContent(`${bufferToString(partValue)}...`)
   })
 
+  it('Should render partValue in the Unicode format', async () => {
+    const stringDataSelectorMock = jest.fn().mockReturnValue({
+      // vector value
+      value: anyToBuffer(new Float32Array([1.0]).buffer)
+    })
+    const selectedKeySelectorMock = jest.fn().mockReturnValue({
+      viewFormat: KeyValueFormat.Vector32Bit,
+    });
+    (selectedKeySelector as jest.Mock).mockImplementation(selectedKeySelectorMock);
+    (stringDataSelector as jest.Mock).mockImplementation(stringDataSelectorMock)
+
+    render(
+      <StringDetailsValue
+        {...instance(mockedProps)}
+      />
+    )
+    expect(screen.getByTestId(STRING_VALUE)).toHaveTextContent('�?...')
+    expect(screen.getByTestId(STRING_VALUE)).not.toHaveTextContent('[object Object]')
+  })
+
   it('Should not add "..." in the end of the full value', async () => {
     const stringDataSelectorMock = jest.fn().mockReturnValue({
       value: fullValue

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx

@@ -39,7 +39,8 @@ import {
   TEXT_FAILED_CONVENT_FORMATTER,
   TEXT_INVALID_VALUE,
   TEXT_UNPRINTABLE_CHARACTERS,
-  STRING_MAX_LENGTH
+  STRING_MAX_LENGTH,
+  KeyValueFormat,
 } from 'uiSrc/constants'
 import { calculateTextareaLines } from 'uiSrc/utils/calculateTextareaLines'
 import { decompressingBuffer } from 'uiSrc/utils/decompressors'
@@ -96,10 +97,16 @@ const StringDetailsValue = (props: Props) => {
     const { value: decompressedValue, isCompressed } = decompressingBuffer(initialValue, compressor)
 
     const initialValueString = bufferToString(decompressedValue, viewFormat)
-    const { value: formattedValue, isValid } = formattingBuffer(decompressedValue, viewFormatProp, { expanded: true })
+    const fullStringLoaded = isFullStringLoaded(initialValue?.data?.length, length)
+
+    const { value: formattedValue, isValid } = formattingBuffer(
+      decompressedValue,
+      fullStringLoaded ? viewFormatProp : KeyValueFormat.Unicode,
+      { expanded: true }
+    )
     setAreaValue(initialValueString)
 
-    setValue(!isFullStringLoaded(initialValue?.data?.length, length) ? `${formattedValue}...` : formattedValue)
+    setValue(!fullStringLoaded ? `${formattedValue}...` : formattedValue)
     setIsValid(isValid)
     setIsDisabled(
       !isNonUnicodeFormatter(viewFormatProp, isValid)
@@ -108,7 +115,7 @@ const StringDetailsValue = (props: Props) => {
     setIsEditable(
       !isCompressed
       && isFormatEditable(viewFormatProp)
-      && isFullStringLoaded(initialValue?.data?.length, length)
+      && fullStringLoaded
     )
     setNoEditableText(isCompressed ? TEXT_DISABLED_COMPRESSED_VALUE : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp))
 

redisinsight/ui/src/utils/formatters/bufferFormatters.ts

@@ -87,7 +87,7 @@ const bufferToASCII = (reply: RedisResponseBuffer): string => {
   return result
 }
 
-const anyToBuffer = (reply: UintArray): RedisResponseBuffer =>
+const anyToBuffer = (reply: UintArray | ArrayBuffer): RedisResponseBuffer =>
   ({ data: reply, type: RedisResponseBufferType.Buffer }) as RedisResponseBuffer
 
 const ASCIIToBuffer = (strInit: string) => {