From 4d30c83c55b3b9aa8d18e9716567175b40039712 Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Mon, 16 Dec 2024 21:02:16 +0530
Subject: [PATCH] fix(ui): sync search value with url and state value (#19050)

* fix(ui): sync search value with url and state value

* fix flaky for user spec
---
 .../src/main/resources/ui/playwright/utils/user.ts        | 8 +++++++-
 .../ui/src/pages/UserListPage/UserListPageV1.tsx          | 6 ++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts
index eaee1add445..20926d5b957 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts
@@ -97,6 +97,12 @@ export const deletedUserChecks = async (page: Page) => {
 
 export const visitUserProfilePage = async (page: Page, userName: string) => {
   await settingClick(page, GlobalSettingOptions.USERS);
+  await page.waitForSelector(
+    '[data-testid="user-list-v1-component"] [data-testid="loader"]',
+    {
+      state: 'detached',
+    }
+  );
   const userResponse = page.waitForResponse(
     '/api/v1/search/query?q=**&from=0&size=*&index=*'
   );
@@ -470,9 +476,9 @@ export const permanentDeleteUser = async (
   );
   await page.click('[data-testid="confirm-button"]');
   await hardDeleteUserResponse;
-  await reFetchUsers;
 
   await toastNotification(page, `"${displayName}" deleted successfully!`);
+  await reFetchUsers;
 
   // Wait for the loader to disappear
   await page.waitForSelector('[data-testid="loader"]', { state: 'hidden' });
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
index 1833734de7d..08957e5818b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
@@ -14,7 +14,7 @@
 import { Button, Col, Modal, Row, Space, Switch, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
-import { capitalize, isEmpty } from 'lodash';
+import { capitalize, debounce, isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
@@ -235,6 +235,7 @@ const UserListPageV1 = () => {
   const handleSearch = (value: string) => {
     setSearchValue(value);
     handlePageChange(INITIAL_PAGING_VALUE);
+
     const params = new URLSearchParams({ user: value });
     // This function is called onChange in the search input with debouncing
     // Hence using history.replace instead of history.push to avoid adding multiple routes in history
@@ -459,7 +460,8 @@ const UserListPageV1 = () => {
               type: t('label.user'),
             })}...`}
             searchValue={searchValue}
-            onSearch={handleSearch}
+            typingInterval={0}
+            onSearch={debounce(handleSearch, 400)}
           />
         </Col>