Merge pull request #1766 from RedisInsight/fe/bugfix/RI-4210_Special_fields_can't_be_removed

#RI-4210 - Fields/Members from Hash/Set keys with some special characters can't be deleted

Author: vlad-dargel

redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx

@@ -37,7 +37,7 @@ import {
 } from 'uiSrc/slices/browser/hash'
 import { keysSelector, selectedKeyDataSelector, selectedKeySelector } from 'uiSrc/slices/browser/keys'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
-import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces'
 import { getBasedOnViewTypeEvent, getMatchType, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import {
   bufferToSerializedFormat,
@@ -151,8 +151,8 @@ const HashDetails = (props: Props) => {
     })
   }
 
-  const handleDeleteField = (field = '') => {
-    dispatch(deleteHashFields(key, [stringToBuffer(field, viewFormat)], onSuccessRemoved))
+  const handleDeleteField = (field: RedisString | string = '') => {
+    dispatch(deleteHashFields(key, [field], onSuccessRemoved))
     closePopover()
   }
 
@@ -445,9 +445,10 @@ const HashDetails = (props: Props) => {
                 />
               </EuiToolTip>
               <PopoverDelete
-                header={createDeleteFieldHeader(fieldItem)}
+                header={createDeleteFieldHeader(fieldItem as RedisString)}
                 text={createDeleteFieldMessage(key ?? '')}
                 item={field}
+                itemRaw={fieldItem as RedisString}
                 suffix={suffix}
                 deleting={deleting}
                 closePopover={closePopover}

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
+import { anyToBuffer } from 'uiSrc/utils'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 import PopoverDelete, { Props } from './PopoverDelete'
 
@@ -40,4 +41,44 @@ describe('PopoverDelete', () => {
     fireEvent.click(deleteBtn)
     expect(handleDeleteItem).toBeCalledTimes(1)
   })
+
+  it('should call handleDeleteItem on delete with itemRaw prop', () => {
+    const itemRawMock = anyToBuffer([1, 2, 3])
+    const handleDeleteItem = jest.fn()
+    render(
+      <PopoverDelete
+        {...instance(mockedProps)}
+        item="name"
+        itemRaw={itemRawMock}
+        suffix="_"
+        deleting="name_"
+        handleDeleteItem={handleDeleteItem}
+      />
+    )
+
+    const deleteBtn = screen.getByTestId('remove')
+    fireEvent.click(deleteBtn)
+    expect(handleDeleteItem).toBeCalledTimes(1)
+    expect(handleDeleteItem).toBeCalledWith(itemRawMock)
+  })
+
+  it('should call handleDeleteItem on delete with item prop if itemRaw is not defined', () => {
+    const itemMock = 'name'
+    const handleDeleteItem = jest.fn()
+    render(
+      <PopoverDelete
+        {...instance(mockedProps)}
+        item={itemMock}
+        itemRaw={undefined}
+        suffix="_"
+        deleting="name_"
+        handleDeleteItem={handleDeleteItem}
+      />
+    )
+
+    const deleteBtn = screen.getByTestId('remove')
+    fireEvent.click(deleteBtn)
+    expect(handleDeleteItem).toBeCalledTimes(1)
+    expect(handleDeleteItem).toBeCalledWith(itemMock)
+  })
 })

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

@@ -1,18 +1,20 @@
 import React from 'react'
 import { EuiButton, EuiButtonIcon, EuiPopover, EuiText } from '@elastic/eui'
 
+import { RedisString } from 'uiSrc/slices/interfaces'
 import styles from './styles.module.scss'
 
 export interface Props {
   header?: string
   text: JSX.Element | string
   item: string
+  itemRaw?: RedisString
   suffix: string
   deleting: string
   closePopover: () => void
   showPopover: (item: string) => void
   updateLoading: boolean
-  handleDeleteItem: (item: string) => void
+  handleDeleteItem: (item: RedisString | string) => void
   handleButtonClick?: () => void
   appendInfo?: JSX.Element | string | null
   testid?: string
@@ -23,6 +25,7 @@ const PopoverDelete = (props: Props) => {
     header,
     text,
     item,
+    itemRaw,
     suffix,
     deleting,
     closePopover,
@@ -83,7 +86,7 @@ const PopoverDelete = (props: Props) => {
             size="s"
             color="warning"
             iconType="trash"
-            onClick={() => handleDeleteItem(item)}
+            onClick={() => handleDeleteItem(itemRaw || item)}
             data-testid={testid || 'remove'}
           >
             Remove

redisinsight/ui/src/pages/browser/components/set-details/SetDetails.tsx

@@ -7,7 +7,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui'
 import { CellMeasurerCache } from 'react-virtualized'
-import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces'
 
 import {
   bufferToString,
@@ -117,8 +117,8 @@ const SetDetails = (props: Props) => {
     })
   }
 
-  const handleDeleteMember = (member = '') => {
-    dispatch(deleteSetMembers(key, [stringToBuffer(member, viewFormat)], onSuccessRemoved))
+  const handleDeleteMember = (member: string | RedisString = '') => {
+    dispatch(deleteSetMembers(key, [member], onSuccessRemoved))
     closePopover()
   }
 
@@ -234,6 +234,7 @@ const SetDetails = (props: Props) => {
               header={createDeleteFieldHeader(memberItem)}
               text={createDeleteFieldMessage(key ?? '')}
               item={member}
+              itemRaw={memberItem}
               suffix={suffix}
               deleting={deleting}
               closePopover={closePopover}

redisinsight/ui/src/pages/browser/components/zset-details/ZSetDetails.tsx

@@ -22,7 +22,7 @@ import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import HelpTexts from 'uiSrc/constants/help-texts'
 import { NoResultsFoundText } from 'uiSrc/constants/texts'
 import { selectedKeyDataSelector, keysSelector, selectedKeySelector } from 'uiSrc/slices/browser/keys'
-import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces'
 import { ZsetMember } from 'uiSrc/slices/interfaces/zset'
 import {
   bufferToString,
@@ -40,7 +40,6 @@ import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEdit
 import { IColumnSearchState, ITableColumn, RelativeWidthSizes } from 'uiSrc/components/virtual-table/interfaces'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
 import { getColumnWidth } from 'uiSrc/components/virtual-grid'
-import { stringToBuffer } from 'uiSrc/utils/formatters/bufferFormatters'
 import { AddMembersToZSetDto, SearchZSetMembersResponse } from 'apiSrc/modules/browser/dto'
 import PopoverDelete from '../popover-delete/PopoverDelete'
 
@@ -136,8 +135,8 @@ const ZSetDetails = (props: Props) => {
     })
   }
 
-  const handleDeleteMember = (member = '') => {
-    dispatch(deleteZSetMembers(key, [stringToBuffer(member, viewFormat)], onSuccessRemoved))
+  const handleDeleteMember = (member: RedisString | string = '') => {
+    dispatch(deleteZSetMembers(key, [member], onSuccessRemoved))
     closePopover()
   }
 
@@ -361,6 +360,7 @@ const ZSetDetails = (props: Props) => {
                 header={createDeleteFieldHeader(nameItem)}
                 text={createDeleteFieldMessage(key ?? '')}
                 item={name}
+                itemRaw={nameItem}
                 suffix={suffix}
                 deleting={deleting}
                 closePopover={closePopover}