Repository: provectus/kafka-ui
Issue: Confusing process of updating Global Compatibility Level
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

### Is your proposal related to a problem?

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

When selected and submitted, the Global Compatibility Level for Schema Registry doesn't update automatically. You need to update the page to see the changes.

### Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

The Global Compatibility Level changes automatically once a new option from the drop down menu is selected and submitted; no updates of the page, going back and forth between tabs is needed.

### Describe alternatives you've considered

<!--
  Let us know about other solutions you've tried or researched.
-->

--

### Additional context

<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->

When Global Compatibility Level is selected and submitted, there is a strange visual bug -- as if a pop-up tries to open but fails.


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/package-lock.json b/kafka-ui-react-app/package-lock.json
index ff880549b08..9b45d9e98e0 100644
--- a/kafka-ui-react-app/package-lock.json
+++ b/kafka-ui-react-app/package-lock.json
@@ -3159,7 +3159,6 @@
       "version": "5.1.18",
       "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.18.tgz",
       "integrity": "sha512-xPTYmWP7Mxk5TAD3pYsqjwA9G5fAI8e/S51QUJEl7EQD1siKCdiYXIWiH2lzoHRl+QqbQCJMcGv3YTF3OmyPdQ==",
-      "dev": true,
       "requires": {
         "@types/hoist-non-react-statics": "*",
         "@types/react": "*",
diff --git a/kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector.tsx b/kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector.tsx
index 3a667b6d590..000e01fe84c 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector.tsx
@@ -1,5 +1,4 @@
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
-import PageLoader from 'components/common/PageLoader/PageLoader';
 import Select from 'components/common/Select/Select';
 import { CompatibilityLevelCompatibilityEnum } from 'generated-sources';
 import React from 'react';
@@ -48,6 +47,7 @@ const GlobalSchemaSelector: React.FC<GlobalSchemaSelectorProps> = ({
           selectSize="M"
           defaultValue={globalSchemaCompatibilityLevel}
           onChange={() => setUpdateCompatibilityConfirmationVisible(true)}
+          disabled={methods.formState.isSubmitting}
         >
           {Object.keys(CompatibilityLevelCompatibilityEnum).map(
             (level: string) => (
@@ -61,13 +61,10 @@ const GlobalSchemaSelector: React.FC<GlobalSchemaSelectorProps> = ({
           isOpen={isUpdateCompatibilityConfirmationVisible}
           onCancel={() => setUpdateCompatibilityConfirmationVisible(false)}
           onConfirm={methods.handleSubmit(onCompatibilityLevelUpdate)}
+          isConfirming={methods.formState.isSubmitting}
         >
-          {methods.formState.isSubmitting ? (
-            <PageLoader />
-          ) : (
-            `Are you sure you want to update the global compatibility level?
-                  This may affect the compatibility levels of the schemas.`
-          )}
+          Are you sure you want to update the global compatibility level? This
+          may affect the compatibility levels of the schemas.
         </ConfirmationModal>
       </GlobalSchemaSelectorWrapper>
     </FormProvider>
diff --git a/kafka-ui-react-app/src/redux/actions/__test__/thunks/schemas.spec.ts b/kafka-ui-react-app/src/redux/actions/__test__/thunks/schemas.spec.ts
index ff9bb73742c..b8eb4ac538b 100644
--- a/kafka-ui-react-app/src/redux/actions/__test__/thunks/schemas.spec.ts
+++ b/kafka-ui-react-app/src/redux/actions/__test__/thunks/schemas.spec.ts
@@ -227,6 +227,8 @@ describe('Thunks', () => {
         `/api/clusters/${clusterName}/schemas/compatibility`,
         200
       );
+      fetchMock.getOnce(`/api/clusters/${clusterName}/schemas`, 200);
+
       await store.dispatch(
         thunks.updateGlobalSchemaCompatibilityLevel(
           clusterName,
@@ -235,6 +237,7 @@ describe('Thunks', () => {
       );
       expect(store.getActions()).toEqual([
         actions.updateGlobalSchemaCompatibilityLevelAction.request(),
+        actions.fetchSchemasByClusterNameAction.request(),
         actions.updateGlobalSchemaCompatibilityLevelAction.success(
           CompatibilityLevelCompatibilityEnum.FORWARD
         ),
diff --git a/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts b/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts
index 03f1c20960a..5cfb0aab64b 100644
--- a/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts
+++ b/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts
@@ -78,6 +78,7 @@ export const updateGlobalSchemaCompatibilityLevel =
         clusterName,
         compatibilityLevel: { compatibility: compatibilityLevel },
       });
+      dispatch(fetchSchemasByClusterName(clusterName));
       dispatch(
         actions.updateGlobalSchemaCompatibilityLevelAction.success(
           compatibilityLevel


Test patch: