Add error prompts for missing permissions

elastic · Feb 18, 2025 · ea2a8bf · ea2a8bf
1 parent 2dc3eeb
commit ea2a8bf
Show file tree

Hide file tree

Showing 5 changed files with 130 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,35 @@
+/*
+ * 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';
+
+export const ErrorPrompt = () => {
+  return (
+    <EuiEmptyPrompt
+      iconType="logoEnterpriseSearch"
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.search.synonyms.errorTitle"
+            defaultMessage="An error occurred"
+          />
+        </h2>
+      }
+      body={
+        <p>
+          <FormattedMessage
+            id="xpack.search.synonyms.errorDescription"
+            defaultMessage="An error occured while fetching synonyms. Check Kibana logs for more information."
+          />
+        </p>
+      }
+    />
+  );
+};
diff --git a/...rch/plugins/search_synonyms/public/components/missing_permissions/missing_permissions.tsx b/...rch/plugins/search_synonyms/public/components/missing_permissions/missing_permissions.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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';
+
+export const MissingPermissionsPrompt = () => {
+  return (
+    <EuiEmptyPrompt
+      iconType="logoEnterpriseSearch"
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.search.synonyms.missingPermissionsTitle"
+            defaultMessage="Missing permissions"
+          />
+        </h2>
+      }
+      body={
+        <p>
+          <FormattedMessage
+            id="xpack.search.synonyms.missingPermissionsDescription"
+            defaultMessage="You do not have the necessary permissions to manage synonyms. Contact your system administrator."
+          />
+        </p>
+      }
+    />
+  );
+};
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 { MissingPermissionsPrompt } from '../missing_permissions/missing_permissions';
+import { ErrorPrompt } from '../error_prompt/error_prompt';
 
 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,8 @@ export const SearchSynonymsOverview = () => {
           />
         )}
         {isInitialLoading && <EuiLoadingSpinner />}
+        {isError && error.body.statusCode === 403 && <MissingPermissionsPrompt />}
+        {isError && error.body.statusCode !== 403 && <ErrorPrompt />}
 
         {!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;
+};