feat: undefined value if no nodes selected + query validation error

carere · carere · commit 97c5aaab9785 · 2025-02-18T14:41:55.000+01:00
diff --git a/packages/app-builder/src/components/Scenario/Sanction/FieldNode.tsx b/packages/app-builder/src/components/Scenario/Sanction/FieldNode.tsx
@@ -11,21 +11,19 @@ export const FieldNode = ({
   onBlur,
 }: {
   value?: AstNode;
-  onChange?: (value?: AstNode) => void;
+  onChange?: (value: AstNode | null) => void;
   onBlur?: () => void;
   placeholder?: string;
   viewOnly?: boolean;
 }) => (
   <div onBlur={onBlur}>
     <MatchOperand
       viewOnly={viewOnly}
-      node={value ?? NewUndefinedAstNode()}
+      node={value}
       placeholder={placeholder}
       onSave={(node) => {
         onChange?.(
-          hasSubObject(NewUndefinedAstNode() as AstNode, node)
-            ? undefined
-            : node,
+          hasSubObject(NewUndefinedAstNode() as AstNode, node) ? null : node,
         );
       }}
     />
diff --git a/packages/app-builder/src/components/Scenario/Sanction/FieldNodeConcat.tsx b/packages/app-builder/src/components/Scenario/Sanction/FieldNodeConcat.tsx
@@ -37,7 +37,7 @@ export function FieldNodeConcat({
   value?: AstNode;
   limit?: number;
   placeholder?: string;
-  onChange?: (node?: AstNode) => void;
+  onChange?: (node: AstNode | null) => void;
   onBlur?: () => void;
   viewOnly?: boolean;
 }) {
@@ -48,21 +48,18 @@ export function FieldNodeConcat({
   );
 
   useEffect(() => {
-    if (nodes.length) {
-      const finalNodes = nodes.filter(
-        (n) => !hasSubObject(NewUndefinedAstNode() as AstNode, omit(n, ['id'])),
-      );
+    const finalNodes = nodes.filter(
+      (n) => !hasSubObject(NewUndefinedAstNode() as AstNode, omit(n, ['id'])),
+    );
 
-      onChange?.(
-        finalNodes.length !== 0
-          ? NewStringConcatAstNode(finalNodes.map(omit(['id'])), {
-              withSeparator: true,
-            })
-          : undefined,
-      );
-    } else {
-      onChange?.(undefined);
-    }
+    const result =
+      finalNodes.length !== 0
+        ? NewStringConcatAstNode(finalNodes.map(omit(['id'])), {
+            withSeparator: true,
+          })
+        : null;
+
+    onChange?.(result);
   }, [nodes, onChange]);
 
   const onDragEnd: OnDragEndResponder<string> = (result): void => {
@@ -107,27 +104,23 @@ export function FieldNodeConcat({
                     >
                       {!viewOnly ? (
                         <div className="flex flex-row">
+                          <div
+                            key={node.id}
+                            className="hover:bg-grey-95 flex size-6 items-center justify-center rounded"
+                            {...dragProvided.dragHandleProps}
+                          >
+                            <Icon icon="drag" className="text-grey-80 size-3" />
+                          </div>
                           {nodes.length > 1 ? (
-                            <>
-                              <div
-                                className="hover:bg-grey-95 flex size-6 items-center justify-center rounded"
-                                {...dragProvided.dragHandleProps}
-                              >
-                                <Icon
-                                  icon="drag"
-                                  className="text-grey-80 size-3"
-                                />
-                              </div>
-                              <Button
-                                size="icon"
-                                variant="tertiary"
-                                onClick={() =>
-                                  setNodes((prev) => splice(prev, index, 1, []))
-                                }
-                              >
-                                <Icon icon="cross" className="size-4" />
-                              </Button>
-                            </>
+                            <Button
+                              size="icon"
+                              variant="tertiary"
+                              onClick={() =>
+                                setNodes((prev) => splice(prev, index, 1, []))
+                              }
+                            >
+                              <Icon icon="cross" className="size-4" />
+                            </Button>
                           ) : null}
                           {!limit || nodes.length < limit ? (
                             <Button
diff --git a/packages/app-builder/src/components/Scenario/Sanction/MatchOperand.tsx b/packages/app-builder/src/components/Scenario/Sanction/MatchOperand.tsx
@@ -1,4 +1,4 @@
-import { type AstNode } from '@app-builder/models';
+import { type AstNode, NewUndefinedAstNode } from '@app-builder/models';
 import {
   useGetAstNodeOperandProps,
   useOperandOptions,
@@ -13,7 +13,7 @@ export const MatchOperand = memo(function MatchOperand({
   placeholder,
   viewOnly,
 }: {
-  node: AstNode;
+  node?: AstNode;
   onSave?: (astNode: AstNode) => void;
   placeholder?: string;
   viewOnly?: boolean;
@@ -23,7 +23,7 @@ export const MatchOperand = memo(function MatchOperand({
 
   return (
     <Operand
-      {...getOperandAstNodeOperandProps(node)}
+      {...getOperandAstNodeOperandProps(node ?? NewUndefinedAstNode())}
       placeholder={placeholder}
       options={options.filter((o) => o.dataType === 'String')}
       validationStatus="valid"
diff --git a/packages/app-builder/src/locales/ar/scenarios.json b/packages/app-builder/src/locales/ar/scenarios.json
@@ -423,5 +423,6 @@
   "edit_aggregation.filters_in": "المرشحات في <strong>{{tableName}}</strong>",
   "sanction_counterparty_id.tooltip": "اختر قيمة معرف فريدة من نوعها (مثل IBAN ، رقم الهاتف) ، والتي يمكن أن تكون قائمة بيضاء في حالة وجود تطابق كاذب.",
   "sanction_counterparty_name.tooltip": "حدد الاسم الأول الاسم الأخير أو الاسم الكامل.",
-  "sanction_counterparty_id_placeholder": "حدد معرف طرف مقابل فريد"
+  "sanction_counterparty_id_placeholder": "حدد معرف طرف مقابل فريد",
+  "sanction.match_settings.no_empty": "تحتاج إلى تحديد اسم أو تسمية واحدة على الأقل"
 }
diff --git a/packages/app-builder/src/locales/en/scenarios.json b/packages/app-builder/src/locales/en/scenarios.json
@@ -196,6 +196,7 @@
   "sanction.nudge": "Improve your rules with a sanction check based on OpenSanction API",
   "sanction.match_settings.title": "Matching settings",
   "sanction.match_settings.callout": "Choose information that should be checked.",
+  "sanction.match_settings.no_empty": "You need to select at least one name or label",
   "sanction.lists.title": "Sanction lists",
   "sanction.lists.callout": "Select lists that are relevant to your business",
   "sanction.lists.nb_selected_one": "({{count}} selected)",
diff --git a/packages/app-builder/src/locales/fr/scenarios.json b/packages/app-builder/src/locales/fr/scenarios.json
@@ -423,5 +423,6 @@
   "edit_aggregation.filter_field_label": "Où",
   "sanction_counterparty_id.tooltip": "Choisissez une valeur d'identifiant unique (comme Iban, numéro de téléphone), qui peut être liste blanche en cas de faux match.",
   "sanction_counterparty_name.tooltip": "Sélectionnez le nom de famille du prénom ou le nom complet.",
-  "sanction_counterparty_id_placeholder": "Sélectionnez un identifiant de contrepartie unique"
+  "sanction_counterparty_id_placeholder": "Sélectionnez un identifiant de contrepartie unique",
+  "sanction.match_settings.no_empty": "Vous devez sélectionner au moins un nom ou un étiquette"
 }
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/sanction.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/sanction.tsx
@@ -36,7 +36,7 @@ import {
 import { useFetcher, useLoaderData } from '@remix-run/react';
 import { useForm } from '@tanstack/react-form';
 import { decode as formDataToObject } from 'decode-formdata';
-import { type Namespace } from 'i18next';
+import { type Namespace, t as rawT } from 'i18next';
 import { serialize as objectToFormData } from 'object-to-formdata';
 import { Trans, useTranslation } from 'react-i18next';
 import { difference } from 'remeda';
@@ -133,8 +133,22 @@ const editSanctionFormSchema = z.object({
     z.literal('block_and_review'),
   ]),
   triggerRule: z.any().nullish(),
-  counterPartyName: z.any().nullish(),
-  counterPartyLabel: z.any().nullish(),
+  query: z
+    .object({
+      name: z.any().nullish(),
+      label: z.any().nullish(),
+    })
+    .superRefine((arg, ctx) => {
+      if (!arg.name && !arg.label) {
+        ctx.addIssue({
+          code: 'invalid_arguments',
+          path: ['label'],
+          message: rawT('scenarios:sanction.match_settings.no_empty'),
+          argumentsError: rawT('scenarios:sanction.match_settings.no_empty'),
+        });
+      }
+      return true;
+    }),
   counterPartyId: z.any().nullish(),
   datasets: z.array(z.string()),
 });
@@ -161,22 +175,27 @@ export async function action({ request, params }: ActionFunctionArgs) {
     arrays: ['datasets'],
   });
 
-  try {
-    console.log('Form Data', formDataDecoded);
-
-    const data = editSanctionFormSchema.parse(formDataDecoded);
+  const result = editSanctionFormSchema.safeParse(formDataDecoded);
 
-    console.log('Data', formDataDecoded);
+  if (!result.success) {
+    return json(
+      { status: 'error', errors: result.error.flatten() },
+      {
+        headers: { 'Set-Cookie': await commitSession(session) },
+      },
+    );
+  }
 
+  try {
     await scenarioIterationSanctionRepository.upsertSanctionCheckConfig({
       iterationId,
       changes: {
-        ...data,
-        counterPartyId: data.counterPartyId as AstNode | undefined,
-        triggerRule: data.triggerRule as AstNode | undefined,
+        ...result.data,
+        counterPartyId: result.data.counterPartyId as AstNode | undefined,
+        triggerRule: result.data.triggerRule as AstNode | undefined,
         query: {
-          name: data.counterPartyName as AstNode | undefined,
-          label: data.counterPartyLabel as AstNode | undefined,
+          name: result.data.query?.name as AstNode | undefined,
+          label: result.data.query?.label as AstNode | undefined,
         },
       },
     });
@@ -187,21 +206,19 @@ export async function action({ request, params }: ActionFunctionArgs) {
     });
 
     return json(
-      { status: 'success' },
+      { status: 'success', errors: [] },
       {
         headers: { 'Set-Cookie': await commitSession(session) },
       },
     );
   } catch (error) {
-    console.log('Error', error);
-
     setToastMessage(session, {
       type: 'error',
       messageKey: 'common:errors.unknown',
     });
 
     return json(
-      { status: 'error' },
+      { status: 'error', errors: [] },
       {
         headers: { 'Set-Cookie': await commitSession(session) },
       },
@@ -251,8 +268,10 @@ export default function SanctionDetail() {
         (sanctionCheckConfig?.forcedOutcome as SanctionOutcome) ??
         'block_and_review',
       triggerRule: sanctionCheckConfig?.triggerRule,
-      counterPartyName: sanctionCheckConfig?.query?.name,
-      counterPartyLabel: sanctionCheckConfig?.query?.label,
+      query: {
+        name: sanctionCheckConfig?.query?.name,
+        label: sanctionCheckConfig?.query?.label,
+      },
       counterPartyId: sanctionCheckConfig?.counterPartyId,
     },
   });
@@ -307,8 +326,8 @@ export default function SanctionDetail() {
                           type="text"
                           name={field.name}
                           onBlur={field.handleBlur}
-                          onChange={(e) =>
-                            field.handleChange(e.currentTarget.value)
+                          onChange={({ currentTarget: { value } }) =>
+                            field.handleChange(value)
                           }
                           placeholder={t(
                             'scenarios:edit_rule.name_placeholder',
@@ -439,6 +458,43 @@ export default function SanctionDetail() {
               </Collapsible.Content>
             </Collapsible.Container>
 
+            <Collapsible.Container className="bg-grey-100 max-w-3xl">
+              <Collapsible.Title className="mb-2">
+                {t('scenarios:sanction_counterparty_id')}
+              </Collapsible.Title>
+              <Collapsible.Content>
+                <form.Field name="counterPartyId">
+                  {(field) => (
+                    <div className="flex flex-col gap-4">
+                      <FormLabel
+                        className="inline-flex items-center gap-1"
+                        name={field.name}
+                      >
+                        {t('scenarios:sanction_counterparty_id')}
+                        <FieldToolTip>
+                          {t('scenarios:sanction_counterparty_id.tooltip')}
+                        </FieldToolTip>
+                      </FormLabel>
+                      <OptionsProvider {...options}>
+                        <FieldNode
+                          viewOnly={editor === 'view'}
+                          value={field.state.value}
+                          onChange={field.handleChange}
+                          onBlur={field.handleBlur}
+                          placeholder={t(
+                            'scenarios:sanction_counterparty_id_placeholder',
+                          )}
+                        />
+                      </OptionsProvider>
+                      <FormErrorOrDescription
+                        errors={field.state.meta.errors}
+                      />
+                    </div>
+                  )}
+                </form.Field>
+              </Collapsible.Content>
+            </Collapsible.Container>
+
             <Collapsible.Container className="bg-grey-100 max-w-3xl">
               <Collapsible.Title>
                 {t('scenarios:sanction.match_settings.title')}
@@ -450,36 +506,7 @@ export default function SanctionDetail() {
                   </p>
                 </Callout>
                 <div className="flex flex-col gap-6">
-                  <form.Field name="counterPartyId">
-                    {(field) => (
-                      <div className="flex flex-col gap-4">
-                        <FormLabel
-                          className="inline-flex items-center gap-1"
-                          name={field.name}
-                        >
-                          {t('scenarios:sanction_counterparty_id')}
-                          <FieldToolTip>
-                            {t('scenarios:sanction_counterparty_id.tooltip')}
-                          </FieldToolTip>
-                        </FormLabel>
-                        <OptionsProvider {...options}>
-                          <FieldNode
-                            viewOnly={editor === 'view'}
-                            value={field.state.value}
-                            onChange={field.handleChange}
-                            onBlur={field.handleBlur}
-                            placeholder={t(
-                              'scenarios:sanction_counterparty_id_placeholder',
-                            )}
-                          />
-                        </OptionsProvider>
-                        <FormErrorOrDescription
-                          errors={field.state.meta.errors}
-                        />
-                      </div>
-                    )}
-                  </form.Field>
-                  <form.Field name="counterPartyName">
+                  <form.Field name="query.name">
                     {(field) => (
                       <div className="flex flex-col gap-4">
                         <FormLabel
@@ -494,7 +521,7 @@ export default function SanctionDetail() {
                         <OptionsProvider {...options}>
                           <FieldNodeConcat
                             viewOnly={editor === 'view'}
-                            value={field.state.value}
+                            value={sanctionCheckConfig?.query?.name}
                             onChange={field.handleChange}
                             onBlur={field.handleBlur}
                             placeholder="Select the First name or Full Name"
@@ -507,7 +534,7 @@ export default function SanctionDetail() {
                       </div>
                     )}
                   </form.Field>
-                  <form.Field name="counterPartyLabel">
+                  <form.Field name="query.label">
                     {(field) => (
                       <div className="flex flex-col gap-4">
                         <FormLabel name={field.name}>

Original file line number	Diff line number	Diff line change
`@@ -423,5 +423,6 @@`
`423`	`423`	`"edit_aggregation.filters_in": "المرشحات في <strong>{{tableName}}</strong>",`
`424`	`424`	`"sanction_counterparty_id.tooltip": "اختر قيمة معرف فريدة من نوعها (مثل IBAN ، رقم الهاتف) ، والتي يمكن أن تكون قائمة بيضاء في حالة وجود تطابق كاذب.",`
`425`	`425`	`"sanction_counterparty_name.tooltip": "حدد الاسم الأول الاسم الأخير أو الاسم الكامل.",`
`426`		`- "sanction_counterparty_id_placeholder": "حدد معرف طرف مقابل فريد"`
	`426`	`+ "sanction_counterparty_id_placeholder": "حدد معرف طرف مقابل فريد",`
	`427`	`+ "sanction.match_settings.no_empty": "تحتاج إلى تحديد اسم أو تسمية واحدة على الأقل"`
`427`	`428`	`}`