Revert "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
     );
 };
 
-export interface ToggleProps extends AriaSwitchProps {
+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.UT_SWITCH,
+      type: FieldTypes.SWITCH_MUI,
       required: false,
       props: {
         'data-testid': 'multiSelect',
@@ -559,8 +559,7 @@ 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
@@ -586,8 +585,7 @@ const AddCustomProperty = ({
             <Button
               data-testid="back-button"
               type="link"
-              onClick={handleCancel}
-            >
+              onClick={handleCancel}>
               {t('label.back')}
             </Button>
           </Col>
@@ -596,8 +594,7 @@ const AddCustomProperty = ({
               data-testid="create-button"
               htmlType="submit"
               loading={isCreating || loading}
-              type="primary"
-            >
+              type="primary">
               {t('label.create')}
             </Button>
           </Col>
@@ -624,8 +621,7 @@ 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/components/form/MUISwitch/MUISwitch.interface.ts

@@ -0,0 +1,19 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { SwitchProps } from '@mui/material';
+
+export interface MUISwitchProps extends Omit<SwitchProps, 'onChange'> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+}

openmetadata-ui/src/main/resources/ui/src/components/form/MUISwitch/MUISwitch.test.tsx

@@ -0,0 +1,134 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import MUISwitch from './MUISwitch';
+
+describe('MUISwitch Component', () => {
+  it('should render the switch component', () => {
+    render(<MUISwitch />);
+
+    const switchElement = screen.getByRole('switch');
+
+    expect(switchElement).toBeInTheDocument();
+  });
+
+  it('should render with unchecked state by default', () => {
+    render(<MUISwitch />);
+
+    const switchElement = screen.getByRole('switch');
+
+    expect(switchElement).not.toBeChecked();
+  });
+
+  it('should render with checked state when checked prop is true', () => {
+    render(<MUISwitch checked />);
+
+    const switchElement = screen.getByRole('switch');
+
+    expect(switchElement).toBeChecked();
+  });
+
+  it('should render label when provided', () => {
+    const labelText = 'Enable Feature';
+
+    render(<MUISwitch label={labelText} />);
+
+    expect(screen.getByText(labelText)).toBeInTheDocument();
+  });
+
+  it('should not render label when not provided', () => {
+    render(<MUISwitch />);
+
+    expect(screen.queryByText('Enable Feature')).not.toBeInTheDocument();
+  });
+
+  it('should call onChange with true when switch is toggled on', () => {
+    const mockOnChange = jest.fn();
+
+    render(<MUISwitch checked={false} onChange={mockOnChange} />);
+
+    const switchElement = screen.getByRole('switch');
+
+    fireEvent.click(switchElement);
+
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+    expect(mockOnChange).toHaveBeenCalledWith(true);
+  });
+
+  it('should call onChange with false when switch is toggled off', () => {
+    const mockOnChange = jest.fn();
+
+    render(<MUISwitch checked onChange={mockOnChange} />);
+
+    const switchElement = screen.getByRole('switch');
+
+    fireEvent.click(switchElement);
+
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+    expect(mockOnChange).toHaveBeenCalledWith(false);
+  });
+
+  it('should not throw error when onChange is not provided', () => {
+    render(<MUISwitch />);
+
+    const switchElement = screen.getByRole('switch');
+
+    expect(() => fireEvent.click(switchElement)).not.toThrow();
+  });
+
+  it('should apply disabled attribute when disabled prop is true', () => {
+    render(<MUISwitch disabled />);
+
+    const switchElement = screen.getByRole('switch');
+
+    expect(switchElement).toBeDisabled();
+  });
+
+  it('should not call onChange when disabled', () => {
+    const mockOnChange = jest.fn();
+
+    render(<MUISwitch disabled onChange={mockOnChange} />);
+
+    const switchElement = screen.getByRole('switch');
+
+    fireEvent.click(switchElement);
+
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+
+  it('should pass additional props to the underlying Switch component', () => {
+    render(<MUISwitch data-testid="custom-switch" size="small" />);
+
+    expect(screen.getByTestId('custom-switch')).toBeInTheDocument();
+  });
+
+  it('should render with both label and checked state', () => {
+    const labelText = 'Toggle Me';
+
+    render(<MUISwitch checked label={labelText} />);
+
+    const switchElement = screen.getByRole('switch');
+
+    expect(switchElement).toBeChecked();
+
+    expect(screen.getByText(labelText)).toBeInTheDocument();
+  });
+
+  it('should support memoization without breaking rendering', () => {
+    const { rerender } = render(<MUISwitch />);
+
+    rerender(<MUISwitch />);
+
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/form/MUISwitch/MUISwitch.tsx

@@ -0,0 +1,52 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { Box, Switch as MuiSwitch, SxProps, Theme } from '@mui/material';
+import { FC, memo, useCallback } from 'react';
+import MUIFormItemLabel from '../../common/MUIFormItemLabel/MUIFormItemLabel';
+import { MUISwitchProps } from './MUISwitch.interface';
+
+const LABEL_STYLES: SxProps<Theme> = {
+  color: (theme) => theme.palette.grey[700],
+  fontWeight: (theme) => theme.typography.subtitle2.fontWeight,
+};
+
+const MUISwitch: FC<MUISwitchProps> = ({
+  checked = false,
+  onChange,
+  label,
+  disabled = false,
+  ...props
+}) => {
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (!disabled) {
+        onChange?.(event.target.checked);
+      }
+    },
+    [onChange, disabled]
+  );
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+      <MuiSwitch
+        checked={checked}
+        disabled={disabled}
+        onChange={handleChange}
+        {...props}
+      />
+      {label && <MUIFormItemLabel label={label} labelSx={LABEL_STYLES} />}
+    </Box>
+  );
+};
+
+export default memo(MUISwitch);

openmetadata-ui/src/main/resources/ui/src/components/form/MUISwitch/index.ts

@@ -0,0 +1,14 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+export { default } from './MUISwitch';
+export type { MUISwitchProps } from './MUISwitch.interface';

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