#RI-6014 - fix edit value for hast and list

Author: rsergeenko

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx

@@ -47,6 +47,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces'
 import { getBasedOnViewTypeEvent, getMatchType, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import {
+  bufferToSerializedFormat,
   bufferToString,
   createDeleteFieldHeader,
   createDeleteFieldMessage,
@@ -349,12 +350,13 @@ const HashDetailsTable = (props: Props) => {
           && !isEqualBuffers(valueItem, stringToBuffer(value))
         const isEditable = !isCompressed && isFormatEditable(viewFormat)
         const editTooltipContent = isCompressed ? TEXT_DISABLED_COMPRESSED_VALUE : TEXT_DISABLED_FORMATTER_EDITING
-
         const isEditing = editingIndex?.field === 'value' && editingIndex?.index === rowIndex
 
+        const serializedValue = isEditing ? bufferToSerializedFormat(viewFormat, valueItem, 4) : ''
+
         return (
           <EditableTextArea
-            initialValue={value}
+            initialValue={serializedValue}
             isLoading={updateLoading}
             isDisabled={disabled}
             isEditing={isEditing}

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/ListDetails.tsx

@@ -75,7 +75,7 @@ const ListDetails = (props: Props) => {
       <div className="key-details-body" key="key-details-body">
         {!loading && (
           <div className="flex-column" style={{ flex: '1', height: '100%' }}>
-            <ListDetailsTable isFooterOpen={isAddItemPanelOpen} />
+            <ListDetailsTable />
           </div>
         )}
         {isAddItemPanelOpen && (

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/list-details-table/ListDetailsTable.tsx

@@ -44,7 +44,7 @@ import {
   stringToSerializedBufferFormat,
   validateListIndex,
   Nullable,
-  createTooltipContent
+  createTooltipContent, bufferToSerializedFormat
 } from 'uiSrc/utils'
 import {
   selectedKeyDataSelector,
@@ -77,11 +77,7 @@ const cellCache = new CellMeasurerCache({
 
 interface IListElement extends SetListElementResponse {}
 
-export interface Props {
-  isFooterOpen: boolean
-}
-
-const ListDetailsTable = (props: Props) => {
+const ListDetailsTable = () => {
   const { loading } = useSelector(listSelector)
   const { loading: updateLoading } = useSelector(updateListValueStateSelector)
   const { elements: loadedElements, total, searchedIndex } = useSelector(
@@ -280,16 +276,18 @@ const ListDetailsTable = (props: Props) => {
         const disabled = !isNonUnicodeFormatter(viewFormat, isValid)
           && !isEqualBuffers(elementItem, stringToBuffer(element))
         const isEditable = !isCompressed && isFormatEditable(viewFormat)
+        const isEditing = index === editingIndex
 
         const tooltipContent = createTooltipContent(value, decompressedElementItem, viewFormatProp)
         const editTooltipContent = isCompressed ? TEXT_DISABLED_COMPRESSED_VALUE : TEXT_DISABLED_FORMATTER_EDITING
+        const serializedValue = isEditing ? bufferToSerializedFormat(viewFormat, elementItem, 4) : ''
 
         return (
           <EditableTextArea
-            initialValue={element}
+            initialValue={serializedValue}
             isLoading={updateLoading}
             isDisabled={disabled}
-            isEditing={index === editingIndex}
+            isEditing={isEditing}
             isEditDisabled={!isEditable || updateLoading}
             disabledTooltipText={TEXT_UNPRINTABLE_CHARACTERS}
             onDecline={() => handleEditElement(index, false)}

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

@@ -56,7 +56,7 @@ const SetDetails = (props: Props) => {
       <div className="key-details-body" key="key-details-body">
         {!loading && (
           <div className="flex-column" style={{ flex: '1', height: '100%' }}>
-            <SetDetailsTable isFooterOpen={isAddItemPanelOpen} onRemoveKey={onRemoveKey} />
+            <SetDetailsTable onRemoveKey={onRemoveKey} />
           </div>
         )}
         {isAddItemPanelOpen && (

redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/set-details-table/SetDetailsTable.tsx

@@ -50,7 +50,6 @@ const cellCache = new CellMeasurerCache({
 })
 
 export interface Props {
-  isFooterOpen?: boolean
   onRemoveKey: () => void
 }
 

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/StreamDetails.tsx

@@ -67,7 +67,7 @@ const StreamDetails = (props: Props) => {
       <div className="key-details-body" key="key-details-body">
         {!loading && (
           <div className="flex-column" style={{ flex: '1', height: '100%' }}>
-            <StreamDetailsBody isFooterOpen={isAddItemPanelOpen} />
+            <StreamDetailsBody />
           </div>
         )}
         {isAddItemPanelOpen && (

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/consumers-view/ConsumersView/ConsumersView.tsx

@@ -23,11 +23,10 @@ export interface Props {
   columns: ITableColumn[]
   onClosePopover: () => void
   onSelectConsumer: ({ rowData }: { rowData: any }) => void
-  isFooterOpen?: boolean
 }
 
 const ConsumersView = (props: Props) => {
-  const { data = [], columns = [], onClosePopover, onSelectConsumer, isFooterOpen } = props
+  const { data = [], columns = [], onClosePopover, onSelectConsumer } = props
 
   const { loading } = useSelector(streamGroupsSelector)
   const { name: key = '' } = useSelector(selectedKeyDataSelector) ?? { }

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/consumers-view/ConsumersViewWrapper.tsx

@@ -28,7 +28,6 @@ const suffix = '_stream_consumer'
 const actionsWidth = 50
 
 export interface Props {
-  isFooterOpen: boolean
 }
 
 const ConsumersViewWrapper = (props: Props) => {

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsView/GroupsView.tsx

@@ -27,11 +27,10 @@ export interface Props {
   columns: ITableColumn[]
   onClosePopover: () => void
   onSelectGroup: ({ rowData }: { rowData: any }) => void
-  isFooterOpen?: boolean
 }
 
 const ConsumerGroups = (props: Props) => {
-  const { data = [], columns = [], onClosePopover, onSelectGroup, isFooterOpen } = props
+  const { data = [], columns = [], onClosePopover, onSelectGroup } = props
 
   const { loading } = useSelector(streamGroupsSelector)
   const { name: key = '' } = useSelector(selectedKeyDataSelector) ?? { }

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx

@@ -42,7 +42,6 @@ const suffix = '_stream_group'
 const actionsWidth = 48
 
 export interface Props {
-  isFooterOpen: boolean
 }
 
 const GroupsViewWrapper = (props: Props) => {