From f73ddb21c617efedcb6e5f2a33f54a49f494061a Mon Sep 17 00:00:00 2001
From: tchiotludo <tchiot.ludo@gmail.com>
Date: Sat, 4 Dec 2021 22:04:41 +0100
Subject: [PATCH] feat(ui): allow to create schema as JsonSchema

---
 client/src/components/Form/Form.jsx           |  2 +-
 .../Schema/SchemaCreate/SchemaCreate.jsx      | 42 +++++++++++++++----
 .../Schema/SchemaList/SchemaList.jsx          |  5 +++
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Form/Form.jsx b/client/src/components/Form/Form.jsx
index e6909fdad..71afd3570 100644
--- a/client/src/components/Form/Form.jsx
+++ b/client/src/components/Form/Form.jsx
@@ -257,4 +257,4 @@ class Form extends Root {
 }
 
 export default Form;
- 
+
diff --git a/client/src/containers/Schema/SchemaCreate/SchemaCreate.jsx b/client/src/containers/Schema/SchemaCreate/SchemaCreate.jsx
index 3df391f7d..53cc938f1 100644
--- a/client/src/containers/Schema/SchemaCreate/SchemaCreate.jsx
+++ b/client/src/containers/Schema/SchemaCreate/SchemaCreate.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import Header from '../../Header';
 import Joi from 'joi-browser';
 import Form from '../../../components/Form/Form';
-import { uriSchemaCreate } from '../../../utils/endpoints';
-import { toast } from 'react-toastify';
+import {uriSchemaCreate} from '../../../utils/endpoints';
+import {toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 class SchemaCreate extends Form {
@@ -11,7 +11,8 @@ class SchemaCreate extends Form {
     formData: {
       subject: '',
       compatibilityLevel: 'BACKWARD',
-      schemaData: ''
+      schemaData: '',
+      schemaType: 'AVRO'
     },
     compatibilityLevelSelect: [
       { _id: 'NONE', name: 'NONE' },
@@ -22,6 +23,11 @@ class SchemaCreate extends Form {
       { _id: 'FULL', name: 'FULL' },
       { _id: 'FULL_TRANSITIVE', name: 'FULL_TRANSITIVE' }
     ],
+    schemaTypeSelect: [
+      { _id: 'AVRO', name: 'AVRO' },
+      { _id: 'JSON', name: 'JSON' },
+      { _id: 'PROTOBUF', name: 'PROTOBUF' }
+    ],
     errors: {}
   };
 
@@ -32,6 +38,9 @@ class SchemaCreate extends Form {
     compatibilityLevel: Joi.string()
       .label('Compatibility')
       .required(),
+    schemaType: Joi.string()
+        .label('SchemaType')
+        .required(),
     schemaData: Joi.string()
       .label('SchemaData')
       .required()
@@ -48,14 +57,23 @@ class SchemaCreate extends Form {
     const { formData } = this.state;
     const { clusterId } = this.props.match.params;
 
-    const parsedSchemaData = JSON.parse(formData.schemaData);
-    const schemaData = parsedSchemaData.schema ? JSON.stringify(parsedSchemaData.schema) : formData.schemaData;
-    const references = parsedSchemaData.references || [];
+    const schemaType = formData.schemaType;
+    let schemaData;
+    let references;
+
+    if (formData.schemaType === 'PROTOBUF') {
+      schemaData = formData.schemaData;
+    } else {
+      const parsedSchemaData = JSON.parse(formData.schemaData);
+      schemaData = parsedSchemaData.schema ? JSON.stringify(parsedSchemaData.schema) : formData.schemaData
+      references = parsedSchemaData.references || [];
+    }
 
     const schema = {
       cluster: clusterId,
       subject: formData.subject,
       schema: schemaData,
+      schemaType: schemaType,
       references: references,
       compatibilityLevel: formData.compatibilityLevel
     };
@@ -70,7 +88,7 @@ class SchemaCreate extends Form {
   }
 
   render() {
-    const { compatibilityLevelSelect, formData } = this.state;
+    const { compatibilityLevelSelect, schemaTypeSelect, formData } = this.state;
     return (
       <div>
         <form
@@ -91,6 +109,16 @@ class SchemaCreate extends Form {
             'col-sm-10'
           )}
 
+          {this.renderSelect(
+              'schemaType',
+              'Schema Type',
+              schemaTypeSelect,
+              value => {
+                this.setState({ formData: { ...formData, schemaType: value.target.value } });
+              },
+              'col-sm-10'
+          )}
+
           {this.renderJSONInput('schemaData', 'Schema', value => {
             this.setState({
               formData: {
diff --git a/client/src/containers/Schema/SchemaList/SchemaList.jsx b/client/src/containers/Schema/SchemaList/SchemaList.jsx
index b9c5d45f4..bc8a99720 100644
--- a/client/src/containers/Schema/SchemaList/SchemaList.jsx
+++ b/client/src/containers/Schema/SchemaList/SchemaList.jsx
@@ -201,6 +201,11 @@ class SchemaList extends Root {
               accessor: 'subject',
               colName: 'Subject'
             },
+            {
+              id: 'schemaType',
+              accessor: 'schemaType',
+              colName: 'Schema Type'
+            },
             {
               id: 'version',
               accessor: 'version',