[Semantic Text UI] Modify select inference popover (elastic#189221)

This PR resolves elastic/search-team#7932 ### After this change ![Screenshot 2024-07-25 at 2 12 01 PM](https://github.com/user-attachments/assets/63e1f935-6cdd-4b24-ba86-b28f6df96183)
lcawl · Jul 26, 2024 · fcd33b2 · fcd33b2
1 parent b109e75
commit fcd33b2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 22 deletions.
diff --git a/...x_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts b/...x_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts
@@ -330,7 +330,7 @@ export const setup = async ({
       find('inferenceIdButton').simulate('click');
     },
     openSelectInferencePopover: () => {
-      expect(exists('addInferenceEndpointButton')).toBe(true);
+      expect(exists('learn-how-to-create-inference-endpoints')).toBe(true);
       expect(exists('manageInferenceEndpointButton')).toBe(true);
     },
     expectDefaultInferenceModelToExists: () => {

diff --git a/...ex_management/__jest__/client_integration/index_details_page/select_inference_id.test.tsx b/...ex_management/__jest__/client_integration/index_details_page/select_inference_id.test.tsx
@@ -23,7 +23,13 @@ const mockDispatch = jest.fn();
 jest.mock('../../../public/application/app_context', () => ({
   useAppContext: jest.fn().mockReturnValue({
     core: { application: {} },
-    docLinks: {},
+    docLinks: {
+      links: {
+        enterpriseSearch: {
+          inferenceApiCreate: 'https://abc.com/inference-api-create',
+        },
+      },
+    },
     plugins: {
       ml: {
         mlApi: {
@@ -93,7 +99,7 @@ describe('SelectInferenceId', () => {
 
   it('should contain the buttons for InferenceEndpoint management', () => {
     find('inferenceIdButton').simulate('click');
-    expect(exists('addInferenceEndpointButton')).toBe(true);
+    expect(exists('learn-how-to-create-inference-endpoints')).toBe(true);
     expect(exists('manageInferenceEndpointButton')).toBe(true);
   });
 

diff --git a/...nents/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx b/...nents/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx
@@ -20,6 +20,8 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiIcon,
+  EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
@@ -237,25 +239,6 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
       closePopover={() => setIsInferencePopoverVisible(!isInferencePopoverVisible)}
     >
       <EuiContextMenuPanel>
-        <EuiContextMenuItem
-          key="addInferenceEndpoint"
-          icon="plusInCircle"
-          size="s"
-          data-test-subj="addInferenceEndpointButton"
-          onClick={() => {
-            setIsInferenceFlyoutVisible(!isInferenceFlyoutVisible);
-            setInferenceEndpointError(undefined);
-            setIsInferencePopoverVisible(!isInferencePopoverVisible);
-          }}
-        >
-          {i18n.translate(
-            'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.addInferenceEndpointButton',
-            {
-              defaultMessage: 'Add Inference Endpoint',
-            }
-          )}
-        </EuiContextMenuItem>
-        <EuiHorizontalRule margin="none" />
         <EuiContextMenuItem
           key="manageInferenceEndpointButton"
           icon="gear"
@@ -323,6 +306,21 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
           )}
         </EuiSelectable>
       </EuiPanel>
+      <EuiHorizontalRule margin="none" />
+      <EuiContextMenuItem icon={<EuiIcon type="help" color="primary" />} size="s">
+        <EuiLink
+          href={docLinks.links.enterpriseSearch.inferenceApiCreate}
+          target="_blank"
+          data-test-subj="learn-how-to-create-inference-endpoints"
+        >
+          {i18n.translate(
+            'xpack.idxMgmt.mappingsEditor.parameters.learnHowToCreateInferenceEndpoints',
+            {
+              defaultMessage: 'Learn how to create inference endpoints',
+            }
+          )}
+        </EuiLink>
+      </EuiContextMenuItem>
     </EuiPopover>
   );
   return (