Cypress: Fix flakiness in EntityDetail tests (#5425)

openmetadata-ui/src/main/resources/ui/cypress/common/common.js

@@ -213,11 +213,9 @@ export const visitEntityTab = (id) => {
  * @param {string} term Entity name
  */
 export const searchEntity = (term) => {
-  cy.get('[data-testid="searchBox"]').should('be.visible');
-  cy.get('[data-testid="searchBox"]')
-    .scrollIntoView()
-    .type(`${term}{enter}{enter}`);
-  cy.get('.tw-cursor-pointer > [data-testid="image"]').click();
+  cy.get('[data-testid="searchBox"]').scrollIntoView().should('be.visible');
+  cy.get('[data-testid="searchBox"]').type(`${term}{enter}`);
+  cy.get('[data-testid="suggestion-overlay"]').click(1,1);
 };
 
 // add new tag to entity and its table

openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/EntityDetails.spec.js

@@ -32,7 +32,7 @@ describe('Entity Details Page', () => {
     // click on the 1st result and go to manage tab in entity details page
     cy.wait(500);
     cy.get('[data-testid="table-link"]').first().should('be.visible').click();
-    cy.get('[data-testid="Manage"]').should('be.visible').click();
+    cy.get('[data-testid="Manage"]').scrollIntoView().click();
 
     // check for delete section and delete button is available or not
     cy.get('[data-testid="danger-zone"]').scrollIntoView().should('be.visible');

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -64,7 +64,7 @@ const Appbar: React.FC = (): JSX.Element => {
   });
   const searchQuery = match?.params?.searchQuery;
   const [searchValue, setSearchValue] = useState(searchQuery);
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const [isFeatureModalOpen, setIsFeatureModalOpen] = useState<boolean>(false);
 
   const [version, setVersion] = useState<string>('');

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Suggestions.tsx

@@ -302,7 +302,7 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
     }
   }, [searchText]);
 
-  // alwyas Keep this useEffect at the end...
+  // always Keep this useEffect at the end...
   useEffect(() => {
     isMounting.current = false;
   }, []);
@@ -313,6 +313,7 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
         <>
           <button
             className="tw-z-10 tw-fixed tw-inset-0 tw-h-full tw-w-full tw-bg-black tw-opacity-0 "
+            data-testid="suggestion-overlay"
             onClick={() => setIsOpen(false)}
           />
           <div

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -11,7 +11,8 @@
  *  limitations under the License.
  */
 
-import React, { useState } from 'react';
+import { debounce } from 'lodash';
+import React, { useCallback, useState } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import AppState from '../../AppState';
 import { ROUTES } from '../../constants/constants';
@@ -46,12 +47,24 @@ const NavBar = ({
   handleOnClick,
 }: NavBarProps) => {
   const [searchIcon, setSearchIcon] = useState<string>('icon-searchv1');
+  const [suggestionSearch, setSuggestionSearch] = useState<string>('');
   const navStyle = (value: boolean) => {
     if (value) return { color: activeLink };
 
     return { color: normalLink };
   };
 
+  const debouncedOnChange = useCallback(
+    (text: string): void => {
+      setSuggestionSearch(text);
+    },
+    [setSuggestionSearch]
+  );
+
+  const debounceOnSearch = useCallback(debounce(debouncedOnChange, 400), [
+    debouncedOnChange,
+  ]);
+
   return (
     <>
       <div className="tw-h-16 tw-py-3 tw-border-b-2 tw-border-separator">
@@ -100,7 +113,9 @@ const NavBar = ({
               value={searchValue}
               onBlur={() => setSearchIcon('icon-searchv1')}
               onChange={(e) => {
-                handleSearchChange(e.target.value);
+                const { value } = e.target;
+                debounceOnSearch(value);
+                handleSearchChange(value);
               }}
               onFocus={() => setSearchIcon('icon-searchv1color')}
               onKeyDown={handleKeyDown}
@@ -120,7 +135,7 @@ const NavBar = ({
               ) : (
                 <Suggestions
                   isOpen={isSearchBoxOpen}
-                  searchText={searchValue}
+                  searchText={suggestionSearch}
                   setIsOpen={handleSearchBoxOpen}
                 />
               ))}