From 5ab97b23e33976b96cf69f13d2555814c4d7d5a3 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Wed, 8 May 2024 14:20:13 +0530
Subject: [PATCH] minor: add value prop in data asset async select list
 (#16169)

* minor: add value prop in data asset async select list

* fix: icon
---
 .../DataAssetAsyncSelectList.interface.ts     |  1 +
 .../DataAssetAsyncSelectList.test.tsx         | 24 +++++++++++++++++++
 .../DataAssetAsyncSelectList.tsx              | 14 ++++++++++-
 .../CustomPropertyTable/PropertyValue.tsx     |  4 +++-
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.interface.ts
index 5f7a50a3e39..0fff5f6b9a1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.interface.ts
@@ -30,6 +30,7 @@ export interface DataAssetAsyncSelectListProps {
   id?: string;
   className?: string;
   placeholder?: string;
+  value?: DataAssetOption | DataAssetOption[] | string | string[];
   debounceTimeout?: number;
   defaultValue?: string[];
   initialOptions?: DataAssetOption[];
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.test.tsx
index 16ea1a3134f..0bafa87351d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.test.tsx
@@ -214,6 +214,30 @@ describe('DataAssetAsyncSelectList', () => {
     expect(screen.getByText(placeholder)).toBeInTheDocument();
   });
 
+  it("should render the default value when there's a default value and initial option", async () => {
+    const defaultValue = ['1'];
+    const initialOptions: DataAssetOption[] = [
+      {
+        displayName: 'Test',
+        label: 'Test',
+        reference: { id: '1', type: 'table' },
+        value: '1',
+      },
+    ];
+
+    await act(async () => {
+      render(
+        <DataAssetAsyncSelectList
+          defaultValue={defaultValue}
+          initialOptions={initialOptions}
+          mode="multiple"
+        />
+      );
+    });
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
   it("should render the default value when there's a value and initial option", async () => {
     const defaultValue = ['1'];
     const initialOptions: DataAssetOption[] = [
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.tsx
index 75c618eba9f..c16ae81d1eb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.tsx
@@ -12,7 +12,7 @@
  */
 import { Select, SelectProps, Space } from 'antd';
 import { AxiosError } from 'axios';
-import { debounce } from 'lodash';
+import { debounce, isArray, isString } from 'lodash';
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
 import { PAGE_SIZE } from '../../../constants/constants';
 import { EntityType } from '../../../enums/entity.enum';
@@ -40,6 +40,7 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
   debounceTimeout = 800,
   initialOptions,
   searchIndex = SearchIndex.ALL,
+  value: selectedValue,
   ...props
 }) => {
   const {
@@ -216,8 +217,18 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
     }
   };
 
+  const internalValue = useMemo(() => {
+    if (isString(selectedValue) || isArray(selectedValue)) {
+      return selectedValue as string | string[];
+    }
+    const selectedOption = selectedValue as DataAssetOption;
+
+    return selectedOption?.value as string;
+  }, [mode, selectedValue]);
+
   return (
     <Select
+      allowClear
       autoFocus
       showSearch
       data-testid="asset-select-list"
@@ -228,6 +239,7 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
       optionLabelProp="displayName"
       options={optionList}
       style={{ width: '100%' }}
+      value={internalValue}
       onBlur={() => {
         handlePageChange(1);
         setSearchValue('');
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
index 43fb0a9bb93..1aaeeffb204 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
@@ -738,7 +738,9 @@ export const PropertyValue: FC<PropertyValueProps> = ({
               <Button
                 className="entity-button flex-center p-0 m--ml-1"
                 icon={
-                  <div className="entity-button-icon m-r-xs">
+                  <div
+                    className="entity-button-icon m-r-xs"
+                    style={{ width: '18px', display: 'flex' }}>
                     {['user', 'team'].includes(item.type) ? (
                       <ProfilePicture
                         className="d-flex"