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..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 @@ -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 - 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 (
- + )} - + {rightContent}
) 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 + suggestedTagKey?: string + rightContent?: React.ReactNode + errorMessage?: string + placeholder?: string + onChange: (value: string) => void +} + 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