Fixes #31822: Surface domain tree search failures instead of rejecting unhandled

openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableTree/DomainSelectableTree.test.tsx

@@ -10,13 +10,15 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { AxiosError } from 'axios';
 import { DEFAULT_DOMAIN_VALUE } from '../../../constants/constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { Domain, DomainType } from '../../../generated/entity/domains/domain';
 import { EntityReference } from '../../../generated/entity/type';
 import * as domainAPI from '../../../rest/domainAPI';
 import { convertDomainsToTreeOptions } from '../../../utils/DomainUtils';
+import { showErrorToast } from '../../../utils/ToastUtils';
 import DomainSelectableTree from './DomainSelectableTree';
 
 const mockDomains: Domain[] = [
@@ -108,6 +110,11 @@ jest.mock('../../../utils/EntityReferenceUtils', () => ({
 jest.mock('../../../utils/StringUtils', () => ({
   escapeESReservedCharacters: jest.fn().mockImplementation((value) => value),
   getEncodedFqn: jest.fn().mockImplementation((value) => value),
+  getErrorText: jest
+    .fn()
+    .mockImplementation(
+      (error, fallback) => error?.response?.data?.message ?? fallback
+    ),
 }));
 
 jest.mock('../../../utils/ToastUtils', () => ({
@@ -433,4 +440,111 @@ describe('DomainSelectableTree', () => {
       expect(screen.getByText('label.no-entity-available')).toBeInTheDocument();
     });
   });
+
+  it('should show an inline error inside the list when a search fails', async () => {
+    const error = new AxiosError('Request failed with status code 400');
+    jest.spyOn(domainAPI, 'searchDomains').mockRejectedValueOnce(error);
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loader')).not.toBeInTheDocument();
+    });
+
+    fireEvent.change(screen.getByTestId('searchbar'), {
+      target: { value: 'a||||b' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('domain-search-error')).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId('retry-domain-search')).toBeInTheDocument();
+    expect(screen.queryByText('Loader')).not.toBeInTheDocument();
+    expect(showErrorToast).not.toHaveBeenCalled();
+    // no message on the error, so the static fallback is shown
+    expect(screen.getByText('server.entity-fetch-error')).toBeInTheDocument();
+  });
+
+  it("should show the server's own message when the response carries one", async () => {
+    const error = new AxiosError('Request failed with status code 400');
+    error.response = {
+      status: 400,
+      data: { code: 400, message: 'Invalid field name childrenCount' },
+    } as never;
+    jest.spyOn(domainAPI, 'searchDomains').mockRejectedValueOnce(error);
+
+    renderComponent();
+
+    fireEvent.change(screen.getByTestId('searchbar'), {
+      target: { value: 'eng' },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Invalid field name childrenCount')
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByText('server.entity-fetch-error')
+    ).not.toBeInTheDocument();
+  });
+
+  it('should retry the search from the inline error and recover', async () => {
+    jest
+      .spyOn(domainAPI, 'searchDomains')
+      .mockRejectedValueOnce(
+        new AxiosError('Request failed with status code 400')
+      )
+      .mockResolvedValueOnce([mockDomains[0]]);
+
+    renderComponent();
+
+    fireEvent.change(screen.getByTestId('searchbar'), {
+      target: { value: 'Engineering' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('domain-search-error')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('retry-domain-search'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('domain-search-error')
+      ).not.toBeInTheDocument();
+    });
+
+    expect(domainAPI.searchDomains).toHaveBeenCalledTimes(2);
+  });
+
+  it('should clear the inline error when the search box is cleared', async () => {
+    jest
+      .spyOn(domainAPI, 'searchDomains')
+      .mockRejectedValueOnce(
+        new AxiosError('Request failed with status code 400')
+      );
+
+    renderComponent();
+
+    fireEvent.change(screen.getByTestId('searchbar'), {
+      target: { value: 'a||||b' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('domain-search-error')).toBeInTheDocument();
+    });
+
+    fireEvent.change(screen.getByTestId('searchbar'), {
+      target: { value: '' },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('domain-search-error')
+      ).not.toBeInTheDocument();
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableTree/DomainSelectableTree.tsx

@@ -52,6 +52,7 @@
 import {
   escapeESReservedCharacters,
   getEncodedFqn,
+  getErrorText,
 } from '../../../utils/StringUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import Loader from '../Loader/Loader';
@@ -100,6 +101,7 @@
     >
   >({});
   const [domainMapper, setDomainMapper] = useState<Record<string, Domain>>({});
+  const [searchError, setSearchError] = useState<AxiosError>();
 
   const { activeDomain } = useDomainStore();
   const pagingRef = useRef(INITIAL_PAGING_STATE);
@@ -352,6 +354,7 @@
     async (isLoadMore = false) => {
       const setLoadingState = isLoadMore ? setIsLoadingMore : setIsLoading;
       setLoadingState(true);
+      setSearchError(undefined);
 
       if (!isLoadMore) {
         setPaging(INITIAL_PAGING_STATE);
@@ -399,10 +402,10 @@
         setLoadingState(false);
       }
     },
     [domains, isMultiple, initialDomains, restrictedDomains]
   );
 
   const onSelect = (selectedKeys: React.Key[]) => {
     if (!isMultiple) {
       if (selectedKeys.length === 0 && !isClearable) {
         return;
@@ -421,7 +424,7 @@
     }
   };
 
   const onCheck = (
     checked: Key[] | { checked: Key[]; halfChecked: Key[] }
   ): void => {
     if (Array.isArray(checked)) {
@@ -443,12 +446,13 @@
     }
   };
 
   const onSearch = useCallback(
     debounce(async (value: string) => {
       setSearchTerm(value);
       if (value) {
         try {
           setIsLoading(true);
+          setSearchError(undefined);
           const encodedValue = getEncodedFqn(escapeESReservedCharacters(value));
           const results: Domain[] = await searchDomains(encodedValue);
           const filteredResults = restrictedDomains?.length
@@ -475,6 +479,9 @@
           );
           setTreeData(updatedTreeData);
           setDomains(uniqueData);
+        } catch (error) {
+          setSearchError(error as AxiosError);
+          setTreeData([]);
         } finally {
           setIsLoading(false);
         }
@@ -525,12 +532,40 @@
         fetchAPI(true);
       }
     },
     [hasMore, isLoadingMore, isLoading, searchTerm, fetchAPI, domains.length]
   );
 
   const treeContent = useMemo(() => {
     if (isLoading) {
       return <Loader />;
+    } else if (searchError) {
+      return (
+        <Box
+          align="center"
+          className="tw:py-6"
+          data-testid="domain-search-error"
+          direction="col"
+          gap={2}
+          justify="center">
+          <Typography
+            className="tw:text-text-tertiary tw:px-4 tw:text-center tw:break-words tw:line-clamp-4"
+            size="text-sm">
+            {getErrorText(
+              searchError,
+              t('server.entity-fetch-error', {
+                entity: t('label.domain-plural'),
+              })
+            )}
+          </Typography>
+          <Button
+            color="link-color"
+            data-testid="retry-domain-search"
+            size="sm"
+            onClick={() => onSearch(searchTerm)}>
+            {t('label.try-again')}
+          </Button>
+        </Box>
+      );
     } else if (treeData.length === 0) {
       return (
         <Box
@@ -589,9 +624,11 @@
       );
     }
   }, [
+    searchError,
     isLoading,
     isLoadingMore,
     isSubmitLoading,
+    onSearch,
     treeData,
     value,
     onSelect,
@@ -609,7 +646,7 @@
       setSearchTerm('');
       fetchAPI();
     }
   }, [visible]);
 
   useEffect(() => {
     const loadSelectedDomainChildren = async () => {
@@ -633,7 +670,7 @@
     };
 
     loadSelectedDomainChildren();
   }, [value, visible, domainMapper]);
 
   const handleAllDomainKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
     // To pass Sonar test
@@ -646,7 +683,7 @@
   return (
     <div className="p-sm" data-testid="domain-selectable-tree">
       <Input
         autoFocus
         className="tw:mb-2"
         icon={SearchLg}
         inputDataTestId="searchbar"

openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableTree/DomainSelectableTreeNew.tsx

@@ -54,6 +54,7 @@
 import {
   escapeESReservedCharacters,
   getEncodedFqn,
+  getErrorText,
 } from '../../../utils/StringUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import Loader from '../Loader/Loader';
@@ -99,6 +100,7 @@
     >
   >({});
   const [domainMapper, setDomainMapper] = useState<Record<string, Domain>>({});
+  const [searchError, setSearchError] = useState<AxiosError>();
 
   const pagingRef = useRef(INITIAL_PAGING_STATE);
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -244,7 +246,7 @@
           disabled: true,
           className: 'load-more-node',
           title: (
             <div onClick={(e) => e.stopPropagation()}>
               <Button
                 color="link-color"
                 iconLeading={isLoadingMore ? undefined : Plus}
@@ -346,6 +348,7 @@
     async (isLoadMore = false) => {
       const setLoadingState = isLoadMore ? setIsLoadingMore : setIsLoading;
       setLoadingState(true);
+      setSearchError(undefined);
 
       if (!isLoadMore) {
         setPaging(INITIAL_PAGING_STATE);
@@ -451,6 +454,7 @@
       if (value) {
         try {
           setIsLoading(true);
+          setSearchError(undefined);
           const encodedValue = getEncodedFqn(escapeESReservedCharacters(value));
           const results: Domain[] = await searchDomains(encodedValue);
 
@@ -473,6 +477,9 @@
           );
           setTreeData(updatedTreeData);
           setDomains(uniqueData);
+        } catch (error) {
+          setSearchError(error as AxiosError);
+          setTreeData([]);
         } finally {
           setIsLoading(false);
         }
@@ -523,6 +530,29 @@
   const treeContent = useMemo(() => {
     if (isLoading) {
       return <Loader />;
+    } else if (searchError) {
+      return (
+        <div
+          className="tw:py-4 tw:text-center tw:text-sm tw:text-tertiary"
+          data-testid="domain-search-error">
+          <div className="tw:px-4 tw:break-words tw:line-clamp-4">
+            {getErrorText(
+              searchError,
+              t('server.entity-fetch-error', {
+                entity: t('label.domain-plural'),
+              })
+            )}
+          </div>
+          <Button
+            className="tw:mt-2"
+            color="link-color"
+            data-testid="retry-domain-search"
+            size="sm"
+            onClick={() => onSearch(searchTerm)}>
+            {t('label.try-again')}
+          </Button>
+        </div>
+      );
     } else if (treeData.length === 0) {
       return (
         <div className="tw:py-4 tw:text-center tw:text-sm tw:text-tertiary">
@@ -564,8 +594,10 @@
       );
     }
   }, [
+    searchError,
     isLoading,
     isLoadingMore,
+    onSearch,
     treeData,
     selectedKeys,
     onSelect,

openmetadata-ui/src/main/resources/ui/src/utils/StringUtils.test.ts

@@ -31,6 +31,7 @@ jest.mock('./i18next/LocalUtil', () => ({
 import { AxiosError } from 'axios';
 import {
   decodeHtmlEntities,
+  escapeESReservedCharacters,
   formatJsonString,
   getDecodedFqn,
   getEncodedFqn,
@@ -452,4 +453,33 @@ describe('StringUtils', () => {
       expect(result).not.toContain('line-four');
     });
   });
+
+  describe('escapeESReservedCharacters', () => {
+    it('should escape every Lucene reserved character', () => {
+      expect(escapeESReservedCharacters('a+b-c=d&e')).toBe(
+        String.raw`a\+b\-c\=d\&e`
+      );
+      expect(escapeESReservedCharacters('(a){b}[c]')).toBe(
+        String.raw`\(a\)\{b\}\[c\]`
+      );
+      expect(escapeESReservedCharacters('a*b?c:d/e')).toBe(
+        String.raw`a\*b\?c\:d\/e`
+      );
+    });
+
+    it('should escape a single pipe so consecutive pipes cannot form an OR operator', () => {
+      expect(escapeESReservedCharacters('a|b')).toBe(String.raw`a\|b`);
+      expect(escapeESReservedCharacters('a||||b')).toBe(String.raw`a\|\|\|\|b`);
+    });
+
+    it('should leave a plain term untouched', () => {
+      expect(escapeESReservedCharacters('Customer Support')).toBe(
+        'Customer Support'
+      );
+    });
+
+    it('should return an empty string for an undefined term', () => {
+      expect(escapeESReservedCharacters()).toBe('');
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/utils/StringUtils.ts

@@ -267,6 +267,7 @@ export const ES_RESERVED_CHARACTERS: Record<string, string> = {
   '=': String.raw`\=`,
   '&': String.raw`\&`,
   '&&': String.raw`\&&`,
+  '|': String.raw`\|`,
   '||': String.raw`\||`,
   '>': String.raw`\>`,
   '<': String.raw`\<`,