Add JSON Schema editor view (#5530)

### Description of the change The basic forms view has been recently revamped with plain JSON schema support. However, most of the charts (and maybe other packages) do not bring any schema file as part of their bundle. #3535 brings some ideas on how to solve it, but, this PR is just paving the way with a very simplistic approach: let users edit/add a schema from a text editor. Currently, there is no way to upload a file externally, but if this happens to be helpful, could be added in a follow-up PR. ### Benefits Users will be able to edit/add json schemas for improving the "basic form" experience (validations, defaults, etc...). ### Possible drawbacks Important: this "edited (or added)" schema is NOT being used on the backend side. Meaning you can't expect a proper validation or any further schema enforcement. Using the schema in the backend as well would imply some extra changes that could be performed in a follow-up PR if really needed. ### Applicable issues - fixes #3535 ### Additional information > **Note** > This PR is part of a series of PRs aimed at closing [this milestone](https://github.com/vmware-tanzu/kubeapps/milestone/27). I have split the changes to ease the review process, but as there are many interrelated changes, the tests will be performed in a separate PR (on top of the branch containing all the changes). > PR 1 out of 6 ![PR-1](https://user-images.githubusercontent.com/11535726/197021211-e64814a7-29b1-4ac7-8043-51075f9dda9d.gif) Signed-off-by: Antonio Gamez Diaz <[email protected]>
vmware-tanzu · Oct 26, 2022 · cc9eddb · cc9eddb
1 parent b401c1b
commit cc9eddb
Show file tree

Hide file tree

Showing 63 changed files with 1,673 additions and 643 deletions.
diff --git a/chart/kubeapps/Chart.yaml b/chart/kubeapps/Chart.yaml
@@ -31,4 +31,4 @@ maintainers:
 name: kubeapps
 sources:
   - https://github.com/vmware-tanzu/kubeapps
-version: 11.0.2-dev2
+version: 11.1.0-dev1
diff --git a/chart/kubeapps/README.md b/chart/kubeapps/README.md
@@ -253,8 +253,8 @@ Once you have installed Kubeapps follow the [Getting Started Guide](https://gith
 | `dashboard.lifecycleHooks`                        | Custom lifecycle hooks for Dashboard containers                                                           | `{}`                 |
 | `dashboard.command`                               | Override default container command (useful when using custom images)                                      | `[]`                 |
 | `dashboard.args`                                  | Override default container args (useful when using custom images)                                         | `[]`                 |
-| `dashboard.podLabels`                             | Extra labels for Dasbhoard pods                                                                           | `{}`                 |
-| `dashboard.podAnnotations`                        | Annotations for Dasbhoard pods                                                                            | `{}`                 |
+| `dashboard.podLabels`                             | Extra labels for Dashboard pods                                                                           | `{}`                 |
+| `dashboard.podAnnotations`                        | Annotations for Dashboard pods                                                                            | `{}`                 |
 | `dashboard.podAffinityPreset`                     | Pod affinity preset. Ignored if `affinity` is set. Allowed values: `soft` or `hard`                       | `""`                 |
 | `dashboard.podAntiAffinityPreset`                 | Pod anti-affinity preset. Ignored if `affinity` is set. Allowed values: `soft` or `hard`                  | `soft`               |
 | `dashboard.nodeAffinityPreset.type`               | Node affinity preset type. Ignored if `affinity` is set. Allowed values: `soft` or `hard`                 | `""`                 |
@@ -267,12 +267,12 @@ Once you have installed Kubeapps follow the [Getting Started Guide](https://gith
 | `dashboard.schedulerName`                         | Name of the k8s scheduler (other than default)                                                            | `""`                 |
 | `dashboard.topologySpreadConstraints`             | Topology Spread Constraints for pod assignment                                                            | `[]`                 |
 | `dashboard.hostAliases`                           | Custom host aliases for Dashboard pods                                                                    | `[]`                 |
-| `dashboard.extraVolumes`                          | Optionally specify extra list of additional volumes for Dasbhoard pods                                    | `[]`                 |
-| `dashboard.extraVolumeMounts`                     | Optionally specify extra list of additional volumeMounts for Dasbhoard container(s)                       | `[]`                 |
-| `dashboard.sidecars`                              | Add additional sidecar containers to the Dasbhoard pod                                                    | `[]`                 |
-| `dashboard.initContainers`                        | Add additional init containers to the Dasbhoard pods                                                      | `[]`                 |
-| `dashboard.service.ports.http`                    | Dasbhoard service HTTP port                                                                               | `8080`               |
-| `dashboard.service.annotations`                   | Additional custom annotations for Dasbhoard service                                                       | `{}`                 |
+| `dashboard.extraVolumes`                          | Optionally specify extra list of additional volumes for Dashboard pods                                    | `[]`                 |
+| `dashboard.extraVolumeMounts`                     | Optionally specify extra list of additional volumeMounts for Dashboard container(s)                       | `[]`                 |
+| `dashboard.sidecars`                              | Add additional sidecar containers to the Dashboard pod                                                    | `[]`                 |
+| `dashboard.initContainers`                        | Add additional init containers to the Dashboard pods                                                      | `[]`                 |
+| `dashboard.service.ports.http`                    | Dashboard service HTTP port                                                                               | `8080`               |
+| `dashboard.service.annotations`                   | Additional custom annotations for Dashboard service                                                       | `{}`                 |
 
 
 ### AppRepository Controller parameters
@@ -421,14 +421,21 @@ Once you have installed Kubeapps follow the [Getting Started Guide](https://gith
 
 ### Other Parameters
 
+| Name                      | Description                                                                   | Value  |
+| ------------------------- | ----------------------------------------------------------------------------- | ------ |
+| `allowNamespaceDiscovery` | Allow users to discover available namespaces (only the ones they have access) | `true` |
+| `clusters`                | List of clusters that Kubeapps can target for deployments                     | `[]`   |
+| `rbac.create`             | Specifies whether RBAC resources should be created                            | `true` |
+
+
+### Feature flags
+
 | Name                                    | Description                                                                                                | Value   |
 | --------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------- |
-| `allowNamespaceDiscovery`               | Allow users to discover available namespaces (only the ones they have access)                              | `true`  |
-| `clusters`                              | List of clusters that Kubeapps can target for deployments                                                  | `[]`    |
-| `featureFlags.operators`                | Enable ingress record generation for Kubeapps                                                              | `false` |
 | `featureFlags.apiOnly.enabled`          | Enable ingress for API operations only. Access to "/" will not be possible, so Dashboard will be unusable. | `false` |
 | `featureFlags.apiOnly.grpc.annotations` | Specific annotations for the GRPC ingress in API-only mode                                                 | `{}`    |
-| `rbac.create`                           | Specifies whether RBAC resources should be created                                                         | `true`  |
+| `featureFlags.operators`                | Enable support for Operators in Kubeapps                                                                   | `false` |
+| `featureFlags.schemaEditor.enabled`     | Enable a visual editor for customizing the package schemas                                                 | `false` |
 
 
 ### Database Parameters
@@ -442,9 +449,9 @@ Once you have installed Kubeapps follow the [Getting Started Guide](https://gith
 | `postgresql.primary.persistence.enabled` | Enable PostgreSQL Primary data persistence using PVC                         | `false`      |
 | `postgresql.architecture`                | PostgreSQL architecture (`standalone` or `replication`)                      | `standalone` |
 | `postgresql.securityContext.enabled`     | Enabled PostgreSQL replicas pods' Security Context                           | `false`      |
-| `postgresql.resources.limits`            | The resources limits for the PostreSQL container                             | `{}`         |
-| `postgresql.resources.requests.cpu`      | The requested CPU for the PostreSQL container                                | `250m`       |
-| `postgresql.resources.requests.memory`   | The requested memory for the PostreSQL container                             | `256Mi`      |
+| `postgresql.resources.limits`            | The resources limits for the PostgreSQL container                            | `{}`         |
+| `postgresql.resources.requests.cpu`      | The requested CPU for the PostgreSQL container                               | `250m`       |
+| `postgresql.resources.requests.memory`   | The requested memory for the PostgreSQL container                            | `256Mi`      |
 
 
 ### kubeappsapis parameters
@@ -557,7 +564,7 @@ Once you have installed Kubeapps follow the [Getting Started Guide](https://gith
 | `redis.replica.disableCommands`     | Array with commands to deactivate on Redis&reg;                  | `[]`                                                     |
 | `redis.replica.persistence.enabled` | Enable Redis&reg; replica data persistence using PVC             | `false`                                                  |
 
-Specify each parameter using the `--set key=value[,key=value]` argument to `helm install`. For example,
+
 
 ```bash
 helm install kubeapps --namespace kubeapps \

diff --git a/chart/kubeapps/values.yaml b/chart/kubeapps/values.yaml
@@ -714,11 +714,11 @@ dashboard:
   ## @param dashboard.args Override default container args (useful when using custom images)
   ##
   args: []
-  ## @param dashboard.podLabels Extra labels for Dasbhoard pods
+  ## @param dashboard.podLabels Extra labels for Dashboard pods
   ## ref: https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/
   ##
   podLabels: {}
-  ## @param dashboard.podAnnotations Annotations for Dasbhoard pods
+  ## @param dashboard.podAnnotations Annotations for Dashboard pods
   ## ref: https://kubernetes.io/docs/concepts/overview/working-with-objects/annotations/
   ##
   podAnnotations: {}
@@ -776,13 +776,13 @@ dashboard:
   ## https://kubernetes.io/docs/concepts/services-networking/add-entries-to-pod-etc-hosts-with-host-aliases/
   ##
   hostAliases: []
-  ## @param dashboard.extraVolumes Optionally specify extra list of additional volumes for Dasbhoard pods
+  ## @param dashboard.extraVolumes Optionally specify extra list of additional volumes for Dashboard pods
   ##
   extraVolumes: []
-  ## @param dashboard.extraVolumeMounts Optionally specify extra list of additional volumeMounts for Dasbhoard container(s)
+  ## @param dashboard.extraVolumeMounts Optionally specify extra list of additional volumeMounts for Dashboard container(s)
   ##
   extraVolumeMounts: []
-  ## @param dashboard.sidecars Add additional sidecar containers to the Dasbhoard pod
+  ## @param dashboard.sidecars Add additional sidecar containers to the Dashboard pod
   ## e.g:
   ## sidecars:
   ##   - name: your-image-name
@@ -793,7 +793,7 @@ dashboard:
   ##         containerPort: 1234
   ##
   sidecars: []
-  ## @param dashboard.initContainers Add additional init containers to the Dasbhoard pods
+  ## @param dashboard.initContainers Add additional init containers to the Dashboard pods
   ## ref: https://kubernetes.io/docs/concepts/workloads/pods/init-containers/
   ## e.g:
   ## initContainers:
@@ -803,14 +803,14 @@ dashboard:
   ##    command: ['sh', '-c', 'echo "hello world"']
   ##
   initContainers: []
-  ## Dasbhoard service parameters
+  ## Dashboard service parameters
   ##
   service:
-    ## @param dashboard.service.ports.http Dasbhoard service HTTP port
+    ## @param dashboard.service.ports.http Dashboard service HTTP port
     ##
     ports:
       http: 8080
-    ## @param dashboard.service.annotations Additional custom annotations for Dasbhoard service
+    ## @param dashboard.service.annotations Additional custom annotations for Dashboard service
     ##
     annotations: {}
 
@@ -1417,28 +1417,36 @@ clusters:
   - name: default
     domain: cluster.local
 
-## @skip featureFlags Feature flags (used to switch on development features)
+## RBAC configuration
 ##
-featureFlags:
-  ## @param featureFlags.operators Enable ingress record generation for Kubeapps
+rbac:
+  ## @param rbac.create Specifies whether RBAC resources should be created
   ##
-  operators: false
-  ## @param featureFlags.apiOnly.enabled Enable ingress for API operations only. Access to "/" will not be possible, so Dashboard will be unusable.
-  ## @param featureFlags.apiOnly.grpc.annotations [object] Specific annotations for the GRPC ingress in API-only mode
+  create: true
+
+## @section Feature flags
+##
+## Opt-in features intended for development and advanced use cases.
+## They might be removed in future releases without prior notice.
+featureFlags:
   ## For a full list of possible ingress annotations, please see
-  ## ref: https://github.com/kubernetes/ingress-nginx/blob/main/docs/user-guide/nginx-configuration/annotations.md
-  ##
   apiOnly:
+    ## @param featureFlags.apiOnly.enabled Enable ingress for API operations only. Access to "/" will not be possible, so Dashboard will be unusable.
+    ##
     enabled: false
     grpc:
+      ## @param featureFlags.apiOnly.grpc.annotations [object] Specific annotations for the GRPC ingress in API-only mode
+      ## ref: https://github.com/kubernetes/ingress-nginx/blob/main/docs/user-guide/nginx-configuration/annotations.md
+      ##
       annotations:
         nginx.ingress.kubernetes.io/backend-protocol: GRPC
-## RBAC configuration
-##
-rbac:
-  ## @param rbac.create Specifies whether RBAC resources should be created
+  ## @param featureFlags.operators Enable support for Operators in Kubeapps
   ##
-  create: true
+  operators: false
+  schemaEditor:
+    ## @param featureFlags.schemaEditor.enabled Enable a visual editor for customizing the package schemas
+    ##
+    enabled: false
 
 ## @section Database Parameters
 
@@ -1469,11 +1477,11 @@ postgresql:
   ##
   securityContext:
     enabled: false
-  ## PostreSQL containers' resource requests and limits
+  ## PostgreSQL containers' resource requests and limits
   ## ref: https://kubernetes.io/docs/user-guide/compute-resources/
-  ## @param postgresql.resources.limits The resources limits for the PostreSQL container
-  ## @param postgresql.resources.requests.cpu The requested CPU for the PostreSQL container
-  ## @param postgresql.resources.requests.memory The requested memory for the PostreSQL container
+  ## @param postgresql.resources.limits The resources limits for the PostgreSQL container
+  ## @param postgresql.resources.requests.cpu The requested CPU for the PostgreSQL container
+  ## @param postgresql.resources.requests.memory The requested memory for the PostgreSQL container
   ##
   resources:
     limits: {}

diff --git a/dashboard/craco.config.js b/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

diff --git a/dashboard/public/config.json b/dashboard/public/config.json
@@ -10,7 +10,10 @@
   "oauthLogoutURI": "/oauth2/sign_out",
   "clusters": ["default"],
   "featureFlags": {
-    "operators": false
+    "operators": false,
+    "schemaEditor": {
+      "enabled": false
+    }
   },
   "theme": "light",
   "remoteComponentsUrl": "",

diff --git a/dashboard/src/actions/config.test.tsx b/dashboard/src/actions/config.test.tsx
@@ -22,7 +22,7 @@ const testConfig = {
   oauthLogoutURI: "",
   authProxySkipLoginPage: false,
   clusters: [],
-  featureFlags: { operators: false },
+  featureFlags: { operators: false, schemaEditor: { enabled: false } },
   theme: SupportedThemes.light,
   remoteComponentsUrl: "",
   customAppViews: [],

diff --git a/dashboard/src/components/AppList/AppList.test.tsx b/dashboard/src/components/AppList/AppList.test.tsx
@@ -58,7 +58,7 @@ afterEach(() => {
 context("when changing props", () => {
   it("should fetch apps in the new namespace", async () => {
     const state = deepClone(initialState) as IStoreState;
-    state.config.featureFlags = { operators: true };
+    state.config.featureFlags = { ...initialState.config.featureFlags, operators: true };
     const store = getStore(state);
     const fetchInstalledPackages = jest.fn();
     const getCustomResources = jest.fn();
@@ -71,7 +71,7 @@ context("when changing props", () => {
 
   it("should not fetch resources in the new namespace when operators is deactivated", async () => {
     const state = deepClone(initialState) as IStoreState;
-    state.config.featureFlags = { operators: false };
+    state.config.featureFlags = { ...initialState.config.featureFlags, operators: false };
     const store = getStore(state);
     const fetchInstalledPackages = jest.fn();
     const getCustomResources = jest.fn();
@@ -110,7 +110,7 @@ context("when changing props", () => {
 
   it("should fetch apps in all namespaces", async () => {
     const state = deepClone(initialState) as IStoreState;
-    state.config.featureFlags = { operators: true };
+    state.config.featureFlags = { ...initialState.config.featureFlags, operators: true };
     const store = getStore(state);
     const fetchInstalledPackages = jest.fn();
     const getCustomResources = jest.fn();

diff --git a/dashboard/src/components/AppView/AppControls/DeleteButton/DeleteButton.test.tsx b/dashboard/src/components/AppView/AppControls/DeleteButton/DeleteButton.test.tsx
@@ -27,7 +27,7 @@ const defaultProps = {
 };
 
 let spyOnUseDispatch: jest.SpyInstance;
-const kubeaActions = { ...actions.kube };
+const kubeActions = { ...actions.kube };
 beforeEach(() => {
   actions.installedpackages = {
     ...actions.installedpackages,
@@ -38,7 +38,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  actions.kube = { ...kubeaActions };
+  actions.kube = { ...kubeActions };
   spyOnUseDispatch.mockRestore();
 });
 

diff --git a/dashboard/src/components/AppView/AppControls/RollbackButton/RollbackButton.test.tsx b/dashboard/src/components/AppView/AppControls/RollbackButton/RollbackButton.test.tsx
@@ -30,7 +30,7 @@ const defaultProps = {
 };
 
 let spyOnUseDispatch: jest.SpyInstance;
-const kubeaActions = { ...actions.kube };
+const kubeActions = { ...actions.kube };
 beforeEach(() => {
   actions.installedpackages = {
     ...actions.installedpackages,
@@ -41,7 +41,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  actions.kube = { ...kubeaActions };
+  actions.kube = { ...kubeActions };
   spyOnUseDispatch.mockRestore();
 });
 

diff --git a/dashboard/src/components/AppView/AppControls/UpgradeButton/UpgradeButton.test.tsx b/dashboard/src/components/AppView/AppControls/UpgradeButton/UpgradeButton.test.tsx
@@ -23,7 +23,7 @@ const defaultProps = {
 };
 
 let spyOnUseDispatch: jest.SpyInstance;
-const kubeaActions = { ...actions.kube };
+const kubeActions = { ...actions.kube };
 beforeEach(() => {
   actions.installedpackages = {
     ...actions.installedpackages,
@@ -34,7 +34,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  actions.kube = { ...kubeaActions };
+  actions.kube = { ...kubeActions };
   spyOnUseDispatch.mockRestore();
 });
 

diff --git a/dashboard/src/components/AppView/CustomAppView/CustomAppView.test.tsx b/dashboard/src/components/AppView/CustomAppView/CustomAppView.test.tsx
@@ -14,7 +14,7 @@ import { IAppViewResourceRefs } from "../AppView";
 
 const defaultState = {
   config: { remoteComponentsUrl: "" },
-};
+} as IStoreState;
 
 const defaultProps = {
   app: {

diff --git a/dashboard/src/components/Catalog/Catalog.test.tsx b/dashboard/src/components/Catalog/Catalog.test.tsx
@@ -167,7 +167,7 @@ it("retrieves csvs in the namespace if operators enabled", () => {
   const getCSVs = jest.fn();
   actions.operators.getCSVs = getCSVs;
   const state = deepClone(populatedState) as IStoreState;
-  state.config.featureFlags = { operators: true };
+  state.config.featureFlags = { ...initialState.config.featureFlags, operators: true };
 
   mountWrapper(
     getStore(state),
@@ -185,7 +185,7 @@ it("not retrieveing csvs in the namespace if operators deactivated", () => {
   const getCSVs = jest.fn();
   actions.operators.getCSVs = getCSVs;
   const state = deepClone(populatedState) as IStoreState;
-  state.config.featureFlags = { operators: false };
+  state.config.featureFlags = { ...initialState.config.featureFlags, operators: false };
 
   mountWrapper(
     getStore(state),

diff --git a/dashboard/src/components/Config/PkgRepoList/PkgRepoButton.test.tsx b/dashboard/src/components/Config/PkgRepoList/PkgRepoButton.test.tsx
@@ -21,7 +21,7 @@ jest.mock("./PkgRepoForm", () => {
 });
 
 let spyOnUseDispatch: jest.SpyInstance;
-const kubeaActions = { ...actions.kube };
+const kubeActions = { ...actions.kube };
 beforeEach(() => {
   actions.repos = {
     ...actions.repos,
@@ -32,7 +32,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  actions.kube = { ...kubeaActions };
+  actions.kube = { ...kubeActions };
   spyOnUseDispatch.mockRestore();
 });