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

@@ -5,10 +5,37 @@ const API_URL = "/api/v1";
 
 
 export const jsonschemaProvider = {
-  getResourceSchema: async (resourceName: string): Promise<RJSFSchema> => {
+  getCardResourceSchema: async (resourceName: string): Promise<RJSFSchema> => {
+    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<RJSFSchema> => {
+    return getResourceSchema(`${resourceName}Update`)
+  },
+
+  getCreateResourceSchema: async (resourceName: string): Promise<RJSFSchema> => {
+    return getResourceSchema(`${resourceName}Create`)
+  },
+}
+
+const getResourceSchema = async (resourceName: string): Promise<RJSFSchema> => {
     return buildResource(await getJsonschema(), resourceName)
-  }
-};
+}
 
 let rawSchema: RJSFSchema;
 const getJsonschema = async (): Promise<RJSFSchema> => {