From bb74db5d6fd9df40ff9dade0678f0ac450b42596 Mon Sep 17 00:00:00 2001
From: pd-redis <petar.dzhambazov@redis.com>
Date: Fri, 5 Dec 2025 14:22:07 +0200
Subject: [PATCH 1/2] fix(ui): remove duplicate tooltip in tag input field

Remove RiTooltip wrapper and rely on TextInput built-in error tooltip
to fix misaligned tooltip text colors. Move types to dedicated file.

References: #RI-7779
---
 .../TagInputField.tsx                         | 65 ++++++++-----------
 .../TagInputField.types.ts                    | 11 ++++
 2 files changed, 37 insertions(+), 39 deletions(-)
 create mode 100644 redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.types.ts

diff --git a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx
index d599577dda..da33175043 100644
--- a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx
+++ b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx
@@ -1,19 +1,8 @@
 import React, { useState } from 'react'
 
-import { RiTooltip } from 'uiSrc/components'
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { TagSuggestions } from './TagSuggestions'
-
-type TagInputFieldProps = {
-  value: string
-  disabled?: boolean
-  currentTagKeys: Set<string>
-  suggestedTagKey?: string
-  rightContent?: React.ReactNode
-  errorMessage?: string
-  placeholder?: string
-  onChange: (value: string) => void
-}
+import { TagInputFieldProps } from './TagInputField.types'
 
 export const TagInputField = ({
   value,
@@ -30,35 +19,33 @@ export const TagInputField = ({
 
   return (
     <div>
-      <RiTooltip content={errorMessage} position="top">
-        <TextInput
-          value={value}
-          disabled={disabled}
-          valid={!isInvalid ? false : undefined}
-          error={isInvalid ? errorMessage : undefined}
-          onChange={(value) => onChange(value)}
-          placeholder={placeholder}
-          onFocusCapture={() => {
-            setIsFocused(true)
-          }}
-          onBlurCapture={() => {
-            setTimeout(() => {
-              isFocused && setIsFocused(false)
-            }, 150)
+      <TextInput
+        value={value}
+        disabled={disabled}
+        valid={!isInvalid ? false : undefined}
+        error={isInvalid ? errorMessage : undefined}
+        onChange={(value) => onChange(value)}
+        placeholder={placeholder}
+        onFocusCapture={() => {
+          setIsFocused(true)
+        }}
+        onBlurCapture={() => {
+          setTimeout(() => {
+            isFocused && setIsFocused(false)
+          }, 150)
+        }}
+      />
+      {isFocused && !isInvalid && (
+        <TagSuggestions
+          targetKey={suggestedTagKey}
+          searchTerm={value}
+          currentTagKeys={currentTagKeys}
+          onChange={(value) => {
+            setIsFocused(false)
+            onChange(value)
           }}
         />
-        {isFocused && !isInvalid && (
-          <TagSuggestions
-            targetKey={suggestedTagKey}
-            searchTerm={value}
-            currentTagKeys={currentTagKeys}
-            onChange={(value) => {
-              setIsFocused(false)
-              onChange(value)
-            }}
-          />
-        )}
-      </RiTooltip>
+      )}
       {rightContent}
     </div>
   )
diff --git a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.types.ts b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.types.ts
new file mode 100644
index 0000000000..d843aa15b6
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.types.ts
@@ -0,0 +1,11 @@
+export type TagInputFieldProps = {
+  value: string
+  disabled?: boolean
+  currentTagKeys: Set<string>
+  suggestedTagKey?: string
+  rightContent?: React.ReactNode
+  errorMessage?: string
+  placeholder?: string
+  onChange: (value: string) => void
+}
+

From 8384747d9954de512780bfe422dff78c68cde7ea Mon Sep 17 00:00:00 2001
From: pd-redis <petar.dzhambazov@redis.com>
Date: Fri, 5 Dec 2025 15:32:51 +0200
Subject: [PATCH 2/2] refactor(ui): wrap tag input elements and fix formatting

Wrap TextInput and TagSuggestions in span element.
Fix indentation in TagSuggestions useMemo callback.

References: #RI-7779
---
 .../TagInputField.tsx                         | 52 ++++++++++---------
 .../TagSuggestions.tsx                        | 52 +++++++++----------
 2 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx
index da33175043..1728eaffc7 100644
--- a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx
+++ b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx
@@ -19,33 +19,35 @@ export const TagInputField = ({
 
   return (
     <div>
-      <TextInput
-        value={value}
-        disabled={disabled}
-        valid={!isInvalid ? false : undefined}
-        error={isInvalid ? errorMessage : undefined}
-        onChange={(value) => onChange(value)}
-        placeholder={placeholder}
-        onFocusCapture={() => {
-          setIsFocused(true)
-        }}
-        onBlurCapture={() => {
-          setTimeout(() => {
-            isFocused && setIsFocused(false)
-          }, 150)
-        }}
-      />
-      {isFocused && !isInvalid && (
-        <TagSuggestions
-          targetKey={suggestedTagKey}
-          searchTerm={value}
-          currentTagKeys={currentTagKeys}
-          onChange={(value) => {
-            setIsFocused(false)
-            onChange(value)
+      <span>
+        <TextInput
+          value={value}
+          disabled={disabled}
+          valid={!isInvalid ? false : undefined}
+          error={isInvalid ? errorMessage : undefined}
+          onChange={(value) => onChange(value)}
+          placeholder={placeholder}
+          onFocusCapture={() => {
+            setIsFocused(true)
+          }}
+          onBlurCapture={() => {
+            setTimeout(() => {
+              isFocused && setIsFocused(false)
+            }, 150)
           }}
         />
-      )}
+        {isFocused && !isInvalid && (
+          <TagSuggestions
+            targetKey={suggestedTagKey}
+            searchTerm={value}
+            currentTagKeys={currentTagKeys}
+            onChange={(value) => {
+              setIsFocused(false)
+              onChange(value)
+            }}
+          />
+        )}
+      </span>
       {rightContent}
     </div>
   )
diff --git a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagSuggestions.tsx b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagSuggestions.tsx
index 79badd24d5..c77d4b74a4 100644
--- a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagSuggestions.tsx
+++ b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagSuggestions.tsx
@@ -26,37 +26,35 @@ export const TagSuggestions = ({
 }: TagSuggestionsProps) => {
   const { data: allTags } = useSelector(tagsSelector)
   const tagsSuggestions: SelectOption[] = useMemo(() => {
-      const options = uniqBy(presetTagSuggestions.concat(allTags), (tag) =>
-        targetKey ? tag.value : tag.key,
-      )
-        .filter(({ key, value }) => {
-          if (targetKey !== undefined) {
-            return (
-              key === targetKey && value !== '' && value.includes(searchTerm)
-            )
-          }
+    const options = uniqBy(presetTagSuggestions.concat(allTags), (tag) =>
+      targetKey ? tag.value : tag.key,
+    )
+      .filter(({ key, value }) => {
+        if (targetKey !== undefined) {
+          return key === targetKey && value !== '' && value.includes(searchTerm)
+        }
 
-          return (
-            key.includes(searchTerm) &&
-            (!currentTagKeys.has(key) || key === searchTerm)
-          )
-        })
-        .map(({ key, value }) => ({
-          label: targetKey ? value : key,
-          value: targetKey ? value : key,
-        }))
+        return (
+          key.includes(searchTerm) &&
+          (!currentTagKeys.has(key) || key === searchTerm)
+        )
+      })
+      .map(({ key, value }) => ({
+        label: targetKey ? value : key,
+        value: targetKey ? value : key,
+      }))
 
-      const isNewTag = options.length === 0 && searchTerm
+    const isNewTag = options.length === 0 && searchTerm
 
-      if (isNewTag) {
-        options.push({
-          label: `${searchTerm} (new ${targetKey ? 'value' : 'tag'})`,
-          value: searchTerm,
-        })
-      }
+    if (isNewTag) {
+      options.push({
+        label: `${searchTerm} (new ${targetKey ? 'value' : 'tag'})`,
+        value: searchTerm,
+      })
+    }
 
-      return options
-    }, [allTags, targetKey, searchTerm, currentTagKeys])
+    return options
+  }, [allTags, targetKey, searchTerm, currentTagKeys])
 
   if (tagsSuggestions.length === 0) {
     return null