feat: update openapi with GET /scenario-iterations/{iterationId}/vali… (

#77)
checkmarble · Aug 25, 2023 · bfee3d9 · bfee3d9
2 parents 5a915f5 + 4a571c7
commit bfee3d9
Show file tree

Hide file tree

Showing 27 changed files with 780 additions and 304 deletions.
diff --git a/packages/app-builder/public/locales/en/common.json b/packages/app-builder/public/locales/en/common.json
@@ -2,10 +2,15 @@
   "auth.logout": "Log out",
   "auth.login": "Login",
   "search": "Search",
+  "error_one": "{{count}} error",
+  "error_other": "{{count}} errors",
+  "validation_error_one": "{{count}} validation error",
+  "validation_error_other": "{{count}} validation errors",
   "errors.unknown": "An unknown error as occured",
   "errors.edit.forbidden_not_draft": "You can only edit a draft version of a scenario.",
   "errors.list.duplicate_list_name": "A list with this name already exist",
   "errors.scenario.duplicate_rule_name": "A rule with this name already exists",
+  "errors.draft.invalid": "Invalid draft. Please check your draft for error messages, fix them and try again.",
   "cancel": "Cancel",
   "save": "Save",
   "delete": "Delete",

diff --git a/packages/app-builder/public/locales/en/scenarios.json b/packages/app-builder/public/locales/en/scenarios.json
@@ -76,5 +76,15 @@
   "create_rule.draft_already_exist_2": "You can keep the existing draft and edit it",
   "create_draft.keep_existing_draft": "Keep existing draft",
   "create_draft.override_existing_draft": "Replace existing draft",
-  "create_rule.draft_already_exist_possibility": "You can keep the existing draft and edit it or you can replace the existing draft, creating a new one based on this version"
+  "create_rule.draft_already_exist_possibility": "You can keep the existing draft and edit it or you can replace the existing draft, creating a new one based on this version",
+  "validation.evaluation_error.unknown_function": "required",
+  "validation.evaluation_error.wrong_number_of_arguments": "wrong number of arguments",
+  "validation.evaluation_error.missing_named_argument": "missing named argument",
+  "validation.evaluation_error.arguments_must_be_int_or_float": "arguments must be an integer or a float",
+  "validation.evaluation_error.argument_must_be_integer": "argument must be an integer",
+  "validation.evaluation_error.argument_must_be_string": "argument must be a string",
+  "validation.evaluation_error.argument_must_be_boolean": "argument must be a boolean",
+  "validation.evaluation_error.argument_must_be_list": "argument must be a list",
+  "validation.evaluation_error.argument_must_be_convertible_to_duration": "argument must be a duration",
+  "validation.evaluation_error.argument_must_be_time": "argument must be a time"
 }
diff --git a/packages/app-builder/public/locales/fr/common.json b/packages/app-builder/public/locales/fr/common.json
@@ -2,6 +2,8 @@
   "auth.logout": "Se déconnecter",
   "auth.login": "Connexion",
   "cancel": "Annuler",
+  "error_one": "erreur",
+  "error_other": "erreurs",
   "clipboard.copy": "Copié dans le presse-papier : {{value}}",
   "close": "Fermer",
   "errors.unknown": "Une erreur inconnue s'est produite",

diff --git a/packages/app-builder/src/components/Callout.tsx b/packages/app-builder/src/components/Callout.tsx
@@ -1,19 +1,27 @@
 import { Lightbulb } from '@ui-icons';
 import clsx from 'clsx';
 
+export const variants = ['info', 'error'] as const;
+
 export function Callout({
   children,
   className,
+  variant = 'info',
 }: {
   children: React.ReactNode;
   className?: string;
+  variant?: (typeof variants)[number];
 }) {
   if (!children) return null;
 
   return (
     <div
       className={clsx(
-        'bg-grey-02 text-s text-grey-100 flex flex-row items-center gap-2 rounded border-l-2 border-l-purple-100 p-2 font-normal',
+        'bg-grey-02 text-s text-grey-100 flex flex-row items-center gap-2 rounded p-2 font-normal',
+        {
+          'border-l-2 border-l-purple-100': variant === 'info',
+          'border-l-2 border-l-red-100': variant === 'error',
+        },
         className
       )}
     >

diff --git a/packages/app-builder/src/components/Edit/EditAstNode.tsx b/packages/app-builder/src/components/Edit/EditAstNode.tsx
@@ -1,6 +1,7 @@
 import {
   adaptAstNodeToViewModelFromIdentifier,
   type AstNode,
+  NewUndefinedAstNode,
 } from '@app-builder/models';
 import {
   useEditorIdentifiers,
@@ -9,48 +10,84 @@ import {
   useGetOperatorName,
   useIsEditedOnce,
 } from '@app-builder/services/editor';
+import { getInvalidStates } from '@app-builder/services/validation/scenario-validation';
 import { Combobox, Select } from '@ui-design-system';
 import { forwardRef, useState } from 'react';
 
-import { FormControl, FormField, FormItem } from '../Form';
+import { FormControl, FormField, FormItem, FormMessage } from '../Form';
 
 export function EditAstNode({ name }: { name: string }) {
   const isFirstChildEditedOnce = useIsEditedOnce(`${name}.children.0`);
-  const isNameEditedOnce = useIsEditedOnce(`${name}.name`);
+  const isNameEditedOnce = useIsEditedOnce(name);
 
   return (
-    <div className="flex flex-row gap-1">
-      <FormField
-        name={`${name}.children.0`}
-        render={({ field }) => (
-          <FormItem>
-            <FormControl>
-              <EditOperand {...field} />
-            </FormControl>
-          </FormItem>
-        )}
-      />
-      <FormField
-        name={`${name}.name`}
-        render={({ field }) => (
-          <FormItem className={isFirstChildEditedOnce ? '' : 'hidden'}>
-            <FormControl>
-              <EditOperator {...field} />
-            </FormControl>
-          </FormItem>
-        )}
-      />
-      <FormField
-        name={`${name}.children.1`}
-        render={({ field }) => (
-          <FormItem className={isNameEditedOnce ? '' : 'hidden'}>
-            <FormControl>
-              <EditOperand {...field} />
-            </FormControl>
-          </FormItem>
-        )}
-      />
-    </div>
+    <FormField
+      name={name}
+      render={({ fieldState: { error } }) => {
+        const invalidStates = getInvalidStates(error);
+
+        return (
+          <div className="relative">
+            <div className=" flex flex-row gap-1">
+              <FormField
+                name={`${name}.children.0`}
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormControl>
+                      <EditOperand
+                        {...field}
+                        invalid={
+                          fieldState.invalid ||
+                          invalidStates.root ||
+                          invalidStates.children[field.name]
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name={`${name}.name`}
+                render={({ field, fieldState }) => (
+                  <FormItem className={isFirstChildEditedOnce ? '' : 'hidden'}>
+                    <FormControl>
+                      <EditOperator
+                        {...field}
+                        invalid={
+                          fieldState.invalid ||
+                          invalidStates.root ||
+                          invalidStates.name
+                        }
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name={`${name}.children.1`}
+                render={({ field, fieldState }) => (
+                  <FormItem className={isNameEditedOnce ? '' : 'hidden'}>
+                    <FormControl>
+                      <EditOperand
+                        {...field}
+                        invalid={
+                          fieldState.invalid ||
+                          invalidStates.root ||
+                          invalidStates.children[field.name]
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            {invalidStates.root && isFirstChildEditedOnce && <FormMessage />}
+          </div>
+        );
+      }}
+    />
   );
 }
 
@@ -59,10 +96,11 @@ const EditOperand = forwardRef<
   {
     name: string;
     value: AstNode;
-    onChange: (value: AstNode | null) => void;
+    onChange: (value: AstNode) => void;
     onBlur: () => void;
+    invalid: boolean;
   }
->(({ onChange, onBlur, value }, ref) => {
+>(({ onChange, onBlur, value, invalid }, ref) => {
   const editorIdentifier = useEditorIdentifiers();
   const getIdentifierOptions = useGetIdentifierOptions();
   const selectedItem = value
@@ -80,13 +118,14 @@ const EditOperand = forwardRef<
       value={selectedItem}
       onChange={(value) => {
         setInputValue(value?.label ?? '');
-        onChange(value?.astNode ?? null);
+        onChange(value?.astNode ?? NewUndefinedAstNode());
       }}
       nullable
     >
       <div className="relative">
         <Combobox.Input
           ref={ref}
+          aria-invalid={invalid}
           displayValue={(item?: (typeof items)[number]) => item?.label ?? ''}
           onChange={(event) => setInputValue(event.target.value)}
           onBlur={onBlur}
@@ -115,8 +154,9 @@ const EditOperator = forwardRef<
     value: string | null;
     onChange: (value: string | null) => void;
     onBlur: () => void;
+    invalid: boolean;
   }
->(({ name, value, onChange, onBlur }, ref) => {
+>(({ name, value, onChange, onBlur, invalid }, ref) => {
   const operators = useEditorOperators();
   const getOperatorName = useGetOperatorName();
 
@@ -130,7 +170,8 @@ const EditOperator = forwardRef<
     >
       <Select.Trigger
         ref={ref}
-        className="focus:border-purple-100"
+        aria-invalid={invalid}
+        className="focus:border-purple-100 aria-[invalid=true]:border-red-100"
         onBlur={onBlur}
       >
         <Select.Value placeholder="..." />