Fix the problem with instant redirect (#390)

* Fix the problem with instant redirect

* Rewrite updateSchema thunk

kafka-ui-react-app/src/components/Schemas/Details/LatestVersionItem.tsx

@@ -33,6 +33,7 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
     <div className="tile is-parent">
       <div className="tile is-child box">
         <JSONEditor
+          isFixedHeight
           name="schema"
           value={JSON.stringify(JSON.parse(schema), null, '\t')}
           showGutter={false}

kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion.tsx

@@ -15,6 +15,7 @@ const SchemaVersion: React.FC<SchemaVersionProps> = ({
       <td>{id}</td>
       <td>
         <JSONEditor
+          isFixedHeight
           name="schema"
           value={JSON.stringify(JSON.parse(schema), null, '\t')}
           showGutter={false}

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap

@@ -49,6 +49,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
       className="tile is-child box"
     >
       <JSONEditor
+        isFixedHeight={true}
         name="schema"
         readOnly={true}
         showGutter={false}

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/SchemaVersion.spec.tsx.snap

@@ -10,6 +10,7 @@ exports[`SchemaVersion matches snapshot 1`] = `
   </td>
   <td>
     <JSONEditor
+      isFixedHeight={true}
       name="schema"
       readOnly={true}
       showGutter={false}

kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx

@@ -43,7 +43,7 @@ const Edit = ({
   const {
     register,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { isSubmitting, isDirty },
     control,
   } = useForm<NewSchemaSubjectRaw>({ mode: 'onChange' });
 
@@ -62,15 +62,19 @@ const Edit = ({
       compatibilityLevel: CompatibilityLevelCompatibilityEnum;
       newSchema: string;
     }) => {
-      await updateSchema(
+      try {
-        schema,
+        await updateSchema(
-        newSchema,
+          schema,
-        schemaType,
+          newSchema,
-        compatibilityLevel,
+          schemaType,
-        clusterName,
+          compatibilityLevel,
-        subject
+          clusterName,
-      );
+          subject
-      history.push(clusterSchemaPath(clusterName, subject));
+        );
+        history.push(clusterSchemaPath(clusterName, subject));
+      } catch (e) {
+        // do not redirect
+      }
     },
     [schema, register, control, clusterName, subject, updateSchema, history]
   );
@@ -96,7 +100,7 @@ const Edit = ({
         </div>
       </div>
 
-      {schemasAreFetched && !isSubmitting ? (
+      {schemasAreFetched ? (
         <div className="box">
           <form
             onSubmit={handleSubmit(onSubmit)}
@@ -111,6 +115,7 @@ const Edit = ({
                     required: 'Schema Type is required.',
                   })}
                   defaultValue={schema.schemaType}
+                  disabled={isSubmitting}
                 >
                   {Object.keys(SchemaType).map((type: string) => (
                     <option key={type} value={type}>
@@ -128,6 +133,7 @@ const Edit = ({
                   name="compatibilityLevel"
                   ref={register()}
                   defaultValue={schema.compatibilityLevel}
+                  disabled={isSubmitting}
                 >
                   {Object.keys(CompatibilityLevelCompatibilityEnum).map(
                     (level: string) => (
@@ -143,7 +149,9 @@ const Edit = ({
               <div className="column is-one-half">
                 <h4 className="title is-5 mb-2">Latest Schema</h4>
                 <JSONEditor
+                  isFixedHeight
                   readOnly
+                  height="500px"
                   value={getFormattedSchema()}
                   name="latestSchema"
                   highlightActiveLine={false}
@@ -154,8 +162,10 @@ const Edit = ({
                 <Controller
                   control={control}
                   name="newSchema"
+                  disabled={isSubmitting}
                   render={({ name, onChange }) => (
                     <JSONEditor
+                      readOnly={isSubmitting}
                       defaultValue={getFormattedSchema()}
                       name={name}
                       onChange={onChange}
@@ -164,7 +174,11 @@ const Edit = ({
                 />
               </div>
             </div>
-            <button type="submit" className="button is-primary">
+            <button
+              type="submit"
+              className="button is-primary"
+              disabled={!isDirty || isSubmitting}
+            >
               Submit
             </button>
           </form>

kafka-ui-react-app/src/components/Schemas/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap

@@ -48,6 +48,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
         >
           <select
             defaultValue="AVRO"
+            disabled={false}
             name="schemaType"
           >
             <option
@@ -84,6 +85,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
         >
           <select
             defaultValue="BACKWARD"
+            disabled={false}
             name="compatibilityLevel"
           >
             <option
@@ -143,7 +145,9 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
             Latest Schema
           </h4>
           <JSONEditor
+            height="500px"
             highlightActiveLine={false}
+            isFixedHeight={true}
             name="latestSchema"
             readOnly={true}
             value="{
@@ -261,6 +265,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
                 "watchInternal": [Function],
               }
             }
+            disabled={false}
             name="newSchema"
             render={[Function]}
           />
@@ -268,6 +273,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
       </div>
       <button
         className="button is-primary"
+        disabled={true}
         type="submit"
       >
         Submit

kafka-ui-react-app/src/components/Schemas/New/NewContainer.ts

@@ -1,16 +1,10 @@
 import { connect } from 'react-redux';
-import { RootState } from 'redux/interfaces';
 import { createSchema } from 'redux/actions';
-import { getSchemaCreated } from 'redux/reducers/schemas/selectors';
 
 import New from './New';
 
-const mapStateToProps = (state: RootState) => ({
-  isSchemaCreated: getSchemaCreated(state),
-});
-
 const mapDispatchToProps = {
   createSchema,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(New);
+export default connect(null, mapDispatchToProps)(New);

kafka-ui-react-app/src/components/common/JSONEditor/JSONEditor.tsx

@@ -4,15 +4,25 @@ import 'ace-builds/src-noconflict/mode-json5';
 import 'ace-builds/src-noconflict/theme-textmate';
 import React from 'react';
 
-const JSONEditor: React.FC<IAceEditorProps> = (props) => (
+interface JSONEditorProps extends IAceEditorProps {
-  <AceEditor
+  isFixedHeight?: boolean;
-    mode="json5"
+}
-    theme="textmate"
+
-    tabSize={2}
+const JSONEditor: React.FC<JSONEditorProps> = (props) => {
-    width="100%"
+  const { isFixedHeight, value } = props;
-    wrapEnabled
+  return (
-    {...props}
+    <AceEditor
-  />
+      mode="json5"
-);
+      theme="textmate"
+      tabSize={2}
+      width="100%"
+      height={
+        isFixedHeight ? `${(value?.split('\n').length || 32) * 16}px` : '500px'
+      }
+      wrapEnabled
+      {...props}
+    />
+  );
+};
 
 export default JSONEditor;

kafka-ui-react-app/src/redux/actions/__test__/thunks/schemas.spec.ts

@@ -122,53 +122,22 @@ describe('Thunks', () => {
         expect(error.status).toEqual(404);
         expect(store.getActions()).toEqual([
           actions.createSchemaAction.request(),
-          actions.createSchemaAction.failure({}),
+          actions.createSchemaAction.failure({
+            alert: {
+              response: {
+                body: undefined,
+                status: 404,
+                statusText: 'Not Found',
+              },
+              subject: 'schema-NewSchema',
+              title: 'Schema NewSchema',
+            },
+          }),
         ]);
       }
     });
   });
 
-  describe('updateSchemaCompatibilityLevel', () => {
-    it('creates UPDATE_SCHEMA__SUCCESS when patching a schema', async () => {
-      fetchMock.putOnce(
-        `/api/clusters/${clusterName}/schemas/${subject}/compatibility`,
-        200
-      );
-      await store.dispatch(
-        thunks.updateSchemaCompatibilityLevel(
-          clusterName,
-          subject,
-          CompatibilityLevelCompatibilityEnum.BACKWARD
-        )
-      );
-      expect(store.getActions()).toEqual([
-        actions.updateSchemaCompatibilityLevelAction.request(),
-        actions.updateSchemaCompatibilityLevelAction.success(),
-      ]);
-    });
-
-    it('creates UPDATE_SCHEMA__SUCCESS when failing to patch a schema', async () => {
-      fetchMock.putOnce(
-        `/api/clusters/${clusterName}/schemas/${subject}/compatibility`,
-        404
-      );
-      try {
-        await store.dispatch(
-          thunks.updateSchemaCompatibilityLevel(
-            clusterName,
-            subject,
-            CompatibilityLevelCompatibilityEnum.BACKWARD
-          )
-        );
-      } catch (error) {
-        expect(error.status).toEqual(404);
-        expect(store.getActions()).toEqual([
-          actions.updateSchemaCompatibilityLevelAction.request(),
-          actions.updateSchemaCompatibilityLevelAction.failure({}),
-        ]);
-      }
-    });
-  });
   describe('deleteSchema', () => {
     it('fires DELETE_SCHEMA__SUCCESS on success', async () => {
       fetchMock.deleteOnce(
@@ -203,7 +172,7 @@ describe('Thunks', () => {
   });
 
   describe('updateSchema', () => {
-    it('calls createSchema', () => {
+    it('calls PATCH_SCHEMA__REQUEST', () => {
       store.dispatch(
         thunks.updateSchema(
           fixtures.schema,
@@ -215,23 +184,7 @@ describe('Thunks', () => {
         )
       );
       expect(store.getActions()).toEqual([
-        actions.createSchemaAction.request(),
+        actions.updateSchemaAction.request(),
-      ]);
-    });
-
-    it('calls updateSchema and does not call createSchema when schema does not change', () => {
-      store.dispatch(
-        thunks.updateSchema(
-          fixtures.schema,
-          fixtures.schema.schema,
-          SchemaType.JSON,
-          CompatibilityLevelCompatibilityEnum.FORWARD,
-          clusterName,
-          subject
-        )
-      );
-      expect(store.getActions()).toEqual([
-        actions.updateSchemaCompatibilityLevelAction.request(),
       ]);
     });
   });

kafka-ui-react-app/src/redux/actions/actions.ts

@@ -130,11 +130,11 @@ export const createSchemaAction = createAsyncAction(
   'POST_SCHEMA__FAILURE'
 )<undefined, SchemaSubject, { alert?: FailurePayload }>();
 
-export const updateSchemaCompatibilityLevelAction = createAsyncAction(
+export const updateSchemaAction = createAsyncAction(
-  'PATCH_SCHEMA_COMPATIBILITY__REQUEST',
+  'PATCH_SCHEMA__REQUEST',
-  'PATCH_SCHEMA_COMPATIBILITY__SUCCESS',
+  'PATCH_SCHEMA__SUCCESS',
-  'PATCH_SCHEMA_COMPATIBILITY__FAILURE'
+  'PATCH_SCHEMA__FAILURE'
-)<undefined, undefined, { alert?: FailurePayload }>();
+)<undefined, SchemaSubject, { alert?: FailurePayload }>();
 
 export const deleteSchemaAction = createAsyncAction(
   'DELETE_SCHEMA__REQUEST',

kafka-ui-react-app/src/redux/actions/thunks/schemas.ts

@@ -68,32 +68,7 @@ export const createSchema = (
       response,
     };
     dispatch(actions.createSchemaAction.failure({ alert }));
-  }
+    throw error;
-};
-
-export const updateSchemaCompatibilityLevel = (
-  clusterName: ClusterName,
-  subject: string,
-  compatibilityLevel: CompatibilityLevelCompatibilityEnum
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.updateSchemaCompatibilityLevelAction.request());
-  try {
-    await schemasApiClient.updateSchemaCompatibilityLevel({
-      clusterName,
-      subject,
-      compatibilityLevel: {
-        compatibility: compatibilityLevel,
-      },
-    });
-    dispatch(actions.updateSchemaCompatibilityLevelAction.success());
-  } catch (error) {
-    const response = await getResponse(error);
-    const alert: FailurePayload = {
-      subject: 'compatibilityLevel',
-      title: `Compatibility level ${subject}`,
-      response,
-    };
-    dispatch(actions.updateSchemaCompatibilityLevelAction.failure({ alert }));
   }
 };
 
@@ -105,27 +80,42 @@ export const updateSchema = (
   clusterName: string,
   subject: string
 ): PromiseThunkResult => async (dispatch) => {
-  if (
+  dispatch(actions.updateSchemaAction.request());
-    (newSchema &&
+  try {
-      !isEqual(JSON.parse(latestSchema.schema), JSON.parse(newSchema))) ||
+    let schema: SchemaSubject = latestSchema;
-    newSchemaType !== latestSchema.schemaType
+    if (
-  ) {
+      (newSchema &&
-    await dispatch(
+        !isEqual(JSON.parse(latestSchema.schema), JSON.parse(newSchema))) ||
-      createSchema(clusterName, {
+      newSchemaType !== latestSchema.schemaType
-        ...latestSchema,
+    ) {
-        schema: newSchema || latestSchema.schema,
+      schema = await schemasApiClient.createNewSchema({
-        schemaType: newSchemaType || latestSchema.schemaType,
+        clusterName,
-      })
+        newSchemaSubject: {
-    );
+          ...latestSchema,
-  }
+          schema: newSchema || latestSchema.schema,
-  if (newCompatibilityLevel !== latestSchema.compatibilityLevel) {
+          schemaType: newSchemaType || latestSchema.schemaType,
-    await dispatch(
+        },
-      updateSchemaCompatibilityLevel(
+      });
+    }
+    if (newCompatibilityLevel !== latestSchema.compatibilityLevel) {
+      await schemasApiClient.updateSchemaCompatibilityLevel({
         clusterName,
         subject,
-        newCompatibilityLevel
+        compatibilityLevel: {
-      )
+          compatibility: newCompatibilityLevel,
-    );
+        },
+      });
+    }
+    actions.updateSchemaAction.success(schema);
+  } catch (e) {
+    const response = await getResponse(e);
+    const alert: FailurePayload = {
+      subject: ['schema', subject].join('-'),
+      title: `Schema ${subject}`,
+      response,
+    };
+    dispatch(actions.updateSchemaAction.failure({ alert }));
+    throw e;
   }
 };
 export const deleteSchema = (

kafka-ui-react-app/src/redux/reducers/schemas/reducer.ts

@@ -66,6 +66,8 @@ const reducer = (state = initialState, action: Action): SchemasState => {
       return { ...state, currentSchemaVersions: action.payload };
     case 'POST_SCHEMA__SUCCESS':
       return addToSchemaList(state, action.payload);
+    case 'PATCH_SCHEMA__SUCCESS':
+      return addToSchemaList(state, action.payload);
     case getType(actions.deleteSchemaAction.success):
       return deleteFromSchemaList(state, action.payload);
     default: