From fcd33b20f358b83e1db6a23500517a805010c4c8 Mon Sep 17 00:00:00 2001
From: Saikat Sarkar <132922331+saikatsarkar056@users.noreply.github.com>
Date: Fri, 26 Jul 2024 09:25:32 -0600
Subject: [PATCH] [Semantic Text UI] Modify select inference popover (#189221)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR resolves https://github.com/elastic/search-team/issues/7932

### After this change

![Screenshot 2024-07-25 at 2 12
01 PM](https://github.com/user-attachments/assets/63e1f935-6cdd-4b24-ba86-b28f6df96183)
---
 .../index_details_page.helpers.ts             |  2 +-
 .../select_inference_id.test.tsx              | 10 ++++--
 .../field_parameters/select_inference_id.tsx  | 36 +++++++++----------
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts
index 7a55439dd0f92b..5a4e08e5aa765c 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts
+++ b/x-pack/plugins/index_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/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/select_inference_id.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/select_inference_id.test.tsx
index 43bf8073de0aaf..06d29aafc1986e 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/select_inference_id.test.tsx
+++ b/x-pack/plugins/index_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/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx
index c4da2d30ac4fd1..fab94b2e4204ff 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx
+++ b/x-pack/plugins/index_management/public/application/components/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 (