[8.16] [Search: Inference Management UI] Fixing design issues and Removing Duplicate Service Name (#196431) (#197320)

# Backport This will backport the following commits from `main` to `8.16`: - [[Search: Inference Management UI] Fixing design issues and Removing Duplicate Service Name (#196431)](https://github.com/elastic/kibana/pull/196431)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Samiul Monir <150824886+Samiul-TheSoccerFan@users.noreply.github.com>
2025-04-24 17:59:23 -04:00 · 2024-10-23 07:08:06 +11:00 · 2024-10-23 07:08:06 +11:00 · f2c4c0ec4e
commit f2c4c0ec4e
parent 24c866924b
14 changed files with 77 additions and 47 deletions
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts
@ -32,3 +32,5 @@ export const DEFAULT_INFERENCE_ENDPOINTS_TABLE_STATE: AllInferenceEndpointsTable
  filterOptions: DEFAULT_FILTER_OPTIONS,
  queryParams: DEFAULT_QUERY_PARAMS,
 };
+
+export const PIPELINE_URL = 'ingest/ingest_pipelines';
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/filter/multi_select_filter.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/filter/multi_select_filter.tsx
@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { useState } from 'react';
+import _ from 'lodash';
 import * as i18n from './translations';

 export interface MultiSelectFilterOption {
@ -44,11 +45,14 @@ export const MultiSelectFilter: React.FC<UseFilterParams> = ({
  const { euiTheme } = useEuiTheme();
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const toggleIsPopoverOpen = () => setIsPopoverOpen((prevValue) => !prevValue);
-  const options: MultiSelectFilterOption[] = rawOptions.map(({ key, label }) => ({
-    label,
-    key,
-    checked: selectedOptionKeys.includes(key) ? 'on' : undefined,
-  }));
+  const options: MultiSelectFilterOption[] = _.uniqBy(
+    rawOptions.map(({ key, label }) => ({
+      label,
+      key,
+      checked: selectedOptionKeys.includes(key) ? 'on' : undefined,
+    })),
+    'label'
+  );

  return (
    <EuiFilterGroup>
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/list_usage_results.test.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/list_usage_results.test.tsx
@ -12,11 +12,11 @@ import { render, screen, fireEvent } from '@testing-library/react';
 describe('ListUsageResults', () => {
  const items = [
    {
-      label: 'index-1',
+      id: 'index-1',
      type: 'Index',
    },
    {
-      label: 'pipeline-1',
+      id: 'pipeline-1',
      type: 'Pipeline',
    },
  ];
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/list_usage_results.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/list_usage_results.tsx
@ -34,7 +34,7 @@ export const ListUsageResults: React.FC<ListUsageResultsProps> = ({ list }) => {
      </EuiFlexItem>
      <EuiFlexItem>
        {list
-          .filter((item) => item.label.toLowerCase().includes(term.toLowerCase()))
+          .filter((item) => item.id.toLowerCase().includes(term.toLowerCase()))
          .map((item, id) => (
            <UsageItem usageItem={item} key={id} />
          ))}
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/scan_usage_results.test.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/scan_usage_results.test.tsx
@ -19,11 +19,11 @@ const mockOnCheckboxChange = jest.fn();
 describe('ScanUsageResults', () => {
  const items = [
    {
-      label: 'index-1',
+      id: 'index-1',
      type: 'Index',
    },
    {
-      label: 'pipeline-1',
+      id: 'pipeline-1',
      type: 'Pipeline',
    },
  ];
@ -40,7 +40,7 @@ describe('ScanUsageResults', () => {
      <ScanUsageResults
        list={items}
        ignoreWarningCheckbox={false}
-        onCheckboxChange={mockOnCheckboxChange}
+        onIgnoreWarningCheckboxChange={mockOnCheckboxChange}
      />
    );
  });
@ -58,9 +58,9 @@ describe('ScanUsageResults', () => {

  it('opens index management in a new tab', () => {
    fireEvent.click(screen.getByTestId('inferenceManagementOpenIndexManagement'));
-    expect(mockNavigateToApp).toHaveBeenCalledWith('enterprise_search', {
+    expect(mockNavigateToApp).toHaveBeenCalledWith('enterpriseSearchContent', {
      openInNewTab: true,
-      path: 'content/search_indices',
+      path: 'search_indices',
    });
  });

--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/scan_usage_results.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/scan_usage_results.tsx
@ -17,30 +17,31 @@ import {
 import React from 'react';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
+import { ENTERPRISE_SEARCH_CONTENT_APP_ID } from '@kbn/deeplinks-search';
+
 import { InferenceUsageInfo } from '../../../../types';
 import { useKibana } from '../../../../../../hooks/use_kibana';
 import { RenderMessageWithIcon } from './render_message_with_icon';
-
 import * as i18n from '../delete/confirm_delete_endpoint/translations';
 import { ListUsageResults } from './list_usage_results';

 interface ScanUsageResultsProps {
  list: InferenceUsageInfo[];
  ignoreWarningCheckbox: boolean;
-  onCheckboxChange: (state: boolean) => void;
+  onIgnoreWarningCheckboxChange: (state: boolean) => void;
 }

 export const ScanUsageResults: React.FC<ScanUsageResultsProps> = ({
  list,
  ignoreWarningCheckbox,
-  onCheckboxChange,
+  onIgnoreWarningCheckboxChange,
 }) => {
  const {
    services: { application },
  } = useKibana();
-  const handleNavigateToIndex = () => {
-    application?.navigateToApp('enterprise_search', {
-      path: 'content/search_indices',
+  const handleNavigateToIndexManagement = () => {
+    application?.navigateToApp(ENTERPRISE_SEARCH_CONTENT_APP_ID, {
+      path: 'search_indices',
      openInNewTab: true,
    });
  };
@ -59,7 +60,7 @@ export const ScanUsageResults: React.FC<ScanUsageResultsProps> = ({
        <EuiPanel hasBorder={true}>
          <EuiFlexGroup gutterSize="m" direction="column">
            <EuiFlexItem>
-              <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
+              <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s" alignItems="center">
                <EuiFlexItem grow={false}>
                  <EuiText
                    size="xs"
@ -72,7 +73,7 @@ export const ScanUsageResults: React.FC<ScanUsageResultsProps> = ({
                </EuiFlexItem>
                <EuiFlexItem grow={false}>
                  <EuiButtonEmpty
-                    onClick={handleNavigateToIndex}
+                    onClick={handleNavigateToIndexManagement}
                    iconType="popout"
                    iconSide="right"
                    iconSize="s"
@ -102,7 +103,7 @@ export const ScanUsageResults: React.FC<ScanUsageResultsProps> = ({
            id={'ignoreWarningCheckbox'}
            label={i18n.IGNORE_POTENTIAL_ERRORS_LABEL}
            checked={ignoreWarningCheckbox}
-            onChange={(e) => onCheckboxChange(e.target.checked)}
+            onChange={(e) => onIgnoreWarningCheckboxChange(e.target.checked)}
          />
        </EuiPanel>
      </EuiFlexItem>
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/usage_item.test.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/usage_item.test.tsx
@ -29,7 +29,7 @@ describe('UsageItem', () => {

  describe('index', () => {
    const item: InferenceUsageInfo = {
-      label: 'index-1',
+      id: 'index-1',
      type: 'Index',
    };

@ -44,16 +44,16 @@ describe('UsageItem', () => {

    it('opens index in a new tab', () => {
      fireEvent.click(screen.getByRole('button'));
-      expect(mockNavigateToApp).toHaveBeenCalledWith('enterprise_search', {
+      expect(mockNavigateToApp).toHaveBeenCalledWith('enterpriseSearchContent', {
        openInNewTab: true,
-        path: 'content/search_indices/index-1',
+        path: 'search_indices/index-1',
      });
    });
  });

  describe('pipeline', () => {
    const item: InferenceUsageInfo = {
-      label: 'pipeline-1',
+      id: 'pipeline-1',
      type: 'Pipeline',
    };

--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/usage_item.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/component/usage_item.tsx
@ -14,11 +14,15 @@ import {
  EuiText,
  EuiTextTruncate,
  EuiIcon,
+  EuiSpacer,
 } from '@elastic/eui';
 import React from 'react';
+import { ENTERPRISE_SEARCH_CONTENT_APP_ID } from '@kbn/deeplinks-search';
+import { MANAGEMENT_APP_ID } from '@kbn/deeplinks-management/constants';

 import { useKibana } from '../../../../../../hooks/use_kibana';
 import { InferenceUsageInfo } from '../../../../types';
+import { PIPELINE_URL } from '../../../../constants';

 interface UsageProps {
  usageItem: InferenceUsageInfo;
@ -29,27 +33,27 @@ export const UsageItem: React.FC<UsageProps> = ({ usageItem }) => {
  } = useKibana();
  const handleNavigateToIndex = () => {
    if (usageItem.type === 'Index') {
-      application?.navigateToApp('enterprise_search', {
-        path: `content/search_indices/${usageItem.label}`,
+      application?.navigateToApp(ENTERPRISE_SEARCH_CONTENT_APP_ID, {
+        path: `search_indices/${usageItem.id}`,
        openInNewTab: true,
      });
    } else if (usageItem.type === 'Pipeline') {
-      application?.navigateToApp('management', {
-        path: `ingest/ingest_pipelines?pipeline=${usageItem.label}`,
+      application?.navigateToApp(MANAGEMENT_APP_ID, {
+        path: `${PIPELINE_URL}?pipeline=${usageItem.id}`,
        openInNewTab: true,
      });
    }
  };

  return (
-    <EuiFlexGroup gutterSize="xs" direction="column" data-test-subj="usageItem">
+    <EuiFlexGroup gutterSize="s" direction="column" data-test-subj="usageItem">
      <EuiFlexItem grow={false}>
        <EuiFlexGroup>
          <EuiFlexItem>
            <EuiFlexGroup gutterSize="xs" justifyContent="spaceBetween">
              <EuiFlexItem>
                <EuiText size="s">
-                  <EuiTextTruncate text={usageItem.label} />
+                  <EuiTextTruncate text={usageItem.id} />
                </EuiText>
              </EuiFlexItem>
              <EuiFlexItem grow={false}>
@ -58,7 +62,7 @@ export const UsageItem: React.FC<UsageProps> = ({ usageItem }) => {
            </EuiFlexGroup>
          </EuiFlexItem>
          <EuiFlexItem grow={false}>
-            <EuiLink onClick={handleNavigateToIndex}>
+            <EuiLink data-test-subj="navigateToIndexPage" onClick={handleNavigateToIndex}>
              <EuiIcon size="s" type="popout" />
            </EuiLink>
          </EuiFlexItem>
@ -66,6 +70,7 @@ export const UsageItem: React.FC<UsageProps> = ({ usageItem }) => {
      </EuiFlexItem>
      <EuiFlexItem>
        <EuiHorizontalRule margin="none" />
+        <EuiSpacer size="s" />
      </EuiFlexItem>
    </EuiFlexGroup>
  );
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/index.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/index.tsx
@ -37,7 +37,7 @@ export const ConfirmDeleteEndpointModal: React.FC<ConfirmDeleteEndpointModalProp
    id: inferenceEndpoint.endpoint,
  });

-  const onCheckboxChange = (state: boolean) => {
+  const onIgnoreWarningCheckboxChange = (state: boolean) => {
    setIgnoreWarningCheckbox(state);
    if (state) {
      setDeleteDisabled(false);
@ -50,8 +50,11 @@ export const ConfirmDeleteEndpointModal: React.FC<ConfirmDeleteEndpointModalProp
    if (!data) return;
    setIsFetching(false);

-    const indices = data.indexes.map((index, id) => ({ label: index, type: 'Index' }));
-    const pipelines = data.pipelines.map((pipeline, id) => ({ label: pipeline, type: 'Pipeline' }));
+    const indices = data.indexes.map((index, id) => ({ id: index, type: 'Index' }));
+    const pipelines = data.pipelines.map((pipeline, id) => ({
+      id: pipeline,
+      type: 'Pipeline',
+    }));
    const usages: InferenceUsageInfo[] = [...indices, ...pipelines];
    if (usages.length > 0) {
      setDeleteDisabled(true);
@ -106,7 +109,7 @@ export const ConfirmDeleteEndpointModal: React.FC<ConfirmDeleteEndpointModalProp
            <ScanUsageResults
              list={listOfUsages}
              ignoreWarningCheckbox={ignoreWarningCheckbox}
-              onCheckboxChange={onCheckboxChange}
+              onIgnoreWarningCheckboxChange={onIgnoreWarningCheckboxChange}
            />
          )}
        </EuiFlexItem>
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/translations.ts
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/translations.ts
@ -19,7 +19,7 @@ export const CONFIRM_DELETE_WARNING = i18n.translate(
  'xpack.searchInferenceEndpoints.confirmDeleteEndpoint.confirmQuestion',
  {
    defaultMessage:
-      'Deleting an inference endpoint currently in use will cause failures in the ingest and query attempts.',
+      'Deleting an inference endpoint currently in use will cause failures in ingest and query attempts.',
  }
 );

@ -54,7 +54,7 @@ export const POTENTIAL_FAILURE_LABEL = i18n.translate(
 export const IGNORE_POTENTIAL_ERRORS_LABEL = i18n.translate(
  'xpack.searchInferenceEndpoints.confirmDeleteEndpoint.ignoreErrors',
  {
-    defaultMessage: 'Ignore potential errors and force deletion',
+    defaultMessage: 'Ignore errors and force deletion',
  }
 );

--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/search/table_search.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/search/table_search.tsx
@ -29,6 +29,7 @@ export const TableSearch: React.FC<TableSearchComponentProps> = ({ searchKey, se
      onChange={(e) => setSearchKey(e.target.value)}
      onSearch={onSearch}
      value={searchKey}
+      data-test-subj="search-field-endpoints"
    />
  );
 };
--- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/types.ts
+++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/types.ts
@ -64,6 +64,6 @@ export interface InferenceEndpointUI {
 }

 export interface InferenceUsageInfo {
-  label: string;
+  id: string;
  type: string;
 }
--- a/x-pack/plugins/search_inference_endpoints/public/components/inference_endpoints_header.tsx
+++ b/x-pack/plugins/search_inference_endpoints/public/components/inference_endpoints_header.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import { EuiPageTemplate, EuiLink } from '@elastic/eui';
+import { EuiPageTemplate, EuiButtonEmpty } from '@elastic/eui';
 import React from 'react';
 import * as i18n from '../../common/translations';
 import { docLinks } from '../../common/doc_links';
@ -21,16 +21,28 @@ export const InferenceEndpointsHeader: React.FC = () => {
      description={i18n.MANAGE_INFERENCE_ENDPOINTS_LABEL}
      bottomBorder={true}
      rightSideItems={[
-        <EuiLink
-          href={docLinks.createInferenceEndpoint}
+        <EuiButtonEmpty
+          iconType="popout"
+          iconSide="right"
+          iconSize="s"
+          flush="both"
          target="_blank"
          data-test-subj="api-documentation"
+          href={docLinks.createInferenceEndpoint}
        >
          {i18n.API_DOCUMENTATION_LINK}
-        </EuiLink>,
-        <EuiLink href={trainedModelPageUrl} target="_blank" data-test-subj="view-your-models">
+        </EuiButtonEmpty>,
+        <EuiButtonEmpty
+          href={trainedModelPageUrl}
+          iconType="popout"
+          iconSide="right"
+          iconSize="s"
+          flush="both"
+          target="_blank"
+          data-test-subj="view-your-models"
+        >
          {i18n.VIEW_YOUR_MODELS_LINK}
-        </EuiLink>,
+        </EuiButtonEmpty>,
      ]}
    />
  );
--- a/x-pack/plugins/search_inference_endpoints/tsconfig.json
+++ b/x-pack/plugins/search_inference_endpoints/tsconfig.json
@ -31,7 +31,9 @@
    "@kbn/test-jest-helpers",
    "@kbn/kibana-utils-plugin",
    "@kbn/features-plugin",
-    "@kbn/ui-theme"
+    "@kbn/ui-theme",
+    "@kbn/deeplinks-search",
+    "@kbn/deeplinks-management"
  ],
  "exclude": [
    "target/**/*",