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 c46b13a7..20ae4ab1 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 /> */}
</>
);
};
--
GitLab