pass entity reference in autocomplete widget (#14423)

openmetadata-ui/src/main/resources/ui/src/components/DataAssetAsyncSelectList/DataAssetAsyncSelectList.test.tsx

@@ -21,6 +21,13 @@ jest.mock('../../rest/searchAPI');
 jest.mock('../../utils/TableUtils');
 jest.mock('../../utils/EntityUtils', () => ({
   getEntityName: jest.fn().mockReturnValue('Test'),
+  getEntityReferenceFromEntity: jest
+    .fn()
+    .mockImplementation((entity, type) => ({
+      ...entity,
+      entityType: undefined,
+      type: type,
+    })),
 }));
 jest.mock('../common/ProfilePicture/ProfilePicture', () => {
   return jest
@@ -68,6 +75,9 @@ const mockSearchAPIResponse = {
             name: 'test 1',
             fullyQualifiedName: 'test-1',
             entityType: 'table',
+            href: '',
+            description: '',
+            deleted: false,
           },
         },
         {
@@ -76,6 +86,9 @@ const mockSearchAPIResponse = {
             name: 'test 2',
             fullyQualifiedName: 'test-2',
             entityType: 'table',
+            href: '',
+            description: '',
+            deleted: false,
           },
         },
       ],
@@ -135,7 +148,10 @@ describe('DataAssetAsyncSelectList', () => {
     });
 
     const { container } = render(
-      <DataAssetAsyncSelectList searchIndex={SearchIndex.USER} />
+      <DataAssetAsyncSelectList
+        mode="multiple"
+        searchIndex={SearchIndex.USER}
+      />
     );
 
     await act(async () => {
@@ -153,8 +169,16 @@ describe('DataAssetAsyncSelectList', () => {
       {
         displayName: 'Test',
         label: 'Test',
-        reference: { id: '1', type: 'table' },
+        reference: {
-        value: '1',
+          id: '1',
+          type: 'table',
+          name: 'test 1',
+          deleted: false,
+          description: '',
+          fullyQualifiedName: 'test-1',
+          href: '',
+        },
+        value: 'test-1',
       },
     ];
 
@@ -180,7 +204,7 @@ describe('DataAssetAsyncSelectList', () => {
       });
     });
 
-    const option = screen.getByTestId('option-1');
+    const option = screen.getByTestId('option-test-1');
 
     await act(async () => {
       fireEvent.click(option);

openmetadata-ui/src/main/resources/ui/src/components/DataAssetAsyncSelectList/DataAssetAsyncSelectList.tsx

@@ -16,10 +16,15 @@ import { debounce } from 'lodash';
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
 import Loader from '../../components/Loader/Loader';
 import { PAGE_SIZE } from '../../constants/constants';
+import { EntityType } from '../../enums/entity.enum';
 import { SearchIndex } from '../../enums/search.enum';
+import { EntityReference } from '../../generated/entity/type';
 import { usePaging } from '../../hooks/paging/usePaging';
 import { searchQuery } from '../../rest/searchAPI';
-import { getEntityName } from '../../utils/EntityUtils';
+import {
+  getEntityName,
+  getEntityReferenceFromEntity,
+} from '../../utils/EntityUtils';
 import { getEntityIcon } from '../../utils/TableUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
@@ -70,13 +75,16 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
 
       const dataAssets = hits.map(({ _source }) => {
         const entityName = getEntityName(_source);
+        const entityRef = getEntityReferenceFromEntity(
+          _source as EntityReference,
+          _source.entityType as EntityType
+        );
 
         return {
           label: entityName,
-          value: _source.id,
+          value: _source.fullyQualifiedName,
           reference: {
-            id: _source.id ?? '',
+            ...entityRef,
-            type: _source.entityType,
           },
           displayName: entityName,
           name: _source.name,
@@ -184,6 +192,7 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
   );
 
   const handleChange: SelectProps['onChange'] = (values: string[], options) => {
+    if (mode) {
       const selectedOptions = (options as DataAssetOption[]).reduce(
         (acc, option) => {
           if (values.includes(option.value as string)) {
@@ -197,6 +206,9 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
 
       selectedDataAssetsRef.current = selectedOptions;
       onChange?.(selectedOptions);
+    } else {
+      onChange?.(options as DataAssetOption);
+    }
   };
 
   return (

openmetadata-ui/src/main/resources/ui/src/components/JsonSchemaWidgets/AsyncSelectWidget.tsx

@@ -16,16 +16,20 @@ import { SearchIndex } from '../../enums/search.enum';
 import DataAssetAsyncSelectList from '../DataAssetAsyncSelectList/DataAssetAsyncSelectList';
 import { DataAssetOption } from '../DataAssetAsyncSelectList/DataAssetAsyncSelectList.interface';
 
-const AsyncSelectWidget = ({ onChange, schema }: WidgetProps) => {
+const AsyncSelectWidget = ({ onChange, schema, ...props }: WidgetProps) => {
   const handleChange = (value: DataAssetOption | DataAssetOption[]) => {
+    if (Array.isArray(value)) {
       const data = value.map((item: DataAssetOption) => item.reference);
       onChange(data);
+    } else {
+      const data = value.reference;
+      onChange(data);
+    }
   };
 
   return (
     <DataAssetAsyncSelectList
-      defaultValue={schema.value}
+      defaultValue={props.value.fullyQualifiedName ?? ''}
-      mode="multiple"
       placeholder={schema.placeholder ?? ''}
       searchIndex={schema?.autoCompleteType ?? SearchIndex.TABLE}
       onChange={handleChange}