Creating Card Resources that readonly non updatable resources fields

gui/rpk-gui/src/lib/crud/components/crud-form.tsx

@@ -32,8 +32,8 @@ export const CrudForm: React.FC<CrudFormProps> = (props) => {
   useEffect(() => {
     const fetchSchema = async () => {
       try {
-        const schemaFullName = id === undefined ? `${schemaName}Create` : `${schemaName}Update`;
-        const resourceSchema = await jsonschemaProvider.getResourceSchema(schemaFullName);
+        const resourceSchema = id === undefined ? await jsonschemaProvider.getCreateResourceSchema(schemaName)
+          : await jsonschemaProvider.getCardResourceSchema(schemaName);
         setSchema(resourceSchema);
         setSchemaLoading(false);
       } catch (error) {

gui/rpk-gui/src/lib/crud/providers/jsonschema-provider.tsx

@@ -1,14 +1,49 @@
 import { RJSFSchema } from '@rjsf/utils';
 import i18n from '../../../i18n'
+import { JSONSchema7Definition } from "json-schema";
 
 const API_URL = "/api/v1";
 
+type CrudRJSFSchema = RJSFSchema & {
+    properties?: {
+        [key: string]: JSONSchema7Definition & {
+          readOnly?: boolean | undefined;
+        };
+    } | undefined;
+}
 
 export const jsonschemaProvider = {
-  getResourceSchema: async (resourceName: string): Promise<RJSFSchema> => {
-    return buildResource(await getJsonschema(), resourceName)
+  getCardResourceSchema: async (resourceName: string): Promise<CrudRJSFSchema> => {
+    const updateSchema = await getResourceSchema(`${resourceName}Update`);
+    const readSchema = await getResourceSchema(`${resourceName}Read`);
+
+    for (let prop_name in readSchema.properties) {
+        if (! updateSchema.hasOwnProperty(prop_name)) {
+            if (is_reference(readSchema.properties[prop_name])) {
+                let subresourceName = get_reference_name(readSchema.properties[prop_name]);
+                readSchema.components.schemas[subresourceName].readOnly = true;
+            } else {
+                readSchema.properties[prop_name].readOnly = true;
             }
-};
+        }
+    }
+    changePropertiesOrder(readSchema);
+
+    return readSchema
+  },
+
+  getUpdateResourceSchema: async (resourceName: string): Promise<CrudRJSFSchema> => {
+    return getResourceSchema(`${resourceName}Update`)
+  },
+
+  getCreateResourceSchema: async (resourceName: string): Promise<CrudRJSFSchema> => {
+    return getResourceSchema(`${resourceName}Create`)
+  },
+}
+
+const getResourceSchema = async (resourceName: string): Promise<CrudRJSFSchema> => {
+    return buildResource(await getJsonschema(), resourceName)
+}
 
 let rawSchema: RJSFSchema;
 const getJsonschema = async (): Promise<RJSFSchema> => {