playwright improvement and remove usePaging hook from asynSelectListCompont (#23365)

(cherry picked from commit 131764db6b086bf804643c9d22745786e6539fd3)

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

@@ -11,56 +11,12 @@
  *  limitations under the License.
  */
 
-import { expect, Page, test as base } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { GlobalSettingOptions } from '../../constant/settings';
 import { SidebarItem } from '../../constant/sidebar';
-import { UserClass } from '../../support/user/UserClass';
-import { performAdminLogin } from '../../utils/admin';
 import { redirectToHomePage } from '../../utils/common';
 import { settingClick, sidebarClick } from '../../utils/sidebar';
-
-const adminUser = new UserClass();
-const dataConsumerUser = new UserClass();
-
-const test = base.extend<{
-  page: Page;
-  dataConsumerPage: Page;
-}>({
-  page: async ({ browser }, use) => {
-    const adminPage = await browser.newPage();
-    await adminUser.login(adminPage);
-    await use(adminPage);
-    await adminPage.close();
-  },
-  dataConsumerPage: async ({ browser }, use) => {
-    const page = await browser.newPage();
-    await dataConsumerUser.login(page);
-    await use(page);
-    await page.close();
-  },
-});
-
-base.beforeAll('Setup pre-requests', async ({ browser }) => {
-  test.slow(true);
-
-  const { apiContext, afterAction } = await performAdminLogin(browser);
-
-  await adminUser.create(apiContext);
-  await adminUser.setAdminRole(apiContext);
-  await dataConsumerUser.create(apiContext);
-
-  await afterAction();
-});
-
-base.afterAll('Cleanup', async ({ browser }) => {
-  test.slow(true);
-
-  const { apiContext, afterAction } = await performAdminLogin(browser);
-  await adminUser.delete(apiContext);
-  await dataConsumerUser.delete(apiContext);
-
-  await afterAction();
-});
+import { test } from '../fixtures/pages';
 
 test.describe('Online Users Feature', () => {
   test.beforeEach(async ({ page }) => {

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

@@ -176,13 +176,4 @@ test.describe('User Profile Online Status', () => {
     await expect(onlineStatusBadge).toBeVisible();
     await expect(onlineStatusBadge).toContainText(/Online now|Active recently/);
   });
-
-  test.afterAll('Cleanup', async ({ browser }) => {
-    const { afterAction, apiContext } = await createNewPage(browser);
-
-    // Delete test users
-    await activeUser.delete(apiContext);
-    await inactiveUser.delete(apiContext);
-    await afterAction();
-  });
 });

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

@@ -14,10 +14,11 @@ import { Select, SelectProps, Space } from 'antd';
 import { AxiosError } from 'axios';
 import { debounce, isArray, isString } from 'lodash';
 import { FC, useCallback, useMemo, useRef, useState } from 'react';
+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 { Paging } from '../../../generated/type/paging';
 import { searchQuery } from '../../../rest/searchAPI';
 import {
   getEntityName,
@@ -44,13 +45,8 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
   filterFqns = [],
   ...props
 }) => {
-  const {
-    currentPage,
-    handlePagingChange,
-    handlePageChange,
-    paging,
-    pageSize,
-  } = usePaging();
+  const [paging, setPaging] = useState<Paging>({} as Paging);
+  const [currentPage, setCurrentPage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const [hasContentLoading, setHasContentLoading] = useState(false);
   const [options, setOptions] = useState<DataAssetOption[]>(
@@ -67,7 +63,7 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
       const dataAssetsResponse = await searchQuery({
         query: searchQueryParam ? `*${searchQueryParam}*` : '*',
         pageNumber: page,
-        pageSize: pageSize,
+        pageSize: PAGE_SIZE,
         searchIndex: searchIndex,
         // Filter out bots from user search
         queryFilter: {
@@ -103,7 +99,7 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
         },
       };
     },
-    [pageSize]
+    [searchIndex]
   );
 
   const loadOptions = useCallback(
@@ -113,16 +109,16 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
       try {
         const res = await fetchOptions(value, 1);
         setOptions(res.data);
-        handlePagingChange(res.paging);
         setSearchValue(value);
-        handlePageChange(1);
+        setPaging(res.paging);
+        setCurrentPage(1);
       } catch (error) {
         showErrorToast(error as AxiosError);
       } finally {
         setIsLoading(false);
       }
     },
-    [fetchOptions, handlePagingChange, handlePageChange]
+    [fetchOptions]
   );
 
   const optionList = useMemo(() => {
@@ -192,8 +188,8 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
           setHasContentLoading(true);
           const res = await fetchOptions(searchValue, currentPage + 1);
           setOptions((prev) => [...prev, ...res.data]);
-          handlePagingChange(res.paging);
-          handlePageChange((prev) => prev + 1);
+          setPaging(res.paging);
+          setCurrentPage((prev) => prev + 1);
         } catch (error) {
           showErrorToast(error as AxiosError);
         } finally {
@@ -230,6 +226,16 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
     }
   };
 
+  const handleBlur = useCallback(() => {
+    setCurrentPage(1);
+    setSearchValue('');
+    setOptions([]);
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    loadOptions('');
+  }, []);
+
   const internalValue = useMemo(() => {
     if (isString(selectedValue) || isArray(selectedValue)) {
       return selectedValue as string | string[];
@@ -253,13 +259,9 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
       options={optionList}
       style={{ width: '100%' }}
       value={internalValue}
-      onBlur={() => {
-        handlePageChange(1);
-        setSearchValue('');
-        setOptions([]);
-      }}
+      onBlur={handleBlur}
       onChange={handleChange}
-      onFocus={() => loadOptions('')}
+      onFocus={handleFocus}
       onPopupScroll={onScroll}
       onSearch={debounceFetcher}
       {...props}