MAR-1853 MAR-1835: Implement frontend for the new configuration

packages/app-builder/src/components/ContinuousScreening/ConfigurationPanel.tsx

@@ -14,6 +14,7 @@ import {
   PartialCreateContinuousScreeningConfig,
 } from './context/CreationStepper';
 import { FormPagination } from './context/FormPagination';
+import { ListAndTopicDatasetConfigurationBridge } from './context/ListAndTopicDatasetConfigurationBridge';
 import { Stepper } from './form/Stepper';
 import { DatasetSelection } from './form/steps/DatasetSelection';
 import { GeneralInfo } from './form/steps/GeneralInfo';
@@ -53,16 +54,18 @@ export const ConfigurationPanel = ({
   return (
     <PanelContainer size="max" className="p-0 bg-surface-page overflow-y-auto flex flex-col">
       <ContinuousScreeningConfigurationStepper.Provider value={configurationStepper}>
-        <ConfigurationPanelHeader />
-        <div className="p-v2-lg grow">
-          {match(configurationStepper.value.__internals.currentStep)
-            .with(0, () => <GeneralInfo stableId={baseConfig.stableId} />)
-            .with(1, () => <ObjectMapping baseConfig={baseConfig} />)
-            .with(2, () => <ScoringConfiguration />)
-            .with(3, () => <DatasetSelection />)
-            .otherwise(() => null)}
-        </div>
-        <FormPagination finalButtonText={t('continuousScreening:edition.validate_button')} />
+        <ListAndTopicDatasetConfigurationBridge>
+          <ConfigurationPanelHeader />
+          <div className="p-v2-lg grow">
+            {match(configurationStepper.value.__internals.currentStep)
+              .with(0, () => <GeneralInfo stableId={baseConfig.stableId} />)
+              .with(1, () => <ObjectMapping baseConfig={baseConfig} />)
+              .with(2, () => <DatasetSelection useCase="continuous_monitoring" />)
+              .with(3, () => <ScoringConfiguration />)
+              .otherwise(() => null)}
+          </div>
+          <FormPagination finalButtonText={t('continuousScreening:edition.validate_button')} />
+        </ListAndTopicDatasetConfigurationBridge>
       </ContinuousScreeningConfigurationStepper.Provider>
     </PanelContainer>
   );

packages/app-builder/src/components/ContinuousScreening/ConfigurationsPage.tsx

@@ -8,21 +8,24 @@ import QueryString from 'qs';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { match } from 'ts-pattern';
-import { Button } from 'ui-design-system';
+import { Button, Tag } from 'ui-design-system';
 import { Icon } from 'ui-icons';
+import { CopyToClipboardButton } from '../CopyToClipboardButton';
 import GridTable from '../GridTable';
 import { Page } from '../Page';
 import { PanelRoot } from '../Panel/Panel';
 import { Spinner } from '../Spinner';
 import { ConfigurationPanel } from './ConfigurationPanel';
-import { CopyToClipboardChip } from './CopyToClipboardChip';
 import { CreationModal } from './CreationModal';
 import { PartialCreateContinuousScreeningConfig } from './context/CreationStepper';
 import { EditionValidationPanel } from './EditionValidationPanel';
-import { Capsule } from './shared/Capsule';
 
 const CellCapsule = ({ children }: { children: React.ReactNode }) => {
-  return <Capsule className="max-w-50 truncate">{children}</Capsule>;
+  return (
+    <Tag color="grey" className="max-w-50 truncate">
+      {children}
+    </Tag>
+  );
 };
 
 export const ConfigurationsPage = ({ canEdit }: { canEdit: boolean }) => {
@@ -125,7 +128,9 @@ export const ConfigurationsPage = ({ canEdit }: { canEdit: boolean }) => {
                     >
                       <GridTable.Cell className="flex gap-v2-md items-center justify-between">
                         <span className="truncate">{item.name}</span>
-                        <CopyToClipboardChip value={item.stableId} className="min-w-40" />
+                        <CopyToClipboardButton toCopy={item.stableId} className="min-w-40" size="chip" rounded>
+                          <span className="text-xs">{item.stableId}</span>
+                        </CopyToClipboardButton>
                       </GridTable.Cell>
                       <GridTable.Cell>
                         {item.datasets[0] ? <CellCapsule>{item.datasets[0]}</CellCapsule> : null}

packages/app-builder/src/components/ContinuousScreening/CopyToClipboardChip.tsx

@@ -1,7 +1,9 @@
 import { useGetCopyToClipboard } from '@app-builder/utils/use-get-copy-to-clipboard';
 import { cn } from 'ui-design-system';
 import { Icon } from 'ui-icons';
-
+/**
+ * @deprecated use CopyToClipboardButton instead (with size = chip and rounded = true)
+ */
 export const CopyToClipboardChip = ({
   value,
   className,

packages/app-builder/src/components/ContinuousScreening/CreationPage.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { BreadCrumbs } from '../Breadcrumbs';
 import { Page } from '../Page';
 import { ContinuousScreeningConfigurationStepper } from './context/CreationStepper';
+import { ListAndTopicDatasetConfigurationBridge } from './context/ListAndTopicDatasetConfigurationBridge';
 import { CreationContent } from './form/Content';
 import { Stepper } from './form/Stepper';
 
@@ -42,17 +43,19 @@ export const CreationPage = ({ name, description }: { name: string; description:
 
   return (
     <ContinuousScreeningConfigurationStepper.Provider value={creationStepper}>
-      <Page.Main>
-        <Page.Header className="justify-between">
-          <BreadCrumbs />
-          <Stepper fromZero getStepLabel={(stepName) => t(`continuousScreening:creation.stepper.${stepName}`)} />
-        </Page.Header>
-        <Page.Container>
-          <Page.ContentV2 paddingLess>
-            <CreationContent />
-          </Page.ContentV2>
-        </Page.Container>
-      </Page.Main>
+      <ListAndTopicDatasetConfigurationBridge>
+        <Page.Main>
+          <Page.Header className="justify-between">
+            <BreadCrumbs />
+            <Stepper fromZero getStepLabel={(stepName) => t(`continuousScreening:creation.stepper.${stepName}`)} />
+          </Page.Header>
+          <Page.Container>
+            <Page.ContentV2 paddingLess>
+              <CreationContent />
+            </Page.ContentV2>
+          </Page.Container>
+        </Page.Main>
+      </ListAndTopicDatasetConfigurationBridge>
     </ContinuousScreeningConfigurationStepper.Provider>
   );
 };

packages/app-builder/src/components/ContinuousScreening/context/CreationStepper.tsx

@@ -73,8 +73,8 @@ export const ContinuousScreeningConfigurationStepper = buildStepper({
   steps: [
     { name: 'generalInfo', schema: generalInfoStepSchema },
     { name: 'objectMapping', schema: objectMappingStepSchema },
-    { name: 'scoringConfiguration', schema: scoringConfigurationStepSchema },
     { name: 'datasetSelection', schema: datasetSelectionStepSchema },
+    { name: 'scoringConfiguration', schema: scoringConfigurationStepSchema },
   ] as const,
   validator: createContinuousScreeningConfigSchema,
 });

packages/app-builder/src/components/ContinuousScreening/context/ListAndTopicDatasetConfigurationBridge.tsx

@@ -0,0 +1,25 @@
+import { ListAndTopicDatasetConfiguration } from '@app-builder/components/ListAndTopicConfiguration';
+import { type ReactNode, useEffect } from 'react';
+import { ContinuousScreeningConfigurationStepper } from './CreationStepper';
+
+/* 
+  this component is used to bridge the ListAndTopicDatasetConfiguration context with the ContinuousScreeningConfigurationStepper context
+  to ensure that the datasets map is updated when the wizard mode changes
+*/
+export function ListAndTopicDatasetConfigurationBridge({ children }: { children: ReactNode }) {
+  const wizard = ContinuousScreeningConfigurationStepper.useSharp();
+  const wizardMode = ContinuousScreeningConfigurationStepper.select((s) => s.__internals.mode);
+  const datasetsMap = wizard.value.data.datasets;
+  const listSharp = ListAndTopicDatasetConfiguration.createSharp({
+    datasets: datasetsMap,
+    mode: wizardMode,
+  });
+
+  useEffect(() => {
+    listSharp.actions.setMode(wizardMode);
+  }, [listSharp, wizardMode]);
+
+  return (
+    <ListAndTopicDatasetConfiguration.Provider value={listSharp}>{children}</ListAndTopicDatasetConfiguration.Provider>
+  );
+}

packages/app-builder/src/components/ContinuousScreening/form/Content.tsx

@@ -19,8 +19,8 @@ export const CreationContent = () => {
       <div className="grow p-v2-lg pb-0 flex flex-col gap-v2-md">
         {match(creationStepper.computed.currentStep.value)
           .with(1, () => <ObjectMapping />)
-          .with(2, () => <ScoringConfiguration />)
-          .with(3, () => <DatasetSelection />)
+          .with(2, () => <DatasetSelection useCase="continuous_monitoring" />)
+          .with(3, () => <ScoringConfiguration />)
           .otherwise(() => null)}
         <CreationContentRecap />
       </div>
@@ -42,8 +42,8 @@ const CreationContentRecap = () => {
       })}
     >
       {currentStep >= 1 ? <ObjectMappingRecap /> : null}
-      {currentStep >= 2 ? <ScoringConfigurationRecap /> : null}
-      {currentStep >= 3 ? <DatasetSelectionRecap /> : null}
+      {currentStep >= 2 ? <DatasetSelectionRecap /> : null}
+      {currentStep >= 3 ? <ScoringConfigurationRecap /> : null}
     </div>
   );
 };

packages/app-builder/src/components/ContinuousScreening/form/recaps/DatasetSelectionRecap.tsx

@@ -1,59 +1,38 @@
-import { useScreeningDatasetsQuery } from '@app-builder/queries/screening/datasets';
-import { OpenSanctionsCatalogSection } from 'marble-api';
+import { getSectionLeafNames } from '@app-builder/components/ListAndTopicConfiguration';
+import { SCREENING_CATEGORY_I18N_KEY_MAP, type ScreeningCategory } from '@app-builder/models/screening';
+import { type ListConfigFilters, useListConfigQuery } from '@app-builder/queries/screening/lists-config';
 import { useTranslation } from 'react-i18next';
-import { match } from 'ts-pattern';
 import { ContinuousScreeningConfigurationStepper } from '../../context/CreationStepper';
 import { RecapCapsule, RecapRow } from '../../shared/RecapRow';
 
-const calculateSelectedCountByTags = (sections: OpenSanctionsCatalogSection[], selectedDatasets: string[]) => {
-  const flatDatasets = sections.flatMap((section) => section.datasets);
-  const selectedCountByTags: Record<string, number> = {};
-
-  selectedDatasets.forEach((datasetName) => {
-    const dataset = flatDatasets.find((d) => d.name === datasetName);
-    if (dataset) {
-      const datasetTag = dataset.tag ? dataset.tag : 'unknown';
-      selectedCountByTags[datasetTag] = (selectedCountByTags[datasetTag] ?? 0) + 1;
-    }
-  });
-
-  return selectedCountByTags;
-};
+type SectionData = NonNullable<ListConfigFilters[keyof ListConfigFilters]>;
 
 export const DatasetSelectionRecap = () => {
   const { t } = useTranslation(['continuousScreening', 'scenarios']);
-  const datasetsQuery = useScreeningDatasetsQuery();
-  const selectedDatasets = ContinuousScreeningConfigurationStepper.select((state) =>
-    Object.keys(state.data.datasets).filter((k) => !!state.data.datasets[k]),
-  );
+  const listConfigQuery = useListConfigQuery('continuous_monitoring');
+  const datasets = ContinuousScreeningConfigurationStepper.select((state) => state.data.datasets);
+
+  const enabledSections = Object.entries(listConfigQuery.data ?? {}).filter(
+    ([key, section]) => !!datasets[key] && section != null,
+  ) as [ScreeningCategory, SectionData][];
 
   return (
     <RecapRow>
-      <span>{t('continuousScreening:creation.datasetSelection.recap.title', { count: selectedDatasets.length })}</span>
-      {match(datasetsQuery)
-        .with({ isPending: true }, () => <div>Loading...</div>)
-        .with({ isError: true }, () => <div>Error</div>)
-        .with({ isSuccess: true }, ({ data }) => {
-          const selectedCountByTags = calculateSelectedCountByTags(data.datasets.sections, selectedDatasets);
-          const entries = Object.entries(selectedCountByTags);
-
-          return (
-            <div className="flex flex-row items-center gap-v2-xs">
-              {entries.map(([tag, count]) => (
-                <RecapCapsule key={tag}>
-                  {count}{' '}
-                  {match(tag)
-                    .with('peps', () => t(`scenarios:sanction.lists.peps`))
-                    .with('third-parties', () => t(`scenarios:sanction.lists.third_parties`))
-                    .with('sanctions', () => t(`scenarios:sanction.lists.sanctions`))
-                    .with('adverse-media', () => t(`scenarios:sanction.lists.adverse_media`))
-                    .otherwise(() => t(`scenarios:sanction.lists.other`))}
-                </RecapCapsule>
-              ))}
-            </div>
-          );
-        })
-        .exhaustive()}
+      <span>{t('continuousScreening:creation.datasetSelection.recap.title', { count: enabledSections.length })}</span>
+      {enabledSections.map(([key, section]) => {
+        const leafCount = getSectionLeafNames(section).filter((n) => !!datasets[n]).length;
+        const sectionLabel = t(`scenarios:sanction.lists.${SCREENING_CATEGORY_I18N_KEY_MAP[key]}`);
+        return (
+          <RecapCapsule key={key}>
+            <span className="flex flex-row items-center gap-v2-xs">
+              <span>{sectionLabel}</span>
+              <span>
+                {t('continuousScreening:creation.datasetSelection.recap.section_items', { count: leafCount })}
+              </span>
+            </span>
+          </RecapCapsule>
+        );
+      })}
     </RecapRow>
   );
 };