diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx index 18ef2a13f3c..68d8116f2e7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx @@ -13,7 +13,7 @@ import classNames from 'classnames'; import { cloneDeep } from 'lodash'; -import { EditorContentRef, FormatedUsersData } from 'Models'; +import { EditorContentRef, FormattedUsersData } from 'Models'; import React, { useRef, useState } from 'react'; import { UrlEntityCharRegEx } from '../../constants/regex.constants'; import { PageLayoutType } from '../../enums/layout.enum'; @@ -52,13 +52,13 @@ const AddGlossary = ({ const [name, setName] = useState(''); const [description] = useState(''); const [showRevieweModal, setShowRevieweModal] = useState(false); - const [reviewer, setReviewer] = useState>([]); + const [reviewer, setReviewer] = useState>([]); const onReviewerModalCancel = () => { setShowRevieweModal(false); }; - const handleReviewerSave = (reviewer: Array) => { + const handleReviewerSave = (reviewer: Array) => { setReviewer(reviewer); onReviewerModalCancel(); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx index b79d2fdb795..749140ad448 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx @@ -15,8 +15,8 @@ import classNames from 'classnames'; import { cloneDeep, isEmpty, isUndefined } from 'lodash'; import { EditorContentRef, - FormatedGlossaryTermData, - FormatedUsersData, + FormattedGlossaryTermData, + FormattedUsersData, } from 'Models'; import React, { useEffect, useRef, useState } from 'react'; import { PageLayoutType } from '../../enums/layout.enum'; @@ -68,16 +68,16 @@ const AddGlossaryTerm = ({ const [description] = useState(''); const [showRevieweModal, setShowRevieweModal] = useState(false); const [showRelatedTermsModal, setShowRelatedTermsModal] = useState(false); - const [reviewer, setReviewer] = useState>([]); + const [reviewer, setReviewer] = useState>([]); const [relatedTerms, setRelatedTerms] = useState< - Array + Array >([]); const [synonyms, setSynonyms] = useState(''); const [references, setReferences] = useState([]); useEffect(() => { if (glossaryData?.reviewers && glossaryData?.reviewers.length) { - setReviewer(glossaryData?.reviewers as FormatedUsersData[]); + setReviewer(glossaryData?.reviewers as FormattedUsersData[]); } }, [glossaryData]); @@ -85,7 +85,7 @@ const AddGlossaryTerm = ({ setShowRelatedTermsModal(false); }; - const handleRelatedTermsSave = (terms: Array) => { + const handleRelatedTermsSave = (terms: Array) => { setRelatedTerms(terms); onRelatedTermsModalCancel(); }; @@ -94,7 +94,7 @@ const AddGlossaryTerm = ({ setShowRevieweModal(false); }; - const handleReviewerSave = (reviewer: Array) => { + const handleReviewerSave = (reviewer: Array) => { setReviewer(reviewer); onReviewerModalCancel(); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx index 9f40a544f25..04b46af132c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx @@ -13,7 +13,7 @@ import classNames from 'classnames'; import { compare } from 'fast-json-patch'; -import { EntityTags } from 'Models'; +import { EntityTags, TagOption } from 'Models'; import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { useAuthContext } from '../../auth-provider/AuthProvider'; @@ -50,6 +50,10 @@ import RequestDescriptionModal from '../Modals/RequestDescriptionModal/RequestDe import TagsContainer from '../tags-container/tags-container'; import Tags from '../tags/tags'; import { ChartType, DashboardDetailsProps } from './DashboardDetails.interface'; +import { + fetchGlossaryTerms, + getGlossaryTermlist, +} from '../../utils/GlossaryUtils'; const DashboardDetails = ({ entityName, @@ -104,7 +108,8 @@ const DashboardDetails = ({ chart: ChartType; index: number; }>(); - const [tagList, setTagList] = useState>([]); + const [tagList, setTagList] = useState>([]); + const [tagFetchFailed, setTagFetchFailed] = useState(false); const [isTagLoading, setIsTagLoading] = useState(false); const [threadLink, setThreadLink] = useState(''); const [selectedField, setSelectedField] = useState(''); @@ -292,10 +297,7 @@ const DashboardDetails = ({ } }; - const handleChartTagSelection = ( - selectedTags?: Array, - allTags?: Array - ) => { + const handleChartTagSelection = (selectedTags?: Array) => { if (selectedTags && editChartTags) { const prevTags = editChartTags.chart.tags?.filter((tag) => selectedTags.some((selectedTag) => selectedTag.tagFQN === tag.tagFQN) @@ -310,7 +312,7 @@ const DashboardDetails = ({ .map((tag) => ({ labelType: 'Manual', state: 'Confirmed', - source: (allTags || []).includes(tag.tagFQN) ? 'Tag' : 'Glossary', + source: tag.source, tagFQN: tag.tagFQN, })); @@ -330,11 +332,30 @@ const DashboardDetails = ({ } }; - const fetchTags = () => { + const fetchTagsAndGlossaryTerms = () => { setIsTagLoading(true); - getTagCategories() - .then((res) => { - setTagList(getTaglist(res.data)); + Promise.all([getTagCategories(), fetchGlossaryTerms()]) + .then((values) => { + let tagsAndTerms: TagOption[] = []; + if (values[0].data) { + tagsAndTerms = getTaglist(values[0].data).map((tag) => { + return { fqn: tag, source: 'Tag' }; + }); + } + if (values[1] && values[1].length > 0) { + const glossaryTerms: TagOption[] = getGlossaryTermlist(values[1]).map( + (tag) => { + return { fqn: tag, source: 'Glossary' }; + } + ); + tagsAndTerms = [...tagsAndTerms, ...glossaryTerms]; + } + setTagList(tagsAndTerms); + setTagFetchFailed(false); + }) + .catch(() => { + setTagList([]); + setTagFetchFailed(true); }) .finally(() => { setIsTagLoading(false); @@ -505,7 +526,10 @@ const DashboardDetails = ({ className="tw-group tw-relative tableBody-cell" onClick={() => { if (!editChartTags) { - fetchTags(); + // Fetch tags and terms only once + if (tagList.length === 0 || tagFetchFailed) { + fetchTagsAndGlossaryTerms(); + } handleEditChartTag(chart, index); } }}> @@ -532,7 +556,6 @@ const DashboardDetails = ({ position="left" trigger="click"> { - handleChartTagSelection(tags, tagList); + handleChartTagSelection(tags); }}> {chart.tags?.length ? (