[8.18] Fixes UI bugs in semantic text UI and index mgmt mappings tab (#209638) (#209918)

# Backport This will backport the following commits from `main` to `8.18`: - [Fixes UI bugs in semantic text UI and index mgmt mappings tab (#209638)](https://github.com/elastic/kibana/pull/209638)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: Michael DeFazio <michael.defazio@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2025-02-05 18:53:16 -05:00 · 2025-02-05 18:53:16 -05:00 · de77c245a9
commit de77c245a9
parent 395ea5e91c
3 changed files with 91 additions and 89 deletions
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx
@ -7,11 +7,11 @@

 import {
  EuiButton,
-  EuiCallOut,
  EuiContextMenuItem,
  EuiContextMenuPanel,
  EuiFlexGroup,
  EuiFlexItem,
+  EuiFormRow,
  EuiHorizontalRule,
  EuiPanel,
  EuiPopover,
@ -19,7 +19,6 @@ import {
  EuiSelectableOption,
  EuiSpacer,
  EuiText,
-  EuiTitle,
  EuiIcon,
  EuiLink,
  EuiLoadingSpinner,
@ -160,7 +159,7 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
        </>
      }
      isOpen={isInferencePopoverVisible}
-      panelPaddingSize="m"
+      panelPaddingSize="none"
      closePopover={() => setIsInferencePopoverVisible(!isInferencePopoverVisible)}
    >
      <EuiContextMenuPanel>
@ -204,55 +203,55 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
        )}
      </EuiContextMenuPanel>
      <EuiHorizontalRule margin="none" />
-      <EuiPanel color="transparent" paddingSize="s">
-        <EuiTitle size="xxxs">
-          <h3>
-            {i18n.translate(
+      <EuiContextMenuPanel>
+        <EuiPanel color="transparent" paddingSize="s">
+          <EuiFormRow
+            label={i18n.translate(
              'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.Label',
              {
                defaultMessage: 'Existing endpoints',
              }
            )}
-          </h3>
-        </EuiTitle>
-        <EuiSpacer size="xs" />
-
-        <EuiSelectable
-          aria-label={i18n.translate(
-            'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.ariaLabel',
-            {
-              defaultMessage: 'Existing endpoints',
-            }
-          )}
-          data-test-subj={dataTestSubj}
-          searchable
-          isLoading={isLoading}
-          singleSelection="always"
-          defaultChecked
-          searchProps={{
-            compressed: true,
-            placeholder: i18n.translate(
-              'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.placeholder',
-              {
-                defaultMessage: 'Search',
-              }
-            ),
-          }}
-          options={options}
-          onChange={(newOptions) => {
-            setValue(newOptions.find((option) => option.checked)?.label || '');
-          }}
-        >
-          {(list, search) => (
-            <>
-              {search}
-              {list}
-            </>
-          )}
-        </EuiSelectable>
-      </EuiPanel>
+          >
+            <EuiSelectable
+              aria-label={i18n.translate(
+                'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.ariaLabel',
+                {
+                  defaultMessage: 'Existing endpoints',
+                }
+              )}
+              data-test-subj={dataTestSubj}
+              searchable
+              isLoading={isLoading}
+              singleSelection="always"
+              defaultChecked
+              searchProps={{
+                compressed: true,
+                placeholder: i18n.translate(
+                  'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.placeholder',
+                  {
+                    defaultMessage: 'Search',
+                  }
+                ),
+              }}
+              options={options}
+              onChange={(newOptions) => {
+                setValue(newOptions.find((option) => option.checked)?.label || '');
+              }}
+            >
+              {(list, search) => (
+                <>
+                  {search}
+                  <EuiHorizontalRule margin="xs" />
+                  {list}
+                </>
+              )}
+            </EuiSelectable>
+          </EuiFormRow>
+        </EuiPanel>
+      </EuiContextMenuPanel>
      <EuiHorizontalRule margin="none" />
-      <EuiContextMenuItem icon={<EuiIcon type="help" color="primary" />} size="s">
+      <EuiContextMenuItem icon={<EuiIcon type="help" color="primary" />} size="m">
        <EuiLink
          href={docLinks.links.inferenceManagement.inferenceAPIDocumentation}
          target="_blank"
@ -271,7 +270,7 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
  return (
    <>
      <EuiSpacer />
-      <EuiFlexGroup data-test-subj="selectInferenceId">
+      <EuiFlexGroup data-test-subj="selectInferenceId" alignItems="flexEnd">
        <EuiFlexItem grow={false}>
          {inferencePopover()}
          {isInferenceFlyoutVisible ? (
@ -286,18 +285,20 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
            </Suspense>
          ) : null}
        </EuiFlexItem>
-        <EuiFlexItem grow={true}>
-          <EuiCallOut
-            size="s"
-            color="warning"
-            title={i18n.translate(
-              'xpack.idxMgmt.mappingsEditor.parameters.noReferenceModelStartWarningMessage',
-              {
-                defaultMessage:
-                  'The referenced model for this inference endpoint will be started when adding this field.',
-              }
-            )}
-          />
+        <EuiFlexItem grow={false}>
+          <EuiPanel color="transparent" paddingSize="s">
+            <EuiText color="subdued" size="s">
+              <p>
+                {i18n.translate(
+                  'xpack.idxMgmt.mappingsEditor.parameters.noReferenceModelStartWarningMessage',
+                  {
+                    defaultMessage:
+                      'The referenced model for this inference endpoint will be started when adding this field.',
+                  }
+                )}
+              </p>
+            </EuiText>
+          </EuiPanel>
        </EuiFlexItem>
      </EuiFlexGroup>
    </>
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
@ -11,6 +11,7 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiOutsideClickDetector,
+  EuiPanel,
  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@ -18,7 +19,7 @@ import { TrainedModelStat } from '@kbn/ml-plugin/common/types/trained_models';
 import { MlPluginStart } from '@kbn/ml-plugin/public';
 import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
-import { EUI_SIZE, TYPE_DEFINITION } from '../../../../constants';
+import { TYPE_DEFINITION } from '../../../../constants';
 import { fieldSerializer } from '../../../../lib';
 import { getFieldByPathName, isSemanticTextField } from '../../../../lib/utils';
 import { useDispatch, useMappingsState } from '../../../../mappings_state_context';
@ -281,6 +282,7 @@ export const CreateField = React.memo(function CreateFieldComponent({

  return (
    <>
+      <EuiSpacer size="s" />
      <EuiOutsideClickDetector onOutsideClick={onClickOutside}>
        <Form
          form={form}
@ -288,20 +290,15 @@ export const CreateField = React.memo(function CreateFieldComponent({
          onSubmit={submitForm}
          data-test-subj="createFieldForm"
        >
-          <div
+          <EuiPanel
+            color="subdued"
+            paddingSize="m"
            className={classNames('mappingsEditor__createFieldWrapper', {
              'mappingsEditor__createFieldWrapper--toggle':
                Boolean(maxNestedDepth) && maxNestedDepth! > 0,
              'mappingsEditor__createFieldWrapper--multiField': isMultiField,
            })}
-            style={{
-              paddingLeft: `${
-                isMultiField
-                  ? paddingLeft! - EUI_SIZE * 1.5 // As there are no "L" bullet list we need to substract some indent
-                  : paddingLeft
-              }px`,
-            }}
-            ref={createFieldFormRef}
+            panelRef={createFieldFormRef}
            tabIndex={0}
          >
            <div className="mappingsEditor__createFieldContent">
@ -312,7 +309,7 @@ export const CreateField = React.memo(function CreateFieldComponent({
              {isSemanticText && <SelectInferenceId />}
              {renderFormActions()}
            </div>
-          </div>
+          </EuiPanel>
        </Form>
      </EuiOutsideClickDetector>
    </>
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
@ -22,6 +22,7 @@ import {
  EuiText,
  EuiTitle,
  useGeneratedHtmlId,
+  useEuiBreakpoint,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@ -400,24 +401,27 @@ export const DetailsPageMappingsContent: FunctionComponent<{
      <EuiSpacer />
    </EuiFlexItem>
  );
+
+  const showAboutMappingsStyles = css`
+    ${useEuiBreakpoint(['xl'])} {
+      max-width: 480px;
+    }
+  `;
+
+  const mappingsWrapperStyles = css`
+    height: 100%;
+    ${useEuiBreakpoint(['xl'])} {
+      flex-wrap: nowrap;
+    }
+  `;
+
  return (
    // using "rowReverse" to keep docs links on the top of the mappings code block on smaller screen
    <>
-      <EuiFlexGroup
-        wrap
-        direction="rowReverse"
-        css={css`
-          height: 100%;
-        `}
-      >
+      <EuiFlexGroup wrap direction="rowReverse" css={mappingsWrapperStyles}>
        {showAboutMappings && (
-          <EuiFlexItem
-            grow={1}
-            css={css`
-              min-width: 400px;
-            `}
-          >
-            <EuiPanel grow={false} paddingSize="l">
+          <EuiFlexItem grow={false} css={showAboutMappingsStyles}>
+            <EuiPanel grow={false} paddingSize="l" color="subdued">
              <EuiFlexGroup alignItems="center" gutterSize="s">
                <EuiFlexItem grow={false}>
                  <EuiIcon type="iInCircle" />
@ -465,7 +469,7 @@ export const DetailsPageMappingsContent: FunctionComponent<{
            )}
          </EuiFlexItem>
        )}
-        <EuiFlexGroup direction="column">
+        <EuiFlexGroup direction="column" gutterSize="s">
          <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
            <EuiFlexItem grow={false}>
              <MappingsFilter
@ -535,14 +539,14 @@ export const DetailsPageMappingsContent: FunctionComponent<{
              </EuiFilterGroup>
            </EuiFlexItem>
          </EuiFlexGroup>
-          <EuiFlexItem grow={true}>
-            {hasMLPermissions && (
+          {hasMLPermissions && (
+            <EuiFlexItem grow={true}>
              <SemanticTextBanner
                isSemanticTextEnabled={isSemanticTextEnabled}
                isPlatinumLicense={isPlatinumLicense}
              />
-            )}
-          </EuiFlexItem>
+            </EuiFlexItem>
+          )}
          {errorSavingMappings}
          {isAddingFields && (
            <EuiFlexItem grow={false} ref={pendingFieldsRef} tabIndex={0}>