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

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(

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<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={
-        field: t('label.tag-plural'),
+        placeholder ??
-      })}
+        t('label.select-field', {
+          field: t('label.tag-plural'),
+        })
+      }
       onChange={(value) => handleTagSelection(value)}
     />
   );

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,