configuration validation part with validation messages

src/modules/apps/components/AdvancedTab/AdvancedTab.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import _ from 'lodash';
 import Editor from 'react-simple-code-editor';
 // import { Menu, Transition } from '@headlessui/react';
@@ -14,6 +14,7 @@ import { initialEditorYaml } from '../../consts';
 
 export const AdvancedTab = () => {
   const [code, setCode] = React.useState(initialEditorYaml);
+  const [configurationValidation, setConfigurationValidation] = useState<string | null>(null);
   const { app, editApp } = useApps();
 
   const resetCode = () => {
@@ -21,17 +22,30 @@ export const AdvancedTab = () => {
     showToast('Code was reset.');
   };
 
+  const isConfigurationValid = () => {
+    try {
+      yaml.load(code);
+      return true;
+    } catch (e: any) {
+      return false;
+    }
+  };
+
   const vertifyCode = () => {
     try {
       yaml.load(code);
-      showToast('Configuration is valid!', ToastType.Success);
+      setConfigurationValidation('Configuration is valid!');
     } catch (e: any) {
-      showToast(`Configuration is not valid: ${e.message}`, ToastType.Error, Infinity);
+      setConfigurationValidation(`Configuration is not valid: ${e.message}`);
     }
   };
 
   const saveChanges = () => {
-    editApp({ ...app, configuration: code });
+    if (isConfigurationValid()) {
+      editApp({ ...app, configuration: code });
+      return;
+    }
+    showToast('Configuration is not valid! Please fix configuration issues and try again.', ToastType.Error, Infinity);
   };
 
   return (
@@ -138,6 +152,14 @@ export const AdvancedTab = () => {
           </div>
         </div>
       </div>
+      {configurationValidation && (
+        <>
+          <div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between mt-8 mb-5 cursor-pointer">
+            <h3 className="leading-6 font-medium text-gray-900">Configuration validation</h3>
+          </div>
+          <div className="bg-white shadow rounded-sm p-4">{configurationValidation}</div>
+        </>
+      )}
       <div className="flex justify-end mt-10">
         <button
           type="button"
@@ -163,8 +185,6 @@ export const AdvancedTab = () => {
           Save changes
         </button>
       </div>
-
-      {/* <Secrets /> */}
     </>
   );
 };