Repository: provectus/kafka-ui
Issue: Incorrect order of requests for changing SR compatibility lvl and schema itself
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

TODO:
https://github.com/provectus/kafka-ui/issues/2167#issuecomment-1158835488

**Describe the bug**
When attempting to edit a schema within the schema registry screen, I get an error that does not give me any information.

**Set up**
If needed I can provide later-on, but we basically set up a simple kafka cluster and the schema registry itself, using confluent's docker image. 

**Steps to Reproduce**
Steps to reproduce the behavior:

1.  Open the Schema registry screen
2.  Create a new AVRO schema, the one we created is the following:
`{
  "type" : "record",
  "namespace" : "DataFlair",
  "name" : "Student",
  "fields" : [
     { "name" : "Name" , "type" : "string" },
     { "name" : "Age" , "type" : "int" }
  ]
}`

3. Try to edit it, choosing any compatibility mode.

**Expected Behavior**
An error message should appear, saying no useful information.

**Screenshots**
![image](https://user-images.githubusercontent.com/60912483/173689737-7603bc17-733e-444c-968e-b106e7bfa9b4.png)

Issue comments:
Hello there tcortega! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hello @tcortega ,
change that you are doing is not backward compatible, since you don't provide new field default. 
you can either change subject compatibility (to forwards for example) or make change backward compatible. 

As for error message I agree that it is not informative, we will check how it can be fixed.

> Hello @tcortega , change that you are doing is not backward compatible, since you don't provide new field default. you can either change subject compatibility (to forwards for example) or make change backward compatible.
> 
> As for error message I agree that it is not informative, we will check how it can be fixed.

The same error happens when the compatibility level is set to forward

![image](https://user-images.githubusercontent.com/60912483/173867069-b1d041e4-1b29-4dfa-a3ba-b6a79ed44295.png)

@tcortega hey, there's currently a bug in case you're trying to change both compatibility level and the schema itself at the same time. As a workaround please do change the level first, save it, and then edit the schema. Meanwhile we'll fix the bug.
@provectus/kafka-frontend 

When changing a schema, if both compatibility level and the schema itself are changed, there are two requests sent to backend:
1. update schema
2. update compatibility level

and the order of these is incorrect. It should be vice versa.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
index 550496d7451..1b960675ec6 100644
--- a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
@@ -62,18 +62,6 @@ const Edit: React.FC = () => {
     if (!schema) return;
 
     try {
-      if (dirtyFields.newSchema || dirtyFields.schemaType) {
-        const resp = await schemasApiClient.createNewSchema({
-          clusterName,
-          newSchemaSubject: {
-            ...schema,
-            schema: props.newSchema || schema.schema,
-            schemaType: props.schemaType || schema.schemaType,
-          },
-        });
-        dispatch(schemaAdded(resp));
-      }
-
       if (dirtyFields.compatibilityLevel) {
         await schemasApiClient.updateSchemaCompatibilityLevel({
           clusterName,
@@ -89,6 +77,17 @@ const Edit: React.FC = () => {
           })
         );
       }
+      if (dirtyFields.newSchema || dirtyFields.schemaType) {
+        const resp = await schemasApiClient.createNewSchema({
+          clusterName,
+          newSchemaSubject: {
+            ...schema,
+            schema: props.newSchema || schema.schema,
+            schemaType: props.schemaType || schema.schemaType,
+          },
+        });
+        dispatch(schemaAdded(resp));
+      }
 
       navigate(clusterSchemaPath(clusterName, subject));
     } catch (e) {


Test patch: