[8.x] [Synonyms UI] Search synonyms rule flyout (#208564) (#208849)

# Backport This will backport the following commits from `main` to `8.x`: - [[Synonyms UI] Search synonyms rule flyout (#208564)](#208564)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
elastic · Jan 30, 2025 · 7638b23 · 7638b23
1 parent 2cac185
commit 7638b23
Show file tree

Hide file tree

Showing 30 changed files with 1,193 additions and 59 deletions.
diff --git a/config/serverless.oblt.yml b/config/serverless.oblt.yml
@@ -9,6 +9,7 @@ xpack.securitySolution.enabled: false
 xpack.search.notebooks.enabled: false
 xpack.searchPlayground.enabled: false
 xpack.searchInferenceEndpoints.enabled: false
+xpack.searchSynonyms.enabled: false
 
 ## Fine-tune the observability solution feature privileges. Also, refer to `serverless.yml` for the project-agnostic overrides.
 xpack.features.overrides:

diff --git a/config/serverless.security.yml b/config/serverless.security.yml
@@ -10,6 +10,7 @@ xpack.observabilityAIAssistant.enabled: false
 xpack.search.notebooks.enabled: false
 xpack.searchPlayground.enabled: false
 xpack.searchInferenceEndpoints.enabled: false
+xpack.searchSynonyms.enabled: false
 
 ## Fine-tune the security solution feature privileges. Also, refer to `serverless.yml` for the project-agnostic overrides.
 xpack.features.overrides:
@@ -154,6 +155,6 @@ xpack.index_management.enableProjectLevelRetentionChecks: true
 # Experimental Security Solution features
 
 # These features are disabled in Serverless until fully tested
-xpack.securitySolution.enableExperimental: 
+xpack.securitySolution.enableExperimental:
   - entityStoreDisabled
   - siemMigrationsDisabled
diff --git a/x-pack/solutions/search/plugins/search_synonyms/common/api_routes.ts b/x-pack/solutions/search/plugins/search_synonyms/common/api_routes.ts
@@ -11,4 +11,5 @@ export enum APIRoutes {
   SYNONYM_SETS = '/internal/search_synonyms/synonyms',
   SYNONYM_SET_ID = '/internal/search_synonyms/synonyms/{synonymsSetId}',
   SYNONYM_SET_ID_RULE_ID = '/internal/search_synonyms/synonyms/{synonymsSetId}/{ruleId}',
+  GENERATE_SYNONYM_RULE_ID = '/internal/search_synonyms/synonyms/{synonymsSetId}/generate',
 }
diff --git a/x-pack/solutions/search/plugins/search_synonyms/common/pagination.ts b/x-pack/solutions/search/plugins/search_synonyms/common/pagination.ts
@@ -7,7 +7,7 @@
 
 export const DEFAULT_PAGE_VALUE: Page = {
   from: 0,
-  size: 10,
+  size: 25,
 };
 
 export interface Pagination {

diff --git a/...tions/search/plugins/search_synonyms/public/components/empty_prompt/empty_prompt.test.tsx b/...tions/search/plugins/search_synonyms/public/components/empty_prompt/empty_prompt.test.tsx
@@ -24,7 +24,7 @@ describe('Synonyms Overview Empty Prompt', () => {
   it('renders', () => {
     render(
       <Wrapper>
-        <EmptyPrompt />
+        <EmptyPrompt getStartedAction={() => {}} />
       </Wrapper>
     );
     expect(screen.getByTestId('searchSynonymsEmptyPromptGetStartedButton')).toBeInTheDocument();

diff --git a/.../solutions/search/plugins/search_synonyms/public/components/empty_prompt/empty_prompt.tsx b/.../solutions/search/plugins/search_synonyms/public/components/empty_prompt/empty_prompt.tsx
@@ -25,7 +25,10 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { docLinks } from '../../../common/doc_links';
 
-export const EmptyPrompt: React.FC = () => {
+interface EmptyPromptProps {
+  getStartedAction: () => void;
+}
+export const EmptyPrompt: React.FC<EmptyPromptProps> = ({ getStartedAction }) => {
   const { euiTheme } = useEuiTheme();
   return (
     <EuiFlexGroup direction="row" gutterSize="l" alignItems="center" justifyContent="center">
@@ -64,6 +67,7 @@ export const EmptyPrompt: React.FC = () => {
                       data-test-subj="searchSynonymsEmptyPromptGetStartedButton"
                       color="primary"
                       fill
+                      onClick={getStartedAction}
                     >
                       <FormattedMessage
                         id="xpack.searchSynonyms.emptyPrompt.getStartedButton"

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
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import {
@@ -21,12 +21,14 @@ import { useKibana } from '../../hooks/use_kibana';
 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';
 
 export const SearchSynonymsOverview = () => {
   const {
     services: { console: consolePlugin, history, searchNavigation },
   } = useKibana();
   const { data: synonymsData, isInitialLoading } = useFetchSynonymsSets();
+  const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
 
   const embeddableConsole = useMemo(
     () => (consolePlugin?.EmbeddableConsole ? <consolePlugin.EmbeddableConsole /> : null),
@@ -48,15 +50,22 @@ export const SearchSynonymsOverview = () => {
         rightSideItems={[
           <EuiFlexGroup alignItems="center">
             <EuiFlexItem grow={false}>
-              <EuiLink>
+              <EuiLink data-test-subj="searchSynonymsSearchSynonymsOverviewApiDocumentationLink">
                 <FormattedMessage
                   id="xpack.searchSynonyms.synonymsSetDetail.documentationLink"
                   defaultMessage="API Documentation"
                 />
               </EuiLink>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton fill iconType="plusInCircle">
+              <EuiButton
+                data-test-subj="searchSynonymsSearchSynonymsOverviewCreateButton"
+                fill
+                iconType="plusInCircle"
+                onClick={() => {
+                  setIsCreateModalVisible(true);
+                }}
+              >
                 <FormattedMessage
                   id="xpack.searchSynonyms.synonymsSetDetail.createButton"
                   defaultMessage="Create"
@@ -74,13 +83,24 @@ export const SearchSynonymsOverview = () => {
         </EuiText>
       </KibanaPageTemplate.Header>
       <KibanaPageTemplate.Section restrictWidth>
+        {isCreateModalVisible && (
+          <CreateSynonymsSetModal
+            onClose={() => {
+              setIsCreateModalVisible(false);
+            }}
+          />
+        )}
         {isInitialLoading && <EuiLoadingSpinner />}
 
         {!isInitialLoading && synonymsData && synonymsData._meta.totalItemCount > 0 && (
           <SynonymSets />
         )}
         {!isInitialLoading && synonymsData && synonymsData._meta.totalItemCount === 0 && (
-          <EmptyPrompt />
+          <EmptyPrompt
+            getStartedAction={() => {
+              setIsCreateModalVisible(true);
+            }}
+          />
         )}
       </KibanaPageTemplate.Section>
       {embeddableConsole}

diff --git a/...ns/search/plugins/search_synonyms/public/components/synonym_sets/create_new_set_modal.tsx b/...ns/search/plugins/search_synonyms/public/components/synonym_sets/create_new_set_modal.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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, { useState } from 'react';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { formatSynonymsSetName } from '../../utils/synonyms_utils';
+import { usePutSynonymsSet } from '../../hooks/use_put_synonyms_set';
+
+interface CreateSynonymsSetModalProps {
+  onClose: () => void;
+}
+export const CreateSynonymsSetModal = ({ onClose }: CreateSynonymsSetModalProps) => {
+  const titleId = useGeneratedHtmlId({ prefix: 'createSynonymsSetModalTitle' });
+  const formId = useGeneratedHtmlId({ prefix: 'createSynonymsSetModalForm' });
+
+  const [name, setName] = useState('');
+  const [rawName, setRawName] = useState('');
+  const { mutate: createSynonymsSet } = usePutSynonymsSet(() => {
+    onClose();
+  });
+  return (
+    <EuiModal onClose={onClose}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle id={titleId}>
+          <FormattedMessage
+            id="xpack.searchSynonyms.createSynonymsSetModal.title"
+            defaultMessage="Name your synonyms set"
+          />
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <EuiForm
+          id={formId}
+          component="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            createSynonymsSet({ synonymsSetId: name });
+          }}
+        >
+          <EuiFormRow
+            label={i18n.translate('xpack.searchSynonyms.createSynonymsSetModal.nameLabel', {
+              defaultMessage: 'Name',
+            })}
+            helpText={
+              !!rawName
+                ? i18n.translate('xpack.searchSynonyms.createSynonymsSetModal.nameHelpText', {
+                    defaultMessage: 'Your synonyms set will be named: {name}',
+                    values: { name },
+                  })
+                : undefined
+            }
+          >
+            <EuiFieldText
+              data-test-subj="searchSynonymsCreateSynonymsSetModalFieldText"
+              value={rawName}
+              onChange={(e) => {
+                setRawName(e.target.value);
+                setName(formatSynonymsSetName(e.target.value));
+              }}
+            />
+          </EuiFormRow>
+        </EuiForm>
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty
+          data-test-subj="searchSynonymsCreateSynonymsSetModalCancelButton"
+          onClick={onClose}
+        >
+          <FormattedMessage
+            id="xpack.searchSynonyms.createSynonymsSetModal.cancelButton"
+            defaultMessage="Cancel"
+          />
+        </EuiButtonEmpty>
+        <EuiButton
+          data-test-subj="searchSynonymsCreateSynonymsSetModalCreateButton"
+          form={formId}
+          fill
+          disabled={!name}
+          onClick={() => {
+            createSynonymsSet({ synonymsSetId: name });
+          }}
+        >
+          <FormattedMessage
+            id="xpack.searchSynonyms.createSynonymsSetModal.createButton"
+            defaultMessage="Create"
+          />
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
diff --git a/.../solutions/search/plugins/search_synonyms/public/components/synonym_sets/synonym_sets.tsx b/.../solutions/search/plugins/search_synonyms/public/components/synonym_sets/synonym_sets.tsx
@@ -5,32 +5,33 @@
  * 2.0.
  */
 
+import React, { useState } from 'react';
+
 import { SynonymsGetSynonymsSetsSynonymsSetItem } from '@elastic/elasticsearch/lib/api/types';
 import { EuiBasicTable, EuiBasicTableColumn, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useState } from 'react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useKibana } from '../../hooks/use_kibana';
 import { PLUGIN_ROUTE_ROOT } from '../../../common/api_routes';
 import { DEFAULT_PAGE_VALUE, paginationToPage } from '../../../common/pagination';
 import { useFetchSynonymsSets } from '../../hooks/use_fetch_synonyms_sets';
 import { DeleteSynonymsSetModal } from './delete_synonyms_set_modal';
 
 export const SynonymSets = () => {
   const {
-    services: { application },
+    services: { application, http },
   } = useKibana();
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(DEFAULT_PAGE_VALUE.size);
   const { from } = paginationToPage({ pageIndex, pageSize, totalItemCount: 0 });
   const { data: synonyms } = useFetchSynonymsSets({ from, size: pageSize });
-  const [synonymsSetToDelete, setSynonymsSetToDelete] = React.useState<string | null>(null);
+  const [synonymsSetToDelete, setSynonymsSetToDelete] = useState<string | null>(null);
 
   if (!synonyms) {
     return null;
   }
 
   const pagination = {
-    initialPageSize: 10,
+    initialPageSize: 25,
     pageSizeOptions: [10, 25, 50],
     ...synonyms._meta,
     pageSize,
@@ -44,7 +45,12 @@ export const SynonymSets = () => {
       }),
       render: (name: string) => (
         <div data-test-subj="synonyms-set-item-name">
-          <EuiLink onClick={() => application?.navigateToUrl(`${PLUGIN_ROUTE_ROOT}/sets/${name}`)}>
+          <EuiLink
+            data-test-subj="searchSynonymsColumnsLink"
+            onClick={() =>
+              application.navigateToUrl(http.basePath.prepend(`${PLUGIN_ROUTE_ROOT}/sets/${name}`))
+            }
+          >
             {name}
           </EuiLink>
         </div>
@@ -90,7 +96,9 @@ export const SynonymSets = () => {
           color: 'text',
           type: 'icon',
           onClick: (synonymsSet: SynonymsGetSynonymsSetsSynonymsSetItem) =>
-            application?.navigateToUrl(`${PLUGIN_ROUTE_ROOT}/sets/${synonymsSet.synonyms_set}`),
+            application.navigateToUrl(
+              http.basePath.prepend(`${PLUGIN_ROUTE_ROOT}/sets/${synonymsSet.synonyms_set}`)
+            ),
         },
       ],
     },