From ac47970cacf9fc73097fd9fafb77f949cad00c06 Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic@init.hr>
Date: Sat, 6 Aug 2022 11:19:29 +0200
Subject: [PATCH] configuration validation part with validation messages

---
 .../components/AdvancedTab/AdvancedTab.tsx    | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/modules/apps/components/AdvancedTab/AdvancedTab.tsx b/src/modules/apps/components/AdvancedTab/AdvancedTab.tsx
index c46b13a..20ae4ab 100644
--- a/src/modules/apps/components/AdvancedTab/AdvancedTab.tsx
+++ b/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 /> */}
     </>
   );
 };