[ML] File upload minor design changes (#214539)

Design changes based on [this](https://github.com/elastic/kibana/pull/213525#pullrequestreview-2684013527) comment. Places preview limit information into a callout. Removes the "Create new index" title. Removes mention of ingest pipeline during upload steps. Also includes a fix for the preview of pdf files. ![image](https://github.com/user-attachments/assets/dbd25c54-032c-4596-9973-d4cd01cde364)
2025-04-23 09:19:04 -04:00 · 2025-03-18 15:26:03 +00:00 · 2025-03-18 15:26:03 +00:00 · 561151dfbb
commit 561151dfbb
parent a73477c7c0
7 changed files with 61 additions and 62 deletions
--- a/x-pack/platform/plugins/private/data_visualizer/public/application/file_data_visualizer/components/file_contents/file_contents.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/application/file_data_visualizer/components/file_contents/file_contents.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { useEffect, useState, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';

@ -16,6 +16,7 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiSwitch,
+  EuiCallOut,
 } from '@elastic/eui';

 import { TIKA_PREVIEW_CHARS, type FindFileStructureResponse } from '@kbn/file-upload-plugin/common';
@ -150,25 +151,25 @@ export const FileContents: FC<Props> = ({
        ) : null}
      </EuiFlexGroup>

-      <EuiSpacer size="s" />
-
-      {format === FILE_FORMATS.TIKA ? (
-        <FormattedMessage
-          id="xpack.dataVisualizer.file.fileContents.characterCount"
-          defaultMessage="Preview limited to the first {numberOfChars} characters"
-          values={{
-            numberOfChars: TIKA_PREVIEW_CHARS,
-          }}
-        />
-      ) : (
-        <FormattedMessage
-          id="xpack.dataVisualizer.file.fileContents.firstLinesDescription"
-          defaultMessage="First {numberOfLines, plural, zero {# line} one {# line} other {# lines}}"
-          values={{
-            numberOfLines: showHighlights ? LINE_LIMIT : numberOfLines,
-          }}
-        />
-      )}
+      <PreviewLimitMessage wrapInCallout={showTitle === false}>
+        {format === FILE_FORMATS.TIKA ? (
+          <FormattedMessage
+            id="xpack.dataVisualizer.file.fileContents.characterCount"
+            defaultMessage="Preview limited to the first {numberOfChars} characters"
+            values={{
+              numberOfChars: TIKA_PREVIEW_CHARS,
+            }}
+          />
+        ) : (
+          <FormattedMessage
+            id="xpack.dataVisualizer.file.fileContents.firstLinesDescription"
+            defaultMessage="First {numberOfLines, plural, zero {# line} one {# line} other {# lines}}"
+            values={{
+              numberOfLines: showHighlights ? LINE_LIMIT : numberOfLines,
+            }}
+          />
+        )}
+      </PreviewLimitMessage>

      <EuiSpacer size="s" />

@ -188,6 +189,20 @@ export const FileContents: FC<Props> = ({
  );
 };

+const PreviewLimitMessage: FC<PropsWithChildren<{ wrapInCallout?: boolean }>> = ({
+  wrapInCallout = false,
+  children,
+}) => {
+  return wrapInCallout ? (
+    <EuiCallOut size="s" color="primary" title={children} />
+  ) : (
+    <>
+      <EuiSpacer size="s" />
+      {children}
+    </>
+  );
+};
+
 function limitByNumberOfLines(data: string, numberOfLines: number) {
  return data.split('\n').slice(0, numberOfLines).join('\n');
 }
--- a/x-pack/platform/plugins/private/data_visualizer/public/lite/file_manager/file_wrapper.ts
+++ b/x-pack/platform/plugins/private/data_visualizer/public/lite/file_manager/file_wrapper.ts
@ -92,9 +92,11 @@ export class FileWrapper {
      // analysis will be done in the background

      let analysisResults: AnalysisResults;
+      let parsedFileContents = fileContents;

      if (isTikaType(this.file.type)) {
        analysisResults = await this.analyzeTika(data);
+        parsedFileContents = analysisResults.fileContents;
      } else {
        analysisResults = await this.analyzeStandardFile(fileContents, {});
      }
@ -104,7 +106,7 @@ export class FileWrapper {
        ...analysisResults,
        loaded: true,
        fileName: this.file.name,
-        fileContents,
+        fileContents: parsedFileContents,
        data,
        supportedFormat,
      });
--- a/x-pack/platform/plugins/private/data_visualizer/public/lite/index_input.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/lite/index_input.tsx
@ -5,14 +5,13 @@
 * 2.0.
 */

-import { EuiFieldText, EuiFormRow, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiFieldText, EuiFormRow } from '@elastic/eui';
 import type { FC } from 'react';
 import React, { useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import type { FileUploadStartApi } from '@kbn/file-upload-plugin/public/api';
 import { i18n } from '@kbn/i18n';
 import useMountedState from 'react-use/lib/useMountedState';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { STATUS } from './file_manager/file_manager';

 interface Props {
@ -64,46 +63,32 @@ export const IndexInput: FC<Props> = ({
  );

  return (
-    <>
-      <EuiTitle size="s">
-        <h3>
-          <FormattedMessage
-            id="xpack.dataVisualizer.file.importView.createIndexTitle"
-            defaultMessage="Create new index"
-          />
-        </h3>
-      </EuiTitle>
-
-      <EuiSpacer size="xs" />
-
-      <EuiFormRow
-        label={i18n.translate('xpack.dataVisualizer.file.importView.indexNameLabel', {
-          defaultMessage: 'Index name',
-        })}
-        isInvalid={indexNameError !== ''}
-        error={indexNameError}
+    <EuiFormRow
+      label={i18n.translate('xpack.dataVisualizer.file.importView.indexNameLabel', {
+        defaultMessage: 'Index name',
+      })}
+      isInvalid={indexNameError !== ''}
+      error={indexNameError}
+      fullWidth
+      helpText={i18n.translate(
+        'xpack.dataVisualizer.file.importView.indexNameContainsIllegalCharactersErrorMessage',
+        {
+          defaultMessage: 'Index names must be lowercase and can only contain hyphens and numbers.',
+        }
+      )}
+    >
+      <EuiFieldText
        fullWidth
-        helpText={i18n.translate(
+        value={indexNameLocal}
+        onChange={(e) => setIndexNameLocal(e.target.value)}
+        placeholder={i18n.translate(
          'xpack.dataVisualizer.file.importView.indexNameContainsIllegalCharactersErrorMessage',
          {
-            defaultMessage:
-              'Index names must be lowercase and can only contain hyphens and numbers.',
+            defaultMessage: 'Add name to index',
          }
        )}
-      >
-        <EuiFieldText
-          fullWidth
-          value={indexNameLocal}
-          onChange={(e) => setIndexNameLocal(e.target.value)}
-          placeholder={i18n.translate(
-            'xpack.dataVisualizer.file.importView.indexNameContainsIllegalCharactersErrorMessage',
-            {
-              defaultMessage: 'Add name to index',
-            }
-          )}
-        />
-      </EuiFormRow>
-    </>
+      />
+    </EuiFormRow>
  );
 };

--- a/x-pack/platform/plugins/private/data_visualizer/public/lite/overall_upload_status.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/lite/overall_upload_status.tsx
@ -54,7 +54,7 @@ export const OverallUploadStatus: FC<Props> = ({ filesStatus, uploadStatus }) =>
      title: i18n.translate(
        'xpack.dataVisualizer.file.overallUploadStatus.creatingIndexAndIngestPipeline',
        {
-          defaultMessage: 'Creating index and ingest pipeline',
+          defaultMessage: 'Creating index',
        }
      ),
      children: <></>,
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@ -15984,7 +15984,6 @@
    "xpack.dataVisualizer.file.importSummary.ingestPipelineTitle": "Pipeline d'ingestion",
    "xpack.dataVisualizer.file.importView.backButtonLabel": "Retour",
    "xpack.dataVisualizer.file.importView.cancelButtonLabel": "Sélectionner un autre fichier",
-    "xpack.dataVisualizer.file.importView.createIndexTitle": "Créer un nouvel index",
    "xpack.dataVisualizer.file.importView.dataViewNameAlreadyExistsErrorMessage": "Le nom de la vue de données existe déjà",
    "xpack.dataVisualizer.file.importView.deployModelError": "Erreur survenue lors du déploiement du modèle entraîné :",
    "xpack.dataVisualizer.file.importView.importButtonLabel": "Importer",
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@ -15965,7 +15965,6 @@
    "xpack.dataVisualizer.file.importSummary.ingestPipelineTitle": "パイプラインを投入",
    "xpack.dataVisualizer.file.importView.backButtonLabel": "戻る",
    "xpack.dataVisualizer.file.importView.cancelButtonLabel": "別のファイルを選択",
-    "xpack.dataVisualizer.file.importView.createIndexTitle": "新しいインデックスを作成",
    "xpack.dataVisualizer.file.importView.dataViewNameAlreadyExistsErrorMessage": "データビュー名はすでに存在します",
    "xpack.dataVisualizer.file.importView.deployModelError": "学習済みモデルのデプロイエラー：",
    "xpack.dataVisualizer.file.importView.importButtonLabel": "インポート",
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@ -16001,7 +16001,6 @@
    "xpack.dataVisualizer.file.importSummary.ingestPipelineTitle": "采集管道",
    "xpack.dataVisualizer.file.importView.backButtonLabel": "返回",
    "xpack.dataVisualizer.file.importView.cancelButtonLabel": "选择其他文件",
-    "xpack.dataVisualizer.file.importView.createIndexTitle": "创建新索引",
    "xpack.dataVisualizer.file.importView.dataViewNameAlreadyExistsErrorMessage": "数据视图名称已存在",
    "xpack.dataVisualizer.file.importView.deployModelError": "部署已训练模型时出错：",
    "xpack.dataVisualizer.file.importView.importButtonLabel": "导入",