Index pattern field editor - Add warning on name or type change (#95528) (#97386)

* add warning on name or type change

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.test.tsx

@@ -268,7 +268,7 @@ describe('<FieldEditor />', () => {
       expect(form.getErrorsMessages()).toEqual(['Awwww! Painless syntax error']);
 
       // We change the type and expect the form error to not be there anymore
-      await changeFieldType('long');
+      await changeFieldType('keyword');
       expect(form.getErrorsMessages()).toEqual([]);
     });
   });

src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.tsx

@@ -15,6 +15,7 @@ import {
   EuiSpacer,
   EuiComboBoxOptionOption,
   EuiCode,
+  EuiCallOut,
 } from '@elastic/eui';
 import type { CoreStart } from 'src/core/public';
 
@@ -138,6 +139,11 @@ const geti18nTexts = (): {
   },
 });
 
+const changeWarning = i18n.translate('indexPatternFieldEditor.editor.form.changeWarning', {
+  defaultMessage:
+    'Changing name or type can break searches and visualizations that rely on this field.',
+});
+
 const formDeserializer = (field: Field): FieldFormInternal => {
   let fieldType: Array<EuiComboBoxOptionOption<RuntimeType>>;
   if (!field.type) {
@@ -204,6 +210,11 @@ const FieldEditorComponent = ({
     clearSyntaxError();
   }, [type, clearSyntaxError]);
 
+  const [{ name: updatedName, type: updatedType }] = useFormData({ form });
+  const nameHasChanged = Boolean(field?.name) && field?.name !== updatedName;
+  const typeHasChanged =
+    Boolean(field?.type) && field?.type !== (updatedType && updatedType[0].value);
+
   return (
     <Form form={form} className="indexPatternFieldEditor__form">
       <EuiFlexGroup>
@@ -231,6 +242,18 @@ const FieldEditorComponent = ({
         </EuiFlexItem>
       </EuiFlexGroup>
 
+      {(nameHasChanged || typeHasChanged) && (
+        <>
+          <EuiSpacer size="xs" />
+          <EuiCallOut
+            color="warning"
+            title={changeWarning}
+            iconType="alert"
+            size="s"
+            data-test-subj="changeWarning"
+          />
+        </>
+      )}
       <EuiSpacer size="xl" />
 
       {/* Set custom label */}

test/functional/apps/management/_runtime_fields.js

@@ -54,6 +54,7 @@ export default function ({ getService, getPageObjects }) {
         await testSubjects.click('editFieldFormat');
         await PageObjects.settings.setFieldType('Long');
         await PageObjects.settings.changeFieldScript('emit(6);');
+        await testSubjects.find('changeWarning');
         await PageObjects.settings.clickSaveField();
         await PageObjects.settings.confirmSave();
       });