chore(ui): migrate data asset select list to untitled

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

@@ -1,6 +1,7 @@
 import type { IconComponentType } from '@/components/base/badges/badge-types';
 import { HintText } from '@/components/base/input/hint-text';
 import { Label } from '@/components/base/input/label';
+import type { PopoverProps } from '@/components/base/select/popover';
 import { Popover } from '@/components/base/select/popover';
 import {
   type SelectItemType,
@@ -109,6 +110,7 @@ export interface AutocompleteProps
   onSearchChange?: (value: string) => void;
   maxVisibleItems?: number;
   multiple?: boolean;
+  popoverProps?: Partial<Omit<PopoverProps, 'size' | 'className'>>;
   allowsCreation?: boolean;
   hideDropdown?: boolean;
 }
@@ -363,6 +365,7 @@ export const AutocompleteBase = ({
   hideDropdown = false,
   name: _name,
   className: _className,
+  popoverProps,
   ...props
 }: AutocompleteProps) => {
   const { contains } = useFilter({ sensitivity: 'base' });
@@ -549,6 +552,7 @@ export const AutocompleteBase = ({
 
               {!hideDropdown && (
                 <Popover
+                  {...popoverProps}
                   className={popoverClassName}
                   size="md"
                   style={{ width: popoverWidth }}

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

@@ -10,8 +10,8 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import type { HTMLAttributes, ReactNode } from 'react';
 import { cx } from '@/utils/cx';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 type Gap = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12';
 
@@ -111,15 +111,15 @@ export const GridItem = ({
   ...props
 }: GridItemProps) => {
   const clampedStart =
-    start !== undefined ? clamp(start, 1, GRID_COLUMNS) : undefined;
+    start === undefined ? undefined : clamp(start, 1, GRID_COLUMNS);
   const maxSpan =
-    clampedStart !== undefined ? GRID_COLUMNS - clampedStart + 1 : GRID_COLUMNS;
+    clampedStart === undefined ? GRID_COLUMNS : GRID_COLUMNS - clampedStart + 1;
   const clampedSpan = clamp(span, 1, maxSpan);
 
   const gridColumn =
-    clampedStart !== undefined
-      ? `${clampedStart} / span ${clampedSpan}`
-      : `span ${clampedSpan}`;
+    clampedStart === undefined
+      ? `span ${clampedSpan}`
+      : `${clampedStart} / span ${clampedSpan}`;
 
   return (
     <div {...props} className={cx(className)} style={{ gridColumn, ...style }}>

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

@@ -1,9 +1,11 @@
+import { cx } from '@/utils/cx';
 import type { RefAttributes } from 'react';
 import type { PopoverProps as AriaPopoverProps } from 'react-aria-components';
 import { Popover as AriaPopover } from 'react-aria-components';
-import { cx } from '@/utils/cx';
 
-interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
+export interface PopoverProps
+  extends AriaPopoverProps,
+    RefAttributes<HTMLElement> {
   size: 'sm' | 'md';
 }
 

openmetadata-ui/src/main/resources/ui/index.html

@@ -154,8 +154,8 @@
         background: #fafafa;
         display: flex;
         flex-direction: column;
-        font-family:
-          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          sans-serif;
         color: #535862;
         z-index: 0;
       }
@@ -289,13 +289,20 @@
         </div>
         <div class="om-boot-shell__body">
           <aside class="om-boot-shell__sidebar">
-            <div class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
-            <div class="om-boot-shell__skeleton om-boot-shell__skeleton--short"></div>
-            <div class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
-            <div class="om-boot-shell__skeleton om-boot-shell__skeleton--short"></div>
-            <div class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
-            <div class="om-boot-shell__skeleton om-boot-shell__skeleton--short"></div>
-            <div class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
+            <div
+              class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
+            <div
+              class="om-boot-shell__skeleton om-boot-shell__skeleton--short"></div>
+            <div
+              class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
+            <div
+              class="om-boot-shell__skeleton om-boot-shell__skeleton--short"></div>
+            <div
+              class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
+            <div
+              class="om-boot-shell__skeleton om-boot-shell__skeleton--short"></div>
+            <div
+              class="om-boot-shell__skeleton om-boot-shell__skeleton--medium"></div>
           </aside>
           <main class="om-boot-shell__main">
             <div class="om-boot-shell__title"></div>

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

@@ -589,7 +589,11 @@ ALL_ENTITIES.forEach(({ key, makeInstance }) => {
               user.getUserName()
             )}*`;
             const searchResponse = page.waitForResponse(searchApi);
-            await page.locator('#entityReference').clear();
+            // Remove existing selections if any
+            await page
+              .getByTestId('asset-select-list')
+              .getByRole('button')
+              .click();
             await page.locator('#entityReference').fill(user.getUserName());
             await searchResponse;
             await page

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

@@ -104,7 +104,7 @@
   );
   await page.click('[data-testid="tags-container"] [data-testid="add-tag"]');
 
   await page.waitForSelector('[data-testid="tag-selector"] input', {
     state: 'visible',
   });
   const searchTagResponse = page.waitForResponse(
@@ -144,12 +144,9 @@
     .first()
     .click();
 
-  await page.waitForSelector(
-    '[data-testid="asset-select-list"] > .ant-select-selector input',
-    { state: 'visible' }
-  );
+  await page.locator('[data-testid="asset-select-list"] input').waitFor();
   await page.fill(
-    '[data-testid="asset-select-list"] > .ant-select-selector input',
+    '[data-testid="asset-select-list"] input',
     dataAsset.entity.name
   );
   await page
@@ -162,9 +159,7 @@
   const response = await updateKnowledgePage;
   expect(response.status()).toBe(200);
 
-  await page.waitForSelector(`[data-testid="${dataAsset.entity.name}"]`, {
-    state: 'visible',
-  });
+  await page.getByTestId(`asset-select-list`).locator(`input`).waitFor();
   await page.click(`[data-testid="${dataAsset.entity.name}"]`);
 
   await page.getByRole('link', { name: title }).click();
@@ -349,7 +344,7 @@
   await hierarchyElement.hover();
   await page.mouse.wheel(0, -9999);
 
   await page.waitForTimeout(500);
 
   // Retry mechanism for pagination
   let elementCount = await article.count();
@@ -359,7 +354,7 @@
   while (elementCount === 0 && retryCount < maxRetries) {
     await page.locator('[data-testid="knowledge-pages-hierarchy"]').hover();
     await page.mouse.wheel(0, 500);
     await page.waitForTimeout(500);
 
     // Create fresh locator and check if the article is now visible after this retry
     const freshArticle = page.getByTestId(`page-node-${articleTitle}`);
@@ -390,7 +385,7 @@
 
   // Click on Conversations tab
   await page.getByRole('tab', { name: 'Conversations' }).click();
   await page.waitForSelector('[data-testid="editor-wrapper"]');
 
   // Create message with mention
   const messageWithMention = `${message} @${userName}`;
@@ -433,7 +428,7 @@
   await page.locator('[data-testid="task-notifications"]').click();
 
   // Wait for notification dropdown to appear
   await page.waitForSelector('[data-testid="notification-heading"]', {
     state: 'visible',
   });
 
@@ -544,12 +539,12 @@
 export const getEditor = async (page: Page, waitForWrapper = false) => {
   if (waitForWrapper) {
     await waitForAllLoadersToDisappear(page);
     await page.waitForSelector('#block-editor-wrapper', {
       state: 'visible',
     });
   }
 
   await page.waitForSelector('.ProseMirror[contenteditable="true"]', {
     state: 'visible',
   });
   return page.locator('.ProseMirror[contenteditable="true"]').first();
@@ -663,7 +658,7 @@
   if (isInCode) {
     await page.keyboard.press(SHORTCUTS.selectWord);
 
     await page.waitForSelector('.menu-wrapper', {
       state: 'visible',
     });
 
@@ -687,7 +682,7 @@
 
   await selectLastWord(page, linkText.split(' ').length, editor);
 
   await page.waitForSelector('.menu-wrapper', {
     state: 'visible',
   });
 
@@ -845,7 +840,7 @@
   const taskItem = editor.locator('li').filter({ hasText: taskText });
   const checkbox = taskItem.locator('input[type="checkbox"]');
   await checkbox.click();
   await page.waitForTimeout(100);
 };
 
 export const createCallout = async (

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

@@ -236,7 +236,7 @@ export const setValueForProperty = async (data: {
           val
         )}*`;
         await page.route(searchApi, (route) => route.continue());
-        await container.locator('#entityReference').clear();
+        await page.getByTestId('asset-select-list').getByRole('button').click();
         const searchEntity = page.waitForResponse(searchApi);
         await container.locator('#entityReference').fill(val);
         await searchEntity;
@@ -1411,7 +1411,7 @@ export const updateCustomPropertyInRightPanel = async (data: {
           val
         )}*`;
         await page.route(searchApi, (route) => route.continue());
-        await page.locator('#entityReference').clear();
+        await page.getByTestId('asset-select-list').getByRole('button').click();
         const searchEntity = page.waitForResponse(searchApi);
         await page.locator('#entityReference').fill(val);
         await searchEntity;

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

@@ -155,25 +155,22 @@ export const updateRelatedMetric = async (
   }
 
   await page
-    .locator('[data-testid="asset-select-list"] > .ant-select-selector input')
+    .locator('[data-testid="asset-select-list"] input')
     .waitFor({ state: 'visible' });
 
   const apiPromise = page.waitForResponse(
     '/api/v1/search/query?q=*&index=metric&*'
   );
 
   await page.fill(
-    '[data-testid="asset-select-list"] > .ant-select-selector input',
+    '[data-testid="asset-select-list"] input',
     dataAsset.entity.name
   );
 
   await apiPromise;
 
-  await page
-    .locator('.ant-select-item-option-content', {
-      hasText: dataAsset.entity.name,
-    })
-    .click();
+  await page.getByTestId(`option-${dataAsset.entity.name}`).waitFor();
+  await page.getByTestId(`option-${dataAsset.entity.name}`).click();
 
   // perform click outside to close the select options and make click to button
   await clickOutside(page);

openmetadata-ui/src/main/resources/ui/public/app-worker.js

@@ -119,7 +119,9 @@ self.addEventListener('activate', (event) => {
         .then((names) =>
           Promise.all(
             names
-              .filter((name) => name.startsWith('om-assets-') && name !== ASSET_CACHE)
+              .filter(
+                (name) => name.startsWith('om-assets-') && name !== ASSET_CACHE
+              )
               .map((name) => caches.delete(name))
           )
         ),

openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericTab/DynamicHeightWidget.test.tsx

@@ -186,10 +186,7 @@ describe('DynamicHeightWidget', () => {
       resizeCallback([{ contentRect: { height: 0 } }]);
 
       // (0 + GRID_VERTICAL_MARGIN) / (GRID_ROW_HEIGHT + GRID_VERTICAL_MARGIN) = 16/116
-      expect(mockOnHeightChange).toHaveBeenCalledWith(
-        'test-widget',
-        16 / 116
-      );
+      expect(mockOnHeightChange).toHaveBeenCalledWith('test-widget', 16 / 116);
     });
 
     it('handles very large height values', () => {

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.interface.ts

@@ -10,15 +10,20 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { DefaultOptionType } from 'antd/lib/select';
+import type {
+  PopoverProps,
+  SelectItemType,
+} from '@openmetadata/ui-core-components';
 import { CSSProperties } from 'react';
 import { SearchIndex } from '../../../enums/search.enum';
 import { EntityReference } from '../../../generated/entity/type';
 import { Paging } from '../../../generated/type/paging';
 
-export interface DataAssetOption extends DefaultOptionType {
+export interface DataAssetOption extends SelectItemType {
   reference: EntityReference;
   displayName: string;
+  name?: string;
+  value: string;
 }
 
 export interface FetchOptionsResponse {
@@ -27,17 +32,18 @@ export interface FetchOptionsResponse {
 }
 
 export interface DataAssetAsyncSelectListProps {
-  mode?: 'multiple';
+  multiple?: boolean;
   autoFocus?: boolean;
   id?: string;
   className?: string;
   placeholder?: string;
+  popoverClassName?: string;
+  popoverProps?: Partial<PopoverProps>;
   value?: DataAssetOption | DataAssetOption[] | string | string[];
   debounceTimeout?: number;
-  defaultValue?: string[];
   initialOptions?: DataAssetOption[];
   searchIndex?: SearchIndex;
-  onChange?: (option: DataAssetOption | DataAssetOption[]) => void;
+  onChange?: (option: DataAssetOption | DataAssetOption[] | null) => void;
   filterFqns?: string[];
   queryFilter?: Record<string, unknown>;
   popupClassName?: string;