diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Form/Form.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/Form/Form.interface.ts index 3fd17eb4d13..dff963c3397 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/Form/Form.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/Form/Form.interface.ts @@ -21,4 +21,5 @@ export interface FormItemLabelProps { overlayClassName?: string; overlayInnerStyle?: React.CSSProperties; align?: TooltipProps['align']; + isBeta?: boolean; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.test.tsx index d8c9c8495fb..e467171fd01 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.test.tsx @@ -50,4 +50,26 @@ describe('Test FormItemLabel Component', () => { expect(label).toContainHTML(mockProps.label as string); expect(helpIcon).toBeInTheDocument(); }); + + it('Should render beta badge if isBeta is true', async () => { + render(); + + const label = screen.getByTestId('form-item-label'); + + const betaBadge = screen.getByText('label.beta'); + + expect(label).toContainHTML(mockProps.label as string); + expect(betaBadge).toBeInTheDocument(); + }); + + it('Should not render beta badge if isBeta is false', async () => { + render(); + + const label = screen.getByTestId('form-item-label'); + + const betaBadge = screen.queryByText('label.beta'); + + expect(label).toContainHTML(mockProps.label as string); + expect(betaBadge).not.toBeInTheDocument(); + }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.tsx index 618b6d5cae7..ffb7dbb2cb0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.tsx @@ -12,9 +12,11 @@ */ import { InfoCircleOutlined } from '@ant-design/icons'; -import { Tooltip } from 'antd'; +import { Badge, Tooltip } from 'antd'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GRAYED_OUT_COLOR } from '../../../constants/constants'; +import { useApplicationStore } from '../../../hooks/useApplicationStore'; import { FormItemLabelProps } from './Form.interface'; const FormItemLabel = ({ @@ -24,7 +26,11 @@ const FormItemLabel = ({ overlayInnerStyle, overlayClassName, placement = 'top', + isBeta = false, }: FormItemLabelProps) => { + const { t } = useTranslation(); + const { theme } = useApplicationStore(); + return ( <> {label} @@ -43,6 +49,14 @@ const FormItemLabel = ({ /> )} + {isBeta && ( + + )} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts index 2f43102958f..d45378c9dfd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts @@ -54,4 +54,5 @@ export interface FieldProp { placeholder?: string; hasSeparator?: boolean; formItemLayout?: FormItemLayout; + isBeta?: boolean; } diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/form.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/form.less index e65907b3167..54ea7a1efcc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/components/form.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/form.less @@ -27,15 +27,15 @@ flex-direction: row; .ant-form-item-label { display: block; - flex: 0 0 33.33333333%; - max-width: 33.33333333%; + flex: 0 0 40%; + max-width: 40%; padding: 0px; align-self: center; } .ant-form-item-control { display: block; - flex: 0 0 66.66666667%; - max-width: 66.66666667%; + flex: 0 0 60%; + max-width: 60%; } } } diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx index b65326741c7..6b24ccd0063 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx @@ -64,6 +64,7 @@ export const getField = (field: FieldProp) => { id, formItemProps, hasSeparator = false, + isBeta = false, formItemLayout = 'vertical', } = field; @@ -209,6 +210,7 @@ export const getField = (field: FieldProp) => {