Add JSON Schema editor view

dashboard/craco.config.js

@@ -20,7 +20,7 @@ module.exports = {
         }),
         new MonacoWebpackPlugin({
           // see https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin
-          languages: ["yaml"],
+          languages: ["yaml", "json"],
         }),
       ],
       ignoreWarnings: [/Failed to parse source map/], // ignore source map warnings

dashboard/src/components/DeploymentForm/DeploymentFormBody/AdvancedDeploymentForm/AdvancedDeploymentForm.test.tsx

@@ -4,7 +4,7 @@
 import { SupportedThemes } from "shared/Config";
 import { defaultStore, getStore, mountWrapper } from "shared/specs/mountWrapper";
 import { IStoreState } from "shared/types";
-import AdvancedDeploymentForm from "./AdvancedDeploymentForm";
+import AdvancedDeploymentForm, { IAdvancedDeploymentForm } from "./AdvancedDeploymentForm";
 
 beforeEach(() => {
   // mock the window.matchMedia for selecting the theme
@@ -48,15 +48,14 @@ afterEach(() => {
   jest.restoreAllMocks();
 });
 
-const defaultProps = {
+const defaultProps: IAdvancedDeploymentForm = {
   handleValuesChange: jest.fn(),
   valuesFromTheDeployedPackage: "",
   valuesFromTheAvailablePackage: "",
   deploymentEvent: "",
   valuesFromTheParentContainer: "",
 };
 
-// eslint-disable-next-line jest/no-focused-tests
 it("includes values", () => {
   const wrapper = mountWrapper(
     defaultStore,

dashboard/src/components/DeploymentForm/DeploymentFormBody/AdvancedDeploymentForm/AdvancedDeploymentForm.tsx

@@ -146,37 +146,39 @@ export default function AdvancedDeploymentForm(props: IAdvancedDeploymentForm) {
 
   return (
     <div className="deployment-form-tabs-data">
-      <>
+      <div className="deployment-form-tabs-data-buttons">
         <Row>
           <Column span={3}>
-            <CdsRadioGroup layout="vertical">
-              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-              <label>Enable diff editor:</label>
-              <CdsRadio>
-                <label htmlFor="diff-compare-enable-true">Yes</label>
-                <input
-                  id="diff-compare-enable-true"
-                  type="radio"
-                  name="true"
-                  checked={useDiffEditor}
-                  onChange={e => {
-                    setUseDiffEditor(e.target.checked);
-                  }}
-                />
-              </CdsRadio>
-              <CdsRadio>
-                <label htmlFor="diff-compare-enable-false">No</label>
-                <input
-                  id="diff-compare-enable-false"
-                  type="radio"
-                  name="deployed"
-                  checked={!useDiffEditor}
-                  onChange={e => {
-                    setUseDiffEditor(!e.target.checked);
-                  }}
-                />
-              </CdsRadio>
-            </CdsRadioGroup>
+            <div className="deployment-form-tabs-buttons">
+              <CdsRadioGroup layout="vertical">
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                <label>Enable diff editor:</label>
+                <CdsRadio>
+                  <label htmlFor="diff-compare-enable-true">Yes</label>
+                  <input
+                    id="diff-compare-enable-true"
+                    type="radio"
+                    name="true"
+                    checked={useDiffEditor}
+                    onChange={e => {
+                      setUseDiffEditor(e.target.checked);
+                    }}
+                  />
+                </CdsRadio>
+                <CdsRadio>
+                  <label htmlFor="diff-compare-enable-false">No</label>
+                  <input
+                    id="diff-compare-enable-false"
+                    type="radio"
+                    name="deployed"
+                    checked={!useDiffEditor}
+                    onChange={e => {
+                      setUseDiffEditor(!e.target.checked);
+                    }}
+                  />
+                </CdsRadio>
+              </CdsRadioGroup>
+            </div>
           </Column>
           {deploymentEvent === "upgrade" ? (
             <>
@@ -215,19 +217,20 @@ export default function AdvancedDeploymentForm(props: IAdvancedDeploymentForm) {
             <></>
           )}
         </Row>
-      </>
+      </div>
       <br />
-      <MonacoDiffEditor
-        value={valuesFromTheParentContainer}
-        original={diffValues}
-        className="editor"
-        height="90vh"
-        language="yaml"
-        theme={theme === "dark" ? "vs-dark" : "light"}
-        options={diffEditorOptions}
-        onChange={onChange}
-        editorDidMount={editorDidMount}
-      />
+      <div className="deployment-form-tabs-data values-editor">
+        <MonacoDiffEditor
+          value={valuesFromTheParentContainer}
+          original={diffValues}
+          height="90vh"
+          language="yaml"
+          theme={theme === "dark" ? "vs-dark" : "light"}
+          options={diffEditorOptions}
+          onChange={onChange}
+          editorDidMount={editorDidMount}
+        />
+      </div>
     </div>
   );
 }

dashboard/src/components/DeploymentForm/DeploymentFormBody/BasicDeploymentForm/BasicDeploymentForm.test.tsx

@@ -38,9 +38,9 @@ const defaultProps = {
     params: [
       {
         key: "wordpressPassword",
-        currentValue: "sserpdrow",
-        defaultValue: "sserpdrow",
-        deployedValue: "sserpdrow",
+        currentValue: "password",
+        defaultValue: "password",
+        deployedValue: "password",
         hasProperties: false,
         title: "Password",
         schema: {
@@ -171,9 +171,9 @@ const defaultProps = {
       } as IBasicFormParam,
       {
         key: "wordpressPassword",
-        currentValue: "sserpdrow",
-        defaultValue: "sserpdrow",
-        deployedValue: "sserpdrow",
+        currentValue: "password",
+        defaultValue: "password",
+        deployedValue: "password",
         hasProperties: false,
         title: "Password",
         schema: {
@@ -250,6 +250,7 @@ const defaultProps = {
         defaultValue: "[element1]",
         deployedValue: "[element1]",
         hasProperties: false,
+        minItems: 1,
         title: "string[]",
         schema: {
           type: "array",
@@ -271,6 +272,7 @@ const defaultProps = {
         deployedValue: "[1]",
         hasProperties: false,
         title: "number[]",
+        minItems: 1,
         schema: {
           type: "array",
           items: {
@@ -291,6 +293,7 @@ const defaultProps = {
         deployedValue: "[true]",
         hasProperties: false,
         title: "boolean[]",
+        minItems: 1,
         schema: {
           type: "array",
           items: {
@@ -311,6 +314,7 @@ const defaultProps = {
         deployedValue: "[{}]",
         hasProperties: false,
         title: "object[]",
+        minItems: 1,
         schema: {
           type: "array",
           items: {
@@ -343,16 +347,16 @@ const defaultProps = {
             expect(input.prop("type")).toBe("password");
             break;
           }
-          expect(input.prop("type")).toBe("string");
+          expect(input.prop("type")).toBe("text");
           break;
         case "boolean":
           expect(input.prop("type")).toBe("checkbox");
           break;
         case "number":
           expect(inputNumText.prop("type")).toBe("number");
-          expect(inputNumText.prop("step")).toBe(0.1);
+          expect(inputNumText.prop("step")).toBe(0.5);
           expect(inputNumRange.prop("type")).toBe("range");
-          expect(inputNumRange.prop("step")).toBe(0.1);
+          expect(inputNumRange.prop("step")).toBe(0.5);
           break;
         case "integer":
           expect(inputNumText.prop("type")).toBe("number");
@@ -361,11 +365,7 @@ const defaultProps = {
           expect(inputNumRange.prop("step")).toBe(1);
           break;
         case "array":
-          if (param.schema.items.type !== "object") {
-            expect(wrapper.find("ArrayParam input").first()).toExist();
-          } else {
-            expect(wrapper.find("textarea")).toExist();
-          }
+          expect(wrapper.find("ArrayParam input").first()).toExist();
           break;
         case "object":
           expect(wrapper.find(`textarea#${param.key}`)).toExist();
@@ -376,14 +376,10 @@ const defaultProps = {
       if (["integer", "number"].includes(param.type)) {
         inputNumText.simulate("change", { target: { value: "" } });
       } else if (param.type === "array") {
-        if (param.schema.items.type !== "object") {
-          wrapper
-            .find("ArrayParam input")
-            .first()
-            .simulate("change", { target: { value: "" } });
-        } else {
-          wrapper.find("textarea").simulate("change", { target: { value: "" } });
-        }
+        wrapper
+          .find("ArrayParam input")
+          .first()
+          .simulate("change", { target: { value: "" } });
       } else if (param.type === "object") {
         wrapper.find(`textarea#${param.key}`).simulate("change", { target: { value: "" } });
       } else {