opensearch-project · SuZhou-Joe · Apr 7, 2023 · Apr 7, 2023
@@ -81,8 +81,8 @@ describe("Create Index", () => {
         });
       });
 
-      cy.get('[data-test-subj="mappingsJsonEditorFormRow"] .ace_text-input')
-        .focus()
+      cy.get('[data-test-subj="mappingsJsonEditorFormRow"] [data-test-subj="jsonEditor-valueDisplay"]')
+        .focus({ force: true })
         .clear({ force: true })
         .type(
           JSON.stringify({
@@ -217,14 +217,11 @@ describe("Create Index", () => {
       cy.get('[data-test-subj="editorTypeJsonEditor"]')
         .click()
         .end()
-        .get(".ace_text-input")
-        .focus()
+        .get('[data-test-subj="mappingsJsonEditorFormRow"] [data-test-subj="jsonEditor-valueDisplay"]')
+        .focus({ force: true })
         .clear({ force: true })
-        .type('{ "dynamic": true }', {
-          parseSpecialCharSequences: false,
-          force: true,
-        })
-        .blur()
+        .type('{ "dynamic": true }', { parseSpecialCharSequences: false, force: true })
+        .blur({ force: true })
         .end()
         .wait(1000)
         .get('[data-test-subj="createIndexCreateButton"]')
@@ -237,9 +234,10 @@ describe("Create Index", () => {
         .get('[data-test-subj="previousMappingsJsonButton"]')
         .click()
         .end()
+        .wait(1000)
         .get('[data-test-subj="previousMappingsJsonModal"] [data-test-subj="jsonEditor-valueDisplay"]')
         .should(
-          "have.text",
+          "have.value",
           JSON.stringify(
             {
               dynamic: "true",

@@ -56,6 +56,7 @@
     "@testing-library/user-event": "^13.1.9",
     "@types/diff": "^5.0.2",
     "@types/flat": "^5.0.2",
+    "@types/json-schema": "^7.0.11",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.3.2",
     "cypress": "^6.0.0",

@@ -117,10 +117,12 @@ const IndexDetail = (
   }: IndexDetailProps,
   ref: Ref<IIndexDetailRef>
 ) => {
+  const valueRef = useRef(value);
+  valueRef.current = value;
   const hasEdit = useRef(false);
   const onValueChange = useCallback(
     (name: string | string[], val) => {
-      let finalValue = value || {};
+      let finalValue = valueRef.current || {};
       set(finalValue, name, val);
       onChange({ ...finalValue });
       if (name !== "index") {

@@ -4,15 +4,16 @@
  */
 
 import React, { forwardRef, useCallback, useState, Ref, useRef, useMemo, useImperativeHandle } from "react";
-import { EuiTreeView, EuiIcon, EuiTreeViewProps, EuiButton, EuiSpacer, EuiButtonGroup, EuiLink } from "@elastic/eui";
+import { EuiTreeView, EuiIcon, EuiTreeViewProps, EuiButton, EuiSpacer, EuiButtonGroup, EuiLink, EuiCallOut } from "@elastic/eui";
 import { set, get, isEmpty } from "lodash";
-import JSONEditor, { IJSONEditorRef } from "../JSONEditor";
+import MonacoJSONEditor, { IJSONEditorRef } from "../MonacoJSONEditor";
 import { Modal } from "../Modal";
 import { MappingsProperties } from "../../../models/interfaces";
 import CustomFormRow from "../CustomFormRow";
 import MappingLabel, { IMappingLabelRef } from "../MappingLabel";
-import { transformObjectToArray, transformArrayToObject, countNodesInTree } from "./helper";
+import { transformObjectToArray, transformArrayToObject, countNodesInTree, noAdditionalPropertiesValidator } from "./helper";
 import { IndexMappingsObjectAll, IndexMappingProps, EDITOR_MODE, IIndexMappingsRef } from "./interfaces";
+import { IndexMappingsJSONEditorSchema, schemaId } from "../../utils/JSON_schemas/index_mappings";
 import "./IndexMapping.scss";
 
 export * from "./helper";
@@ -171,6 +172,14 @@ const IndexMapping = (
       <EuiSpacer />
       {editorMode === EDITOR_MODE.VISUAL ? (
         <>
+          {noAdditionalPropertiesValidator(transformArrayToObject(newValue)) ? null : (
+            <>
+              <EuiCallOut color="warning" title="You have advanced configurations not supported by the visual editor">
+                To view or modify all of your configurations, switch to the JSON editor.
+              </EuiCallOut>
+              <EuiSpacer />
+            </>
+          )}
           {transformedTreeItems.length ? (
             <EuiTreeView
               key={renderKey}
@@ -210,9 +219,12 @@ const IndexMapping = (
                 data-test-subj="previousMappingsJsonButton"
                 onClick={() => {
                   Modal.show({
+                    style: {
+                      width: "70vw",
+                    },
                     title: "Previous mappings",
                     content: (
-                      <JSONEditor
+                      <MonacoJSONEditor
                         readOnly
                         value={JSON.stringify(
                           {
@@ -235,7 +247,7 @@ const IndexMapping = (
             </>
           ) : null}
           {readonly ? (
-            <JSONEditor
+            <MonacoJSONEditor
               ref={JSONEditorRef}
               value={JSON.stringify(
                 {
@@ -245,6 +257,7 @@ const IndexMapping = (
                 null,
                 2
               )}
+              disabled={readonly}
               readOnly={readonly}
               width="100%"
             />
@@ -266,7 +279,7 @@ const IndexMapping = (
               }
               fullWidth
             >
-              <JSONEditor
+              <MonacoJSONEditor
                 value={JSON.stringify(
                   {
                     ...propsValue,
@@ -282,6 +295,30 @@ const IndexMapping = (
                     properties: [...(oldValue?.properties || []), ...transformObjectToArray(result?.properties || {})],
                   });
                 }}
+                path={`index-mappings-${Date.now()}.json`}
+                diagnosticsOptions={{
+                  validate: true,
+                  schemas: [
+                    {
+                      fileMatch: ["index-mappings-*.json"],
+                      schema: {
+                        title: "Index mappings",
+                        description: "Index mappings",
+                        type: "object",
+                        properties: {
+                          properties: {
+                            $ref: schemaId,
+                          },
+                        },
+                      },
+                      uri: "ISMIndexMappings",
+                    },
+                    {
+                      schema: IndexMappingsJSONEditorSchema,
+                      uri: schemaId,
+                    },
+                  ],
+                }}
                 width="100%"
                 ref={JSONEditorRef}
               />

@@ -2,7 +2,9 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+import Ajv from "ajv";
 import { MappingsProperties, MappingsPropertiesObject } from "../../../models/interfaces";
+import { noAdditionalJSONSchema } from "../../utils/JSON_schemas/index_mappings";
 
 export const transformObjectToArray = (obj: MappingsPropertiesObject): MappingsProperties => {
   return Object.entries(obj).map(([fieldName, fieldSettings]) => {
@@ -44,3 +46,6 @@ export const countNodesInTree = (array: MappingsProperties) => {
     return total;
   }, 0);
 };
+
+const ajvInstance = new Ajv();
+export const noAdditionalPropertiesValidator = ajvInstance.compile(noAdditionalJSONSchema);
@@ -2,11 +2,10 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle, useCallback } from "react";
 import { EuiFormRow } from "@elastic/eui";
 import { MonacoDiffEditor } from "react-monaco-editor";
-import type { monaco } from "@osd/monaco";
+import { monaco } from "@osd/monaco";
 import CustomFormRow from "../CustomFormRow";
 import { IJSONEditorRef } from "../JSONEditor";
 import { JSONDiffEditorProps } from "./interface";
@@ -124,7 +123,7 @@ const JSONDiffEditor = forwardRef(({ value, onChange, ...others }: JSONDiffEdito
           {...others}
           onChange={(val) => setEditorValue(val)}
           theme="euiColors"
-          language="xjson"
+          language="json"
           value={editorValue}
           options={{
             readOnly: others.disabled,

@@ -4,8 +4,10 @@
  */
 import type { MonacoDiffEditorProps } from "react-monaco-editor";
 import { JSONEditorProps } from "../JSONEditor";
+import { DiagnosticsOptions } from "../MonacoJSONEditor";
 
 export interface JSONDiffEditorProps extends JSONEditorProps, Pick<MonacoDiffEditorProps, "original"> {
+  diagnosticsOptions?: DiagnosticsOptions;
   value: string;
   onChange?: (value: JSONDiffEditorProps["value"]) => void;
   "data-test-subj"?: string;

@@ -0,0 +1,3 @@
+.monaco-json-editor-validate-error {
+    border: 1px solid red;
+}
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import MonacoJSONEditor from "./index";
+
+describe("<MonacoJSONEditor /> spec", () => {
+  it("renders the component", () => {
+    render(<MonacoJSONEditor value={JSON.stringify({ name: "test" })} />);
+    expect(document.body.children).toMatchSnapshot();
+  });
+});
@@ -0,0 +1,147 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle, useCallback } from "react";
+import { EuiFormRow } from "@elastic/eui";
+import MonacoEditor from "react-monaco-editor";
+import { monaco } from "@osd/monaco";
+import { IJSONEditorRef } from "../JSONEditor";
+import { MonacoJSONEditorProps } from "./interface";
+import { useDiagnosticsOptions, useModel } from "./hooks";
+import "./MonacoJSONEditor.scss";
+
+const MonacoJSONEditor = forwardRef(
+  ({ value, onChange, diagnosticsOptions, path, ...others }: MonacoJSONEditorProps, ref: React.Ref<IJSONEditorRef>) => {
+    const [confirmModalVisible, setConfirmModalVisible] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const [editorValue, setEditorValue] = useState(value);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | undefined>(undefined);
+    const hasBindEventRef = useRef<boolean>(false);
+    useDiagnosticsOptions({
+      monaco,
+      diagnosticsOptions,
+    });
+    const onClickOutsideHandler = useRef(() => {
+      if (others.disabled) {
+        return;
+      }
+      try {
+        const value = editorRef.current?.getValue();
+        if (!value) {
+          throw new Error("Value can not be empty");
+        }
+        JSON.parse(value);
+        setConfirmModalVisible(false);
+        onChange && onChange(value);
+      } catch (e) {
+        setConfirmModalVisible(true);
+      }
+    });
+    const setAllValue = useCallback(
+      (val: string) => {
+        setEditorValue(val);
+        if (isReady) {
+          inputRef.current?.setAttribute("value", val);
+          if (inputRef.current) {
+            inputRef.current.value = val;
+          }
+        }
+      },
+      [setEditorValue, isReady, inputRef.current]
+    );
+    const valueRef = useRef(editorValue);
+    valueRef.current = editorValue;
+
+    useEffect(() => {
+      setAllValue(value);
+    }, [value, setAllValue]);
+
+    useModel({
+      editor: editorRef.current,
+      path,
+    });
+
+    useEffect(() => {
+      editorRef.current?.getDomNode()?.setAttribute("data-test-subj", "codeEditorContainer");
+      if (editorRef.current && isReady && !hasBindEventRef.current) {
+        editorRef.current.onDidBlurEditorWidget(onClickOutsideHandler.current);
+        hasBindEventRef.current = true;
+      }
+    }, [isReady]);
+
+    useEffect(() => {
+      return () => {
+        onClickOutsideHandler.current();
+      };
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      validate: () =>
+        new Promise((resolve, reject) => {
+          try {
+            JSON.parse(editorRef.current?.getValue() || "{}");
+            resolve("");
+          } catch (e) {
+            setConfirmModalVisible(true);
+            reject("Format validate error");
+          }
+        }),
+      getValue: () => valueRef.current,
+      setValue: (val: string) => setAllValue(val),
+    }));
+
+    return (
+      <>
+        <textarea
+          style={{ display: "none" }}
+          ref={inputRef}
+          onChange={(e) => {
+            try {
+              JSON.parse(e.target.value);
+              onChange && onChange(e.target.value);
+            } catch (e) {
+              // do nothing
+            }
+          }}
+          title={`editor-is-ready-${isReady}`}
+          data-test-subj={`${others["data-test-subj"] || "jsonEditor"}-valueDisplay`}
+        />
+        <div
+          style={{
+            height: others?.height || undefined,
+          }}
+          className={confirmModalVisible ? "monaco-json-editor-validate-error" : ""}
+        >
+          <MonacoEditor
+            height="600px"
+            {...others}
+            onChange={(val) => setEditorValue(val)}
+            theme="ismJSONTheme"
+            language="json"
+            value={editorValue}
+            options={{
+              readOnly: others.disabled || others.readOnly,
+            }}
+            editorDidMount={(editor) => {
+              editorRef.current = editor;
+              setIsReady(true);
+            }}
+          />
+        </div>
+        {confirmModalVisible && (
+          <EuiFormRow
+            fullWidth
+            isInvalid={confirmModalVisible}
+            error="Your input does not match the validation of json format, please fix the error line with error aside."
+          >
+            <></>
+          </EuiFormRow>
+        )}
+      </>
+    );
+  }
+);
+
+export default MonacoJSONEditor;
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MonacoJSONEditor /> spec renders the component 1`] = `
+HTMLCollection [
+  <div />,
+]
+`;