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(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 = () => { + {configurationValidation && ( + <> +
+

Configuration validation

+
+
{configurationValidation}
+ + )}
- - {/* */} ); };