Adding preconfigured badge and refactoring preconfigure endpoint vali…

…dation

x-pack/plugins/search_inference_endpoints/common/constants.ts

@@ -10,5 +10,3 @@ export const PLUGIN_NAME = 'Inference Endpoints';
 
 export const INFERENCE_ENDPOINTS_QUERY_KEY = 'inferenceEndpointsQueryKey';
 export const TRAINED_MODEL_STATS_QUERY_KEY = 'trainedModelStats';
-
-export const PRECONFIGURED_ENDPOINTS = ['.elser-2', '.multi-e5-small'];

x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts

@@ -34,3 +34,8 @@ export const DEFAULT_INFERENCE_ENDPOINTS_TABLE_STATE: AllInferenceEndpointsTable
 };
 
 export const PIPELINE_URL = 'ingest/ingest_pipelines';
+
+export const PRECONFIGURED_ENDPOINTS = {
+  ELSER: '.elser-2',
+  E5: '.multi-e5-small',
+};

x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.test.tsx

@@ -10,6 +10,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 
 import { DeleteAction } from './delete_action';
+import { InferenceEndpointUI } from '../../../../types';
 
 describe('Delete Action', () => {
   const mockProvider = {
@@ -22,34 +23,35 @@ describe('Delete Action', () => {
     task_settings: {},
   } as any;
 
-  const mockItem = {
+  const mockItem: InferenceEndpointUI = {
     endpoint: 'my-hugging-face',
     provider: mockProvider,
     type: 'text_embedding',
   };
 
-  const Wrapper = ({ preconfiguredEndpoint }: { preconfiguredEndpoint: boolean }) => {
+  const Wrapper = ({ item }: { item: InferenceEndpointUI }) => {
     const queryClient = new QueryClient();
     return (
       <QueryClientProvider client={queryClient}>
-        <DeleteAction preconfiguredEndpoint={preconfiguredEndpoint} selectedEndpoint={mockItem} />
+        <DeleteAction selectedEndpoint={item} />
       </QueryClientProvider>
     );
   };
   it('renders', () => {
-    render(<Wrapper preconfiguredEndpoint={false} />);
+    render(<Wrapper item={mockItem} />);
 
     expect(screen.getByTestId('inferenceUIDeleteAction')).toBeEnabled();
   });
 
   it('disable the delete action for preconfigured endpoint', () => {
-    render(<Wrapper preconfiguredEndpoint={true} />);
+    const preconfiguredMockItem = { ...mockItem, endpoint: '.elser-2' };
+    render(<Wrapper item={preconfiguredMockItem} />);
 
     expect(screen.getByTestId('inferenceUIDeleteAction')).toBeDisabled();
   });
 
   it('loads confirm delete modal', () => {
-    render(<Wrapper preconfiguredEndpoint={false} />);
+    render(<Wrapper item={mockItem} />);
 
     fireEvent.click(screen.getByTestId('inferenceUIDeleteAction'));
     expect(screen.getByTestId('deleteModalForInferenceUI')).toBeInTheDocument();

x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.tsx

@@ -8,19 +8,16 @@
 import { EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
+import { isEndpointPreconfigured } from '../../../../../../utils/preconfigured_endpoint_helper';
 import { useDeleteEndpoint } from '../../../../../../hooks/use_delete_endpoint';
 import { InferenceEndpointUI } from '../../../../types';
 import { ConfirmDeleteEndpointModal } from './confirm_delete_endpoint';
 
 interface DeleteActionProps {
   selectedEndpoint: InferenceEndpointUI;
-  preconfiguredEndpoint: boolean;
 }
 
-export const DeleteAction: React.FC<DeleteActionProps> = ({
-  selectedEndpoint,
-  preconfiguredEndpoint,
-}) => {
+export const DeleteAction: React.FC<DeleteActionProps> = ({ selectedEndpoint }) => {
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
   const { mutate: deleteEndpoint } = useDeleteEndpoint(() => setIsModalVisible(false));
@@ -44,7 +41,7 @@ export const DeleteAction: React.FC<DeleteActionProps> = ({
           values: { selectedEndpointName: selectedEndpoint.endpoint },
         })}
         data-test-subj="inferenceUIDeleteAction"
-        disabled={preconfiguredEndpoint}
+        disabled={isEndpointPreconfigured(selectedEndpoint.endpoint)}
         key="delete"
         iconType="trash"
         color="danger"

x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.tsx

@@ -5,14 +5,28 @@
  * 2.0.
  */
 
+import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
+import { isEndpointPreconfigured } from '../../../../utils/preconfigured_endpoint_helper';
+import * as i18n from './translations';
 
 export interface EndpointInfoProps {
   inferenceId: string;
 }
 
 export const EndpointInfo: React.FC<EndpointInfoProps> = ({ inferenceId }) => (
-  <span>
-    <strong>{inferenceId}</strong>
-  </span>
+  <EuiFlexGroup justifyContent="spaceBetween">
+    <EuiFlexItem grow={false}>
+      <span>
+        <strong>{inferenceId}</strong>
+      </span>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <span>
+        {isEndpointPreconfigured(inferenceId) ? (
+          <EuiBetaBadge label={i18n.PRECONFIGURED_LABEL} size="s" color="hollow" />
+        ) : null}
+      </span>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 );

x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/translations.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const PRECONFIGURED_LABEL = i18n.translate(
+  'xpack.searchInferenceEndpoints.elasticsearch.endpointInfo.preconfigured',
+  {
+    defaultMessage: 'PRECONFIGURED',
+  }
+);

x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.test.tsx

@@ -118,4 +118,17 @@ describe('When the tabular page is loaded', () => {
     expect(deleteActions[3]).toBeEnabled();
     expect(deleteActions[4]).toBeEnabled();
   });
+
+  it('should show preconfigured badge only for preconfigured endpoints', () => {
+    render(<TabularPage inferenceEndpoints={inferenceEndpoints} />);
+
+    const preconfigured = 'PRECONFIGURED';
+
+    const rows = screen.getAllByRole('row');
+    expect(rows[1]).toHaveTextContent(preconfigured);
+    expect(rows[2]).toHaveTextContent(preconfigured);
+    expect(rows[3]).not.toHaveTextContent(preconfigured);
+    expect(rows[4]).not.toHaveTextContent(preconfigured);
+    expect(rows[5]).not.toHaveTextContent(preconfigured);
+  });
 });

x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx

@@ -9,7 +9,6 @@ import React, { useCallback } from 'react';
 
 import { EuiBasicTable, EuiBasicTableColumn, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { InferenceAPIConfigResponse } from '@kbn/ml-trained-models-utils';
-import { PRECONFIGURED_ENDPOINTS } from '../../../common/constants';
 import { TaskTypes } from '../../../common/types';
 import * as i18n from '../../../common/translations';
 
@@ -61,7 +60,6 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
         return null;
       },
       sortable: true,
-      truncateText: true,
       width: '300px',
     },
     {
@@ -98,13 +96,9 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
           ),
         },
         {
-          render: (inferenceEndpoint: InferenceEndpointUI) => {
-            return PRECONFIGURED_ENDPOINTS.includes(inferenceEndpoint.endpoint) ? (
-              <DeleteAction preconfiguredEndpoint={true} selectedEndpoint={inferenceEndpoint} />
-            ) : (
-              <DeleteAction preconfiguredEndpoint={false} selectedEndpoint={inferenceEndpoint} />
-            );
-          },
+          render: (inferenceEndpoint: InferenceEndpointUI) => (
+            <DeleteAction selectedEndpoint={inferenceEndpoint} />
+          ),
         },
       ],
       width: '165px',

x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.test.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { PRECONFIGURED_ENDPOINTS } from '../components/all_inference_endpoints/constants';
+import { isEndpointPreconfigured } from './preconfigured_endpoint_helper';
+
+describe('Preconfigured Endpoint helper', () => {
+  it('return true for preconfigured elser', () => {
+    expect(isEndpointPreconfigured(PRECONFIGURED_ENDPOINTS.ELSER)).toEqual(true);
+  });
+
+  it('return true for preconfigured e5', () => {
+    expect(isEndpointPreconfigured(PRECONFIGURED_ENDPOINTS.E5)).toEqual(true);
+  });
+
+  it('return false for other endpoints', () => {
+    expect(isEndpointPreconfigured('other-endpoints')).toEqual(false);
+  });
+});

x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { PRECONFIGURED_ENDPOINTS } from '../components/all_inference_endpoints/constants';
+
+export const isEndpointPreconfigured = (endpoint: string) =>
+  Object.values(PRECONFIGURED_ENDPOINTS).includes(endpoint);