Fix React DOM nesting and prop warnings

redisinsight/ui/src/components/base/display/toast/RiToast.tsx

@@ -32,8 +32,10 @@ export const riToast = (
       color = 'subdued'
     }
     toastContent.message = (
-      <Text size="M" variant="semiBold">
-        <ColorText color={color}>{message}</ColorText>
+      <Text size="M" variant="semiBold" component="span">
+        <ColorText color={color} component="span">
+          {message}
+        </ColorText>
       </Text>
     )
   } else {

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx

@@ -147,7 +147,7 @@ const BottomGroupMinimized = () => {
             withIcon
             icon={CliIcon}
             label={
-              <Text size="S" variant="semiBold">
+              <Text size="S" variant="semiBold" component="span">
                 CLI
               </Text>
             }
@@ -164,7 +164,7 @@ const BottomGroupMinimized = () => {
             withIcon
             icon={DocumentationIcon}
             label={
-              <Text size="S" variant="semiBold">
+              <Text size="S" variant="semiBold" component="span">
                 Command Helper
               </Text>
             }
@@ -181,7 +181,7 @@ const BottomGroupMinimized = () => {
               withIcon
               icon={ProfilerIcon}
               label={
-                <Text size="S" variant="semiBold">
+                <Text size="S" variant="semiBold" component="span">
                   Profiler
                 </Text>
               }

redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx

@@ -43,18 +43,19 @@ const ExploreGuides = () => {
 
   return (
     <div data-testid="explore-guides">
-      <Title color="primary" size="S">
+      <Title color="primary" size="S" textAlign="center">
         <span>Here&apos;s a good starting point</span>
       </Title>
       <Spacer size="s" />
-      <Text color="primary">
+      <Text color="primary" textAlign="center">
         Explore the amazing world of Redis with our interactive guides
       </Text>
       <Spacer size="xl" />
       {!!data.length && (
         <FlexGroup gap="l" wrap justify="center" className={styles.guides}>
           {data.map(({ title, tutorialId, icon }) => (
             <SecondaryButton
+              key={tutorialId}
               inverted
               tabIndex={0}
               onClick={() => handleLinkClick(tutorialId)}

redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx

@@ -34,6 +34,7 @@ const Notification = (props: Props) => {
       </Title>
       <Spacer size="s" />
       <Text
+        component="div"
         size="s"
         className={cx('notificationHTMLBody', styles.notificationBody)}
         data-testid="notification-body"

redisinsight/ui/src/components/notifications/success-messages.tsx

@@ -14,7 +14,7 @@ import {
 } from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { Text, Title } from 'uiSrc/components/base/text'
+import { Text } from 'uiSrc/components/base/text'
 import { Spacer } from 'uiSrc/components/base/layout'
 
 const Li = styled.li<React.HTMLAttributes<HTMLLIElement>>`
@@ -256,12 +256,14 @@ export default {
     return {
       title: (
         <>
-          <Title size="S">Action completed</Title>
+          <Text component="span" variant="semiBold">
+            Action completed
+          </Text>
           {fileName ? (
             <>
               <Spacer size="s" />
-              <Text>Commands executed from file:</Text>
-              <Text>{formatLongName(fileName, 34, 5)}</Text>
+              <Text component="span">Commands executed from file:</Text>
+              <Text component="span">{formatLongName(fileName, 34, 5)}</Text>
             </>
           ) : null}
           <Spacer size="m" />

redisinsight/ui/src/components/upload-warning/UploadWarning.tsx

@@ -5,7 +5,7 @@ import { UploadWarningBanner } from 'uiSrc/components/upload-warning/styles'
 const UploadWarning = () => (
   <UploadWarningBanner
     message={
-      <Text size="s">
+      <Text size="s" component="span">
         Use files only from trusted authors to avoid automatic execution of
         malicious code.
       </Text>

redisinsight/ui/src/components/virtual-table/VirtualTable.tsx

@@ -383,7 +383,7 @@ const VirtualTable = (props: IProps) => {
           className={styles.tableRowCell}
           style={{ justifyContent: column.alignment, whiteSpace: 'normal' }}
         >
-          <Text style={{ maxWidth: '100%' }}>
+          <Text component="div" style={{ maxWidth: '100%' }}>
             <div
               style={{ display: 'flex' }}
               className={column.truncateText ? 'truncateText' : ''}
@@ -501,7 +501,7 @@ const VirtualTable = (props: IProps) => {
       {noItemsMessage && (
         <div className={styles.placeholder}>
           <Text textAlign="center" size="m">
-            <div>{loading ? 'loading...' : noItemsMessage}</div>
+            {loading ? 'loading...' : noItemsMessage}
           </Text>
         </div>
       )}

redisinsight/ui/src/pages/browser/components/key-row-name/KeyRowName.tsx

@@ -32,6 +32,7 @@ const KeyRowName = (props: Props) => {
   return (
     <div className={styles.keyName}>
       <Text
+        component="div"
         color="secondary"
         style={{ maxWidth: '100%', display: 'flex', paddingRight: 16 }}
       >

redisinsight/ui/src/pages/browser/components/key-row-size/KeyRowSize.tsx

@@ -31,6 +31,7 @@ const KeyRowSize = (props: Props) => {
   if (!size) {
     return (
       <Text
+        component="div"
         color="secondary"
         size="s"
         className={cx(styles.keySize)}
@@ -43,6 +44,7 @@ const KeyRowSize = (props: Props) => {
   return (
     <>
       <Text
+        component="div"
         color="secondary"
         size="s"
         className={cx(styles.keySize, 'moveOnHoverKey', {

redisinsight/ui/src/pages/browser/components/key-row-ttl/KeyRowTTL.tsx

@@ -47,6 +47,7 @@ const KeyRowTTL = (props: Props) => {
   }
   return (
     <Text
+      component="div"
       className={cx(styles.keyTTL, 'moveOnHoverKey', {
         hide: deletePopoverId === rowId,
       })}

redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx

@@ -116,7 +116,17 @@ const KeyTree = forwardRef((props: Props, ref) => {
       // remove key name from parents
       parents.pop()
 
-      parents.forEach((parent) => handleStatusOpen(parent, true))
+      if (parents.length === 0) return
+
+      // Use functional update to avoid stale closure issues
+      setStatusOpen((prevState) => {
+        const newOpenNodes = { ...prevState }
+        parents.forEach((parent) => {
+          newOpenNodes[parent] = true
+        })
+        dispatch(setBrowserTreeNodesOpen(newOpenNodes))
+        return newOpenNodes
+      })
     }
   }
 

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

@@ -262,7 +262,7 @@ const ListDetailsTable = () => {
         const cellContent = index?.toString().substring(0, 200)
         const tooltipContent = formatLongName(index?.toString())
         return (
-          <Text color="secondary" style={{ maxWidth: '100%' }}>
+          <Text component="div" color="secondary" style={{ maxWidth: '100%' }}>
             <div
               style={{ display: 'flex' }}
               className="truncateText"

redisinsight/ui/src/pages/browser/modules/key-details/components/no-key-selected/NoKeySelected.tsx

@@ -32,10 +32,12 @@
   const NoKeysSelectedMessage = () => (
     <>
       {totalKeys > 0 ? (
-        <span data-testid="select-key-message">
-          Select the key from the list on the left to see the details of the
-          key.
-        </span>
+        <Text textAlign="center">
+          <span data-testid="select-key-message">
+            Select the key from the list on the left to see the details of the
+            key.
+          </span>
+        </Text>
       ) : (
         <ExploreGuides />
       )}
@@ -59,13 +61,13 @@
       </RiTooltip>
 
       <div className={styles.placeholder}>
-        <Text textAlign="center">
-          {error ? (
+        {error ? (
+          <Text textAlign="center">
             <span data-testid="no-keys-selected-text">{error}</span>
-          ) : (
-            !!keysLastRefreshTime && <NoKeysSelectedMessage />
-          )}
-        </Text>
+          </Text>
+        ) : (
+          !!keysLastRefreshTime && <NoKeysSelectedMessage />
+        )}
       </div>
     </>
   )

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.styles.ts

@@ -0,0 +1,4 @@
+import styled from 'styled-components'
+import { Row } from 'uiSrc/components/base/layout/flex'
+
+export const InlineRow = styled(Row).attrs({ as: 'span' })``

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx

@@ -11,6 +11,7 @@ import { Text } from 'uiSrc/components/base/text'
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { streamIDTooltipText } from 'uiSrc/constants/texts'
 import { EntryIdContainer, FieldsWrapper } from '../AddStreamEntries.styles'
+import { InlineRow } from './StreamEntryFields.styles'
 import {
   StreamGroupContent,
   TimeStampInfoIcon,
@@ -117,7 +118,7 @@ const StreamEntryFields = (props: Props) => {
         <FormField
           label={config.entryId.label}
           additionalText={
-            <Row align="center" gap="s">
+            <InlineRow align="center" gap="s">
               <RiTooltip
                 anchorClassName="inputAppendIcon"
                 className={styles.entryIdTooltip}
@@ -128,16 +129,21 @@ const StreamEntryFields = (props: Props) => {
                 <TimeStampInfoIcon />
               </RiTooltip>
               {!showEntryError && (
-                <Text size="XS" color="primary">
+                <Text component="span" size="XS" color="primary">
                   Timestamp - Sequence Number or *
                 </Text>
               )}
               {showEntryError && (
-                <Text size="XS" color="danger" data-testid="stream-entry-error">
+                <Text
+                  component="span"
+                  size="XS"
+                  color="danger"
+                  data-testid="stream-entry-error"
+                >
                   {entryIdError}
                 </Text>
               )}
-            </Row>
+            </InlineRow>
           }
         >
           <TextInput

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

@@ -127,7 +127,7 @@ const ConsumersViewWrapper = (props: Props) => {
         const cellContent = viewName.substring(0, 200)
         const tooltipContent = formatLongName(viewName)
         return (
-          <Text style={{ maxWidth: '100%' }} color="secondary">
+          <Text component="div" style={{ maxWidth: '100%' }} color="secondary">
             <div
               style={{ display: 'flex' }}
               className="truncateText"

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

@@ -222,7 +222,7 @@ const GroupsViewWrapper = (props: Props) => {
         const cellContent = viewName.substring(0, 200)
         const tooltipContent = formatLongName(viewName)
         return (
-          <Text style={{ maxWidth: '100%' }} color="secondary">
+          <Text component="div" style={{ maxWidth: '100%' }} color="secondary">
             <div
               style={{ display: 'flex' }}
               className="truncateText"
@@ -282,7 +282,7 @@ const GroupsViewWrapper = (props: Props) => {
         )
 
         return (
-          <Text style={{ maxWidth: '100%' }} color="secondary">
+          <Text component="div" style={{ maxWidth: '100%' }} color="secondary">
             <div
               style={{ display: 'flex' }}
               className="truncateText"

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx

@@ -344,7 +344,12 @@ const StreamDataViewWrapper = (props: Props) => {
               </div>
             </Text>
           )}
-          <Text size="s" style={{ maxWidth: '100%' }} className="truncateText">
+          <Text
+            component="div"
+            size="s"
+            style={{ maxWidth: '100%' }}
+            className="truncateText"
+          >
             <div
               className="streamItemId truncateText"
               data-testid={`stream-entry-${id}`}

redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx

@@ -55,6 +55,7 @@ const EditableInput = (props: Props) => {
         data-testid={`${testIdPrefix}_content-value-${field}`}
       >
         <Text
+          component="div"
           color="secondary"
           style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
         >

redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx

@@ -94,6 +94,7 @@ const EditableTextArea = (props: Props) => {
         data-testid={`${testIdPrefix}_content-value-${field}`}
       >
         <Text
+          component="div"
           color="secondary"
           style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
         >

redisinsight/ui/src/pages/home/components/databases-list/DatabasesList.config.tsx

@@ -48,11 +48,11 @@
     isHeaderCustom: true,
     enableSorting: false,
     header: Table.HeaderMultiRowSelectionButton,
-    cell: (props) => (
+    cell: ({ row }) => (
       <Table.RowSelectionButton
-        {...props}
+        row={row}
         onClick={(e: any) => e.stopPropagation()}
       />
     ),
   },
   {