Minor: Add support for beta tag for form field (#16921)

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;
 }

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(<FormItemLabel {...mockProps} isBeta />);
+
+    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(<FormItemLabel {...mockProps} />);
+
+    const label = screen.getByTestId('form-item-label');
+
+    const betaBadge = screen.queryByText('label.beta');
+
+    expect(label).toContainHTML(mockProps.label as string);
+    expect(betaBadge).not.toBeInTheDocument();
+  });
 });

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 (
     <>
       <span data-testid="form-item-label">{label}</span>
@@ -43,6 +49,14 @@ const FormItemLabel = ({
           />
         </Tooltip>
       )}
+      {isBeta && (
+        <Badge
+          className="m-l-xs"
+          color={theme.primaryColor}
+          count={t('label.beta')}
+          size="small"
+        />
+      )}
     </>
   );
 };

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;
 }

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%;
     }
   }
 }

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) => {
           <FormItemLabel
             align={props.tooltipAlign as TooltipProps['align']}
             helperText={helperText}
+            isBeta={isBeta}
             label={label}
             overlayClassName={props.overlayClassName as string}
             overlayInnerStyle={props.overlayInnerStyle as React.CSSProperties}