diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx index 75ff7026b50..c794f175307 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx @@ -27,15 +27,11 @@ import { KNOWLEDGE_CENTER_CLASSIFICATION, } from '../../../constants/constants'; import { TAG_CONSTANT, TAG_START_WITH } from '../../../constants/Tag.constants'; -import { SearchIndex } from '../../../enums/search.enum'; -import { GlossaryTerm } from '../../../generated/entity/data/glossaryTerm'; -import { Paging } from '../../../generated/type/paging'; import { TagSource } from '../../../generated/type/tagLabel'; -import { getGlossaryTerms } from '../../../rest/glossaryAPI'; -import { searchQuery } from '../../../rest/searchAPI'; import { getEntityFeedLink } from '../../../utils/EntityUtils'; import { getFilterTags } from '../../../utils/TableTags/TableTags.utils'; import { + fetchGlossaryList, fetchTagsElasticSearch, getTagPlaceholder, } from '../../../utils/TagsUtils'; @@ -96,42 +92,6 @@ const TagsContainerV2 = ({ [tagType, permission, tags?.[tagType], tags, layoutType] ); - const fetchGlossaryList = useCallback( - async ( - searchQueryParam: string, - page: number - ): Promise<{ - data: { - label: string; - value: string; - data: GlossaryTerm; - }[]; - paging: Paging; - }> => { - const glossaryResponse = await searchQuery({ - query: searchQueryParam ? `*${searchQueryParam}*` : '*', - pageNumber: page, - pageSize: 10, - queryFilter: {}, - searchIndex: SearchIndex.GLOSSARY, - }); - - const hits = glossaryResponse.hits.hits; - - return { - data: hits.map(({ _source }) => ({ - label: _source.fullyQualifiedName ?? '', - value: _source.fullyQualifiedName ?? '', - data: _source, - })), - paging: { - total: glossaryResponse.hits.total.value, - }, - }; - }, - [searchQuery, getGlossaryTerms] - ); - const fetchAPI = useCallback( (searchValue: string, page: number) => { if (tagType === TagSource.Classification) { @@ -140,7 +100,7 @@ const TagsContainerV2 = ({ return fetchGlossaryList(searchValue, page); } }, - [tagType, fetchGlossaryList] + [tagType, filterClassifications] ); const showNoDataPlaceholder = useMemo( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx index a0147045650..ad8541c8bd0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx @@ -15,18 +15,33 @@ import { DefaultOptionType } from 'antd/lib/select'; import { t } from 'i18next'; import { isArray, isEmpty } from 'lodash'; import { EntityTags } from 'Models'; -import React from 'react'; +import React, { useMemo } from 'react'; import AsyncSelectList from '../../../components/AsyncSelectList/AsyncSelectList'; import { TagSource } from '../../../generated/entity/data/container'; import { TagLabel } from '../../../generated/type/tagLabel'; -import { fetchTagsElasticSearch } from '../../../utils/TagsUtils'; +import { + fetchGlossaryList, + fetchTagsElasticSearch, +} from '../../../utils/TagsUtils'; export interface TagSuggestionProps { - onChange?: (newTags: TagLabel[]) => void; + placeholder?: string; + tagType?: TagSource; value?: TagLabel[]; + onChange?: (newTags: TagLabel[]) => void; } -const TagSuggestion: React.FC = ({ onChange, value }) => { +const TagSuggestion: React.FC = ({ + onChange, + value, + placeholder, + tagType = TagSource.Classification, +}) => { + const isGlossaryType = useMemo( + () => tagType === TagSource.Glossary, + [tagType] + ); + const handleTagSelection = ( newValue: DefaultOptionType | DefaultOptionType[] ) => { @@ -40,7 +55,9 @@ const TagSuggestion: React.FC = ({ onChange, value }) => { } let tagData: EntityTags = { tagFQN: tag.value, - source: TagSource.Classification, + source: isGlossaryType + ? TagSource.Glossary + : TagSource.Classification, }; if (tag.data) { @@ -64,11 +81,14 @@ const TagSuggestion: React.FC = ({ onChange, value }) => { return ( item.tagFQN) || []} - fetchOptions={fetchTagsElasticSearch} + fetchOptions={isGlossaryType ? fetchGlossaryList : fetchTagsElasticSearch} mode="multiple" - placeholder={t('label.select-field', { - field: t('label.tag-plural'), - })} + placeholder={ + placeholder ?? + t('label.select-field', { + field: t('label.tag-plural'), + }) + } onChange={(value) => handleTagSelection(value)} /> ); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.tsx index f57f2d955ab..edcc6ab9a21 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.tsx @@ -29,6 +29,7 @@ import { ExplorePageTabs } from '../enums/Explore.enum'; import { SearchIndex } from '../enums/search.enum'; import { Classification } from '../generated/entity/classification/classification'; import { Tag } from '../generated/entity/classification/tag'; +import { GlossaryTerm } from '../generated/entity/data/glossaryTerm'; import { Column } from '../generated/entity/data/table'; import { Paging } from '../generated/type/paging'; import { LabelType, State, TagLabel } from '../generated/type/tagLabel'; @@ -339,6 +340,39 @@ export const fetchTagsElasticSearch = async ( }; }; +export const fetchGlossaryList = async ( + searchQueryParam: string, + page: number +): Promise<{ + data: { + label: string; + value: string; + data: GlossaryTerm; + }[]; + paging: Paging; +}> => { + const glossaryResponse = await searchQuery({ + query: searchQueryParam ? `*${searchQueryParam}*` : '*', + pageNumber: page, + pageSize: 10, + queryFilter: {}, + searchIndex: SearchIndex.GLOSSARY, + }); + + const hits = glossaryResponse.hits.hits; + + return { + data: hits.map(({ _source }) => ({ + label: _source.fullyQualifiedName ?? '', + value: _source.fullyQualifiedName ?? '', + data: _source, + })), + paging: { + total: glossaryResponse.hits.total.value, + }, + }; +}; + export const createTierTag = (tag: Tag) => { return { displayName: tag.displayName,