New deployment forms: add json-schema-based table

dashboard/package.json

@@ -50,9 +50,7 @@
     "protobufjs": "^7.1.2",
     "qs": "^6.11.0",
     "react": "^17.0.2",
-    "react-compound-slider": "^3.4.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-intl": "^6.1.1",
     "react-markdown": "^8.0.3",
@@ -61,9 +59,6 @@
     "react-redux": "^7.2.9",
     "react-router-dom": "^5.3.0",
     "react-router-hash-link": "^2.4.3",
-    "react-switch": "^7.0.0",
-    "react-tabs": "^5.1.0",
-    "react-test-renderer": "^17.0.2",
     "react-tooltip": "^4.2.21",
     "react-transition-group": "^4.4.5",
     "redux": "^4.2.0",
@@ -113,7 +108,9 @@
     "postcss": "^8.4.16",
     "postcss-scss": "^4.0.5",
     "prettier": "^2.7.1",
+    "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1",
+    "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
     "sass": "^1.55.0",
     "shx": "^0.3.4",

dashboard/src/actions/installedpackages.ts

@@ -27,7 +27,7 @@ import {
 import { getPluginsSupportingRollback } from "shared/utils";
 import { ActionType, deprecated } from "typesafe-actions";
 import { InstalledPackage } from "../shared/InstalledPackage";
-import { validate } from "../shared/schema";
+import { validateSchema, validateValuesSchema } from "../shared/schema";
 import { handleErrorAction } from "./auth";
 
 const { createAction } = deprecated;
@@ -234,11 +234,20 @@ export function installPackage(
     dispatch(requestInstallPackage());
     try {
       if (values && schema) {
-        const validation = validate(values, schema);
+        const schemaValidation = validateSchema(schema);
+        if (!schemaValidation.valid) {
+          const errorText = schemaValidation?.errors
+            ?.map(e => `  - ${e.instancePath}: ${e.message}`)
+            .join("\n");
+          throw new UnprocessableEntityError(
+            `The schema for this package is not valid. Please contact the package author. The following errors were found:\n${errorText}`,
+          );
+        }
+        const validation = validateValuesSchema(values, schema);
         if (!validation.valid) {
-          const errorText =
-            validation.errors &&
-            validation.errors.map(e => `  - ${e.instancePath}: ${e.message}`).join("\n");
+          const errorText = validation?.errors
+            ?.map(e => `  - ${e.instancePath}: ${e.message}`)
+            .join("\n");
           throw new UnprocessableEntityError(
             `The given values don't match the required format. The following errors were found:\n${errorText}`,
           );
@@ -283,11 +292,20 @@ export function updateInstalledPackage(
     dispatch(requestUpdateInstalledPackage());
     try {
       if (values && schema) {
-        const validation = validate(values, schema);
+        const schemaValidation = validateSchema(schema);
+        if (!schemaValidation.valid) {
+          const errorText = schemaValidation?.errors
+            ?.map(e => `  - ${e.instancePath}: ${e.message}`)
+            .join("\n");
+          throw new UnprocessableEntityError(
+            `The schema for this package is not valid. Please contact the package author. The following errors were found:\n${errorText}`,
+          );
+        }
+        const validation = validateValuesSchema(values, schema);
         if (!validation.valid) {
-          const errorText =
-            validation.errors &&
-            validation.errors.map(e => `  - ${e.instancePath}: ${e.message}`).join("\n");
+          const errorText = validation?.errors
+            ?.map(e => `  - ${e.instancePath}: ${e.message}`)
+            .join("\n");
           throw new UnprocessableEntityError(
             `The given values don't match the required format. The following errors were found:\n${errorText}`,
           );

dashboard/src/components/AppUpgrade/AppUpgrade.test.tsx

@@ -131,7 +131,7 @@ beforeEach(() => {
     })),
   });
 
-  // mock the window.ResizeObserver, required by the MonacoEditor for the layout
+  // mock the window.ResizeObserver, required by the MonacoDiffEditor for the layout
   Object.defineProperty(window, "ResizeObserver", {
     writable: true,
     configurable: true,
@@ -142,7 +142,7 @@ beforeEach(() => {
     })),
   });
 
-  // mock the window.HTMLCanvasElement.getContext(), required by the MonacoEditor for the layout
+  // mock the window.HTMLCanvasElement.getContext(), required by the MonacoDiffEditor for the layout
   Object.defineProperty(HTMLCanvasElement.prototype, "getContext", {
     writable: true,
     configurable: true,

dashboard/src/components/AppView/AppView.tsx

@@ -404,6 +404,7 @@ export default function AppView() {
                 <div className="appview-separator">
                   <AppValues
                     values={
+                      //TODO(agamez): check if using this yaml.dump/load is really needed
                       selectedInstalledPkg?.valuesApplied
                         ? yaml.dump(yaml.load(selectedInstalledPkg.valuesApplied))
                         : ""

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

@@ -22,8 +22,8 @@ import { MemoryRouter, Route, Router } from "react-router-dom";
 import { Kube } from "shared/Kube";
 import { getStore, mountWrapper } from "shared/specs/mountWrapper";
 import { FetchError, IStoreState, PluginNames } from "shared/types";
-import DeploymentFormBody from "../DeploymentFormBody/DeploymentFormBody";
 import DeploymentForm from "./DeploymentForm";
+import DeploymentFormBody from "./DeploymentFormBody";
 
 const defaultProps = {
   pkgName: "foo",
@@ -79,7 +79,7 @@ beforeEach(() => {
     })),
   });
 
-  // mock the window.ResizeObserver, required by the MonacoEditor for the layout
+  // mock the window.ResizeObserver, required by the MonacoDiffEditor for the layout
   Object.defineProperty(window, "ResizeObserver", {
     writable: true,
     configurable: true,
@@ -90,7 +90,7 @@ beforeEach(() => {
     })),
   });
 
-  // mock the window.HTMLCanvasElement.getContext(), required by the MonacoEditor for the layout
+  // mock the window.HTMLCanvasElement.getContext(), required by the MonacoDiffEditor for the layout
   Object.defineProperty(HTMLCanvasElement.prototype, "getContext", {
     writable: true,
     configurable: true,

dashboard/src/components/DeploymentForm/DeploymentForm.tsx

@@ -10,25 +10,24 @@ import AvailablePackageDetailExcerpt from "components/Catalog/AvailablePackageDe
 import Alert from "components/js/Alert";
 import Column from "components/js/Column";
 import Row from "components/js/Row";
+import LoadingWrapper from "components/LoadingWrapper";
 import PackageHeader from "components/PackageHeader/PackageHeader";
 import { push } from "connected-react-router";
 import {
   AvailablePackageReference,
   ReconciliationOptions,
 } from "gen/kubeappsapis/core/packages/v1alpha1/packages";
 import { Plugin } from "gen/kubeappsapis/core/plugins/v1alpha1/plugins";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import * as ReactRouter from "react-router-dom";
-import "react-tabs/style/react-tabs.css";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 import { Kube } from "shared/Kube";
 import { FetchError, IStoreState } from "shared/types";
 import * as url from "shared/url";
 import { getPluginsRequiringSA, k8sObjectNameRegex } from "shared/utils";
-import DeploymentFormBody from "../DeploymentFormBody/DeploymentFormBody";
-import LoadingWrapper from "../LoadingWrapper/LoadingWrapper";
+import DeploymentFormBody from "./DeploymentFormBody";
 interface IRouteParams {
   cluster: string;
   namespace: string;
@@ -63,6 +62,7 @@ export default function DeploymentForm() {
   const [valuesModified, setValuesModified] = useState(false);
   const [serviceAccountList, setServiceAccountList] = useState([] as string[]);
   const [reconciliationOptions, setReconciliationOptions] = useState({} as ReconciliationOptions);
+  const formRef = useRef<HTMLFormElement>(null);
 
   const error = apps.error || selectedPackage.error;
 
@@ -209,7 +209,7 @@ export default function DeploymentForm() {
           </Column>
           <Column span={9}>
             {error && <Alert theme="danger">An error occurred: {error.message}</Alert>}
-            <form onSubmit={handleDeploy}>
+            <form onSubmit={handleDeploy} ref={formRef}>
               <CdsFormGroup
                 validate={true}
                 className="deployment-form"
@@ -267,6 +267,7 @@ export default function DeploymentForm() {
                 setValues={handleValuesChange}
                 appValues={appValues}
                 setValuesModified={setValuesModifiedTrue}
+                formRef={formRef}
               />
             </form>
           </Column>

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

@@ -1,7 +1,6 @@
 // Copyright 2021-2022 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
-import MonacoEditor from "react-monaco-editor";
 import { SupportedThemes } from "shared/Config";
 import { defaultStore, getStore, mountWrapper } from "shared/specs/mountWrapper";
 import { IStoreState } from "shared/types";
@@ -24,7 +23,7 @@ beforeEach(() => {
     })),
   });
 
-  // mock the window.ResizeObserver, required by the MonacoEditor for the layout
+  // mock the window.ResizeObserver, required by the MonacoDiffEditor for the layout
   Object.defineProperty(window, "ResizeObserver", {
     writable: true,
     configurable: true,
@@ -35,7 +34,7 @@ beforeEach(() => {
     })),
   });
 
-  // mock the window.HTMLCanvasElement.getContext(), required by the MonacoEditor for the layout
+  // mock the window.HTMLCanvasElement.getContext(), required by the MonacoDiffEditor for the layout
   Object.defineProperty(HTMLCanvasElement.prototype, "getContext", {
     writable: true,
     configurable: true,
@@ -51,25 +50,30 @@ afterEach(() => {
 
 const defaultProps = {
   handleValuesChange: jest.fn(),
+  valuesFromTheDeployedPackage: "",
+  valuesFromTheAvailablePackage: "",
+  deploymentEvent: "",
+  valuesFromTheParentContainer: "",
 };
 
+// eslint-disable-next-line jest/no-focused-tests
 it("includes values", () => {
   const wrapper = mountWrapper(
     defaultStore,
-    <AdvancedDeploymentForm {...defaultProps} appValues="foo: bar" />,
+    <AdvancedDeploymentForm {...defaultProps} valuesFromTheParentContainer="foo: bar" />,
   );
-  expect(wrapper.find(MonacoEditor).prop("value")).toBe("foo: bar");
+  expect(wrapper.find("MonacoDiffEditor").prop("value")).toBe("foo: bar");
 });
 
 it("sets light theme by default", () => {
   const wrapper = mountWrapper(defaultStore, <AdvancedDeploymentForm {...defaultProps} />);
-  expect(wrapper.find(MonacoEditor).prop("theme")).toBe("light");
+  expect(wrapper.find("MonacoDiffEditor").prop("theme")).toBe("light");
 });
 
 it("changes theme", () => {
   const wrapper = mountWrapper(
     getStore({ config: { theme: SupportedThemes.dark } } as Partial<IStoreState>),
     <AdvancedDeploymentForm {...defaultProps} />,
   );
-  expect(wrapper.find(MonacoEditor).prop("theme")).toBe("vs-dark");
+  expect(wrapper.find("MonacoDiffEditor").prop("theme")).toBe("vs-dark");
 });