Merge pull request #3800 from RedisInsight/latest

Latest to main

Author: vlad-dargel

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

@@ -51,6 +51,7 @@ const selectKey = (state: any, selectedKey: any, data?: any = {}) => {
       ...state.app,
       context: {
         ...state.app.context,
+        contextInstanceId: 'instanceId',
         browser: {
           ...state.app.context.browser,
           bulkActions: {

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

@@ -33,6 +33,7 @@ import {
   setBrowserPanelSizes,
   setLastPageContext,
   setBrowserBulkActionOpen,
+  appContextSelector,
 } from 'uiSrc/slices/app/context'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
@@ -42,6 +43,7 @@ import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import OnboardingStartPopover from 'uiSrc/pages/browser/components/onboarding-start-popover'
 import { sidePanelsSelector } from 'uiSrc/slices/panels/sidePanels'
+import { useStateWithContext } from 'uiSrc/services/hooks'
 import BrowserSearchPanel from './components/browser-search-panel'
 import BrowserLeftPanel from './components/browser-left-panel'
 import BrowserRightPanel from './components/browser-right-panel'
@@ -66,18 +68,21 @@ const BrowserPage = () => {
     keyList: { selectedKey: selectedKeyContext },
     bulkActions: { opened: bulkActionOpenContext },
   } = useSelector(appContextBrowser)
+  const { contextInstanceId } = useSelector(appContextSelector)
+
   const { isBrowserFullScreen } = useSelector(keysSelector)
   const { type } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 }
   const { viewType, searchMode } = useSelector(keysSelector)
   const { openedPanel: openedSidePanel } = useSelector(sidePanelsSelector)
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
   const [arePanelsCollapsed, setArePanelsCollapsed] = useState(isOneSideMode(!!openedSidePanel))
-  const [selectedKey, setSelectedKey] = useState<Nullable<RedisResponseBuffer>>(selectedKeyContext)
   const [isAddKeyPanelOpen, setIsAddKeyPanelOpen] = useState(false)
   const [isCreateIndexPanelOpen, setIsCreateIndexPanelOpen] = useState(false)
   const [isBulkActionsPanelOpen, setIsBulkActionsPanelOpen] = useState(bulkActionOpenContext)
 
+  const [selectedKey, setSelectedKey] = useStateWithContext<Nullable<RedisResponseBuffer>>(selectedKeyContext, null)
+
   const [sizes, setSizes] = useState(panelSizes)
 
   const prevSelectedType = useRef<string>(type)
@@ -118,8 +123,8 @@ const BrowserPage = () => {
   }, [isBulkActionsPanelOpen])
 
   useEffect(() => {
-    setSelectedKey(selectedKeyContext)
-  }, [selectedKeyContext])
+    if (contextInstanceId === instanceId) setSelectedKey(selectedKeyContext)
+  }, [selectedKeyContext, contextInstanceId])
 
   useEffect(() => {
     selectedKeyRef.current = selectedKey

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) => {