feat: migrate drawer components from MUI to SlideoutMenu in untitled UI (#26518)

* feat: migrate drawer components from MUI to SlideoutMenu in untitled UI

* addressed gitar comments

* fixed drawer validation issue

* fixed the form validation issue

* fixed sonar issue

* addressed PR comment

* addressed PR comment

* minor fix

* fixed playwright test

Author: Rohit0301

openmetadata-ui-core-components/src/main/resources/ui/src/components/foundations/typography.tsx

@@ -74,13 +74,13 @@ export const Typography = (props: TypographyProps) => {
         quoteVariant = "default",
         className,
         children,
-        size = "text-sm",
-        weight = "regular",
+        size,
+        weight,
         ...otherProps
     } = props;
 
-    const sizeClass = sizeClasses[size];
-    const weightClass = weightClasses[weight];
+    const sizeClass = size ? sizeClasses[size] : undefined;
+    const weightClass = weight ? weightClasses[weight] : undefined;
 
     const innerClassName = cx(sizeClass, weightClass, className);
 

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DomainUIInteractions.spec.ts

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { expect, Page, test as base } from '@playwright/test';
+import { test as base, expect, Page } from '@playwright/test';
 import { SidebarItem } from '../../constant/sidebar';
 import { DataProduct } from '../../support/domain/DataProduct';
 import { Domain } from '../../support/domain/Domain';
@@ -26,8 +26,8 @@ import {
   selectDataProduct,
   selectDomain,
 } from '../../utils/domain';
-import { sidebarClick } from '../../utils/sidebar';
 import { waitForAllLoadersToDisappear } from '../../utils/entity';
+import { sidebarClick } from '../../utils/sidebar';
 
 const test = base.extend<{
   page: Page;
@@ -577,7 +577,7 @@ test.describe('Domain Form Validation', () => {
     await sidebarClick(page, SidebarItem.DOMAIN);
 
     await page.click('[data-testid="add-domain"]');
-    await page.locator('h6:has-text("Add Domain")').waitFor();
+    await page.getByTestId('form-heading').waitFor();
 
     await page.locator('#root\\/name').fill('Invalid@Name#Test');
     await page.locator('#root\\/displayName').fill('Test Domain');
@@ -593,7 +593,7 @@ test.describe('Domain Form Validation', () => {
     await sidebarClick(page, SidebarItem.DOMAIN);
 
     await page.click('[data-testid="add-domain"]');
-    await page.locator('h6:has-text("Add Domain")').waitFor();
+    await page.getByTestId('form-heading').waitFor();
 
     const longName = 'a'.repeat(150);
     await page.locator('#root\\/name').fill(longName);
@@ -609,7 +609,7 @@ test.describe('Domain Form Validation', () => {
     await sidebarClick(page, SidebarItem.DOMAIN);
 
     await page.click('[data-testid="add-domain"]');
-    await page.locator('h6:has-text("Add Domain")').waitFor();
+    await expect(page.getByTestId('form-heading')).toHaveText('Add Domain');
 
     await page.locator('#root\\/name').fill('ValidName');
     await page.locator('#root\\/displayName').fill('Valid Display Name');

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts

@@ -75,10 +75,10 @@ import {
   deleteAnnouncement,
   editAnnouncement,
   followEntity,
+  getEncodedFqn,
   replyAnnouncement,
   unFollowEntity,
   waitForAllLoadersToDisappear,
-  getEncodedFqn,
 } from '../../utils/entity';
 import { selectActiveGlossaryTerm } from '../../utils/glossary';
 import {
@@ -1202,7 +1202,7 @@ test.describe('Domains', () => {
         await sidebarClick(page, SidebarItem.DOMAIN);
         await waitForAllLoadersToDisappear(page);
         await page.click('[data-testid="add-domain"]');
-        await page.locator('h6:has-text("Add Domain")').waitFor({
+        await page.getByTestId('form-heading').waitFor({
           state: 'visible',
         });
       });

openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts

@@ -522,10 +522,9 @@ export const createDomain = async (
   validate = false
 ) => {
   await page.click('[data-testid="add-domain"]');
+  await page.getByTestId('form-heading').waitFor({ timeout: 5000 });
 
-  await page.locator('h6:has-text("Add Domain")').waitFor({ timeout: 5000 });
-
-  await expect(page.locator('h6:has-text("Add Domain")')).toBeVisible();
+  await expect(page.getByTestId('form-heading')).toBeVisible();
 
   const saveButton = page.getByRole('button', { name: 'Save' });
 

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/AssetsSelectionModal/useAssetSelectionDrawer.tsx

@@ -62,7 +62,6 @@ export const useAssetSelectionDrawer = ({
 
   // Create the drawer - always mounted but content conditionally rendered
   const assetDrawer = useCompositeDrawer({
-    anchor: 'right',
     width: 670,
     closeOnEscape: false,
     testId: 'asset-selection-modal',

openmetadata-ui/src/main/resources/ui/src/components/DataProduct/DataProductListPage.tsx

@@ -18,7 +18,6 @@ import { useSnackbar } from 'notistack';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as FolderEmptyIcon } from '../../assets/svg/folder-empty.svg';
-import { DRAWER_HEADER_STYLING } from '../../constants/DomainsListPage.constants';
 import { LEARNING_PAGE_IDS } from '../../constants/Learning.constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
@@ -72,12 +71,8 @@ const DataProductListPage = () => {
 
   const { formDrawer, openDrawer, closeDrawer } = useFormDrawerWithRef({
     title: t('label.add-entity', { entity: t('label.data-product') }),
-    anchor: 'right',
     width: 670,
     closeOnEscape: false,
-    header: {
-      sx: DRAWER_HEADER_STYLING,
-    },
     onCancel: () => {
       form.resetFields();
     },

openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainDetails/DomainDetails.component.tsx

@@ -105,7 +105,6 @@ import type { BreadcrumbItem } from '../../common/atoms/navigation/useBreadcrumb
 import { useBreadcrumbs } from '../../common/atoms/navigation/useBreadcrumbs';
 
 import { Avatar } from '@openmetadata/ui-core-components';
-import { DRAWER_HEADER_STYLING } from '../../../constants/DomainsListPage.constants';
 import { LEARNING_PAGE_IDS } from '../../../constants/Learning.constants';
 import { FeedCounts } from '../../../interface/feed.interface';
 import { getEntityAvatarProps } from '../../../utils/IconUtils';
@@ -344,12 +343,8 @@ const DomainDetails = ({
     closeDrawer: closeDataProductDrawer,
   } = useFormDrawerWithRef({
     title: t('label.add-entity', { entity: t('label.data-product') }),
-    anchor: 'right',
     width: 670,
     closeOnEscape: false,
-    header: {
-      sx: DRAWER_HEADER_STYLING,
-    },
     onCancel: () => {
       dataProductForm.resetFields();
     },
@@ -491,12 +486,8 @@ const DomainDetails = ({
     closeDrawer: closeSubDomainDrawer,
   } = useFormDrawerWithRef({
     title: t('label.add-entity', { entity: t('label.sub-domain') }),
-    anchor: 'right',
     width: 670,
     closeOnEscape: false,
-    header: {
-      sx: DRAWER_HEADER_STYLING,
-    },
     onCancel: () => {
       subDomainForm.resetFields();
     },

openmetadata-ui/src/main/resources/ui/src/components/DomainListing/DomainListPage.tsx

@@ -18,7 +18,6 @@ import { useSnackbar } from 'notistack';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as FolderEmptyIcon } from '../../assets/svg/folder-empty.svg';
-import { DRAWER_HEADER_STYLING } from '../../constants/DomainsListPage.constants';
 import { LEARNING_PAGE_IDS } from '../../constants/Learning.constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
@@ -74,12 +73,8 @@ const DomainListPage = () => {
 
   const { formDrawer, openDrawer, closeDrawer } = useFormDrawerWithRef({
     title: t('label.add-entity', { entity: t('label.domain') }),
-    anchor: 'right',
     width: 670,
     closeOnEscape: false,
-    header: {
-      sx: DRAWER_HEADER_STYLING,
-    },
     onCancel: () => {
       form.resetFields();
     },

openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useCompositeDrawer.tsx

@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 
-import { Box } from '@mui/material';
 import { useCallback, useMemo } from 'react';
 import { DrawerConfig, useDrawer } from './useDrawer';
 import { DrawerBodyConfig, useDrawerBody } from './useDrawerBody';
@@ -25,48 +24,6 @@ export interface CompositeDrawerConfig extends DrawerConfig {
   onBeforeClose?: () => void;
 }
 
-/**
- * Composite drawer hook that combines all drawer atoms
- *
- * @description
- * Higher-level hook that composes drawer atoms into a complete drawer.
- * Provides a fully configured drawer with header, body, and footer.
- *
- * @param config - Combined configuration for all drawer parts
- *
- * @example
- * ```typescript
- * const drawer = useCompositeDrawer({
- *   anchor: 'right',
- *   width: 600,
- *   header: {
- *     title: 'Edit User',
- *     onClose: handleClose
- *   },
- *   body: {
- *     children: <UserForm />,
- *     loading: isLoading
- *   },
- *   footer: {
- *     primaryButton: {
- *       label: 'Save',
- *       onClick: handleSave
- *     },
- *     secondaryButton: {
- *       label: 'Cancel',
- *       onClick: handleClose
- *     }
- *   }
- * });
- *
- * return (
- *   <>
- *     <Button onClick={drawer.openDrawer}>Open</Button>
- *     {drawer.compositeDrawer}
- *   </>
- * );
- * ```
- */
 export const useCompositeDrawer = (config: CompositeDrawerConfig = {}) => {
   const {
     header = {},
@@ -78,7 +35,6 @@ export const useCompositeDrawer = (config: CompositeDrawerConfig = {}) => {
 
   const baseDrawer = useDrawer(drawerConfig);
 
-  // Create a wrapped close function that calls onBeforeClose first
   const handleClose = useCallback(() => {
     onBeforeClose?.();
     if (header.onClose) {
@@ -97,11 +53,11 @@ export const useCompositeDrawer = (config: CompositeDrawerConfig = {}) => {
 
   const drawerContent = useMemo(
     () => (
-      <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <>
         {drawerHeader}
         {drawerBody}
         {drawerFooter}
-      </Box>
+      </>
     ),
     [drawerHeader, drawerBody, drawerFooter]
   );
@@ -110,57 +66,24 @@ export const useCompositeDrawer = (config: CompositeDrawerConfig = {}) => {
     const DrawerComponent = baseDrawer.drawer;
     const Component = DrawerComponent.type;
 
-    return <Component {...DrawerComponent.props} children={drawerContent} />;
+    return <Component {...DrawerComponent.props}>{drawerContent}</Component>;
   }, [baseDrawer.drawer, drawerContent]);
 
-  // Override closeDrawer to call onBeforeClose
   const closeDrawer = useCallback(() => {
     onBeforeClose?.();
     baseDrawer.closeDrawer();
   }, [onBeforeClose, baseDrawer.closeDrawer]);
 
   return {
     ...baseDrawer,
-    closeDrawer, // Override with our version that calls onBeforeClose
+    closeDrawer,
     compositeDrawer,
     drawerHeader,
     drawerBody,
     drawerFooter,
   };
 };
 
-/**
- * Simplified composite drawer with render prop pattern
- *
- * @description
- * Alternative API using render props for more flexibility
- *
- * @example
- * ```typescript
- * const drawer = useCompositeDrawerWithRender({
- *   anchor: 'right',
- *   width: 500,
- *   render: ({ closeDrawer }) => ({
- *     header: {
- *       title: 'Settings',
- *       onClose: closeDrawer
- *     },
- *     body: {
- *       children: <SettingsForm />
- *     },
- *     footer: {
- *       primaryButton: {
- *         label: 'Apply',
- *         onClick: () => {
- *           applySettings();
- *           closeDrawer();
- *         }
- *       }
- *     }
- *   })
- * });
- * ```
- */
 export const useCompositeDrawerWithRender = (
   config: Omit<CompositeDrawerConfig, 'header' | 'body' | 'footer'> & {
     render: (actions: {