Merge pull request #2756 from RedisInsight/fe/feature/RI-5122_string_key_truncate

#RI-5122 - string value truncate

Author: vlad-dargel

redisinsight/ui/src/pages/browser/components/string-details/StringDetails.spec.tsx

@@ -190,6 +190,34 @@ describe('StringDetails', () => {
     })
   })
 
+  it('Should add "..." in the end of the part value', async () => {
+    const stringDataSelectorMock = jest.fn().mockReturnValue({
+      value: partValue
+    })
+    stringDataSelector.mockImplementation(stringDataSelectorMock)
+
+    render(
+      <StringDetails
+        {...instance(mockedProps)}
+      />
+    )
+    expect(screen.getByTestId(STRING_VALUE)).toHaveTextContent(`${bufferToString(partValue)}...`)
+  })
+
+  it('Should not add "..." in the end of the full value', async () => {
+    const stringDataSelectorMock = jest.fn().mockReturnValue({
+      value: fullValue
+    })
+    stringDataSelector.mockImplementation(stringDataSelectorMock)
+
+    render(
+      <StringDetails
+        {...instance(mockedProps)}
+      />
+    )
+    expect(screen.getByTestId(STRING_VALUE)).toHaveTextContent(bufferToString(fullValue))
+  })
+
   it('should call fetchDownloadStringValue and sendEventTelemetry after clicking on load button and download button', async () => {
     const stringDataSelectorMock = jest.fn().mockReturnValue({
       value: partValue

redisinsight/ui/src/pages/browser/components/string-details/StringDetails.tsx

@@ -99,7 +99,7 @@ const StringDetails = (props: Props) => {
     const { value: formattedValue, isValid } = formattingBuffer(decompressedValue, viewFormatProp, { expanded: true })
     setAreaValue(initialValueString)
 
-    setValue(formattedValue)
+    setValue(!isFullStringLoaded(initialValue?.data?.length, length) ? `${formattedValue}...` : formattedValue)
     setIsValid(isValid)
     setIsDisabled(
       !isNonUnicodeFormatter(viewFormatProp, isValid)