feat: add nb_selected to datasets & memo to some components

packages/app-builder/src/components/Scenario/Sanction/FieldNode.tsx

@@ -3,20 +3,17 @@ import { type AstNode, NewUndefinedAstNode } from '@app-builder/models';
 import { MatchOperand } from './MatchOperand';
 
 export const FieldNode = ({
-  name,
   value,
   placeholder,
   onChange,
   onBlur,
 }: {
   value?: AstNode;
-  name?: string;
   onChange?: (value: AstNode) => void;
   onBlur?: () => void;
   placeholder?: string;
 }) => (
-  <>
-    <input name={name} className="sr-only" tabIndex={-1} onBlur={onBlur} />
+  <div onBlur={onBlur}>
     <MatchOperand
       node={value ?? NewUndefinedAstNode()}
       placeholder={placeholder}
@@ -28,5 +25,5 @@ export const FieldNode = ({
         onChange?.(node);
       }}
     />
-  </>
+  </div>
 );

packages/app-builder/src/components/Scenario/Sanction/FieldNodeConcat.tsx

@@ -7,8 +7,7 @@ import { Icon } from 'ui-icons';
 
 import { MatchOperand } from './MatchOperand';
 
-export function FieldMatches({
-  name,
+export function FieldNodeConcat({
   value,
   limit,
   onBlur,
@@ -18,7 +17,6 @@ export function FieldMatches({
   value?: AstNode;
   limit?: number;
   placeholder?: string;
-  name?: string;
   onChange?: (nodes: AstNode) => void;
   onBlur?: () => void;
 }) {
@@ -41,14 +39,15 @@ export function FieldMatches({
       onChange?.({
         name: 'StringConcat',
         children: values(nodes),
-        namedChildren: {},
+        namedChildren: {
+          withSeparator: { constant: true, namedChildren: {}, children: [] },
+        },
       });
     }
   }, [nodes, matches.length, onChange]);
 
   return (
-    <div className="flex flex-wrap gap-2">
-      <input name={name} className="sr-only" tabIndex={-1} onBlur={onBlur} />
+    <div onBlur={onBlur} className="flex flex-wrap gap-2">
       {(matches.length === 0 ? defaultMatches : matches).map(
         ([id, match], i) => (
           <div key={id} className="flex gap-2">

packages/app-builder/src/components/Scenario/Sanction/FieldSanction.tsx

@@ -8,20 +8,21 @@ import {
   useMemo,
   useState,
 } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Checkbox, CollapsibleV2 } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
-const FieldCategory = ({
+const FieldCategory = memo(function FieldCategory({
   section,
   selectedIds,
   updateSelectedIds,
 }: {
   section: OpenSanctionsCatalogSection;
   selectedIds: string[];
   updateSelectedIds: Dispatch<SetStateAction<string[]>>;
-}) => {
-  const { t } = useTranslation(['common']);
+}) {
+  const { t } = useTranslation(['common', 'scenarios']);
   const [open, setOpen] = useState(false);
 
   const defaultListIds = useMemo(
@@ -34,6 +35,11 @@ const FieldCategory = ({
     [selectedIds, defaultListIds],
   );
 
+  const nbSelected = useMemo(
+    () => selectedIds.filter((id) => defaultListIds.includes(id)).length,
+    [selectedIds, defaultListIds],
+  );
+
   return (
     <CollapsibleV2.Provider defaultOpen={open}>
       <div key={section.name} className="w-full overflow-hidden rounded-lg">
@@ -49,6 +55,13 @@ const FieldCategory = ({
               })}
             />
             <span className="text-s font-semibold">{section.title}</span>
+            {!isAllSelected && nbSelected ? (
+              <span className="text-s text-purple-65 font-semibold">
+                {t('scenarios:sanction.lists.nb_selected', {
+                  count: nbSelected,
+                })}
+              </span>
+            ) : null}
           </CollapsibleV2.Title>
           <div className="flex items-center gap-4">
             <span className="text-grey-50 text-xs">
@@ -89,18 +102,16 @@ const FieldCategory = ({
       </div>
     </CollapsibleV2.Provider>
   );
-};
+});
 
 export const FieldSanction = ({
-  name,
   onChange,
   onBlur,
   sections,
   defaultValue,
 }: {
   defaultValue?: string[];
   sections: OpenSanctionsCatalogSection[];
-  name?: string;
   onChange?: (value: string[]) => void;
   onBlur?: () => void;
 }) => {
@@ -113,8 +124,7 @@ export const FieldSanction = ({
   }, [selectedIds, onChange]);
 
   return (
-    <div className="flex flex-col gap-4">
-      <input name={name} className="sr-only" tabIndex={-1} onBlur={onBlur} />
+    <div onBlur={onBlur} className="flex flex-col gap-4">
       {sections.map((section) => (
         <FieldCategory
           key={section.name}

packages/app-builder/src/components/Scenario/Sanction/FieldTrigger.tsx

@@ -10,15 +10,13 @@ import { useStore } from 'zustand';
 import { AstBuilder, type AstBuilderProps } from '../AstBuilder';
 
 export const FieldTrigger = ({
-  name,
   trigger,
   scenarioId,
   iterationId,
   options,
   onChange,
   onBlur,
 }: {
-  name?: string;
   trigger?: AstNode;
   onChange?: (node: AstNode | undefined) => void;
   onBlur?: () => void;
@@ -44,9 +42,8 @@ export const FieldTrigger = ({
   }, [astNode, onChange]);
 
   return (
-    <>
-      <input name={name} className="sr-only" tabIndex={-1} onBlur={onBlur} />
+    <div onBlur={onBlur}>
       <AstBuilder astEditorStore={astEditorStore} options={options} />
-    </>
+    </div>
   );
 };

packages/app-builder/src/components/Scenario/Sanction/MatchOperand.tsx

@@ -3,18 +3,19 @@ import {
   useGetAstNodeOperandProps,
   useOperandOptions,
 } from '@app-builder/services/editor/options';
+import { memo } from 'react';
 
 import { Operand } from '../AstBuilder/AstBuilderNode/Operand';
 
-export const MatchOperand = ({
+export const MatchOperand = memo(function MatchOperand({
   node,
   onSave,
   placeholder,
 }: {
   node: AstNode;
   onSave?: (astNode: AstNode) => void;
   placeholder?: string;
-}) => {
+}) {
   const getOperandAstNodeOperandProps = useGetAstNodeOperandProps();
   const options = useOperandOptions();
 
@@ -27,4 +28,4 @@ export const MatchOperand = ({
       onSave={onSave}
     />
   );
-};
+});

packages/app-builder/src/locales/ar/scenarios.json

@@ -393,5 +393,7 @@
   "sanction.nudge": "تحسين قواعدك من خلال فحص العقوبات بناءً على واجهة برمجة تطبيقات OpenSacntion",
   "sanction_counterparty_id": "معرف الطرف المقابل",
   "sanction_counterparty_name": "اسم الطرف المقابل",
-  "sanction_transaction_label": "تسمية المعاملة"
+  "sanction_transaction_label": "تسمية المعاملة",
+  "sanction.lists.nb_selected_one": "({{count}} المحدد)",
+  "sanction.lists.nb_selected_other": "({{count}} المحدد)"
 }

packages/app-builder/src/locales/en/scenarios.json

@@ -182,6 +182,8 @@
   "sanction.match_settings.callout": "Choose information that should be checked.",
   "sanction.lists.title": "Sanction lists",
   "sanction.lists.callout": "Select lists that are relevant to your business",
+  "sanction.lists.nb_selected_one": "({{count}} selected)",
+  "sanction.lists.nb_selected_other": "({{count}} selected)",
   "sanction_transaction_label": "Transaction Label",
   "sanction_counterparty_id": "Counterparty ID",
   "sanction_counterparty_name": "Counterparty name",

packages/app-builder/src/locales/fr/scenarios.json

@@ -393,5 +393,7 @@
   "sanction.nudge": "Améliorez vos règles avec un chèque de sanction basé sur l'OpenSacntion API",
   "sanction_counterparty_id": "Identifiant de contrepartie",
   "sanction_counterparty_name": "Nom de contrepartie",
-  "sanction_transaction_label": "Étiquette de transaction"
+  "sanction_transaction_label": "Étiquette de transaction",
+  "sanction.lists.nb_selected_one": "({{count}} sélectionnée)",
+  "sanction.lists.nb_selected_other": "({{count}} sélectionnées)"
 }

packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/sanction.tsx

@@ -11,7 +11,7 @@ import { FormLabel } from '@app-builder/components/Form/Tanstack/FormLabel';
 import { setToastMessage } from '@app-builder/components/MarbleToaster';
 import { type AstBuilderProps } from '@app-builder/components/Scenario/AstBuilder';
 import { FieldNode } from '@app-builder/components/Scenario/Sanction/FieldNode';
-import { FieldMatches } from '@app-builder/components/Scenario/Sanction/FieldNodeConcat';
+import { FieldNodeConcat } from '@app-builder/components/Scenario/Sanction/FieldNodeConcat';
 import { FieldOutcomes } from '@app-builder/components/Scenario/Sanction/FieldOutcomes';
 import { FieldRuleGroup } from '@app-builder/components/Scenario/Sanction/FieldRuleGroup';
 import { FieldSanction } from '@app-builder/components/Scenario/Sanction/FieldSanction';
@@ -27,14 +27,14 @@ import { OptionsProvider } from '@app-builder/services/editor/options';
 import { serverServices } from '@app-builder/services/init.server';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromParams, fromUUID, useParam } from '@app-builder/utils/short-uuid';
-import { parseWithZod } from '@conform-to/zod';
 import {
   type ActionFunctionArgs,
   json,
   type LoaderFunctionArgs,
 } from '@remix-run/node';
 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 { serialize as objectToFormData } from 'object-to-formdata';
 import { useMemo } from 'react';
@@ -126,7 +126,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 const editSanctionFormSchema = z.object({
   name: z.string().nonempty(),
   description: z.string().optional(),
-  scoreModifier: z.number(),
+  scoreModifier: z.coerce.number(),
   ruleGroup: z.string().nonempty(),
   forceOutcome: z.union([
     z.literal('review'),
@@ -150,31 +150,32 @@ export async function action({ request, params }: ActionFunctionArgs) {
     toastSessionService: { getSession, commitSession },
   } = serverServices;
 
-  const session = await getSession(request);
-  const formData = await request.formData();
-  const iterationId = fromParams(params, 'iterationId');
-
-  const submission = parseWithZod(formData, { schema: editSanctionFormSchema });
+  const [session, formData, { scenarioIterationSanctionRepository }] =
+    await Promise.all([
+      getSession(request),
+      request.formData(),
+      authService.isAuthenticated(request, {
+        failureRedirect: getRoute('/sign-in'),
+      }),
+    ]);
 
-  if (submission.status !== 'success') {
-    return json(submission.reply());
-  }
-
-  const { scenarioIterationSanctionRepository } =
-    await authService.isAuthenticated(request, {
-      failureRedirect: getRoute('/sign-in'),
-    });
+  const iterationId = fromParams(params, 'iterationId');
+  const formDataDecoded = formDataToObject(formData, {
+    arrays: ['datasets'],
+  });
 
   try {
+    const data = editSanctionFormSchema.parse(formDataDecoded);
+
     await scenarioIterationSanctionRepository.upsertSanctionCheckConfig({
       iterationId,
       changes: {
-        ...submission.value,
-        counterPartyId: submission.value.counterPartyId as AstNode | undefined,
-        triggerRule: submission.value.triggerRule as AstNode | undefined,
+        ...data,
+        counterPartyId: data.counterPartyId as AstNode | undefined,
+        triggerRule: data.triggerRule as AstNode | undefined,
         query: {
-          name: submission.value.query.name as AstNode,
-          label: submission.value.query.label as AstNode | undefined,
+          name: data.query.name as AstNode,
+          label: data.query.label as AstNode | undefined,
         },
       },
     });
@@ -455,7 +456,6 @@ export default function SanctionDetail() {
                       options={options}
                       onBlur={field.handleBlur}
                       onChange={field.handleChange}
-                      name={field.name}
                       trigger={field.state.value}
                     />
                   )}
@@ -482,7 +482,6 @@ export default function SanctionDetail() {
                             {t('scenarios:sanction_counterparty_id')}
                           </FormLabel>
                           <FieldNode
-                            name={field.name}
                             value={field.state.value}
                             onChange={field.handleChange}
                             onBlur={field.handleBlur}
@@ -500,8 +499,7 @@ export default function SanctionDetail() {
                           <FormLabel name={field.name}>
                             {t('scenarios:sanction_counterparty_name')}
                           </FormLabel>
-                          <FieldMatches
-                            name={field.name}
+                          <FieldNodeConcat
                             value={field.state.value}
                             onChange={field.handleChange}
                             onBlur={field.handleBlur}
@@ -521,7 +519,6 @@ export default function SanctionDetail() {
                             {t('scenarios:sanction_transaction_label')}
                           </FormLabel>
                           <FieldNode
-                            name={field.name}
                             value={field.state.value}
                             onChange={field.handleChange}
                             onBlur={field.handleBlur}
@@ -552,7 +549,6 @@ export default function SanctionDetail() {
                   {(field) => (
                     <div className="flex flex-col gap-2">
                       <FieldSanction
-                        name={field.name}
                         defaultValue={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}