[8.12] [Enterprise Search] Split details panel from model selection l…

…ist (#173434) (#173697) # Backport This will backport the following commits from `main` to `8.12`: - [[Enterprise Search] Split details panel from model selection list (#173434)](#173434)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Adam Demjen <[email protected]>
elastic · Dec 19, 2023 · f7e2d6e · f7e2d6e
1 parent 0f9c1ea
commit f7e2d6e
Show file tree

Hide file tree

Showing 13 changed files with 614 additions and 345 deletions.
diff --git a/...rise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx b/...rise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
@@ -19,7 +19,6 @@ import {
   EuiTabbedContentTab,
   EuiTitle,
   EuiText,
-  EuiTextColor,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -131,27 +130,15 @@ export const ConfigurePipeline: React.FC = () => {
                 <EuiSpacer />
               </>
             )}
-            <EuiSpacer size="s" />
-            <EuiTitle size="xxxs">
-              <h6>
-                {i18n.translate(
-                  'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.titleSelectTrainedModel',
-                  { defaultMessage: 'Select a trained ML Model' }
-                )}
-              </h6>
-            </EuiTitle>
-            {formErrors.modelStatus !== undefined && (
-              <>
-                <EuiSpacer size="xs" />
-                <EuiText size="xs">
-                  <p>
-                    <EuiTextColor color="danger">{formErrors.modelStatus}</EuiTextColor>
-                  </p>
-                </EuiText>
-              </>
-            )}
-            <EuiSpacer size="xs" />
-            <ModelSelect />
+            <EuiFormRow
+              fullWidth
+              label={i18n.translate(
+                'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.titleSelectTrainedModel',
+                { defaultMessage: 'Select a trained ML Model' }
+              )}
+            >
+              <ModelSelect />
+            </EuiFormRow>
           </EuiForm>
         </>
       ),

diff --git a/...rise_search_content/components/search_index/pipelines/ml_inference/license_badge.test.tsx b/...rise_search_content/components/search_index/pipelines/ml_inference/license_badge.test.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 { shallow } from 'enzyme';
+
+import { EuiLink } from '@elastic/eui';
+
+import { LicenseBadge, LicenseBadgeProps } from './license_badge';
+
+const DEFAULT_PROPS: LicenseBadgeProps = {
+  licenseType: 'mit',
+  modelDetailsPageUrl: 'https://my-model.ai',
+};
+
+describe('LicenseBadge', () => {
+  it('renders with link if URL is present', () => {
+    const wrapper = shallow(
+      <LicenseBadge
+        licenseType={DEFAULT_PROPS.licenseType}
+        modelDetailsPageUrl={DEFAULT_PROPS.modelDetailsPageUrl}
+      />
+    );
+    expect(wrapper.find(EuiLink)).toHaveLength(1);
+  });
+  it('renders without link if URL is not present', () => {
+    const wrapper = shallow(<LicenseBadge licenseType={DEFAULT_PROPS.licenseType} />);
+    expect(wrapper.find(EuiLink)).toHaveLength(0);
+  });
+});
diff --git a/...nterprise_search_content/components/search_index/pipelines/ml_inference/license_badge.tsx b/...nterprise_search_content/components/search_index/pipelines/ml_inference/license_badge.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 { EuiBadge, EuiLink } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+export interface LicenseBadgeProps {
+  licenseType: string;
+  modelDetailsPageUrl?: string;
+}
+
+export const LicenseBadge: React.FC<LicenseBadgeProps> = ({ licenseType, modelDetailsPageUrl }) => {
+  const licenseLabel = i18n.translate(
+    'xpack.enterpriseSearch.content.indices.pipelines.modelSelectOption.licenseBadge.label',
+    {
+      defaultMessage: 'License: {licenseType}',
+      values: {
+        licenseType,
+      },
+    }
+  );
+
+  return (
+    <EuiBadge color="hollow">
+      {modelDetailsPageUrl ? (
+        <EuiLink target="_blank" href={modelDetailsPageUrl}>
+          {licenseLabel}
+        </EuiLink>
+      ) : (
+        <p>{licenseLabel}</p>
+      )}
+    </EuiBadge>
+  );
+};
diff --git a/...prise_search_content/components/search_index/pipelines/ml_inference/ml_inference_logic.ts b/...prise_search_content/components/search_index/pipelines/ml_inference/ml_inference_logic.ts
@@ -119,7 +119,7 @@ export interface MLInferencePipelineOption {
   indexFields: string[];
 }
 
-interface MLInferenceProcessorsActions {
+export interface MLInferenceProcessorsActions {
   addSelectedFieldsToMapping: (isTextExpansionModelSelected: boolean) => {
     isTextExpansionModelSelected: boolean;
   };

diff --git a/...prise_search_content/components/search_index/pipelines/ml_inference/model_select.test.tsx b/...prise_search_content/components/search_index/pipelines/ml_inference/model_select.test.tsx
@@ -11,13 +11,23 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiSelectable } from '@elastic/eui';
+import { EuiSelectable, EuiText } from '@elastic/eui';
 
-import { ModelSelect } from './model_select';
+import { MlModel, MlModelDeploymentState } from '../../../../../../../common/types/ml';
+
+import { LicenseBadge } from './license_badge';
+import {
+  DeployModelButton,
+  ModelSelect,
+  NoModelSelected,
+  SelectedModel,
+  StartModelButton,
+} from './model_select';
 
 const DEFAULT_VALUES = {
   addInferencePipelineModal: {
     configuration: {},
+    indexName: 'my-index',
   },
   selectableModels: [
     {
@@ -27,8 +37,23 @@ const DEFAULT_VALUES = {
       modelId: 'model_2',
     },
   ],
-  indexName: 'my-index',
 };
+const DEFAULT_MODEL: MlModel = {
+  modelId: 'model_1',
+  type: 'ner',
+  title: 'Model 1',
+  description: 'Model 1 description',
+  licenseType: 'elastic',
+  modelDetailsPageUrl: 'https://my-model.ai',
+  deploymentState: MlModelDeploymentState.NotDeployed,
+  startTime: 0,
+  targetAllocationCount: 0,
+  nodeAllocationCount: 0,
+  threadsPerAllocation: 0,
+  isPlaceholder: false,
+  hasStats: false,
+};
+
 const MOCK_ACTIONS = {
   setInferencePipelineConfiguration: jest.fn(),
 };
@@ -150,4 +175,74 @@ describe('ModelSelect', () => {
       })
     );
   });
+  it('renders selected model panel if a model is selected', () => {
+    setMockValues({
+      ...DEFAULT_VALUES,
+      addInferencePipelineModal: {
+        configuration: {
+          ...DEFAULT_VALUES.addInferencePipelineModal.configuration,
+          modelID: 'model_2',
+        },
+      },
+      selectedModel: DEFAULT_MODEL,
+    });
+
+    const wrapper = shallow(<ModelSelect />);
+    expect(wrapper.find(SelectedModel)).toHaveLength(1);
+    expect(wrapper.find(NoModelSelected)).toHaveLength(0);
+  });
+  it('renders no model selected panel if no model is selected', () => {
+    setMockValues(DEFAULT_VALUES);
+
+    const wrapper = shallow(<ModelSelect />);
+    expect(wrapper.find(SelectedModel)).toHaveLength(0);
+    expect(wrapper.find(NoModelSelected)).toHaveLength(1);
+  });
+
+  describe('SelectedModel', () => {
+    it('renders with license badge if present', () => {
+      const wrapper = shallow(<SelectedModel {...DEFAULT_MODEL} />);
+      expect(wrapper.find(LicenseBadge)).toHaveLength(1);
+    });
+    it('renders without license badge if not present', () => {
+      const props = {
+        ...DEFAULT_MODEL,
+        licenseType: undefined,
+      };
+
+      const wrapper = shallow(<SelectedModel {...props} />);
+      expect(wrapper.find(LicenseBadge)).toHaveLength(0);
+    });
+    it('renders with description if present', () => {
+      const wrapper = shallow(<SelectedModel {...DEFAULT_MODEL} />);
+      expect(wrapper.find(EuiText)).toHaveLength(1);
+    });
+    it('renders without description if not present', () => {
+      const props = {
+        ...DEFAULT_MODEL,
+        description: undefined,
+      };
+
+      const wrapper = shallow(<SelectedModel {...props} />);
+      expect(wrapper.find(EuiText)).toHaveLength(0);
+    });
+    it('renders deploy button for a model placeholder', () => {
+      const props = {
+        ...DEFAULT_MODEL,
+        isPlaceholder: true,
+      };
+
+      const wrapper = shallow(<SelectedModel {...props} />);
+      expect(wrapper.find(DeployModelButton)).toHaveLength(1);
+    });
+    it('renders start button for a downloaded model', () => {
+      const props = {
+        ...DEFAULT_MODEL,
+        deploymentState: MlModelDeploymentState.NotDeployed,
+      };
+
+      const wrapper = shallow(<SelectedModel {...props} />);
+      expect(wrapper.find(StartModelButton)).toHaveLength(1);
+    });
+  });
 });