From ca608cd8d69263fa1571397743eb5f390bf6e6a4 Mon Sep 17 00:00:00 2001
From: Szymon Bogusz <sbg@touk.pl>
Date: Thu, 26 Sep 2024 12:50:01 +0200
Subject: [PATCH] feat: allow creating topic without schema

---
 src/components/addClonedTopicDialog.tsx |  1 +
 src/components/addTopicDialog.tsx       |  1 +
 src/components/dialogFormFields.tsx     |  5 ++++-
 src/components/dialogTemplate.tsx       |  4 ++++
 src/components/editTopicDialog.tsx      | 16 ++++++++++++++--
 src/components/topicDialog.tsx          | 15 +++++++++++++--
 src/models.ts                           |  5 ++++-
 src/store/topic.ts                      | 16 +++++++++++++---
 8 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/components/addClonedTopicDialog.tsx b/src/components/addClonedTopicDialog.tsx
index 0a8352b..bc6e6a1 100644
--- a/src/components/addClonedTopicDialog.tsx
+++ b/src/components/addClonedTopicDialog.tsx
@@ -24,6 +24,7 @@ export const AddClonedTopicDialog = observer(() => {
                   schema: topic.schemaPrettified,
                   group: groups.getGroupOfTopic(topic.name),
                   description: topic.description,
+                  contentType: topic.contentType,
                   ...getTopicData(topic),
               }
             : {
diff --git a/src/components/addTopicDialog.tsx b/src/components/addTopicDialog.tsx
index 92ae218..0f2325a 100644
--- a/src/components/addTopicDialog.tsx
+++ b/src/components/addTopicDialog.tsx
@@ -16,6 +16,7 @@ export const DEFAULT_TOPIC_VALUES: TopicFormikValues = {
     schema: "",
     group: "",
     description: "",
+    contentType: "AVRO",
 };
 
 export const AddTopicDialog = observer(() => {
diff --git a/src/components/dialogFormFields.tsx b/src/components/dialogFormFields.tsx
index 0d723dd..a9eea87 100644
--- a/src/components/dialogFormFields.tsx
+++ b/src/components/dialogFormFields.tsx
@@ -29,11 +29,13 @@ export const DialogFormFields = observer(
     (props: {
         basicFields: JSX.Element[];
         advancedFields: JSX.Element[];
+        schemaInputField: JSX.Element;
+        showSchemaInput: boolean;
         showAdvanced: boolean;
         toggleAdvanced: () => void;
         validateForm: () => void;
     }) => {
-        const { basicFields, advancedFields, showAdvanced, toggleAdvanced, validateForm } = props;
+        const { basicFields, schemaInputField, showSchemaInput, advancedFields, showAdvanced, toggleAdvanced, validateForm } = props;
         const { options } = useStore();
 
         const toggleButton = <ToggleButton toggleAdvanced={toggleAdvanced} validateForm={validateForm} showAdvanced={showAdvanced} />;
@@ -42,6 +44,7 @@ export const DialogFormFields = observer(
                 {basicFields.map((field, i) => (
                     <Box key={i}>{field}</Box>
                 ))}
+                {showSchemaInput && <Box key={1}>{schemaInputField}</Box>}
                 {options.allowAdvancedFields && advancedFields.length > 0 && (
                     <>
                         <Divider>{toggleButton}</Divider>
diff --git a/src/components/dialogTemplate.tsx b/src/components/dialogTemplate.tsx
index 7a2ee28..e8d184c 100644
--- a/src/components/dialogTemplate.tsx
+++ b/src/components/dialogTemplate.tsx
@@ -21,6 +21,7 @@ interface DialogTemplateComponentProps<T extends FormValues, R = void> extends O
     initialValues: T;
     basicFields: (FormikErrors) => JSX.Element[];
     advancedFields: (FormikErrors) => JSX.Element[];
+    schemaInputField?: (FormikErrors) => JSX.Element;
 }
 
 function DialogTemplateComponent<T extends FormValues, R = void>(props: DialogTemplateComponentProps<T, R>) {
@@ -35,6 +36,7 @@ function DialogTemplateComponent<T extends FormValues, R = void>(props: DialogTe
         initialValues,
         basicFields,
         advancedFields,
+        schemaInputField,
         ...passProps
     } = props;
     const [backendValidationError, setBackendValidationError] = useState<string>(null);
@@ -87,6 +89,8 @@ function DialogTemplateComponent<T extends FormValues, R = void>(props: DialogTe
                                         <BackendValidation text={backendValidationError} />
                                         <DialogFormFields
                                             basicFields={basicFields(errors).filter(Boolean)}
+                                            schemaInputField={schemaInputField ? schemaInputField(errors) : null}
+                                            showSchemaInput={values.contentType !== "JSON"}
                                             advancedFields={advancedFields(errors).filter(Boolean)}
                                             showAdvanced={showAdvanced}
                                             toggleAdvanced={() => setShowAdvanced(!showAdvanced)}
diff --git a/src/components/editTopicDialog.tsx b/src/components/editTopicDialog.tsx
index 67be937..6ac93fb 100644
--- a/src/components/editTopicDialog.tsx
+++ b/src/components/editTopicDialog.tsx
@@ -39,6 +39,7 @@ export const EditTopicDialog = observer(() => {
                   schema: topic.schemaPrettified,
                   group: groups.getGroupOfTopic(topic.name),
                   description: topic.description,
+                  contentType: topic.contentType,
               }
             : {
                   ...DEFAULT_TOPIC_VALUES,
@@ -49,6 +50,16 @@ export const EditTopicDialog = observer(() => {
         !groups.areGroupsHidden && <GroupsFormControl key="group" errors={errors} disabled />,
         <Field required component={TextField} label="Topic name" name="topic" key="topic" fullWidth disabled />,
         <Field required component={TextField} autoFocus label="Topic description" name="description" key="description" fullWidth />,
+        <FormControl key="contentType">
+            <FormLabel>ContentType</FormLabel>
+            <Field component={RadioGroup} row name={"contentType"}>
+                <FormControlLabel value="AVRO" control={<Radio />} label="AVRO" />
+                <FormControlLabel value="JSON" control={<Radio />} label="JSON" />
+            </Field>
+        </FormControl>,
+    ];
+
+    const schemaInputField = (): JSX.Element => (
         <Field
             component={JsonTextField}
             label="Avro schema"
@@ -59,8 +70,8 @@ export const EditTopicDialog = observer(() => {
             variant="outlined"
             multiline
             rows={15}
-        />,
-    ];
+        />
+    );
 
     const advancedFields = (): JSX.Element[] => [
         <FormControl key="advancedValues.acknowledgement">
@@ -97,6 +108,7 @@ export const EditTopicDialog = observer(() => {
         <DialogTemplate<TopicFormikValues>
             advancedFields={advancedFields}
             basicFields={basicFields}
+            schemaInputField={schemaInputField}
             dialog={dialog}
             dialogTitle={"Edit topic"}
             initialValues={initialValues()}
diff --git a/src/components/topicDialog.tsx b/src/components/topicDialog.tsx
index 2549d1e..c672960 100644
--- a/src/components/topicDialog.tsx
+++ b/src/components/topicDialog.tsx
@@ -52,6 +52,16 @@ export const TopicDialog = observer(
             ),
             <Field autoFocus required component={TextField} label="Topic name" name="topic" key="topic" fullWidth />,
             <Field required component={TextField} label="Topic description" name="description" key="description" fullWidth />,
+            <FormControl key="contentType">
+                <FormLabel>ContentType</FormLabel>
+                <Field component={RadioGroup} row name={"contentType"}>
+                    <FormControlLabel value="AVRO" control={<Radio />} label="AVRO" />
+                    <FormControlLabel value="JSON" control={<Radio />} label="JSON" />
+                </Field>
+            </FormControl>,
+        ];
+
+        const schemaInputField = (): JSX.Element => (
             <Field
                 component={JsonTextField}
                 label="Avro schema"
@@ -62,8 +72,8 @@ export const TopicDialog = observer(
                 variant="outlined"
                 multiline
                 rows={15}
-            />,
-        ];
+            />
+        );
 
         const advancedFields = (): JSX.Element[] => [
             <FormControl key="advancedValues.acknowledgement">
@@ -100,6 +110,7 @@ export const TopicDialog = observer(
             <DialogTemplate<TopicFormikValues>
                 advancedFields={advancedFields}
                 basicFields={basicFields}
+                schemaInputField={schemaInputField}
                 dialog={dialog}
                 dialogTitle={"Add new topic"}
                 initialValues={initialValues()}
diff --git a/src/models.ts b/src/models.ts
index 3f0f42a..3a244a2 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -10,7 +10,7 @@ export interface TopicModel {
     trackingEnabled: boolean;
     migratedFromJsonType: boolean;
     schemaIdAwareSerializationSchemaEnabled: boolean;
-    contentType: string;
+    contentType: ContentType;
     maxMessageSize: number;
     auth: AuthModel;
     subscribingRestricted: boolean;
@@ -119,6 +119,7 @@ export interface UndeliveredMessage {
 
 export interface FormValues<T extends FormikValues = FormikValues> {
     advancedValues?: T;
+    contentType?: ContentType;
 }
 
 export interface TopicFormikValues extends FormValues<AdvancedTopicFormikValues> {
@@ -130,6 +131,8 @@ export interface TopicFormikValues extends FormValues<AdvancedTopicFormikValues>
 
 export type Acknowledgement = "LEADER" | "ALL";
 
+export type ContentType = "AVRO" | "JSON";
+
 export interface AdvancedTopicFormikValues extends FormikValues {
     acknowledgement: Acknowledgement;
     retentionTime: number;
diff --git a/src/store/topic.ts b/src/store/topic.ts
index 02822b5..8298ff3 100644
--- a/src/store/topic.ts
+++ b/src/store/topic.ts
@@ -6,6 +6,7 @@ import { debouncedTask } from "../helpers/debouncedTask";
 import {
     Acknowledgement,
     AuthModel,
+    ContentType,
     MessagePreviewModel,
     OwnerModel,
     RetentionTimeModel,
@@ -41,7 +42,7 @@ export class Topic implements TopicModel {
     @observable trackingEnabled: boolean;
     @observable migratedFromJsonType: boolean;
     @observable schemaIdAwareSerializationEnabled: boolean;
-    @observable contentType = "AVRO";
+    @observable contentType: ContentType;
     @observable maxMessageSize = 10240;
     @observable auth: AuthModel;
     @observable createdAt: number;
@@ -155,8 +156,17 @@ export class Topic implements TopicModel {
 
     private getModelFromForm(object: TopicFormikValues): TopicModel {
         const value = this.model;
-        if (object.schema) {
-            value.schema = this.metadataRequired ? addMetadata(object.schema) : object.schema;
+        if (object.contentType) {
+            value.contentType = object.contentType;
+
+            switch (object.contentType) {
+                case "AVRO":
+                    if (object.schema) {
+                        value.schema = this.metadataRequired ? addMetadata(object.schema) : object.schema;
+                    }
+                    break;
+                default:
+            }
         }
         if (object.description) {
             value.description = object.description;