fix design issues with input/output port feature

openmetadata-ui/src/main/resources/ui/playwright/support/domain/DataProduct.ts

@@ -19,12 +19,23 @@ import { EntityTypeEndpoint } from '../entity/Entity.interface';
 import { EntityClass } from '../entity/EntityClass';
 import { Domain } from './Domain';
 import { SubDomain } from './SubDomain';
+import { getEncodedFqn } from '../../utils/entity';
 
 type UserTeamRef = {
   name: string;
   type: string;
 };
 
+export type AssetReference = {
+  id: string;
+  type: string;
+  name?: string;
+  displayName?: string;
+  fullyQualifiedName?: string;
+  description?: string;
+  deleted?: boolean;
+};
+
 type ResponseDataType = {
   name: string;
   displayName: string;
@@ -113,17 +124,36 @@ export class DataProduct extends EntityClass {
 
     return response.body;
   }
-
+  
   private getFqn() {
-    return this.responseData?.fullyQualifiedName ?? this.data.name;
+    return this.data?.fullyQualifiedName ?? this.data.name;
+  }
+
+  async addAssets(
+    apiContext: APIRequestContext,
+    assets: AssetReference[]
+  ) {
+    const response = await apiContext.put(
+      `/api/v1/dataProducts/${encodeURIComponent(
+        this.getFqn()
+      )}/assets/add`,
+      {
+        data: { assets },
+      }
+    );
+
+    const data = await response.json();
+    this.responseData = data;
+
+    return data;
   }
 
   async addInputPorts(
     apiContext: APIRequestContext,
     assets: { id: string; type: string }[]
   ) {
     const response = await apiContext.put(
-      `/api/v1/dataProducts/name/${encodeURIComponent(
+      `/api/v1/dataProducts/name/${getEncodedFqn(
         this.getFqn()
       )}/inputPorts/add`,
       {
@@ -139,7 +169,7 @@ export class DataProduct extends EntityClass {
     assets: { id: string; type: string }[]
   ) {
     const response = await apiContext.put(
-      `/api/v1/dataProducts/name/${encodeURIComponent(
+      `/api/v1/dataProducts/name/${getEncodedFqn(
         this.getFqn()
       )}/outputPorts/add`,
       {
@@ -155,7 +185,7 @@ export class DataProduct extends EntityClass {
     assets: { id: string; type: string }[]
   ) {
     const response = await apiContext.put(
-      `/api/v1/dataProducts/name/${encodeURIComponent(
+      `/api/v1/dataProducts/name/${getEncodedFqn(
         this.getFqn()
       )}/inputPorts/remove`,
       {
@@ -171,7 +201,7 @@ export class DataProduct extends EntityClass {
     assets: { id: string; type: string }[]
   ) {
     const response = await apiContext.put(
-      `/api/v1/dataProducts/name/${encodeURIComponent(
+      `/api/v1/dataProducts/name/${getEncodedFqn(
         this.getFqn()
       )}/outputPorts/remove`,
       {
@@ -197,7 +227,7 @@ export class DataProduct extends EntityClass {
       queryParams.set('fields', params.fields);
     }
     const queryString = queryParams.toString();
-    const url = `/api/v1/dataProducts/name/${encodeURIComponent(
+    const url = `/api/v1/dataProducts/name/${getEncodedFqn(
       this.getFqn()
     )}/inputPorts${queryString ? `?${queryString}` : ''}`;
 
@@ -221,7 +251,7 @@ export class DataProduct extends EntityClass {
       queryParams.set('fields', params.fields);
     }
     const queryString = queryParams.toString();
-    const url = `/api/v1/dataProducts/name/${encodeURIComponent(
+    const url = `/api/v1/dataProducts/name/${getEncodedFqn(
       this.getFqn()
     )}/outputPorts${queryString ? `?${queryString}` : ''}`;
 
@@ -253,7 +283,7 @@ export class DataProduct extends EntityClass {
       queryParams.set('outputOffset', params.outputOffset.toString());
     }
     const queryString = queryParams.toString();
-    const url = `/api/v1/dataProducts/name/${encodeURIComponent(
+    const url = `/api/v1/dataProducts/name/${getEncodedFqn(
       this.getFqn()
     )}/portsView${queryString ? `?${queryString}` : ''}`;
 

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

@@ -1279,7 +1279,13 @@ export const navigateToSubDomain = async (
  * Navigates to the Input/Output Ports tab on a data product page.
  */
 export const navigateToPortsTab = async (page: Page) => {
+  await page.waitForTimeout(2000);
+
+  const portsViewResponse = page.waitForResponse(
+    (response) => response.url().includes('/portsView')
+  );
   await page.getByTestId('input_output_ports').click();
+  await portsViewResponse;
   await waitForAllLoadersToDisappear(page);
 };
 
@@ -1338,6 +1344,10 @@ export const addInputPortToDataProduct = async (
   const fqn = get(asset, 'entityResponseData.fullyQualifiedName');
   const displayName = get(asset, 'entityResponseData.displayName') ?? name;
 
+  await expect(page.getByTestId('add-input-port-button')).toBeEnabled({
+    timeout: 10000
+  });
+
   await page.getByTestId('add-input-port-button').click();
 
   await page.waitForSelector('[data-testid="asset-selection-modal"]', {
@@ -1377,6 +1387,10 @@ export const addOutputPortToDataProduct = async (
   const fqn = get(asset, 'entityResponseData.fullyQualifiedName');
   const displayName = get(asset, 'entityResponseData.displayName') ?? name;
 
+  await expect(page.getByTestId('add-output-port-button')).toBeEnabled({
+    timeout: 10000
+  });
+
   await page.getByTestId('add-output-port-button').click();
 
   await page.waitForSelector('[data-testid="asset-selection-modal"]', {

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

@@ -20,8 +20,10 @@ interface AssetSelectionDrawerProps {
   type?: AssetsOfEntity;
   queryFilter?: QueryFilterInterface;
   emptyPlaceHolderText?: string;
+  infoBannerText?: string;
   onSave?: () => void;
   onCancel: () => void;
+  title?: string;
 }
 
 export const AssetSelectionDrawer = ({
@@ -30,16 +32,20 @@ export const AssetSelectionDrawer = ({
   type = AssetsOfEntity.GLOSSARY,
   queryFilter,
   emptyPlaceHolderText,
+  infoBannerText,
   onSave,
   onCancel,
+  title,
 }: AssetSelectionDrawerProps) => {
   return useAssetSelectionDrawer({
     entityFqn,
     open,
     type,
     queryFilter,
     emptyPlaceHolderText,
+    infoBannerText,
     onSave,
     onCancel,
+    title,
   });
 };

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

@@ -97,6 +97,7 @@ export interface AssetSelectionContentProps {
   onCancel?: () => void;
   queryFilter?: QueryFilterInterface;
   emptyPlaceHolderText?: string;
+  infoBannerText?: string;
 }
 
 export const useAssetSelectionContent = ({
@@ -108,6 +109,7 @@ export const useAssetSelectionContent = ({
   variant = 'modal',
   queryFilter,
   emptyPlaceHolderText,
+  infoBannerText,
 }: AssetSelectionContentProps) => {
   const { theme } = useApplicationStore();
   const { t } = useTranslation();
@@ -632,6 +634,8 @@ export const useAssetSelectionContent = ({
         />
       )}
 
+      {infoBannerText && <Alert showIcon message={infoBannerText} type="info" />}
+
       <div className="d-flex items-center gap-3">
         <div className="flex-1">
           <Searchbar

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

@@ -23,6 +23,8 @@ interface UseAssetSelectionDrawerProps {
   type?: AssetsOfEntity;
   queryFilter?: QueryFilterInterface;
   emptyPlaceHolderText?: string;
+  infoBannerText?: string;
+  title?: string;
   onSave?: () => void;
   onCancel: () => void;
 }
@@ -33,6 +35,8 @@ export const useAssetSelectionDrawer = ({
   type = AssetsOfEntity.GLOSSARY,
   queryFilter,
   emptyPlaceHolderText,
+  infoBannerText,
+  title,
   onSave,
   onCancel,
 }: UseAssetSelectionDrawerProps) => {
@@ -49,6 +53,7 @@ export const useAssetSelectionDrawer = ({
     type,
     queryFilter,
     emptyPlaceHolderText,
+    infoBannerText,
     open,
     variant: 'drawer',
     onSave: handleSave,
@@ -63,7 +68,8 @@ export const useAssetSelectionDrawer = ({
     testId: 'asset-selection-modal',
     onClose: onCancel,
     header: {
-      title: t('label.add-entity', { entity: t('label.asset-plural') }),
+      title:
+        title ?? t('label.add-entity', { entity: t('label.asset-plural') }),
       onClose: onCancel,
     },
     body: {