[8.x] [Fix] [Synonyms UI] Fix infinite loading when permissions missi…

…ng (#211530) (#212160) # Backport This will backport the following commits from `main` to `8.x`: - [[Fix] [Synonyms UI] Fix infinite loading when permissions missing (#211530)](#211530)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Efe Gürkan YALAMAN <efeguerkan.yalaman@elastic.co>
elastic · Feb 21, 2025 · e623cbc · e623cbc
1 parent 10396d6
commit e623cbc
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 46 deletions.
diff --git a/.../solutions/search/plugins/search_synonyms/public/components/error_prompt/error_prompt.tsx b/.../solutions/search/plugins/search_synonyms/public/components/error_prompt/error_prompt.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+const ERROR_MESSAGES = {
+  generic: {
+    title: (
+      <FormattedMessage id="xpack.search.synonyms.errorTitle" defaultMessage="An error occurred" />
+    ),
+    body: (
+      <FormattedMessage
+        id="xpack.search.synonyms.errorDescription"
+        defaultMessage="An error occured while fetching synonyms. Check Kibana logs for more information."
+      />
+    ),
+  },
+  missingPermissions: {
+    title: (
+      <FormattedMessage
+        id="xpack.search.synonyms.missingPermissionsTitle"
+        defaultMessage="Missing permissions"
+      />
+    ),
+    body: (
+      <FormattedMessage
+        id="xpack.search.synonyms.missingPermissionsDescription"
+        defaultMessage="You do not have the necessary permissions to manage synonyms. Contact your system administrator."
+      />
+    ),
+  },
+};
+
+export const ErrorPrompt: React.FC<{ errorType: 'missingPermissions' | 'generic' }> = ({
+  errorType,
+}) => {
+  return (
+    <EuiEmptyPrompt
+      iconType="logoEnterpriseSearch"
+      title={<h2>{ERROR_MESSAGES[errorType].title}</h2>}
+      body={<p>{ERROR_MESSAGES[errorType].body}</p>}
+    />
+  );
+};
diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.test.tsx b/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.test.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SearchSynonymsOverview } from './overview';
+import { I18nProvider } from '@kbn/i18n-react';
+import { useFetchSynonymsSets } from '../../hooks/use_fetch_synonyms_sets';
+
+jest.mock('../../hooks/use_fetch_synonyms_sets', () => ({
+  useFetchSynonymsSets: jest.fn(() => ({
+    data: undefined,
+    isLoading: false,
+    isError: true,
+    error: { body: { statusCode: 500 } },
+  })),
+}));
+
+describe('Search Synonyms Overview', () => {
+  const queryClient = new QueryClient();
+  const Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    <I18nProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </I18nProvider>
+  );
+  it('should show error prompt when we get a generic error', () => {
+    render(
+      <Wrapper>
+        <SearchSynonymsOverview />
+      </Wrapper>
+    );
+
+    expect(screen.getByText('An error occurred')).toBeInTheDocument();
+  });
+
+  it('should show error prompt when we get a missing permissions error', () => {
+    (useFetchSynonymsSets as jest.Mock).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isError: true,
+      error: { body: { statusCode: 403 } },
+    });
+
+    render(
+      <Wrapper>
+        <SearchSynonymsOverview />
+      </Wrapper>
+    );
+
+    expect(screen.getByText('Missing permissions')).toBeInTheDocument();
+  });
+});
diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.tsx b/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.tsx
@@ -23,12 +23,14 @@ import { SynonymSets } from '../synonym_sets/synonym_sets';
 import { useFetchSynonymsSets } from '../../hooks/use_fetch_synonyms_sets';
 import { EmptyPrompt } from '../empty_prompt/empty_prompt';
 import { CreateSynonymsSetModal } from '../synonym_sets/create_new_set_modal';
+import { ErrorPrompt } from '../error_prompt/error_prompt';
+import { isPermissionError } from '../../utils/synonyms_utils';
 
 export const SearchSynonymsOverview = () => {
   const {
     services: { console: consolePlugin, history, searchNavigation },
   } = useKibana();
-  const { data: synonymsData, isInitialLoading } = useFetchSynonymsSets();
+  const { data: synonymsData, isInitialLoading, isError, error } = useFetchSynonymsSets();
   const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
 
   const embeddableConsole = useMemo(
@@ -44,50 +46,52 @@ export const SearchSynonymsOverview = () => {
       solutionNav={searchNavigation?.useClassicNavigation(history)}
       color="primary"
     >
-      <KibanaPageTemplate.Header
-        pageTitle="Synonyms"
-        restrictWidth
-        color="primary"
-        rightSideItems={[
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiLink
-                data-test-subj="searchSynonymsSearchSynonymsOverviewApiDocumentationLink"
-                external
-                target="_blank"
-                href={docLinks.synonymsApi}
-              >
-                <FormattedMessage
-                  id="xpack.searchSynonyms.synonymsSetDetail.documentationLink"
-                  defaultMessage="API Documentation"
-                />
-              </EuiLink>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                data-test-subj="searchSynonymsSearchSynonymsOverviewCreateButton"
-                fill
-                iconType="plusInCircle"
-                onClick={() => {
-                  setIsCreateModalVisible(true);
-                }}
-              >
-                <FormattedMessage
-                  id="xpack.searchSynonyms.synonymsSetDetail.createButton"
-                  defaultMessage="Create"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>,
-        ]}
-      >
-        <EuiText>
-          <FormattedMessage
-            id="xpack.searchSynonyms.synonymsSetDetail.description"
-            defaultMessage="Create and manage synonym sets and synonym rules."
-          />
-        </EuiText>
-      </KibanaPageTemplate.Header>
+      {synonymsData && !isInitialLoading && !isError && (
+        <KibanaPageTemplate.Header
+          pageTitle="Synonyms"
+          restrictWidth
+          color="primary"
+          rightSideItems={[
+            <EuiFlexGroup alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiLink
+                  data-test-subj="searchSynonymsSearchSynonymsOverviewApiDocumentationLink"
+                  external
+                  target="_blank"
+                  href={docLinks.synonymsApi}
+                >
+                  <FormattedMessage
+                    id="xpack.searchSynonyms.synonymsSetDetail.documentationLink"
+                    defaultMessage="API Documentation"
+                  />
+                </EuiLink>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  data-test-subj="searchSynonymsSearchSynonymsOverviewCreateButton"
+                  fill
+                  iconType="plusInCircle"
+                  onClick={() => {
+                    setIsCreateModalVisible(true);
+                  }}
+                >
+                  <FormattedMessage
+                    id="xpack.searchSynonyms.synonymsSetDetail.createButton"
+                    defaultMessage="Create"
+                  />
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>,
+          ]}
+        >
+          <EuiText>
+            <FormattedMessage
+              id="xpack.searchSynonyms.synonymsSetDetail.description"
+              defaultMessage="Create and manage synonym sets and synonym rules."
+            />
+          </EuiText>
+        </KibanaPageTemplate.Header>
+      )}
       <KibanaPageTemplate.Section restrictWidth>
         {isCreateModalVisible && (
           <CreateSynonymsSetModal
@@ -97,6 +101,9 @@ export const SearchSynonymsOverview = () => {
           />
         )}
         {isInitialLoading && <EuiLoadingSpinner />}
+        {isError && (
+          <ErrorPrompt errorType={isPermissionError(error) ? 'missingPermissions' : 'generic'} />
+        )}
 
         {!isInitialLoading && synonymsData && synonymsData._meta.totalItemCount > 0 && (
           <SynonymSets />

diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_sets.ts b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_sets.ts
@@ -7,6 +7,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import type { SynonymsGetSynonymsSetsSynonymsSetItem } from '@elastic/elasticsearch/lib/api/types';
+import { KibanaServerError } from '@kbn/kibana-utils-plugin/common';
 import { SYNONYMS_SETS_QUERY_KEY } from '../../common/constants';
 import { DEFAULT_PAGE_VALUE, Page, Paginate } from '../../common/pagination';
 import { APIRoutes } from '../../common/api_routes';
@@ -16,7 +17,7 @@ export const useFetchSynonymsSets = (page: Page = DEFAULT_PAGE_VALUE) => {
   const {
     services: { http },
   } = useKibana();
-  return useQuery({
+  return useQuery<Paginate<SynonymsGetSynonymsSetsSynonymsSetItem>, { body: KibanaServerError }>({
     queryKey: [SYNONYMS_SETS_QUERY_KEY, page.from, page.size],
     queryFn: async () => {
       return await http.get<Paginate<SynonymsGetSynonymsSetsSynonymsSetItem>>(
@@ -26,5 +27,7 @@ export const useFetchSynonymsSets = (page: Page = DEFAULT_PAGE_VALUE) => {
         }
       );
     },
+    refetchOnWindowFocus: false,
+    retry: false,
   });
 };
diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/utils/synonyms_utils.ts b/x-pack/solutions/search/plugins/search_synonyms/public/utils/synonyms_utils.ts
@@ -6,6 +6,7 @@
  */
 
 import { EuiComboBoxOptionOption } from '@elastic/eui';
+import { KibanaServerError } from '@kbn/kibana-utils-plugin/common';
 
 export const isExplicitSynonym = (synonym: string) => {
   return synonym.trim().includes('=>');
@@ -41,3 +42,7 @@ export const synonymsOptionToString = ({
   `${fromTerms.map((s) => s.label).join(',')}${
     isExplicit ? ' => ' + toTerms.map((s) => s.label).join(',') : ''
   }`;
+
+export const isPermissionError = (error: { body: KibanaServerError }) => {
+  return error.body.statusCode === 403;
+};