ui: UI to use Tier TAG displayName if provided #12899 (#13105)

* ui: UI to use Tier TAG displayName if provided #12899

* updated tier label with displayName

openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx

@@ -43,6 +43,7 @@ import {
   PRIMERY_COLOR,
 } from '../../constants/constants';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
+import { Tag } from '../../generated/entity/classification/tag';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { DataProduct } from '../../generated/entity/domains/dataProduct';
 import { ThreadType } from '../../generated/entity/feed/thread';
@@ -62,6 +63,7 @@ import {
   searchTagInData,
 } from '../../utils/TableTags/TableTags.utils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropertyTable';
@@ -259,17 +261,8 @@ const DashboardDetails = ({
     [owner]
   );
 
-  const onTierUpdate = async (newTier?: string) => {
+  const onTierUpdate = async (newTier?: Tag) => {
-    const tierTag: Dashboard['tags'] = newTier
+    const tierTag = updateTierTag(dashboardDetails?.tags ?? [], newTier);
-      ? [
-          ...getTagsWithoutTier(dashboardDetails.tags as Array<EntityTags>),
-          {
-            tagFQN: newTier,
-            labelType: LabelType.Manual,
-            state: State.Confirmed,
-          },
-        ]
-      : getTagsWithoutTier(dashboardDetails.tags ?? []);
     const updatedDashboard = {
       ...dashboardDetails,
       tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx

@@ -37,7 +37,6 @@ import EntityHeaderTitle from '../../../components/Entity/EntityHeaderTitle/Enti
 import { useTourProvider } from '../../../components/TourProvider/TourProvider';
 import Voting from '../../../components/Voting/Voting.component';
 import { VotingDataProps } from '../../../components/Voting/voting.interface';
-import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { DE_ACTIVE_COLOR } from '../../../constants/constants';
 import { SERVICE_TYPES } from '../../../constants/Services.constant';
 import { EntityTabs, EntityType } from '../../../enums/entity.enum';
@@ -374,7 +373,7 @@ export const DataAssetsHeader = ({
                   <Space>
                     {tier ? (
                       <span className="font-medium text-xs" data-testid="Tier">
-                        {tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1]}
+                        {getEntityName(tier)}
                       </span>
                     ) : (
                       <span className="font-medium text-xs" data-testid="Tier">

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.interface.ts

@@ -16,6 +16,7 @@ import { EntityName } from '../../../components/Modals/EntityNameModal/EntityNam
 import { OperationPermission } from '../../../components/PermissionProvider/PermissionProvider.interface';
 import { QueryVote } from '../../../components/TableQueries/TableQueries.interface';
 import { EntityType } from '../../../enums/entity.enum';
+import { Tag } from '../../../generated/entity/classification/tag';
 import { Container } from '../../../generated/entity/data/container';
 import { Dashboard } from '../../../generated/entity/data/dashboard';
 import { DashboardDataModel } from '../../../generated/entity/data/dashboardDataModel';
@@ -91,7 +92,7 @@ export type DataAssetsHeaderProps = {
   isRecursiveDelete?: boolean;
   afterDomainUpdateAction?: (asset: DataAssetWithDomains) => void;
   afterDeleteAction?: (isSoftDelete?: boolean) => void;
-  onTierUpdate: (tier?: string) => Promise<void>;
+  onTierUpdate: (tier?: Tag) => Promise<void>;
   onOwnerUpdate: (owner?: EntityReference) => Promise<void>;
   onVersionClick?: () => void;
   onFollowClick?: () => Promise<void>;

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx

@@ -13,7 +13,7 @@
 
 import { Card, Col, Row } from 'antd';
 import { AxiosError } from 'axios';
-import { isEmpty, round, uniqueId } from 'lodash';
+import { isEmpty, round } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -36,7 +36,6 @@ import {
 import {
   BAR_CHART_MARGIN,
   DI_STRUCTURE,
-  TIER_DATA,
   TOTAL_ENTITY_CHART_COLOR,
 } from '../../constants/DataInsight.constants';
 import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart';
@@ -44,6 +43,7 @@ import {
   DataInsightChartResult,
   DataInsightChartType,
 } from '../../generated/dataInsight/dataInsightChartResult';
+import { Tag } from '../../generated/entity/classification/tag';
 import { ChartFilter } from '../../interface/data-insight.interface';
 import { getAggregateChartData } from '../../rest/DataInsightAPI';
 import {
@@ -55,6 +55,7 @@ import {
   getGraphDataByTierType,
   renderLegend,
 } from '../../utils/DataInsightUtils';
+import { getEntityName } from '../../utils/EntityUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
 import DataInsightProgressBar from './DataInsightProgressBar';
@@ -64,13 +65,14 @@ import EntitySummaryProgressBar from './EntitySummaryProgressBar.component';
 interface Props {
   chartFilter: ChartFilter;
   selectedDays: number;
+  tierTags: { tags: Tag[]; isLoading: boolean };
 }
 
-const TierInsight: FC<Props> = ({ chartFilter, selectedDays }) => {
+const TierInsight: FC<Props> = ({ chartFilter, selectedDays, tierTags }) => {
   const [totalEntitiesByTier, setTotalEntitiesByTier] =
     useState<DataInsightChartResult>();
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [activeKeys, setActiveKeys] = useState<string[]>([]);
   const [activeMouseHoverKey, setActiveMouseHoverKey] = useState('');
 
@@ -89,8 +91,17 @@ const TierInsight: FC<Props> = ({ chartFilter, selectedDays }) => {
         dataReportIndex: DataReportIndex.EntityReportDataIndex,
       };
       const response = await getAggregateChartData(params);
+      const updatedRes = response.data?.map((data) => {
+        const currentTier = tierTags.tags.find(
+          (value) => value.fullyQualifiedName === data.entityTier
+        );
 
-      setTotalEntitiesByTier(response);
+        return {
+          ...data,
+          entityTier: getEntityName(currentTier) || data.entityTier,
+        };
+      });
+      setTotalEntitiesByTier({ ...response, data: updatedRes });
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
@@ -111,8 +122,10 @@ const TierInsight: FC<Props> = ({ chartFilter, selectedDays }) => {
   };
 
   useEffect(() => {
-    fetchTotalEntitiesByTier();
+    if (!tierTags.isLoading) {
-  }, [chartFilter]);
+      fetchTotalEntitiesByTier();
+    }
+  }, [chartFilter, tierTags]);
 
   return (
     <Card
@@ -150,7 +163,7 @@ const TierInsight: FC<Props> = ({ chartFilter, selectedDays }) => {
                 <Legend
                   align="left"
                   content={(props) =>
-                    renderLegend(props as LegendProps, activeKeys, true)
+                    renderLegend(props as LegendProps, activeKeys)
                   }
                   layout="horizontal"
                   verticalAlign="top"
@@ -197,9 +210,9 @@ const TierInsight: FC<Props> = ({ chartFilter, selectedDays }) => {
               </Col>
               {tiers.map((tiers, i) => {
                 return (
-                  <Col key={uniqueId()} span={24}>
+                  <Col key={tiers} span={24}>
                     <EntitySummaryProgressBar
-                      entity={TIER_DATA[tiers as keyof typeof TIER_DATA]}
+                      entity={tiers}
                       label={round(latestData[tiers] || 0, 2) + '%'}
                       latestData={latestData}
                       pluralize={false}

openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.interface.tsx

@@ -16,6 +16,7 @@ import { DataAssetWithDomains } from '../../components/DataAssets/DataAssetsHead
 import { OperationPermission } from '../../components/PermissionProvider/PermissionProvider.interface';
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import { CreateThread } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import { DashboardDataModel } from '../../generated/entity/data/dashboardDataModel';
 import { Column } from '../../generated/entity/data/table';
 import { EntityReference } from '../../generated/entity/type';
@@ -29,7 +30,7 @@ export interface DataModelDetailsProps {
   handleFollowDataModel: () => Promise<void>;
   handleUpdateTags: (selectedTags?: EntityTags[]) => void;
   handleUpdateOwner: (owner?: EntityReference) => Promise<void>;
-  handleUpdateTier: (tier?: string) => Promise<void>;
+  handleUpdateTier: (tier?: Tag) => Promise<void>;
   handleUpdateDescription: (value: string) => Promise<void>;
   handleColumnUpdateDataModel: (updatedDataModel: Column[]) => Promise<void>;
   onUpdateVote: (data: QueryVote, id: string) => Promise<void>;

openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx

@@ -13,20 +13,22 @@
 
 import { Space } from 'antd';
 import { AxiosError } from 'axios';
-import { isEqual, isString, uniqWith } from 'lodash';
+import { isEqual, isString, isUndefined, uniqWith } from 'lodash';
 import { Bucket } from 'Models';
 import Qs from 'qs';
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import {
   MISC_FIELDS,
   OWNER_QUICK_FILTER_DEFAULT_OPTIONS_KEY,
 } from '../../constants/AdvancedSearch.constants';
+import { TIER_FQN_KEY } from '../../constants/explore.constants';
 import { SearchIndex } from '../../enums/search.enum';
 import { QueryFilterInterface } from '../../pages/explore/ExplorePage.interface';
 import { getAggregateFieldOptions } from '../../rest/miscAPI';
 import { getTags } from '../../rest/tagAPI';
 import { getOptionsFromAggregationBucket } from '../../utils/AdvancedSearchUtils';
+import { getEntityName } from '../../utils/EntityUtils';
 import { getCombinedQueryFilterObject } from '../../utils/ExplorePage/ExplorePageUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import SearchDropdown from '../SearchDropdown/SearchDropdown';
@@ -81,7 +83,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
   ) => {
     let buckets: Bucket[] = [];
 
-    if (aggregations?.[key] && key !== 'tier.tagFQN') {
+    if (aggregations?.[key] && key !== TIER_FQN_KEY) {
       buckets = aggregations[key].buckets;
     } else {
       const [res, tierTags] = await Promise.all([
@@ -91,14 +93,14 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
           '',
           JSON.stringify(combinedQueryFilter)
         ),
-        key === 'tier.tagFQN'
+        key === TIER_FQN_KEY
           ? getTags({ parent: 'Tier' })
           : Promise.resolve(null),
       ]);
 
       buckets = res.data.aggregations[`sterms#${key}`].buckets;
 
-      if (key === 'tier.tagFQN' && tierTags) {
+      if (key === TIER_FQN_KEY && tierTags) {
         const options = tierTags.data.map((option) => {
           const bucketItem = buckets.find(
             (item) => item.key === option.fullyQualifiedName
@@ -106,7 +108,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
 
           return {
             key: option.fullyQualifiedName ?? '',
-            label: option.name,
+            label: getEntityName(option),
             count: bucketItem?.doc_count ?? 0,
           };
         });
@@ -148,7 +150,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
 
         return;
       }
-      if (aggregations?.[key] && key !== 'tier.tagFQN') {
+      if (aggregations?.[key] && key !== TIER_FQN_KEY) {
         const res = await getAggregateFieldOptions(
           index,
           key,
@@ -158,7 +160,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
 
         const buckets = res.data.aggregations[`sterms#${key}`].buckets;
         setOptions(uniqWith(getOptionsFromAggregationBucket(buckets), isEqual));
-      } else if (key === 'tier.tagFQN') {
+      } else if (key === TIER_FQN_KEY) {
         const filteredOptions = tierOptions?.filter((option) => {
           return option.label.toLowerCase().includes(value.toLowerCase());
         });
@@ -171,25 +173,43 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
     }
   };
 
+  useEffect(() => {
+    const tierField = fields.find((value) => value.key === TIER_FQN_KEY);
+    if (tierField?.value?.length && isUndefined(tierOptions)) {
+      fetchDefaultOptions(index, TIER_FQN_KEY);
+    }
+  }, [fields]);
+
   return (
     <Space wrap className="explore-quick-filters-container" size={[4, 0]}>
-      {fields.map((field) => (
+      {fields.map((field) => {
-        <SearchDropdown
+        const selectedKeys =
-          highlight
+          field.key === TIER_FQN_KEY && options?.length
-          fixedOrderOptions={field.key === 'tier.tagFQN'}
+            ? field.value?.map((value) => {
-          isSuggestionsLoading={isOptionsLoading}
+                return (
-          key={field.key}
+                  options?.find((option) => option.key === value.key) ?? value
-          label={field.label}
+                );
-          options={options || []}
+              })
-          searchKey={field.key}
+            : field.value;
-          selectedKeys={field.value || []}
+
-          onChange={(updatedValues) => {
+        return (
-            onFieldValueSelect({ ...field, value: updatedValues });
+          <SearchDropdown
-          }}
+            highlight
-          onGetInitialOptions={getInitialOptions}
+            fixedOrderOptions={field.key === TIER_FQN_KEY}
-          onSearch={getFilterOptions}
+            isSuggestionsLoading={isOptionsLoading}
-        />
+            key={field.key}
-      ))}
+            label={field.label}
+            options={options ?? []}
+            searchKey={field.key}
+            selectedKeys={selectedKeys ?? []}
+            onChange={(updatedValues) => {
+              onFieldValueSelect({ ...field, value: updatedValues });
+            }}
+            onGetInitialOptions={getInitialOptions}
+            onSearch={getFilterOptions}
+          />
+        );
+      })}
     </Space>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx

@@ -17,7 +17,6 @@ import { ExtraInfo } from 'Models';
 import React, { forwardRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useParams } from 'react-router-dom';
-import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { OwnerType } from '../../../enums/user.enum';
 import { EntityReference } from '../../../generated/entity/type';
@@ -62,7 +61,7 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
     const otherDetails = useMemo(() => {
       const tierValue = isString(source.tier)
         ? source.tier
-        : source.tier?.tagFQN?.split(FQN_SEPARATOR_CHAR)?.[1] ?? '';
+        : getEntityName(source.tier);
       const profileName =
         source.owner?.type === OwnerType.USER ? source.owner?.name : undefined;
 

openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx

@@ -34,6 +34,7 @@ import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interfac
 import { getMlModelDetailsPath } from '../../constants/constants';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
 import { MlHyperParameter } from '../../generated/api/data/createMlModel';
+import { Tag } from '../../generated/entity/classification/tag';
 import { Mlmodel, MlStore } from '../../generated/entity/data/mlmodel';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { TagLabel, TagSource } from '../../generated/type/schema';
@@ -45,6 +46,7 @@ import { getEntityFieldThreadCounts } from '../../utils/FeedUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { getDecodedFqn } from '../../utils/StringsUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropertyTable';
@@ -185,17 +187,8 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
     [mlModelDetail, mlModelDetail.owner]
   );
 
-  const onTierUpdate = async (newTier?: string) => {
+  const onTierUpdate = async (newTier?: Tag) => {
-    const tierTag: Mlmodel['tags'] = newTier
+    const tierTag = updateTierTag(mlModelDetail?.tags ?? [], newTier);
-      ? [
-          ...mlModelTags,
-          {
-            tagFQN: newTier,
-            labelType: LabelType.Manual,
-            state: State.Confirmed,
-          },
-        ]
-      : getTagsWithoutTier(mlModelDetail.tags ?? []);
     const updatedMlModelDetails = {
       ...mlModelDetail,
       tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx

@@ -47,6 +47,7 @@ import {
 import { PIPELINE_TASK_TABS } from '../../constants/pipeline.constants';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import {
   Pipeline,
   PipelineStatus,
@@ -68,6 +69,7 @@ import {
   searchTagInData,
 } from '../../utils/TableTags/TableTags.utils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
@@ -225,17 +227,8 @@ const PipelineDetails = ({
     [owner]
   );
 
-  const onTierUpdate = async (newTier?: string) => {
+  const onTierUpdate = async (newTier?: Tag) => {
-    const tierTag: Pipeline['tags'] = newTier
+    const tierTag = updateTierTag(pipelineDetails?.tags ?? [], newTier);
-      ? [
-          ...getTagsWithoutTier(pipelineDetails.tags as Array<EntityTags>),
-          {
-            tagFQN: newTier,
-            labelType: LabelType.Manual,
-            state: State.Confirmed,
-          },
-        ]
-      : getTagsWithoutTier(pipelineDetails.tags ?? []);
     const updatedPipelineDetails = {
       ...pipelineDetails,
       tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx

@@ -24,6 +24,7 @@ import { ReactComponent as IconTag } from '../../../assets/svg/classification.sv
 import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
 import { TAG_START_WITH } from '../../../constants/Tag.constants';
 import { reduceColorOpacity } from '../../../utils/CommonUtils';
+import { getEntityName } from '../../../utils/EntityUtils';
 import Fqn from '../../../utils/Fqn';
 import { getEncodedFqn } from '../../../utils/StringsUtils';
 import { TagsV1Props } from './TagsV1.interface';
@@ -68,12 +69,15 @@ const TagsV1 = ({
 
   const tagName = useMemo(
     () =>
-      showOnlyName
+      getEntityName(tag) ||
-        ? tag.tagFQN
+      getTagDisplay(
-            .split(FQN_SEPARATOR_CHAR)
+        showOnlyName
-            .slice(-2)
+          ? tag.tagFQN
-            .join(FQN_SEPARATOR_CHAR)
+              .split(FQN_SEPARATOR_CHAR)
-        : tag.tagFQN,
+              .slice(-2)
+              .join(FQN_SEPARATOR_CHAR)
+          : tag.tagFQN
+      ),
     [showOnlyName, tag.tagFQN]
   );
 
@@ -105,7 +109,7 @@ const TagsV1 = ({
             ellipsis
             className="m-0 tags-label"
             data-testid={`tag-${tag.tagFQN}`}>
-            {getTagDisplay(tagName)}
+            {tagName}
           </Typography.Paragraph>
         </div>
       </div>

openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx

@@ -35,6 +35,7 @@ import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interfac
 import { getTopicDetailsPath } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
+import { Tag } from '../../generated/entity/classification/tag';
 import { Topic } from '../../generated/entity/data/topic';
 import { DataProduct } from '../../generated/entity/domains/dataProduct';
 import { ThreadType } from '../../generated/entity/feed/thread';
@@ -48,6 +49,7 @@ import {
 } from '../../utils/EntityUtils';
 import { getDecodedFqn } from '../../utils/StringsUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropertyTable';
@@ -213,17 +215,8 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
     [owner]
   );
 
-  const onTierUpdate = (newTier?: string) => {
+  const onTierUpdate = (newTier?: Tag) => {
-    const tierTag: Topic['tags'] = newTier
+    const tierTag = updateTierTag(topicDetails?.tags ?? [], newTier);
-      ? [
-          ...getTagsWithoutTier(topicDetails.tags as Array<EntityTags>),
-          {
-            tagFQN: newTier,
-            labelType: LabelType.Manual,
-            state: State.Confirmed,
-          },
-        ]
-      : getTagsWithoutTier(topicDetails.tags ?? []);
     const updatedTopicDetails = {
       ...topicDetails,
       tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx

@@ -22,6 +22,7 @@ import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
 import { ReactComponent as IconExternalLink } from '../../../assets/svg/external-links.svg';
 import { ReactComponent as IconTeamsGrey } from '../../../assets/svg/teams-grey.svg';
 import { DE_ACTIVE_COLOR } from '../../../constants/constants';
+import { Tag } from '../../../generated/entity/classification/tag';
 import { Dashboard } from '../../../generated/entity/data/dashboard';
 import { Table } from '../../../generated/entity/data/table';
 import { TagLabel } from '../../../generated/type/tagLabel';
@@ -38,7 +39,7 @@ export interface GetInfoElementsProps {
   updateOwner?: (value: Table['owner']) => void;
   tier?: TagLabel;
   currentTier?: string;
-  updateTier?: (value?: string) => void;
+  updateTier?: (value?: Tag) => void;
   currentOwner?: Dashboard['owner'];
   deleted?: boolean;
   allowTeamOwner?: boolean;

openmetadata-ui/src/main/resources/ui/src/components/common/TierCard/TierCard.interface.ts

@@ -12,6 +12,7 @@
  */
 import { TableDetail } from 'Models';
 import { ReactNode } from 'react';
+import { Tag } from '../../../generated/entity/classification/tag';
 import { EntityReference } from '../../../generated/type/entityReference';
 
 export type CardWithListItems = {
@@ -23,7 +24,7 @@ export type CardWithListItems = {
 
 export interface TierCardProps {
   currentTier?: string;
-  updateTier?: (value?: string) => void;
+  updateTier?: (value?: Tag) => void;
   onSave?: (
     owner?: EntityReference,
     tier?: TableDetail['tier'],

openmetadata-ui/src/main/resources/ui/src/components/common/TierCard/TierCard.tsx

@@ -24,7 +24,9 @@ import { AxiosError } from 'axios';
 import { t } from 'i18next';
 import React, { useState } from 'react';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
+import { Tag } from '../../../generated/entity/classification/tag';
 import { getTags } from '../../../rest/tagAPI';
+import { getEntityName } from '../../../utils/EntityUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import Loader from '../../Loader/Loader';
 import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';
@@ -33,7 +35,10 @@ import { CardWithListItems, TierCardProps } from './TierCard.interface';
 
 const { Panel } = Collapse;
 const TierCard = ({ currentTier, updateTier, children }: TierCardProps) => {
-  const [tierData, setTierData] = useState<Array<CardWithListItems>>([]);
+  const [tiers, setTiers] = useState<Array<Tag>>([]);
+  const [tierCardData, setTierCardData] = useState<Array<CardWithListItems>>(
+    []
+  );
   const [isLoadingTierData, setIsLoadingTierData] = useState<boolean>(false);
 
   const getTierData = async () => {
@@ -47,7 +52,7 @@ const TierCard = ({ currentTier, updateTier, children }: TierCardProps) => {
         const tierData: CardWithListItems[] =
           data.map((tier: { name: string; description: string }) => ({
             id: `Tier${FQN_SEPARATOR_CHAR}${tier.name}`,
-            title: tier.name,
+            title: getEntityName(tier),
             description: tier.description.substring(
               0,
               tier.description.indexOf('\n\n')
@@ -56,9 +61,10 @@ const TierCard = ({ currentTier, updateTier, children }: TierCardProps) => {
               tier.description.indexOf('\n\n') + 1
             ),
           })) ?? [];
-        setTierData(tierData);
+        setTierCardData(tierData);
+        setTiers(data);
       } else {
-        setTierData([]);
+        setTierCardData([]);
       }
     } catch (err) {
       showErrorToast(
@@ -73,7 +79,8 @@ const TierCard = ({ currentTier, updateTier, children }: TierCardProps) => {
   };
 
   const handleTierSelection = ({ target: { value } }: RadioChangeEvent) => {
-    updateTier?.(value as string);
+    const tier = tiers.find((tier) => tier.fullyQualifiedName === value);
+    updateTier?.(tier);
   };
 
   const clearTierSelection = () => {
@@ -107,7 +114,7 @@ const TierCard = ({ currentTier, updateTier, children }: TierCardProps) => {
               collapsible="icon"
               defaultActiveKey={currentTier}
               expandIconPosition="end">
-              {tierData.map((card) => (
+              {tierCardData.map((card) => (
                 <Panel
                   data-testid="card-list"
                   header={
@@ -144,7 +151,9 @@ const TierCard = ({ currentTier, updateTier, children }: TierCardProps) => {
       placement="bottomRight"
       showArrow={false}
       trigger="click"
-      onOpenChange={(visible) => visible && !tierData.length && getTierData()}>
+      onOpenChange={(visible) =>
+        visible && !tierCardData.length && getTierData()
+      }>
       {children}
     </Popover>
   );

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx

@@ -18,7 +18,6 @@ import { ExtraInfo } from 'Models';
 import React, { forwardRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { OwnerType } from '../../../enums/user.enum';
 import { EntityReference } from '../../../generated/entity/type';
@@ -106,7 +105,7 @@ const TableDataCardV2: React.FC<TableDataCardPropsV2> = forwardRef<
           value: source.tier
             ? isString(source.tier)
               ? source.tier
-              : source.tier?.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
+              : getEntityName(source.tier)
             : '',
         });
       }

openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts

@@ -77,8 +77,8 @@ export type SourceType = (
     >
 ) & {
   id: string;
-  tier?: string | Pick<TagLabel, 'tagFQN'>;
+  tier?: string | TagLabel;
-  tags?: string[] | TagLabel[];
+  tags?: TagLabel[];
   entityType?: string;
   service?: EntityReference;
   owner?: Partial<

openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx

@@ -41,6 +41,7 @@ const mockData: SearchedDataProps['data'] = [
         { ...TAG_CONSTANT, tagFQN: 'tags3' },
       ],
       tier: {
+        ...TAG_CONSTANT,
         tagFQN: 'tier1',
       },
     },
@@ -62,7 +63,7 @@ const mockData: SearchedDataProps['data'] = [
         { ...TAG_CONSTANT, tagFQN: 'tags2' },
         { ...TAG_CONSTANT, tagFQN: 'tags3' },
       ],
-      tier: { tagFQN: 'tier2' },
+      tier: { ...TAG_CONSTANT, tagFQN: 'tier2' },
     },
   },
   {
@@ -78,7 +79,7 @@ const mockData: SearchedDataProps['data'] = [
         { ...TAG_CONSTANT, tagFQN: 'tags2' },
         { ...TAG_CONSTANT, tagFQN: 'tags3' },
       ],
-      tier: { tagFQN: 'tier3' },
+      tier: { ...TAG_CONSTANT, tagFQN: 'tier3' },
     },
   },
 ];

openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts

@@ -54,40 +54,6 @@ export const DATA_INSIGHT_GRAPH_COLORS = [
 
 export const BAR_SIZE = 15;
 
-export const TIER_FILTER = {
-  [i18n.t('label.tier-number', { tier: 1 })]: {
-    key: 'Tier.Tier1',
-    label: 'Tier1',
-  },
-  [i18n.t('label.tier-number', { tier: 2 })]: {
-    key: 'Tier.Tier2',
-    label: 'Tier2',
-  },
-  [i18n.t('label.tier-number', { tier: 3 })]: {
-    key: 'Tier.Tier3',
-    label: 'Tier3',
-  },
-  [i18n.t('label.tier-number', { tier: 4 })]: {
-    key: 'Tier.Tier4',
-    label: 'Tier4',
-  },
-  [i18n.t('label.tier-number', { tier: 5 })]: {
-    key: 'Tier.Tier5',
-    label: 'Tier5',
-  },
-};
-
-export const TIER_DATA = {
-  'Tier.Tier1': i18n.t('label.tier-number', { tier: 1 }),
-  'Tier.Tier2': i18n.t('label.tier-number', { tier: 2 }),
-  'Tier.Tier3': i18n.t('label.tier-number', { tier: 3 }),
-  'Tier.Tier4': i18n.t('label.tier-number', { tier: 4 }),
-  'Tier.Tier5': i18n.t('label.tier-number', { tier: 5 }),
-  NoTier: i18n.t('label.no-entity', {
-    entity: i18n.t('label.tier'),
-  }),
-};
-
 export const INITIAL_CHART_FILTER: ChartFilter = {
   startTs: getEpochMillisForPastDays(DEFAULT_SELECTED_RANGE.days),
   endTs: getCurrentMillis(),

openmetadata-ui/src/main/resources/ui/src/constants/explore.constants.ts

@@ -19,6 +19,7 @@ import { Icons } from '../utils/SvgUtils';
 
 export const INITIAL_SORT_FIELD = 'updatedAt';
 export const INITIAL_SORT_ORDER = 'desc';
+export const TIER_FQN_KEY = 'tier.tagFQN';
 
 export const initialFilterQS = 'initialFilter';
 export const searchFilterQS = 'searchFilter';

openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx

@@ -49,11 +49,10 @@ import {
 } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
-import {
+import { CreateThread } from '../../generated/api/feed/createThread';
-  CreateThread,
+import { Tag } from '../../generated/entity/classification/tag';
-  ThreadType,
-} from '../../generated/api/feed/createThread';
 import { Container } from '../../generated/entity/data/container';
+import { ThreadType } from '../../generated/entity/feed/thread';
 import { Include } from '../../generated/type/include';
 import {
   LabelType,
@@ -82,6 +81,7 @@ import { getEntityFieldThreadCounts } from '../../utils/FeedUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { getDecodedFqn } from '../../utils/StringsUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 
 const ContainerPage = () => {
@@ -351,23 +351,12 @@ const ContainerPage = () => {
     [containerData, containerData?.owner]
   );
 
-  const handleUpdateTier = async (updatedTier?: string) => {
+  const handleUpdateTier = async (updatedTier?: Tag) => {
     try {
+      const tierTag = updateTierTag(containerData?.tags ?? [], updatedTier);
       const { tags: newTags, version } = await handleUpdateContainerData({
         ...(containerData as Container),
-        tags: [
+        tags: tierTag,
-          ...getTagsWithoutTier(containerData?.tags ?? []),
-          ...(updatedTier
-            ? [
-                {
-                  tagFQN: updatedTier,
-                  labelType: LabelType.Manual,
-                  state: State.Confirmed,
-                  source: TagSource.Classification,
-                },
-              ]
-            : []),
-        ],
       });
 
       setContainerData((prev) => ({

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx

@@ -40,7 +40,6 @@ import { PAGE_SIZE, ROUTES } from '../../constants/constants';
 import {
   ENTITIES_CHARTS,
   INITIAL_CHART_FILTER,
-  TIER_FILTER,
 } from '../../constants/DataInsight.constants';
 import {
   DEFAULT_RANGE_DATA,
@@ -51,6 +50,7 @@ import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { SearchIndex } from '../../enums/search.enum';
 import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult';
 import { Kpi } from '../../generated/dataInsight/kpi/kpi';
+import { Tag } from '../../generated/entity/classification/tag';
 import { Operation } from '../../generated/entity/policies/policy';
 import {
   ChartFilter,
@@ -58,11 +58,13 @@ import {
 } from '../../interface/data-insight.interface';
 import { getListKPIs } from '../../rest/KpiAPI';
 import { searchQuery } from '../../rest/searchAPI';
+import { getTags } from '../../rest/tagAPI';
 import {
   getDataInsightPathWithFqn,
   getTeamFilter,
 } from '../../utils/DataInsightUtils';
 import { formatDate } from '../../utils/date-time/DateTimeUtils';
+import { getEntityName } from '../../utils/EntityUtils';
 import { checkPermission } from '../../utils/PermissionsUtils';
 import { TeamStateType, TierStateType } from './DataInsight.interface';
 import './DataInsight.less';
@@ -121,12 +123,19 @@ const DataInsightPage = () => {
   );
   const [dateRangeObject, setDateRangeObject] =
     useState<DateRangeObject>(DEFAULT_RANGE_DATA);
+  const [tier, setTier] = useState<{ tags: Tag[]; isLoading: boolean }>({
+    tags: [],
+    isLoading: true,
+  });
 
   const [selectedChart, setSelectedChart] = useState<DataInsightChartType>();
 
   const defaultTierOptions = useMemo(() => {
-    return Object.keys(TIER_FILTER);
+    return tier.tags.map((op) => ({
-  }, []);
+      key: op.fullyQualifiedName ?? op.name,
+      label: getEntityName(op),
+    }));
+  }, [tier]);
 
   const { descriptionKpi, ownerKpi } = useMemo(() => {
     return {
@@ -147,9 +156,7 @@ const DataInsightPage = () => {
     setTierOptions((prev) => ({ ...prev, selectedOptions: tiers }));
     setChartFilter((previous) => ({
       ...previous,
-      tier: tiers.length
+      tier: tiers.length ? tiers.map((tier) => tier.key).join(',') : undefined,
-        ? tiers.map((tier) => TIER_FILTER[tier.key].key).join(',')
-        : undefined,
     }));
   };
 
@@ -202,14 +209,18 @@ const DataInsightPage = () => {
     if (query) {
       setTierOptions((prev) => ({
         ...prev,
-        options: prev.options.filter((value) =>
+        options: prev.options.filter(
-          value.key.toLocaleLowerCase().includes(query.toLocaleLowerCase())
+          (value) =>
+            value.label
+              .toLocaleLowerCase()
+              .includes(query.toLocaleLowerCase()) ||
+            value.key.toLocaleLowerCase().includes(query.toLocaleLowerCase())
         ),
       }));
     } else {
       setTierOptions((prev) => ({
         ...prev,
-        options: defaultTierOptions.map((op) => ({ key: op, label: op })),
+        options: defaultTierOptions,
       }));
     }
   };
@@ -246,10 +257,32 @@ const DataInsightPage = () => {
     }
   };
 
+  const getTierTag = async () => {
+    setTier((prev) => ({ ...prev, isLoading: true }));
+    try {
+      const { data } = await getTags({
+        parent: 'Tier',
+      });
+
+      setTier((prev) => ({ ...prev, tags: data }));
+      setTierOptions((prev) => ({
+        ...prev,
+        options: data.map((op) => ({
+          key: op.fullyQualifiedName ?? op.name,
+          label: getEntityName(op),
+        })),
+      }));
+    } catch (error) {
+      // error
+    } finally {
+      setTier((prev) => ({ ...prev, isLoading: false }));
+    }
+  };
+
   const fetchDefaultTierOptions = () => {
     setTierOptions((prev) => ({
       ...prev,
-      options: defaultTierOptions.map((op) => ({ key: op, label: op })),
+      options: defaultTierOptions,
     }));
   };
 
@@ -289,6 +322,7 @@ const DataInsightPage = () => {
   }, [selectedChart]);
 
   useEffect(() => {
+    getTierTag();
     fetchDefaultTeamOptions();
     fetchKpiList();
   }, []);
@@ -475,6 +509,7 @@ const DataInsightPage = () => {
               <TierInsight
                 chartFilter={chartFilter}
                 selectedDays={selectedDaysFilter}
+                tierTags={tier}
               />
             </Col>
           </>

openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.component.tsx

@@ -37,9 +37,9 @@ import {
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import { DashboardDataModel } from '../../generated/entity/data/dashboardDataModel';
 import { Include } from '../../generated/type/include';
-import { LabelType, State, TagSource } from '../../generated/type/tagLabel';
 import {
   addDataModelFollower,
   getDataModelsByName,
@@ -54,7 +54,8 @@ import {
 } from '../../utils/CommonUtils';
 import { getSortedDataModelColumnTags } from '../../utils/DataModelsUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
-import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 
 const DataModelsPage = () => {
@@ -230,23 +231,12 @@ const DataModelsPage = () => {
     [dataModelData, dataModelData?.owner]
   );
 
-  const handleUpdateTier = async (updatedTier?: string) => {
+  const handleUpdateTier = async (updatedTier?: Tag) => {
     try {
+      const tags = updateTierTag(dataModelData?.tags ?? [], updatedTier);
       const { tags: newTags, version } = await handleUpdateDataModelData({
         ...(dataModelData as DashboardDataModel),
-        tags: [
+        tags,
-          ...getTagsWithoutTier(dataModelData?.tags ?? []),
-          ...(updatedTier
-            ? [
-                {
-                  tagFQN: updatedTier,
-                  labelType: LabelType.Manual,
-                  state: State.Confirmed,
-                  source: TagSource.Classification,
-                },
-              ]
-            : []),
-        ],
       });
 
       setDataModelData((prev) => ({

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx

@@ -66,6 +66,7 @@ import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
 import { SearchIndex } from '../../enums/search.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import { Database } from '../../generated/entity/data/database';
 import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
 import { LabelType } from '../../generated/entity/data/table';
@@ -88,6 +89,7 @@ import { getEntityFeedLink, getEntityName } from '../../utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { getDecodedFqn } from '../../utils/StringsUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 
 const DatabaseDetails: FunctionComponent = () => {
@@ -438,17 +440,8 @@ const DatabaseDetails: FunctionComponent = () => {
   }, []);
 
   const handleUpdateTier = useCallback(
-    (newTier?: string) => {
+    (newTier?: Tag) => {
-      const tierTag = newTier
+      const tierTag = updateTierTag(database?.tags ?? [], newTier);
-        ? [
-            ...getTagsWithoutTier(database?.tags ?? []),
-            {
-              tagFQN: newTier,
-              labelType: LabelType.Manual,
-              state: State.Confirmed,
-            },
-          ]
-        : getTagsWithoutTier(database?.tags ?? []);
       const updatedTableDetails = {
         ...database,
         tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx

@@ -59,6 +59,7 @@ import {
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
 import { Table } from '../../generated/entity/data/table';
 import { ThreadType } from '../../generated/entity/feed/thread';
@@ -87,6 +88,7 @@ import { getEntityFeedLink, getEntityName } from '../../utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { getDecodedFqn } from '../../utils/StringsUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import { StoredProcedureData } from './DatabaseSchemaPage.interface';
 import SchemaTablesTab from './SchemaTablesTab';
@@ -397,17 +399,8 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   };
 
   const handleUpdateTier = useCallback(
-    async (newTier?: string) => {
+    async (newTier?: Tag) => {
-      const tierTag = newTier
+      const tierTag = updateTierTag(databaseSchema?.tags ?? [], newTier);
-        ? [
-            ...getTagsWithoutTier(databaseSchema?.tags ?? []),
-            {
-              tagFQN: newTier,
-              labelType: LabelType.Manual,
-              state: State.Confirmed,
-            },
-          ]
-        : getTagsWithoutTier(databaseSchema?.tags ?? []);
       const updatedSchemaDetails = {
         ...databaseSchema,
         tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.tsx

@@ -50,6 +50,7 @@ import {
   CreateThread,
   ThreadType,
 } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import { SearchIndex, TagLabel } from '../../generated/entity/data/searchIndex';
 import { LabelType, State, TagSource } from '../../generated/type/tagLabel';
 import { postThread } from '../../rest/feedsAPI';
@@ -73,6 +74,7 @@ import {
   getSearchIndexTabPath,
 } from '../../utils/SearchIndexUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import SearchIndexFieldsTab from './SearchIndexFieldsTab/SearchIndexFieldsTab';
 
@@ -532,18 +534,12 @@ function SearchIndexDetailsPage() {
   ]);
 
   const onTierUpdate = useCallback(
-    async (newTier?: string) => {
+    async (newTier?: Tag) => {
       if (searchIndexDetails) {
-        const tierTag: SearchIndex['tags'] = newTier
+        const tierTag: SearchIndex['tags'] = updateTierTag(
-          ? [
+          searchIndexTags,
-              ...getTagsWithoutTier(searchIndexTags ?? []),
+          newTier
-              {
+        );
-                tagFQN: newTier,
-                labelType: LabelType.Manual,
-                state: State.Confirmed,
-              },
-            ]
-          : getTagsWithoutTier(searchIndexTags ?? []);
         const updatedSearchIndexDetails = {
           ...searchIndexDetails,
           tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx

@@ -64,6 +64,7 @@ import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityTabs } from '../../enums/entity.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { PipelineType } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
+import { Tag } from '../../generated/entity/classification/tag';
 import { Container } from '../../generated/entity/data/container';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { DashboardDataModel } from '../../generated/entity/data/dashboardDataModel';
@@ -78,7 +79,6 @@ import { DatabaseService } from '../../generated/entity/services/databaseService
 import { IngestionPipeline } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
 import { Include } from '../../generated/type/include';
 import { Paging } from '../../generated/type/paging';
-import { LabelType, State } from '../../generated/type/tagLabel';
 import { useAuth } from '../../hooks/authHooks';
 import { useAirflowStatus } from '../../hooks/useAirflowStatus';
 import { ConfigData, ServicesType } from '../../interface/service.interface';
@@ -116,7 +116,7 @@ import {
   shouldTestConnection,
 } from '../../utils/ServiceUtils';
 import { getDecodedFqn } from '../../utils/StringsUtils';
-import { getTagsWithoutTier } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import ServiceMainTabContent from './ServiceMainTabContent';
 
@@ -750,17 +750,8 @@ const ServiceDetailsPage: FunctionComponent = () => {
   );
 
   const handleUpdateTier = useCallback(
-    async (newTier?: string) => {
+    async (newTier?: Tag) => {
-      const tierTag = newTier
+      const tierTag = updateTierTag(serviceDetails?.tags ?? [], newTier);
-        ? [
-            ...getTagsWithoutTier(serviceDetails?.tags ?? []),
-            {
-              tagFQN: newTier,
-              labelType: LabelType.Manual,
-              state: State.Confirmed,
-            },
-          ]
-        : getTagsWithoutTier(serviceDetails?.tags ?? []);
       const updatedServiceDetails = {
         ...serviceDetails,
         tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.tsx

@@ -51,6 +51,7 @@ import {
   CreateThread,
   ThreadType,
 } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import {
   StoredProcedure,
   StoredProcedureCodeObject,
@@ -80,6 +81,7 @@ import { getEntityName } from '../../utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { STORED_PROCEDURE_DEFAULT_FIELDS } from '../../utils/StoredProceduresUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 
 const StoredProcedurePage = () => {
@@ -358,18 +360,9 @@ const StoredProcedurePage = () => {
   };
 
   const onTierUpdate = useCallback(
-    async (newTier?: string) => {
+    async (newTier?: Tag) => {
       if (storedProcedure) {
-        const tierTag: StoredProcedure['tags'] = newTier
+        const tierTag: StoredProcedure['tags'] = updateTierTag(tags, newTier);
-          ? [
-              ...getTagsWithoutTier(tags ?? []),
-              {
-                tagFQN: newTier,
-                labelType: LabelType.Manual,
-                state: State.Confirmed,
-              },
-            ]
-          : getTagsWithoutTier(tags ?? []);
         const updatedDetails = {
           ...storedProcedure,
           tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx

@@ -59,6 +59,7 @@ import {
   TabSpecificField,
 } from '../../enums/entity.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
+import { Tag } from '../../generated/entity/classification/tag';
 import { JoinedWith, Table } from '../../generated/entity/data/table';
 import { DataProduct } from '../../generated/entity/domains/dataProduct';
 import { ThreadType } from '../../generated/entity/feed/thread';
@@ -93,6 +94,7 @@ import {
 } from '../../utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
+import { updateTierTag } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import { FrequentlyJoinedTables } from './FrequentlyJoinedTables/FrequentlyJoinedTables.component';
 import './table-details-page-v1.less';
@@ -731,18 +733,9 @@ const TableDetailsPageV1 = () => {
   ]);
 
   const onTierUpdate = useCallback(
-    async (newTier?: string) => {
+    async (newTier?: Tag) => {
       if (tableDetails) {
-        const tierTag: Table['tags'] = newTier
+        const tierTag: Table['tags'] = updateTierTag(tableTags, newTier);
-          ? [
-              ...getTagsWithoutTier(tableTags ?? []),
-              {
-                tagFQN: newTier,
-                labelType: LabelType.Manual,
-                state: State.Confirmed,
-              },
-            ]
-          : getTagsWithoutTier(tableTags ?? []);
         const updatedTableDetails = {
           ...tableDetails,
           tags: tierTag,

openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx

@@ -40,7 +40,6 @@ import {
 } from '../constants/constants';
 import {
   ENTITIES_SUMMARY_LIST,
-  TIER_DATA,
   WEB_SUMMARY_LIST,
 } from '../constants/DataInsight.constants';
 import { KpiTargetType } from '../generated/api/dataInsight/kpi/createKpiRequest';
@@ -68,8 +67,7 @@ const checkIsPercentageGraph = (dataInsightChartType: DataInsightChartType) =>
 
 export const renderLegend = (
   legendData: LegendProps,
-  activeKeys = [] as string[],
+  activeKeys = [] as string[]
-  isTier = false
 ) => {
   const { payload = [] } = legendData;
 
@@ -103,9 +101,7 @@ export const renderLegend = (
               />
             </Surface>
             <span style={{ color: isActive ? 'inherit' : GRAYED_OUT_COLOR }}>
-              {isTier
+              {entry.value}
-                ? TIER_DATA[entry.value as keyof typeof TIER_DATA]
-                : entry.value}
             </span>
           </li>
         );
@@ -150,13 +146,7 @@ const getEntryFormattedValue = (
 };
 
 export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
-  const {
+  const { active, payload = [], isPercentage, kpiTooltipRecord } = props;
-    active,
-    payload = [],
-    isPercentage,
-    kpiTooltipRecord,
-    isTier,
-  } = props;
 
   if (active && payload && payload.length) {
     const timestamp = formatDate(payload[0].payload.timestampValue || 0);
@@ -173,9 +163,7 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
               <Surface className="mr-2" height={12} version="1.1" width={12}>
                 <rect fill={entry.color} height="14" rx="2" width="14" />
               </Surface>
-              {isTier
+              {entry.dataKey}
-                ? TIER_DATA[entry.dataKey as keyof typeof TIER_DATA]
-                : entry.dataKey}
             </span>
             <span className="font-medium">
               {getEntryFormattedValue(

openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.tsx

@@ -30,6 +30,7 @@ import { Classification } from '../generated/entity/classification/classificatio
 import { Tag } from '../generated/entity/classification/tag';
 import { Column } from '../generated/entity/data/table';
 import { Paging } from '../generated/type/paging';
+import { LabelType, State, TagLabel } from '../generated/type/tagLabel';
 import { searchQuery } from '../rest/searchAPI';
 import {
   getAllClassifications,
@@ -38,6 +39,7 @@ import {
 } from '../rest/tagAPI';
 import { formatSearchTagsResponse } from './APIUtils';
 import { fetchGlossaryTerms, getGlossaryTermlist } from './GlossaryUtils';
+import { getTagsWithoutTier } from './TableUtils';
 
 export const getClassifications = async (
   fields?: Array<string> | string,
@@ -322,3 +324,20 @@ export const fetchTagsElasticSearch = async (
     },
   };
 };
+
+export const createTierTag = (tag: Tag) => {
+  return {
+    displayName: tag.displayName,
+    name: tag.name,
+    description: tag.description,
+    tagFQN: tag.fullyQualifiedName,
+    labelType: LabelType.Manual,
+    state: State.Confirmed,
+  };
+};
+
+export const updateTierTag = (oldTags: Tag[] | TagLabel[], newTier?: Tag) => {
+  return newTier
+    ? [...getTagsWithoutTier(oldTags), createTierTag(newTier)]
+    : getTagsWithoutTier(oldTags);
+};