[Index template] Fix editor should support mappings types

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.ts

@@ -13,4 +13,4 @@ export const setup = (props: any) =>
  wrapComponent: false,
  },
  defaultProps: props,
- });
+ })();

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx

@@ -28,7 +28,7 @@ describe('<MappingsEditor />', () => {
  },
  },
  };
- const testBed = await setup({ onUpdate: mockOnUpdate, defaultValue })();
+ const testBed = await setup({ onUpdate: mockOnUpdate, defaultValue });
  const { exists } = testBed;
 
  expect(exists('mappingsEditor')).toBe(true);
@@ -44,7 +44,7 @@ describe('<MappingsEditor />', () => {
  },
  },
  };
- const testBed = await setup({ onUpdate: mockOnUpdate, defaultValue })();
+ const testBed = await setup({ onUpdate: mockOnUpdate, defaultValue });
  const { exists } = testBed;
 
  expect(exists('mappingsEditor')).toBe(true);

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx

@@ -0,0 +1,193 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+jest.mock('@elastic/eui', () => ({
+ ...jest.requireActual('@elastic/eui'),
+ // Mocking EuiCodeEditor, which uses React Ace under the hood
+ EuiCodeEditor: (props: any) => (
+ <input
+ data-test-subj="mockCodeEditor"
+ onChange={(syntheticEvent: any) => {
+ props.onChange(syntheticEvent.jsonString);
+ }}
+ />
+ ),
+}));
+
+import { registerTestBed, nextTick, TestBed } from '../../../../../../../../../test_utils';
+import { LoadMappingsProvider } from './load_mappings_provider';
+
+const ComponentToTest = ({ onJson }: { onJson: () => void }) => (
+ <LoadMappingsProvider onJson={onJson}>
+ {openModal => (
+ <button onClick={openModal} data-test-subj="load-json-button">
+ Load JSON
+ </button>
+ )}
+ </LoadMappingsProvider>
+);
+
+const setup = (props: any) =>
+ registerTestBed(ComponentToTest, {
+ memoryRouter: { wrapComponent: false },
+ defaultProps: props,
+ })();
+
+const openModalWithJsonContent = ({ find, component }: TestBed) => async (json: any) => {
+ find('load-json-button').simulate('click');
+ component.update();
+
+ // Set the mappings to load
+ // @ts-ignore
+ await act(async () => {
+ find('mockCodeEditor').simulate('change', {
+ jsonString: JSON.stringify(json),
+ });
+ await nextTick(300); // There is a debounce in the JsonEditor that we need to wait for
+ });
+};
+
+describe('<LoadMappingsProvider />', () => {
+ test('it should forward valid mapping definition', async () => {
+ const mappingsToLoad = {
+ properties: {
+ title: {
+ type: 'text',
+ },
+ },
+ };
+
+ const onJson = jest.fn();
+ const testBed = await setup({ onJson });
+
+ // Open the modal and add the JSON
+ await openModalWithJsonContent(testBed)(mappingsToLoad);
+
+ // Confirm
+ testBed.find('confirmModalConfirmButton').simulate('click');
+
+ const [jsonReturned] = onJson.mock.calls[0];
+ expect(jsonReturned).toEqual({ ...mappingsToLoad, dynamic_templates: [] });
+ });
+
+ test('it should detect custom single-type mappings and return it', async () => {
+ const mappingsToLoadOneType = {
+ myCustomType: {
+ _source: {
+ enabled: true,
+ },
+ properties: {
+ title: {
+ type: 'text',
+ },
+ },
+ dynamic_templates: [],
+ },
+ };
+
+ const onJson = jest.fn();
+ const testBed = await setup({ onJson });
+
+ await openModalWithJsonContent(testBed)(mappingsToLoadOneType);
+
+ // Confirm
+ testBed.find('confirmModalConfirmButton').simulate('click');
+
+ const [jsonReturned] = onJson.mock.calls[0];
+ expect(jsonReturned).toEqual(mappingsToLoadOneType);
+ });
+
+ test('it should detect multi-type mappings and return raw without validating', async () => {
+ const mappingsToLoadMultiType = {
+ myCustomType1: {
+ wrongParameter: 'wont be validated neither stripped out',
+ properties: {
+ title: {
+ type: 'wrongType',
+ },
+ },
+ dynamic_templates: [],
+ },
+ myCustomType2: {
+ properties: {
+ title: {
+ type: 'text',
+ },
+ },
+ dynamic_templates: [],
+ },
+ };
+
+ const onJson = jest.fn();
+ const testBed = await setup({ onJson });
+
+ await openModalWithJsonContent(testBed)(mappingsToLoadMultiType);
+
+ // Confirm
+ testBed.find('confirmModalConfirmButton').simulate('click');
+
+ const [jsonReturned] = onJson.mock.calls[0];
+ expect(jsonReturned).toEqual(mappingsToLoadMultiType);
+ });
+
+ test('it should detect single-type mappings under a valid mappings definition parameter', async () => {
+ const mappingsToLoadOneType = {
+ // Custom type name _is_ a valid mappings definition parameter
+ _source: {
+ _source: {
+ enabled: true,
+ },
+ properties: {
+ title: {
+ type: 'text',
+ },
+ },
+ dynamic_templates: [],
+ },
+ };
+
+ const onJson = jest.fn();
+ const testBed = await setup({ onJson });
+
+ await openModalWithJsonContent(testBed)(mappingsToLoadOneType);
+
+ // Confirm
+ testBed.find('confirmModalConfirmButton').simulate('click');
+
+ const [jsonReturned] = onJson.mock.calls[0];
+ expect(jsonReturned).toEqual(mappingsToLoadOneType);
+ });
+
+ test('should treat "properties" as properties definition and **not** as a cutom type', async () => {
+ const mappingsToLoadOneType = {
+ // Custom type name _is_ a valid mappings definition parameter
+ properties: {
+ _source: {
+ enabled: true,
+ },
+ properties: {
+ title: {
+ type: 'text',
+ },
+ },
+ dynamic_templates: [],
+ },
+ };
+
+ const onJson = jest.fn();
+ const testBed = await setup({ onJson });
+
+ await openModalWithJsonContent(testBed)(mappingsToLoadOneType);
+
+ // Confirm
+ testBed.find('confirmModalConfirmButton').simulate('click');
+
+ // Make sure our handler hasn't been called
+ expect(onJson.mock.calls.length).toBe(0);
+ });
+});

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx

@@ -5,6 +5,7 @@
  */
 
 import React, { useState, useRef } from 'react';
+import { isPlainObject } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -17,15 +18,15 @@ import {
 } from '@elastic/eui';
 
 import { JsonEditor, OnJsonEditorUpdateHandler } from '../../shared_imports';
-import { validateMappings, MappingsValidationError } from '../../lib';
+import { validateMappings, MappingsValidationError, VALID_MAPPINGS_PARAMETERS } from '../../lib';
 
 const MAX_ERRORS_TO_DISPLAY = 1;
 
 type OpenJsonModalFunc = () => void;
 
 interface Props {
  onJson(json: { [key: string]: any }): void;
- children: (deleteProperty: OpenJsonModalFunc) => React.ReactNode;
+ children: (openModal: OpenJsonModalFunc) => React.ReactNode;
 }
 
 interface State {
@@ -126,10 +127,13 @@ const getErrorMessage = (error: MappingsValidationError) => {
  }
 };
 
+const areAllObjectKeysValidParameters = (obj: { [key: string]: any }) =>
+ Object.keys(obj).every(key => VALID_MAPPINGS_PARAMETERS.includes(key));
+
 export const LoadMappingsProvider = ({ onJson, children }: Props) => {
  const [state, setState] = useState<State>({ isModalOpen: false });
  const [totalErrorsToDisplay, setTotalErrorsToDisplay] = useState<number>(MAX_ERRORS_TO_DISPLAY);
- const jsonContent = useRef<Parameters<OnJsonEditorUpdateHandler>['0'] | undefined>();
+ const jsonContent = useRef<Parameters<OnJsonEditorUpdateHandler>['0'] | undefined>(undefined);
  const view: ModalView =
  state.json !== undefined && state.errors !== undefined ? 'validationResult' : 'json';
  const i18nTexts = getTexts(view, state.errors?.length);
@@ -146,6 +150,44 @@ export const LoadMappingsProvider = ({ onJson, children }: Props) => {
  setState({ isModalOpen: false });
  };
 
+ const getMappingsMetadata = (unparsed: {
+ [key: string]: any;
+ }): { customType?: string; isMultiTypeMappings: boolean } => {
+ let hasCustomType = false;
+ let isMultiTypeMappings = false;
+ let customType: string | undefined;
+
+ /**
+ * We need to check if there are single or multi-types mappings declared, for that we will check for the following:
+ *
+ * - Are **all** root level keys valid parameter for the mappings definition. If not, and all keys are plain object, we assume we have multi-type mappings
+ * - If there are more than two types, return "as is" as the UI does not support more than 1 type and will display a warning callout
+ * - If there is only 1 type, validate the mappings definition and return it wrapped inside the the custom type
+ */
+ const areAllKeysValid = areAllObjectKeysValidParameters(unparsed);
+ const areAllValuesPlainObjects = Object.values(unparsed).every(isPlainObject);
+ const areAllValuesObjKeysValidParameterName =
+ areAllValuesPlainObjects && Object.values(unparsed).every(areAllObjectKeysValidParameters);
+
+ if (!areAllKeysValid && areAllValuesPlainObjects) {
+ hasCustomType = true;
+ isMultiTypeMappings = Object.keys(unparsed).length > 1;
+ }
+ // If all root level keys are *valid* parameters BUT they are all plain objects which *also* have ALL valid mappings config parameter
+ // we can assume that they are custom types whose name matches a mappings configuration parameter.
+ // This is to handle the case where a custom type would be for example "dynamic" which is a mappings configuration parameter.
+ else if (areAllKeysValid && areAllValuesPlainObjects && areAllValuesObjKeysValidParameterName) {
+ hasCustomType = true;
+ isMultiTypeMappings = Object.keys(unparsed).length > 1;
+ }
+
+ if (hasCustomType && !isMultiTypeMappings) {
+ customType = Object.keys(unparsed)[0];
+ }
+
+ return { isMultiTypeMappings, customType };
+ };
+
  const loadJson = () => {
  if (jsonContent.current === undefined) {
  // No changes have been made in the JSON, this is probably a "reset()" for the user
@@ -159,14 +201,41 @@ export const LoadMappingsProvider = ({ onJson, children }: Props) => {
  if (isValidJson) {
  // Parse and validate the JSON to make sure it won't break the UI
  const unparsed = jsonContent.current.data.format();
- const { value: parsed, errors } = validateMappings(unparsed);
+
+ if (Object.keys(unparsed).length === 0) {
+ // Empty object...exit early
+ onJson(unparsed);
+ closeModal();
+ return;
+ }
+
+ let mappingsToValidate = unparsed;
+ const { isMultiTypeMappings, customType } = getMappingsMetadata(unparsed);
+
+ if (isMultiTypeMappings) {
+ // Exit early, the UI will show a warning
+ onJson(unparsed);
+ closeModal();
+ return;
+ }
+
+ // Custom type can't be "properties", ES will not treat it as such
+ // as it is reserved for fields definition
+ if (customType !== undefined && customType !== 'properties') {
+ mappingsToValidate = unparsed[customType];
+ }
+
+ const { value: parsed, errors } = validateMappings(mappingsToValidate);
+
+ // Wrap the mappings definition with custom type if one was provided.
+ const parsedWithType = customType !== undefined ? { [customType]: parsed } : parsed;
 
  if (errors) {
- setState({ isModalOpen: true, json: { unparsed, parsed }, errors });
+ setState({ isModalOpen: true, json: { unparsed, parsed: parsedWithType }, errors });
  return;
  }
 
- onJson(parsed);
+ onJson(parsedWithType);
  closeModal();
  }
  };

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/multiple_mappings_warning.tsx

@@ -14,7 +14,7 @@ import { documentationService } from '../../../services/documentation';
 export const MultipleMappingsWarning = () => (
  <EuiCallOut
  title={i18n.translate('xpack.idxMgmt.mappingsEditor.mappingTypesDetectedCallOutTitle', {
- defaultMessage: 'Mapping types detected',
+ defaultMessage: 'Multiple mapping types detected',
  })}
  iconType="alert"
  color="warning"
@@ -23,7 +23,7 @@ export const MultipleMappingsWarning = () => (
  <p>
  <FormattedMessage
  id="xpack.idxMgmt.mappingsEditor.mappingTypesDetectedCallOutDescription"
- defaultMessage="The mappings for this template uses types, which have been removed. {docsLink}"
+ defaultMessage="The mappings for this template uses multiple types, which are not supported. {docsLink}"
  values={{
  docsLink: (
  <EuiLink href={documentationService.getAlternativeToMappingTypesLink()} target="_blank">

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/index.ts

@@ -11,3 +11,5 @@ export * from './mappings_editor';
 export * from './components/load_mappings';
 
 export { OnUpdateHandler, Types } from './mappings_state';
+
+export { doMappingsHaveType } from './lib';