[Transform] Show destination index mapping warning for the latest transform (#87858)

* [Transform] show callout for the latest transform

* [Transform] fix flex styles

* [Transform] change to vertical layout, update warning message

* [Transform] fix messages

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.tsx

@@ -191,8 +191,8 @@ export const StepDefineSummary: FC<Props> = ({
             }
           )}
           dataTestSubj="transformPivotPreview"
-          title={i18n.translate('xpack.transform.pivotPreview.PivotPreviewTitle', {
-            defaultMessage: 'Transform pivot preview',
+          title={i18n.translate('xpack.transform.pivotPreview.transformPreviewTitle', {
+            defaultMessage: 'Transform preview',
           })}
           toastNotifications={toastNotifications}
         />

x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx

@@ -7,6 +7,7 @@
 import React, { Fragment, FC, useEffect, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiAccordion,
@@ -17,6 +18,7 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiSpacer,
+  EuiCallOut,
 } from '@elastic/eui';
 
 import { KBN_FIELD_TYPES } from '../../../../../../../../../src/plugins/data/common';
@@ -50,6 +52,7 @@ import {
   transformSettingsMaxPageSearchSizeValidator,
 } from '../../../../common/validators';
 import { StepDefineExposedState } from '../step_define/common';
+import { TRANSFORM_FUNCTION } from '../../../../../../common/constants';
 
 export interface StepDetailsExposedState {
   continuousModeDateField: string;
@@ -397,6 +400,7 @@ export const StepDetailsForm: FC<Props> = React.memo(
               data-test-subj="transformDescriptionInput"
             />
           </EuiFormRow>
+
           <EuiFormRow
             label={i18n.translate('xpack.transform.stepDetailsForm.destinationIndexLabel', {
               defaultMessage: 'Destination index',
@@ -443,6 +447,30 @@ export const StepDetailsForm: FC<Props> = React.memo(
             />
           </EuiFormRow>
 
+          {stepDefineState.transformFunction === TRANSFORM_FUNCTION.LATEST ? (
+            <>
+              <EuiSpacer size={'m'} />
+              <EuiCallOut color="warning" iconType="alert" size="m">
+                <p>
+                  <FormattedMessage
+                    id="xpack.transform.stepDetailsForm.destinationIndexWarning"
+                    defaultMessage="Before you start the transform, use index templates or the {docsLink} to ensure the mappings for your destination index match the source index. Otherwise, the destination index is created with dynamic mappings. If the transform fails, check the messages tab on the Stack Management page for errors."
+                    values={{
+                      docsLink: (
+                        <EuiLink href={esIndicesCreateIndex} target="_blank">
+                          {i18n.translate('xpack.transform.stepDetailsForm.createIndexAPI', {
+                            defaultMessage: 'Create index API',
+                          })}
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </p>
+              </EuiCallOut>
+              <EuiSpacer size={'m'} />
+            </>
+          ) : null}
+
           <EuiFormRow
             isInvalid={createIndexPattern && indexPatternTitleExists}
             error={

x-pack/plugins/translations/translations/ja-JP.json

@@ -21111,7 +21111,6 @@
     "xpack.transform.pivotPreview.copyClipboardTooltip": "ピボットプレビューの開発コンソールステートメントをクリップボードにコピーします。",
     "xpack.transform.pivotPreview.PivotPreviewIncompleteConfigCalloutBody": "group-by フィールドと集約を 1 つ以上選んでください。",
     "xpack.transform.pivotPreview.PivotPreviewNoDataCalloutBody": "プレビューリクエストはデータを返しませんでした。オプションのクエリがデータを返し、グループ分け基準により使用されるフィールドと集約フィールドに値が存在することを確認してください。",
-    "xpack.transform.pivotPreview.PivotPreviewTitle": "ピボットプレビューを変換",
     "xpack.transform.progress": "進捗",
     "xpack.transform.statsBar.batchTransformsLabel": "一斉",
     "xpack.transform.statsBar.continuousTransformsLabel": "連続",

x-pack/plugins/translations/translations/zh-CN.json

@@ -21160,7 +21160,6 @@
     "xpack.transform.pivotPreview.copyClipboardTooltip": "将透视预览的开发控制台语句复制到剪贴板。",
     "xpack.transform.pivotPreview.PivotPreviewIncompleteConfigCalloutBody": "请至少选择一个分组依据字段和聚合。",
     "xpack.transform.pivotPreview.PivotPreviewNoDataCalloutBody": "预览请求未返回任何数据。请确保可选查询返回数据且存在分组依据和聚合字段使用的字段的值。",
-    "xpack.transform.pivotPreview.PivotPreviewTitle": "转换数据透视表预览",
     "xpack.transform.progress": "进度",
     "xpack.transform.statsBar.batchTransformsLabel": "批量",
     "xpack.transform.statsBar.continuousTransformsLabel": "连续",