diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx index 8ada53fffb4..7baba43310a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx @@ -13,7 +13,7 @@ import Icon, { ExclamationCircleFilled } from '@ant-design/icons'; import { Badge, Button, Col, Row, Tooltip, Typography } from 'antd'; import classNames from 'classnames'; -import { capitalize, isEmpty } from 'lodash'; +import { isEmpty } from 'lodash'; import React, { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -21,8 +21,10 @@ import { ReactComponent as ShareIcon } from '../../../assets/svg/copy-right.svg' import { ReactComponent as IconExternalLink } from '../../../assets/svg/external-link-grey.svg'; import { ReactComponent as StarFilledIcon } from '../../../assets/svg/ic-star-filled.svg'; import { ROUTES } from '../../../constants/constants'; +import { EntityType } from '../../../enums/entity.enum'; import { useClipboard } from '../../../hooks/useClipBoard'; import useCustomLocation from '../../../hooks/useCustomLocation/useCustomLocation'; +import entityUtilClassBase from '../../../utils/EntityUtilClassBase'; import { getEntityName } from '../../../utils/EntityUtils'; import { stringToHTML } from '../../../utils/StringsUtils'; import './entity-header-title.less'; @@ -66,6 +68,11 @@ const EntityHeaderTitle = ({ [location.pathname] ); + const formattedEntityType = useMemo( + () => entityUtilClassBase.getFormattedEntityType(entityType as EntityType), + [entityType] + ); + const entityName = useMemo( () => stringToHTML( @@ -180,7 +187,7 @@ const EntityHeaderTitle = ({