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) => {