Fixed the component re-rendering issue which causes the Entity test failure (#27355)

* Fixed the component re-rendering issue which causes the Entity test failures

* fixed DataAssetsTest

* fixed loading issue

Author: Rohit0301

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

@@ -196,19 +196,19 @@ test.describe(
         ).toBeVisible();
 
         await page
-          .getByTestId('select-owner-tabs')
+          .getByRole('tabpanel', { name: /Users/ })
           .getByTestId('loader')
-          .waitFor({ state: 'detached' });
+          .waitFor({ state: 'hidden' });
 
         await page
           .locator("[data-testid='select-owner-tabs']")
           .getByRole('tab', { name: 'Teams' })
           .click();
 
         await page
-          .getByTestId('select-owner-tabs')
+          .getByRole('tabpanel', { name: 'Teams' })
           .getByTestId('loader')
-          .waitFor({ state: 'detached' });
+          .waitFor({ state: 'hidden' });
 
         const teamsSearchBar = page.getByTestId(
           'owner-select-teams-search-bar'

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

@@ -245,9 +245,16 @@ export const assignDomain = async (
   await waitForAllLoadersToDisappear(page);
 
   if (checkSelectedDomain) {
-    await expect(page.getByTestId('domain-link')).toContainText(
-      domain.displayName
-    );
+    const hasMultipleDomains = await page
+      .getByTestId('domain-count-button')
+      .isVisible();
+    if (hasMultipleDomains) {
+      await expect(page.getByTestId('domain-count-button')).toBeVisible();
+    } else {
+      await expect(page.getByTestId('domain-link')).toContainText(
+        domain.displayName
+      );
+    }
   }
 };
 
@@ -422,9 +429,17 @@ export const assignDataProduct = async (
   action: 'Add' | 'Edit' = 'Add',
   parentId = 'KnowledgePanel.DataProducts'
 ) => {
-  await expect(page.getByTestId('domain-link')).toContainText(
-    domain.displayName
-  );
+  const hasMultipleDomains = await page
+    .getByTestId('domain-count-button')
+    .isVisible();
+  if (hasMultipleDomains) {
+    await expect(page.getByTestId('domain-count-button')).toBeVisible();
+  } else {
+    await expect(page.getByTestId('domain-link')).toContainText(
+      domain.displayName
+    );
+  }
+
   await page
     .getByTestId(parentId)
     .getByTestId('data-products-container')

openmetadata-ui/src/main/resources/ui/src/components/common/EntitySelectableList/EntitySelectableList.component.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import { Popover } from 'antd';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ADD_USER_CONTAINER_HEIGHT } from '../../../constants/constants';
 import { EntityReference } from '../../../generated/entity/data/table';
 import { FocusTrapWithContainer } from '../FocusTrap/FocusTrapWithContainer';
@@ -30,6 +30,11 @@ export const EntitySelectableList = <T,>({
 }: EntitySelectableListProps<T>) => {
   const [popupVisible, setPopupVisible] = useState(false);
 
+  const selectedItemsAsEntityReferences = useMemo(
+    () => config.toEntityReference(selectedItems),
+    [selectedItems, config.toEntityReference]
+  );
+
   const handleUpdate = async (updateItems: EntityReference[]) => {
     const convertedItems = config.fromEntityReference(updateItems);
     await onUpdate(convertedItems);
@@ -49,7 +54,7 @@ export const EntitySelectableList = <T,>({
               multiSelect={multiSelect}
               searchBarDataTestId={config.searchBarDataTestId}
               searchPlaceholder={config.searchPlaceholder}
-              selectedItems={config.toEntityReference(selectedItems)}
+              selectedItems={selectedItemsAsEntityReferences}
               onCancel={onCancel}
               onUpdate={handleUpdate}
             />