refactor: update toggle component and related fields to use UT_SWITCH type

openmetadata-ui-core-components/src/main/resources/ui/src/components/base/toggle/toggle.tsx

@@ -74,7 +74,7 @@ export const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, i
     );
 };
 
-interface ToggleProps extends AriaSwitchProps {
+export interface ToggleProps extends AriaSwitchProps {
     size?: "sm" | "md";
     label?: string;
     hint?: ReactNode;

openmetadata-ui/src/main/resources/ui/src/components/Settings/CustomProperty/AddCustomProperty/AddCustomProperty.tsx

@@ -370,7 +370,7 @@ const AddCustomProperty = ({
     () => ({
       name: 'multiSelect',
       label: t('label.multi-select'),
-      type: FieldTypes.SWITCH_MUI,
+      type: FieldTypes.UT_SWITCH,
       required: false,
       props: {
         'data-testid': 'multiSelect',
@@ -559,7 +559,8 @@ const AddCustomProperty = ({
       layout="vertical"
       onFieldsChange={handleFieldsChange}
       onFinish={handleFormSubmit}
-      onFocus={handleFieldFocus}>
+      onFocus={handleFieldFocus}
+    >
       {generateFormFields(formFields)}
       {
         // Only show enum value field if the property type has enum config
@@ -585,7 +586,8 @@ const AddCustomProperty = ({
             <Button
               data-testid="back-button"
               type="link"
-              onClick={handleCancel}>
+              onClick={handleCancel}
+            >
               {t('label.back')}
             </Button>
           </Col>
@@ -594,7 +596,8 @@ const AddCustomProperty = ({
               data-testid="create-button"
               htmlType="submit"
               loading={isCreating || loading}
-              type="primary">
+              type="primary"
+            >
               {t('label.create')}
             </Button>
           </Col>
@@ -621,7 +624,8 @@ const AddCustomProperty = ({
           </div>
         }
         title={t('label.add-entity', { entity: t('label.custom-property') })}
-        onClose={onClose ?? handleCancel}>
+        onClose={onClose ?? handleCancel}
+      >
         {formContent}
       </MuiDrawer>
     );

openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts

@@ -33,7 +33,7 @@ export enum FieldTypes {
   PASSWORD_MUI = 'password_mui',
   FILTER_PATTERN = 'filter_pattern',
   SWITCH = 'switch',
-  SWITCH_MUI = 'switch_mui',
+  UT_SWITCH = 'ut_switch',
   SELECT = 'select',
   SELECT_MUI = 'select_mui',
   ASYNC_SELECT_LIST = 'async_select_list',

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.test.tsx

@@ -46,6 +46,28 @@ jest.mock('@openmetadata/ui-core-components', () => {
       children: React.ReactNode;
       className?: string;
     }) => <button className={className}>{children}</button>,
+    Toggle: ({
+      id,
+      isSelected,
+      onChange,
+      isDisabled,
+      className,
+    }: {
+      id?: string;
+      isSelected?: boolean;
+      onChange?: (val: boolean) => void;
+      isDisabled?: boolean;
+      className?: string;
+    }) => (
+      <button
+        aria-checked={isSelected}
+        className={className}
+        disabled={isDisabled}
+        id={id}
+        role="switch"
+        onClick={() => onChange?.(!isSelected)}
+      />
+    ),
     Grid: GridComponent,
   };
 });

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx

@@ -237,7 +237,7 @@ const TagsForm = ({
 
     return {
       ...field,
-      muiLabel: t(field.muiLabel),
+      label: t(field.label),
     };
   }, [t, disableMutuallyExclusiveField, isMutuallyExclusive]);
 
@@ -278,9 +278,8 @@ const TagsForm = ({
   return (
     <EntityAttachmentProvider
       entityFqn={initialValues?.fullyQualifiedName}
-      entityType={
-        isClassification ? EntityType.CLASSIFICATION : EntityType.TAG
-      }>
+      entityType={isClassification ? EntityType.CLASSIFICATION : EntityType.TAG}
+    >
       <Form
         className="tags-form"
         data-testid="tags-form"

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/tagFormFields.test.tsx

@@ -356,16 +356,13 @@ describe('tagFormFields', () => {
         name: 'disabled',
         required: false,
         label: 'label.disable-tag',
-        muiLabel: 'label.disable-tag',
         id: 'root/disabled',
-        type: FieldTypes.SWITCH_MUI,
+        type: FieldTypes.UT_SWITCH,
         formItemLayout: FormItemLayout.HORIZONTAL,
         props: {
-          inputProps: {
-            'data-testid': 'disabled',
-          },
+          'data-testid': 'disabled',
           initialValue: false,
-          disabled: false,
+          isDisabled: false,
         },
       });
     });
@@ -385,7 +382,7 @@ describe('tagFormFields', () => {
         disabled: true,
       });
 
-      expect(result.props?.disabled).toBe(true);
+      expect(result.props?.isDisabled).toBe(true);
     });
 
     it('should have horizontal form item layout', () => {
@@ -408,13 +405,12 @@ describe('tagFormFields', () => {
       expect(result).toEqual({
         name: 'mutuallyExclusive',
         label: 'label.mutually-exclusive',
-        muiLabel: 'label.mutually-exclusive',
-        type: FieldTypes.SWITCH_MUI,
+        type: FieldTypes.UT_SWITCH,
         required: false,
         props: {
           id: 'tags_mutuallyExclusive',
           'data-testid': 'mutually-exclusive-button',
-          disabled: false,
+          isDisabled: false,
           className: 'mutually-exclusive-switch',
         },
         helperTextType: HelperTextType.ALERT,
@@ -438,7 +434,7 @@ describe('tagFormFields', () => {
         showHelperText: false,
       });
 
-      expect(result.props?.disabled).toBe(true);
+      expect(result.props?.isDisabled).toBe(true);
     });
 
     it('should have ALERT helper text type', () => {