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

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,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>
   )

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