[Semantic Text UI] Add toast, modal and banner for deployment status

x-pack/packages/index-management/tsconfig.json

@@ -10,7 +10,7 @@
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx"
   ],
   "exclude": [
     "target/**/*"

x-pack/packages/ml/trained_models_utils/src/constants/trained_models.ts

@@ -187,6 +187,14 @@ export type InferenceServiceSettings =
         model_id: string;
       };
     }
+  | {
+      service: 'elasticsearch';
+      service_settings: {
+        num_allocations: number;
+        num_threads: number;
+        model_id: string;
+      };
+    }
   | {
       service: 'openai';
       service_settings: {

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts

@@ -51,6 +51,7 @@ export interface IndexDetailsPageTestBed extends TestBed {
       getTreeViewContent: (fieldName: string) => string;
       clickToggleViewButton: () => Promise<void>;
       isSearchBarDisabled: () => boolean;
+      isSemanticTextBannerVisible: () => boolean;
     };
     settings: {
       getCodeBlockContent: () => string;
@@ -218,6 +219,9 @@ export const setup = async ({
     isSearchBarDisabled: () => {
       return find('indexDetailsMappingsFieldSearch').prop('disabled');
     },
+    isSemanticTextBannerVisible: () => {
+      return exists('indexDetailsMappingsSemanticTextBanner');
+    },
     clickAddFieldButton: async () => {
       expect(exists('indexDetailsMappingsAddField')).toBe(true);
       await act(async () => {

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx

@@ -497,6 +497,10 @@ describe('<IndexDetailsPage />', () => {
       expect(testBed.actions.mappings.isSearchBarDisabled()).toBe(false);
     });
 
+    it('semantic text banner is not visible', async () => {
+      expect(testBed.actions.mappings.isSemanticTextBannerVisible()).toBe(false);
+    });
+
     it('sets the docs link href from the documentation service', async () => {
       const docsLinkHref = testBed.actions.mappings.getDocsLinkHref();
       // the url from the mocked docs mock

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/semantic_text_bannner.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { registerTestBed } from '@kbn/test-jest-helpers';
+import { act } from 'react-dom/test-utils';
+import { SemanticTextBanner } from '../../../public/application/sections/home/index_list/details_page/semantic_text_banner';
+
+describe('When semantic_text is enabled', () => {
+  const setup = registerTestBed(SemanticTextBanner, {
+    defaultProps: { isSemanticTextEnabled: true },
+    memoryRouter: { wrapComponent: false },
+  });
+  const { exists, find } = setup();
+
+  it('should display the banner', () => {
+    expect(exists('indexDetailsMappingsSemanticTextBanner')).toBe(true);
+  });
+
+  it('should contain content related to semantic_text', () => {
+    expect(find('indexDetailsMappingsSemanticTextBanner').text()).toContain(
+      'semantic_text field type now available!'
+    );
+  });
+
+  it('should hide the banner if dismiss is clicked', async () => {
+    await act(async () => {
+      find('SemanticTextBannerDismissButton').simulate('click');
+    });
+    expect(exists('indexDetailsMappingsSemanticTextBanner')).toBe(true);
+  });
+});
+
+describe('When semantic_text is disabled', () => {
+  const setup = registerTestBed(SemanticTextBanner, {
+    defaultProps: { isSemanticTextEnabled: false },
+    memoryRouter: { wrapComponent: false },
+  });
+  const { exists } = setup();
+
+  it('should not display the banner', () => {
+    expect(exists('indexDetailsMappingsSemanticTextBanner')).toBe(false);
+  });
+});

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/trained_models_deployment_modal.test.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { registerTestBed } from '@kbn/test-jest-helpers';
+import { TrainedModelsDeploymentModal } from '../../../public/application/sections/home/index_list/details_page/trained_models_deployment_modal';
+import { act } from 'react-dom/test-utils';
+
+const refreshModal = jest.fn();
+const setIsModalVisible = jest.fn();
+const tryAgainForErrorModal = jest.fn();
+const setIsVisibleForErrorModal = jest.fn();
+
+describe('When semantic_text is enabled', () => {
+  describe('When there is no error in the model deployment', () => {
+    const setup = registerTestBed(TrainedModelsDeploymentModal, {
+      defaultProps: {
+        isSemanticTextEnabled: true,
+        pendingDeployments: ['.elser-test-3'],
+        setIsModalVisible,
+        refreshModal,
+      },
+      memoryRouter: { wrapComponent: false },
+    });
+    const { exists, find } = setup();
+
+    it('should display the modal', () => {
+      expect(exists('trainedModelsDeploymentModal')).toBe(true);
+    });
+
+    it('should contain content related to semantic_text', () => {
+      expect(find('trainedModelsDeploymentModalText').text()).toContain(
+        'Some fields are referencing models'
+      );
+    });
+
+    it('should call refresh method if refresh button is pressed', async () => {
+      await act(async () => {
+        find('confirmModalConfirmButton').simulate('click');
+      });
+      expect(refreshModal.mock.calls).toHaveLength(1);
+    });
+
+    it('should call setIsModalVisible method if cancel button is pressed', async () => {
+      await act(async () => {
+        find('confirmModalCancelButton').simulate('click');
+      });
+      expect(setIsModalVisible.mock.calls).toHaveLength(1);
+    });
+  });
+
+  describe('When there is error in the model deployment', () => {
+    const setup = registerTestBed(TrainedModelsDeploymentModal, {
+      defaultProps: {
+        isSemanticTextEnabled: true,
+        pendingDeployments: ['.elser-test-3'],
+        setIsModalVisible: setIsVisibleForErrorModal,
+        refreshModal: tryAgainForErrorModal,
+        errorsInTrainedModelDeployment: ['.elser-test-3'],
+      },
+      memoryRouter: { wrapComponent: false },
+    });
+    const { exists, find } = setup();
+
+    it('should display the modal', () => {
+      expect(exists('trainedModelsErroredDeploymentModal')).toBe(true);
+    });
+
+    it('should contain content related to semantic_text', () => {
+      expect(find('trainedModelsErrorDeploymentModalText').text()).toContain(
+        'There was an error when trying to deploy'
+      );
+    });
+
+    it("should call refresh method if 'Try again' button is pressed", async () => {
+      await act(async () => {
+        find('confirmModalConfirmButton').simulate('click');
+      });
+      expect(tryAgainForErrorModal.mock.calls).toHaveLength(1);
+    });
+
+    it('should call setIsModalVisible method if cancel button is pressed', async () => {
+      await act(async () => {
+        find('confirmModalCancelButton').simulate('click');
+      });
+      expect(setIsVisibleForErrorModal.mock.calls).toHaveLength(1);
+    });
+  });
+});
+
+describe('When semantic_text is disabled', () => {
+  const setup = registerTestBed(TrainedModelsDeploymentModal, {
+    defaultProps: { isSemanticTextEnabled: false },
+    memoryRouter: { wrapComponent: false },
+  });
+  const { exists } = setup();
+  it('it should not display the modal', () => {
+    expect(exists('trainedModelsDeploymentModal')).toBe(false);
+  });
+});

x-pack/plugins/index_management/public/application/app_context.tsx

@@ -15,19 +15,19 @@ import {
   FatalErrorsStart,
   ScopedHistory,
   DocLinksStart,
-  IUiSettingsClient,
   ExecutionContextStart,
   HttpSetup,
+  IUiSettingsClient,
 } from '@kbn/core/public';
+import type { MlPluginStart } from '@kbn/ml-plugin/public';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 
-import type { SettingsStart } from '@kbn/core-ui-settings-browser';
+import { EuiBreadcrumb } from '@elastic/eui';
 import type { CloudSetup } from '@kbn/cloud-plugin/public';
 import type { ConsolePluginStart } from '@kbn/console-plugin/public';
-import { EuiBreadcrumb } from '@elastic/eui';
-import type { MlPluginStart } from '@kbn/ml-plugin/public';
+import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import { ExtensionsService } from '../services';
-import { UiMetricService, NotificationService, HttpService } from './services';
+import { HttpService, NotificationService, UiMetricService } from './services';
 import { IndexManagementBreadcrumb } from './services/breadcrumbs';
 
 export const AppContext = createContext<AppDependencies | undefined>(undefined);

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/setup_environment.tsx

@@ -26,6 +26,7 @@ const { GlobalFlyoutProvider } = GlobalFlyout;
 // We provide the minimum deps required to make the tests pass
 const appDependencies = {
   docLinks: {} as any,
+  plugins: { ml: {} as any },
 } as any;
 
 export const componentTemplatesDependencies = (httpSetup: HttpSetup, coreStart?: CoreStart) => ({

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx

@@ -11,6 +11,15 @@ import { componentHelpers, MappingsEditorTestBed } from '../helpers';
 
 const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor;
 
+jest.mock('../../../../component_templates/component_templates_context', () => ({
+  useComponentTemplatesContext: jest.fn().mockReturnValue({
+    toasts: {
+      addError: jest.fn(),
+      addSuccess: jest.fn(),
+    },
+  }),
+}));
+
 describe('Mappings editor: other datatype', () => {
   /**
    * Variable to store the mappings data forwarded to the consumer component

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx

@@ -11,6 +11,15 @@ import { componentHelpers, MappingsEditorTestBed } from './helpers';
 
 const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor;
 
+jest.mock('../../../component_templates/component_templates_context', () => ({
+  useComponentTemplatesContext: jest.fn().mockReturnValue({
+    toasts: {
+      addError: jest.fn(),
+      addSuccess: jest.fn(),
+    },
+  }),
+}));
+
 describe('Mappings editor: core', () => {
   /**
    * Variable to store the mappings data forwarded to the consumer component

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/runtime_fields.test.tsx

@@ -11,6 +11,15 @@ import { componentHelpers, MappingsEditorTestBed } from './helpers';
 
 const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor;
 
+jest.mock('../../../component_templates/component_templates_context', () => ({
+  useComponentTemplatesContext: jest.fn().mockReturnValue({
+    toasts: {
+      addError: jest.fn(),
+      addSuccess: jest.fn(),
+    },
+  }),
+}));
+
 describe('Mappings editor: runtime fields', () => {
   /**
    * Variable to store the mappings data forwarded to the consumer component

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx

@@ -5,32 +5,36 @@
  * 2.0.
  */
 
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { GlobalFlyout } from '../../shared_imports';
-import { useMappingsState, useDispatch } from '../../mappings_state_context';
 import { deNormalize } from '../../lib';
-import { EditFieldContainer, EditFieldContainerProps, defaultFlyoutProps } from './fields';
+import { useDispatch, useMappingsState } from '../../mappings_state_context';
+import { GlobalFlyout } from '../../shared_imports';
+import {
+  defaultFlyoutProps,
+  EditFieldContainer,
+  EditFieldContainerProps,
+  SemanticTextInfo,
+} from './fields';
 import { DocumentFieldsJsonEditor } from './fields_json_editor';
 import { DocumentFieldsTreeEditor } from './fields_tree_editor';
 
 const { useGlobalFlyout } = GlobalFlyout;
+
 interface Props {
   searchComponent?: React.ReactElement;
   searchResultComponent?: React.ReactElement;
   onCancelAddingNewFields?: () => void;
   isAddingFields?: boolean;
-  isSemanticTextEnabled?: boolean;
-  indexName?: string;
+  semanticTextInfo?: SemanticTextInfo;
 }
 export const DocumentFields = React.memo(
   ({
     searchComponent,
     searchResultComponent,
     onCancelAddingNewFields,
     isAddingFields,
-    isSemanticTextEnabled,
-    indexName,
+    semanticTextInfo,
   }: Props) => {
     const { fields, documentFields } = useMappingsState();
     const dispatch = useDispatch();
@@ -53,8 +57,7 @@ export const DocumentFields = React.memo(
         <DocumentFieldsTreeEditor
           onCancelAddingNewFields={onCancelAddingNewFields}
           isAddingFields={isAddingFields}
-          isSemanticTextEnabled={isSemanticTextEnabled}
-          indexName={indexName}
+          semanticTextInfo={semanticTextInfo}
         />
       );
 

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx

@@ -42,8 +42,13 @@ import { useLoadInferenceModels } from '../../../../../services/api';
 interface Props {
   onChange(value: string): void;
   'data-test-subj'?: string;
+  setValue: (value: string) => void;
 }
-export const SelectInferenceId = ({ onChange, 'data-test-subj': dataTestSubj }: Props) => {
+export const SelectInferenceId = ({
+  onChange,
+  'data-test-subj': dataTestSubj,
+  setValue,
+}: Props) => {
   const {
     core: { application },
     docLinks,
@@ -142,6 +147,9 @@ export const SelectInferenceId = ({ onChange, 'data-test-subj': dataTestSubj }:
     return subscription.unsubscribe;
   }, [subscribe, onChange]);
   const selectedOptionLabel = options.find((option) => option.checked)?.label;
+  useEffect(() => {
+    setValue(selectedOptionLabel ?? 'elser_model_2');
+  }, [selectedOptionLabel, setValue]);
   const [isInferencePopoverVisible, setIsInferencePopoverVisible] = useState<boolean>(false);
   const [inferenceEndpointError, setInferenceEndpointError] = useState<string | undefined>(
     undefined