chore(ui): add tagType prop in TagSuggestion component (#14066)

This commit is contained in:
Sachin Chaurasiya 2023-11-22 17:41:55 +05:30 committed by GitHub
parent 131eea32f8
commit 17e2d39487
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 51 deletions

View File

@ -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(

View File

@ -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<TagSuggestionProps> = ({ onChange, value }) => {
const TagSuggestion: React.FC<TagSuggestionProps> = ({
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<TagSuggestionProps> = ({ 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<TagSuggestionProps> = ({ onChange, value }) => {
return (
<AsyncSelectList
defaultValue={value?.map((item) => item.tagFQN) || []}
fetchOptions={fetchTagsElasticSearch}
fetchOptions={isGlossaryType ? fetchGlossaryList : fetchTagsElasticSearch}
mode="multiple"
placeholder={t('label.select-field', {
placeholder={
placeholder ??
t('label.select-field', {
field: t('label.tag-plural'),
})}
})
}
onChange={(value) => handleTagSelection(value)}
/>
);

View File

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