Migrated mui components with untitled-ui

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

@@ -1,6 +1,6 @@
-import { type FC, type ReactNode, useState } from 'react';
-import { User01 } from '@untitledui/icons';
 import { cx } from '@/utils/cx';
+import { User01 } from '@untitledui/icons';
+import { type CSSProperties, type FC, type ReactNode, useState } from 'react';
 import { AvatarOnlineIndicator, VerifiedTick } from './base-components';
 
 type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -49,6 +49,7 @@ export interface AvatarProps {
    * @default false
    */
   focusable?: boolean;
+  style?: CSSProperties;
 }
 
 const styles = {
@@ -102,6 +103,7 @@ export const Avatar = ({
   verified,
   focusable = false,
   className,
+  style,
 }: AvatarProps) => {
   const [isFailed, setIsFailed] = useState(false);
 
@@ -128,9 +130,7 @@ export const Avatar = ({
 
     if (PlaceholderIcon) {
       return (
-        <PlaceholderIcon
-          className={cx('tw:text-fg-quaternary', styles[size].icon)}
-        />
+        <PlaceholderIcon className={cx('tw:text-current', styles[size].icon)} />
       );
     }
 
@@ -177,7 +177,8 @@ export const Avatar = ({
         contrastBorder && 'tw:outline tw:outline-avatar-contrast-border',
         styles[size].root,
         className
-      )}>
+      )}
+      style={style}>
       {renderMainContent()}
       {renderBadgeContent()}
     </div>

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ColumnBulkOperations.spec.ts

@@ -238,16 +238,11 @@ test.describe('Column Bulk Operations - Filters & Search', () => {
     });
 
     await test.step('Verify filter chip is displayed', async () => {
-      const metadataStatusChip = page.locator('.filter-selection-chip').filter({
-        has: page.locator('.filter-selection-value', {
-          hasText: /Missing|MISSING/,
-        }),
-      });
+      const metadataStatusChip = page.getByTestId('filter-chip-metadataStatus');
 
       await expect(metadataStatusChip).toBeVisible();
-      await expect(
-        metadataStatusChip.locator('.filter-selection-label')
-      ).toContainText('Has / Missing Metadata');
+      await expect(metadataStatusChip).toContainText('Has / Missing Metadata');
+      await expect(metadataStatusChip).toContainText(/Missing|MISSING/);
     });
   });
 
@@ -280,16 +275,13 @@ test.describe('Column Bulk Operations - Filters & Search', () => {
     });
 
     await test.step('Verify filter chip is restored', async () => {
-      const metadataStatusChip = page.locator('.filter-selection-chip').filter({
-        has: page.locator('.filter-selection-value', {
-          hasText: /Inconsistent|INCONSISTENT/,
-        }),
-      });
+      const metadataStatusChip = page.getByTestId('filter-chip-metadataStatus');
 
       await expect(metadataStatusChip).toBeVisible();
-      await expect(
-        metadataStatusChip.locator('.filter-selection-label')
-      ).toContainText('Has / Missing Metadata');
+      await expect(metadataStatusChip).toContainText('Has / Missing Metadata');
+      await expect(metadataStatusChip).toContainText(
+        /Inconsistent|INCONSISTENT/
+      );
     });
   });
 
@@ -364,13 +356,10 @@ test.describe('Column Bulk Operations - Filters & Search', () => {
     });
 
     await test.step('Verify filter chip is present', async () => {
-      const metadataStatusChip = page.locator('.filter-selection-chip').filter({
-        has: page.locator('.filter-selection-value', {
-          hasText: /Missing|MISSING/,
-        }),
-      });
+      const metadataStatusChip = page.getByTestId('filter-chip-metadataStatus');
 
       await expect(metadataStatusChip).toBeVisible();
+      await expect(metadataStatusChip).toContainText(/Missing|MISSING/);
     });
 
     await test.step('Deselect the MISSING filter', async () => {
@@ -384,13 +373,9 @@ test.describe('Column Bulk Operations - Filters & Search', () => {
     });
 
     await test.step('Verify filter chip removed and URL updated', async () => {
-      const metadataStatusChip = page.locator('.filter-selection-chip').filter({
-        has: page.locator('.filter-selection-value', {
-          hasText: /Missing|MISSING/,
-        }),
-      });
-
-      await expect(metadataStatusChip).not.toBeVisible();
+      await expect(
+        page.getByTestId('filter-chip-metadataStatus')
+      ).not.toBeVisible();
       expect(page.url()).not.toContain('metadataStatus=MISSING');
     });
   });
@@ -484,16 +469,13 @@ test.describe('Column Bulk Operations - Filters & Search', () => {
     });
 
     await test.step('Verify service chip is visible', async () => {
-      const serviceChip = page.locator('.filter-selection-chip').filter({
-        has: page.locator('.filter-selection-value', {
-          hasText: 'sample_data',
-        }),
-      });
+      const serviceChip = page.getByTestId(
+        'filter-chip-service.displayName.keyword'
+      );
 
       await expect(serviceChip).toBeVisible();
-      await expect(
-        serviceChip.locator('.filter-selection-label')
-      ).toContainText('Service');
+      await expect(serviceChip).toContainText('Service');
+      await expect(serviceChip).toContainText('sample_data');
     });
   });
 });

openmetadata-ui/src/main/resources/ui/src/components/DataProduct/hooks/useDataProductListingData.tsx

@@ -11,8 +11,7 @@
  *  limitations under the License.
  */
 
-import { Box, Typography } from '@mui/material';
-import { Avatar } from '@openmetadata/ui-core-components';
+import { Avatar, Typography } from '@openmetadata/ui-core-components';
 import { useCallback, useMemo } from 'react';
 import { TABLE_CARD_PAGE_SIZE } from '../../../constants/constants';
 import {
@@ -21,9 +20,12 @@ import {
 } from '../../../constants/DataProduct.constants';
 import { SearchIndex } from '../../../enums/search.enum';
 import { DataProduct } from '../../../generated/entity/domains/dataProduct';
-import { TagSource } from '../../../generated/type/tagLabel';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { getEntityAvatarProps } from '../../../utils/IconUtils';
+import {
+  getClassificationTags,
+  getGlossaryTags,
+} from '../../../utils/TagsUtils';
 import { useListingData } from '../../common/atoms/compositions/useListingData';
 import {
   CellRenderer,
@@ -35,21 +37,6 @@ export const useDataProductListingData = (): ListingData<DataProduct> => {
   const filterKeys = useMemo(() => DATAPRODUCT_DEFAULT_QUICK_FILTERS, []);
   const filterConfigs = useMemo(() => DATAPRODUCT_FILTERS, []);
 
-  const getGlossaryTags = useCallback(
-    (dataProduct: DataProduct) =>
-      dataProduct.tags?.filter((tag) => tag.source === TagSource.Glossary) ||
-      [],
-    []
-  );
-
-  const getClassificationTags = useCallback(
-    (dataProduct: DataProduct) =>
-      dataProduct.tags?.filter(
-        (tag) => tag.source === TagSource.Classification
-      ) || [],
-    []
-  );
-
   const getDomains = useCallback(
     (dataProduct: DataProduct) => dataProduct.domains || [],
     []
@@ -68,7 +55,7 @@ export const useDataProductListingData = (): ListingData<DataProduct> => {
         key: 'glossaryTerms',
         labelKey: 'label.glossary-term-plural',
         render: 'tags',
-        getValue: getGlossaryTags,
+        getValue: (dp: DataProduct) => getGlossaryTags(dp.tags),
       },
       {
         key: 'domains',
@@ -80,11 +67,11 @@ export const useDataProductListingData = (): ListingData<DataProduct> => {
         key: 'classificationTags',
         labelKey: 'label.tag-plural',
         render: 'tags',
-        getValue: getClassificationTags,
+        getValue: (dp: DataProduct) => getClassificationTags(dp.tags),
       },
       { key: 'experts', labelKey: 'label.expert-plural', render: 'owners' },
     ],
-    [getGlossaryTags, getClassificationTags, getDomains]
+    [getDomains]
   );
 
   const renderers: CellRenderer<DataProduct> = useMemo(
@@ -97,30 +84,21 @@ export const useDataProductListingData = (): ListingData<DataProduct> => {
           entity.displayName !== entity.name;
 
         return (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          <div className="tw:flex tw:items-center tw:gap-1.5">
             <Avatar size="lg" {...getEntityAvatarProps(entity)} />
-            <Box>
-              <Typography
-                sx={{
-                  fontWeight: 500,
-                  color: 'text.primary',
-                  fontSize: '1rem',
-                  lineHeight: '24px',
-                }}>
+            <div>
+              <Typography className="tw:leading-5" weight="medium">
                 {entityName}
               </Typography>
               {showName && (
                 <Typography
-                  sx={{
-                    fontSize: '0.75rem',
-                    color: 'text.secondary',
-                    lineHeight: '16px',
-                  }}>
+                  className="tw:leading-4 tw:text-gray-700"
+                  size="text-xs">
                   {entity.name}
                 </Typography>
               )}
-            </Box>
-          </Box>
+            </div>
+          </div>
         );
       },
     }),

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

@@ -857,7 +857,6 @@ const DomainDetails = ({
   const iconData = useMemo(() => {
     return (
       <Avatar
-        className="entity-header-avatar"
         size={isTreeView ? 'md' : '2xl'}
         {...getEntityAvatarProps({ ...domain, entityType: 'domain' })}
       />

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Chip, Typography } from '@mui/material';
+import { BadgeWithIcon, Typography } from '@openmetadata/ui-core-components';
 import { Cube01, Database01, Users01 } from '@untitledui/icons';
 
 const EMPTY_VALUE_INDICATOR = '-';
@@ -24,37 +24,37 @@ export const DomainTypeChip = ({ domainType }: DomainTypeChipProps) => {
   switch (domainType) {
     case 'Consumer-aligned':
       return (
-        <Chip
-          color="primary"
-          icon={<Users01 size={12} />}
-          label="Consumer-aligned"
-          size="small"
-          variant="outlined"
-        />
+        <BadgeWithIcon
+          color="brand"
+          iconLeading={Users01}
+          size="sm"
+          type="color">
+          Consumer-aligned
+        </BadgeWithIcon>
       );
     case 'Source-aligned':
       return (
-        <Chip
-          color="primary"
-          icon={<Cube01 size={12} />}
-          label="Source-aligned"
-          size="small"
-          variant="outlined"
-        />
+        <BadgeWithIcon
+          color="brand"
+          iconLeading={Cube01}
+          size="sm"
+          type="color">
+          Source-aligned
+        </BadgeWithIcon>
       );
     case 'Aggregate':
       return (
-        <Chip
-          color="primary"
-          icon={<Database01 size={12} />}
-          label="Aggregate"
-          size="small"
-          variant="outlined"
-        />
+        <BadgeWithIcon
+          color="brand"
+          iconLeading={Database01}
+          size="sm"
+          type="color">
+          Aggregate
+        </BadgeWithIcon>
       );
     default:
       return (
-        <Typography sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
+        <Typography className="tw:text-gray-700" size="text-xs">
           {EMPTY_VALUE_INDICATOR}
         </Typography>
       );

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/CreateUser/CreateUser.test.tsx

@@ -55,6 +55,20 @@ jest.mock('../../../../rest/auth-API', () => ({
   generateRandomPwd: jest.fn().mockResolvedValue('randomPassword123!'),
 }));
 
+jest.mock('@openmetadata/ui-core-components', () => ({
+  Tooltip: jest.fn().mockImplementation(({ children }) => <>{children}</>),
+  TooltipTrigger: jest
+    .fn()
+    .mockImplementation(({ children }) => <>{children}</>),
+  ButtonUtility: jest
+    .fn()
+    .mockImplementation(({ icon, onClick, 'data-testid': testId }) => (
+      <button data-testid={testId} onClick={onClick}>
+        {icon}
+      </button>
+    )),
+}));
+
 jest.mock('../../Team/TeamsSelectable/TeamsSelectable', () => {
   return jest.fn().mockReturnValue(<p>TeamsSelectable component</p>);
 });