RI-7779: remove duplicate tooltip in tag input field (#5313)

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

Closes: #RI-7779

Author: pd-redis

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,7 +19,7 @@ export const TagInputField = ({
 
   return (
     <div>
-      <RiTooltip content={errorMessage} position="top">
+      <span>
         <TextInput
           value={value}
           disabled={disabled}
@@ -58,7 +47,7 @@ export const TagInputField = ({
             }}
           />
         )}
-      </RiTooltip>
+      </span>
       {rightContent}
     </div>
   )

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
+}
+

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