diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx index f39696c2ff98..0b311b05322e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx @@ -11,8 +11,9 @@ * limitations under the License. */ -import { Typography } from 'antd'; +import { Badge, Typography } from 'antd'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import './page-header.less'; import { HeaderProps } from './PageHeader.interface'; @@ -20,7 +21,10 @@ const PageHeader = ({ data: { header, subHeader }, titleProps, subHeaderProps, + isBeta, }: HeaderProps) => { + const { t } = useTranslation(); + return (
{header} + + {isBeta && ( + + )} { - + - - - - - {t('label.enable-roles-polices-in-search')} - - - - - - - + + {t('label.enable-roles-polices-in-search')} + + - - + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less index 8fc1c0141785..7939f76e97d3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less @@ -557,6 +557,20 @@ a[href].link-text-grey, } } +// beta tag for page header +.service-beta-page-header { + sup { + height: auto; + padding: 2px 6px; + border-radius: 30px; + margin-left: 2px; + font-size: 10px; + background: @primary-1; + border: 1px solid @primary-color; + color: @primary-color; + } +} + /* Tabs */ .ant-tabs-top > .ant-tabs-nav::before { border-color: @border-color; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less index 44684a130966..108a1cdef543 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less @@ -155,6 +155,9 @@ .m-l-lg { margin-left: @margin-lg; } +.m-l-xlg { + margin-left: @margin-xlg; +} .m-l-auto { margin-left: auto; }