frontend: Add non-editable fields to KubeObjects and exclude them in …

…YAML editor

This PR adds a new var to KubeObject classes to declare non-editable fields. It also sets a new getEditableObject method that uses these fields and removes them from an object clone and ensure YAML editor uses getEditableObject to exclude non-editable fields.

Fixes: #2032
Signed-off-by: guilhane <guilhane.bourgoin@orange.com>

frontend/src/components/common/Resource/EditButton.tsx

@@ -108,7 +108,7 @@ export default function EditButton(props: EditButtonProps) {
       />
       {openDialog && (
         <EditorDialog
-          item={item.jsonData}
+          item={item.getEditableObject()}
           open={openDialog}
           onClose={() => setOpenDialog(false)}
           onSave={handleSave}

frontend/src/lib/k8s/cluster.ts

@@ -1,4 +1,5 @@
 import { OpPatch } from 'json-patch';
+import { JSONPath } from 'jsonpath-plus';
 import { cloneDeep, unset } from 'lodash';
 import React from 'react';
 import helpers from '../../helpers';
@@ -329,6 +330,11 @@ export interface AuthRequestResourceAttrs {
   group?: string;
   verb?: string;
 }
+type JsonPath<T> = T extends object
+  ? {
+      [K in keyof T]: K extends string ? `${K}` | `${K}.${JsonPath<T[K]>}` : never;
+    }[keyof T]
+  : never;
 
 // @todo: uses of makeKubeObject somehow end up in an 'any' type.
 
@@ -343,6 +349,7 @@ export function makeKubeObject<T extends KubeObjectInterface | KubeEvent>(
   class KubeObject {
     static apiEndpoint: ReturnType<typeof apiFactoryWithNamespace | typeof apiFactory>;
     jsonData: T | null = null;
+    public static readOnlyFields: JsonPath<T>[];
     private readonly _clusterName: string;
 
     constructor(json: T) {
@@ -430,6 +437,26 @@ export function makeKubeObject<T extends KubeObjectInterface | KubeEvent>(
       return this.apiEndpoint.isNamespaced;
     }
 
+    getEditableObject() {
+      const fieldsToRemove = this._class().readOnlyFields;
+      const code = this.jsonData ? cloneDeep(this.jsonData) : {};
+
+      fieldsToRemove?.forEach((path: JsonPath<T>) => {
+        JSONPath({
+          path,
+          json: code,
+          callback: (result, type, fullPayload) => {
+            if (fullPayload.parent && fullPayload.parentProperty) {
+              delete fullPayload.parent[fullPayload.parentProperty];
+            }
+          },
+          resultType: 'all',
+        });
+      });
+
+      return code;
+    }
+
     // @todo: apiList has 'any' return type.
     /**
      * Returns the API endpoint for this object.

frontend/src/lib/k8s/crd.ts

@@ -52,6 +52,7 @@ class CustomResourceDefinition extends makeKubeObject<KubeCRD>('crd') {
     ['apiextensions.k8s.io', 'v1', 'customresourcedefinitions'],
     ['apiextensions.k8s.io', 'v1beta1', 'customresourcedefinitions']
   );
+  static readOnlyFields = ['metadata.managedFields'];
 
   static get className(): string {
     return 'CustomResourceDefinition';