From 36f5e9e9aab5ab14f66569764fd68f43ee7a7d50 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Tue, 31 Oct 2023 15:38:39 +0200
Subject: [PATCH] feat(custom-templates): add validation for variables
 definition

---
 ...ustomTemplatesVariablesDefinitionField.tsx | 25 +++++++++++++++----
 .../index.ts                                  | 10 ++++++--
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx
index e24ee56de..3f226a359 100644
--- a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx
+++ b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx
@@ -1,9 +1,9 @@
-import { FormikErrors } from 'formik';
+import { SchemaOf, array, object, string } from 'yup';
 
 import { FormError } from '@@/form-components/FormError';
 import { Input } from '@@/form-components/Input';
 import { InputList } from '@@/form-components/InputList';
-import { ItemProps } from '@@/form-components/InputList/InputList';
+import { ArrayError, ItemProps } from '@@/form-components/InputList/InputList';
 
 export interface VariableDefinition {
   name: string;
@@ -12,10 +12,12 @@ export interface VariableDefinition {
   description: string;
 }
 
+export type Values = VariableDefinition[];
+
 interface Props {
-  value: VariableDefinition[];
-  onChange: (value: VariableDefinition[]) => void;
-  errors?: FormikErrors<VariableDefinition>[];
+  value: Values;
+  onChange: (value: Values) => void;
+  errors?: ArrayError<Values>;
   isVariablesNamesFromParent?: boolean;
 }
 
@@ -107,3 +109,16 @@ function Item({ item, onChange, error, isNameReadonly }: DefinitionItemProps) {
     onChange({ ...item, [e.target.name]: e.target.value });
   }
 }
+
+function itemValidation(): SchemaOf<VariableDefinition> {
+  return object().shape({
+    name: string().required('Name is required'),
+    label: string().required('Label is required'),
+    defaultValue: string().default(''),
+    description: string().default(''),
+  });
+}
+
+export function validation(): SchemaOf<Values> {
+  return array().of(itemValidation());
+}
diff --git a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/index.ts b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/index.ts
index 22d6a0afc..c05c96a20 100644
--- a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/index.ts
+++ b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/index.ts
@@ -1,2 +1,8 @@
-export { CustomTemplatesVariablesDefinitionField } from './CustomTemplatesVariablesDefinitionField';
-export type { VariableDefinition } from './CustomTemplatesVariablesDefinitionField';
+export {
+  CustomTemplatesVariablesDefinitionField,
+  validation as variablesValidation,
+} from './CustomTemplatesVariablesDefinitionField';
+export type {
+  VariableDefinition,
+  Values as DefinitionFieldValues,
+} from './CustomTemplatesVariablesDefinitionField';