[Index Management] Fix bug in mappings fields (#158912)

Fixes #156202

## Summary

This PR fixes the bug in Mappings fields from the Component template
wizard by changing the Subtype parameter so that it handles the case
when the value in the Subtype dropdown menu is cleared, similarly to
[what is done in the Type
parameter](https://github.com/elastic/kibana/blob/801919702ae03d8946c4a5677d387566f43f615c/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/type_parameter.tsx#L75).

**How to test:**

1. Navigate to Index Management, go to Component templates tab.
2. Start the wizard to create a new component template.
3. Go to the Mappings step and add a field of type **Numeric** or
**Range**, and click on the Subtype dropdown menu.
4. Verify that pressing backspace in the Subtype dropdown menu doesn't
make the page to crash.
5. After adding the mapping field, click the pencil icon to edit this
field and in the flyout click in the Numeric/Range type dropdown.
6. Verify that pressing backspace doesn't make the page to crash.

---------

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/subtype_parameter.tsx

@@ -85,7 +85,13 @@ export const SubTypeParameter = ({
                     : filterTypesForNonRootFields(subTypeOptions!)
                 }
                 selectedOptions={subTypeField.value as ComboBoxOption[]}
-                onChange={subTypeField.setValue}
+                onChange={(value) => {
+                  if (value.length === 0) {
+                    // Don't allow clearing the type. One must always be selected
+                    return;
+                  }
+                  subTypeField.setValue(value);
+                }}
                 isClearable={false}
                 data-test-subj="fieldSubType"
               />

x-pack/test/functional/apps/index_management/index_template_wizard.ts

@@ -12,6 +12,9 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
   const pageObjects = getPageObjects(['common', 'indexManagement', 'header']);
   const security = getService('security');
+  const comboBox = getService('comboBox');
+  const find = getService('find');
+  const browser = getService('browser');
 
   describe('Index template wizard', function () {
     before(async () => {
@@ -98,5 +101,68 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.indexManagement.clickNextButton();
       });
     });
+
+    describe('Mappings step', async () => {
+      beforeEach(async () => {
+        await pageObjects.common.navigateToApp('indexManagement');
+        // Navigate to the index templates tab
+        await pageObjects.indexManagement.changeTabs('templatesTab');
+        await pageObjects.header.waitUntilLoadingHasFinished();
+
+        // Click Create Template button
+        await testSubjects.click('createTemplateButton');
+
+        // Fill out required fields
+        await testSubjects.setValue('nameField', 'test-index-template');
+        await testSubjects.setValue('indexPatternsField', 'test-index-pattern');
+
+        // Go to Mappings step
+        await pageObjects.indexManagement.clickNextButton();
+        await pageObjects.indexManagement.clickNextButton();
+        await pageObjects.indexManagement.clickNextButton();
+      });
+
+      // Test for catching the bug reported in https://github.com/elastic/kibana/issues/156202
+      it("clearing up the Numeric subtype dropdown doesn't break the page", async () => {
+        // Add a mapping field
+        await testSubjects.click('addFieldButton');
+
+        // Select Numeric type
+        await testSubjects.click('fieldType');
+        await comboBox.set('fieldType', 'Numeric');
+
+        // Clear up subtype dropdown
+        await testSubjects.click('fieldSubType');
+        const input = await find.activeElement();
+        await input.pressKeys(browser.keys.BACK_SPACE);
+
+        // Verify that elements are still visible
+        expect(await testSubjects.exists('addFieldButton')).to.be(true);
+        expect(await testSubjects.exists('fieldType')).to.be(true);
+        expect(await testSubjects.exists('fieldSubType')).to.be(true);
+        expect(await testSubjects.exists('nextButton')).to.be(true);
+      });
+
+      // Test for catching the bug reported in https://github.com/elastic/kibana/issues/156202
+      it("clearing up the Range subtype dropdown doesn't break the page", async () => {
+        // Add a mapping field
+        await testSubjects.click('addFieldButton');
+
+        // Select Range type
+        await testSubjects.click('fieldType');
+        await comboBox.set('fieldType', 'Range');
+
+        // Clear up subtype dropdown
+        await testSubjects.click('fieldSubType');
+        const input = await find.activeElement();
+        await input.pressKeys(browser.keys.BACK_SPACE);
+
+        // Verify that elements are still visible
+        expect(await testSubjects.exists('addFieldButton')).to.be(true);
+        expect(await testSubjects.exists('fieldType')).to.be(true);
+        expect(await testSubjects.exists('fieldSubType')).to.be(true);
+        expect(await testSubjects.exists('nextButton')).to.be(true);
+      });
+    });
   });
 };