[frontend] use context to prefill the dynamic entity mapping column (#…

…7400) Co-authored-by: Landry Trebon <[email protected]>
OpenCTI-Platform · Nov 27, 2024 · d79eff0 · d79eff0
1 parent 00813e7
commit d79eff0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/data/csvMapper/CsvMapperContext.tsx b/opencti-platform/opencti-front/src/private/components/data/csvMapper/CsvMapperContext.tsx
@@ -0,0 +1,27 @@
+import React, { createContext, ReactNode, useContext, useState } from 'react';
+
+interface CsvMapperContextProps {
+  dynamicMappingColumn: string | null;
+  setDynamicMappingColumn: (index: string) => void;
+}
+
+interface CsvMapperProviderProps {
+  children: ReactNode;
+}
+
+const CsvMapperContext = createContext<CsvMapperContextProps | undefined>(undefined);
+export const CsvMapperProvider: React.FC<CsvMapperProviderProps> = ({ children }) => {
+  const [dynamicMappingColumn, setDynamicMappingColumn] = useState<string | null>(null);
+  return (
+    <CsvMapperContext.Provider value={{ dynamicMappingColumn, setDynamicMappingColumn }}>
+      {children}
+    </CsvMapperContext.Provider>
+  );
+};
+export const useCsvMapperContext = () => {
+  const context = useContext(CsvMapperContext);
+  if (!context) {
+    throw new Error('useCsvMapperContext must be used within a CsvMapperProvider');
+  }
+  return context;
+};
diff --git a/opencti-platform/opencti-front/src/private/components/data/csvMapper/CsvMapperForm.tsx b/opencti-platform/opencti-front/src/private/components/data/csvMapper/CsvMapperForm.tsx
@@ -14,6 +14,7 @@ import { CsvMapperFormData } from '@components/data/csvMapper/CsvMapper';
 import classNames from 'classnames';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { formDataToCsvMapper } from '@components/data/csvMapper/CsvMapperUtils';
+import { CsvMapperProvider } from '@components/data/csvMapper/CsvMapperContext';
 import type { Theme } from '../../../../components/Theme';
 import { useFormatter } from '../../../../components/i18n';
 import TextField from '../../../../components/TextField';
@@ -160,7 +161,7 @@ const CsvMapperForm: FunctionComponent<CsvMapperFormProps> = ({ csvMapper, onSub
     setHasError(Object.values(errors).filter((v) => v).length > 0);
   };
   return (
-    <>
+    <CsvMapperProvider>
       <Formik<CsvMapperFormData>
         enableReinitialize
         initialValues={csvMapper}
@@ -351,7 +352,7 @@ const CsvMapperForm: FunctionComponent<CsvMapperFormProps> = ({ csvMapper, onSub
           );
         }}
       </Formik>
-    </>
+    </CsvMapperProvider>
   );
 };
 

diff --git a/...c/private/components/data/csvMapper/representations/CsvMapperConditionalEntityMapping.tsx b/...c/private/components/data/csvMapper/representations/CsvMapperConditionalEntityMapping.tsx
@@ -6,42 +6,64 @@ import { CsvMapperColumnBasedFormData, CsvMapperRepresentationFormData } from '@
 import Tooltip from '@mui/material/Tooltip';
 import { InformationOutline } from 'mdi-material-ui';
 import { alphabet } from '@components/data/csvMapper/representations/attributes/AttributeUtils';
+import { useCsvMapperContext } from '@components/data/csvMapper/CsvMapperContext';
+import { useTheme } from '@mui/styles';
+import { Option } from '@components/common/form/ReferenceField';
 import { useFormatter } from '../../../../../components/i18n';
 import TextField from '../../../../../components/TextField';
 import SwitchField from '../../../../../components/fields/SwitchField';
+import type { Theme } from '../../../../../components/Theme';
 
 interface CsvMapperConditionalEntityMappingProps
   extends FieldProps<CsvMapperColumnBasedFormData> {
   representation: CsvMapperRepresentationFormData;
   representationName: string;
 }
+
 const CsvMapperConditionalEntityMapping: FunctionComponent<
 CsvMapperConditionalEntityMappingProps
 > = ({ form, representationName, representation }) => {
+  const theme = useTheme<Theme>();
   const { t_i18n } = useFormatter();
+  const { dynamicMappingColumn, setDynamicMappingColumn } = useCsvMapperContext();
+
   const columnOptions = alphabet(26);
-  const operatorOptions = [
-    { label: t_i18n('Equal'), value: ('eq') },
+  const operatorOptions: Option[] = [
+    { label: t_i18n('Equal'), value: 'eq' },
     { label: t_i18n('Not equal'), value: 'not_eq' }];
   const { setFieldValue } = form;
+
   const columnBased = representation.column_based;
 
   const handleColumnSelect = async (column: string | null) => {
     await setFieldValue(`${representationName}.column_based.column_reference`, column);
+    if (column) {
+      setDynamicMappingColumn(column);
+    }
   };
 
-  const handleOperatorSelect = async (operator: { label: string, value: string } | null) => {
+  const handleOperatorSelect = async (operator: Option | null) => {
     await setFieldValue(`${representationName}.column_based.operator`, operator?.value);
   };
 
+  const onToggleDynamicMapping = async (val: string) => {
+    if (val === 'false') {
+      await setFieldValue(`${representationName}.column_based.column_reference`, null);
+      await setFieldValue(`${representationName}.column_based.operator`, null);
+    } else {
+      await setFieldValue(`${representationName}.column_based.column_reference`, dynamicMappingColumn ?? null);
+      await setFieldValue(`${representationName}.column_based.operator`, 'eq');
+    }
+  };
+
   return (
     <div style={{
       width: '100%',
       display: 'grid',
       gridTemplateColumns: '1.3fr 1fr 1fr 1fr',
       alignItems: 'center',
-      margin: '30px 0px',
-      gap: '10px',
+      marginTop: `${theme.spacing(3)} 0 `,
+      gap: theme.spacing(1),
     }}
     >
       <div style={{
@@ -53,6 +75,7 @@ CsvMapperConditionalEntityMappingProps
           component={SwitchField}
           type="checkbox"
           name={`${representationName}.column_based.enabled`}
+          onChange={(_: string, val: string) => onToggleDynamicMapping(val)}
           label={t_i18n('Entity dynamic mapping')}
         />
         <Tooltip
@@ -74,11 +97,7 @@ CsvMapperConditionalEntityMappingProps
         autoHighlight
         options={columnOptions}
         disabled={!columnBased?.enabled}
-        value={
-          columnBased?.enabled
-            ? columnBased?.column_reference
-            : null
-          }
+        value={columnBased?.column_reference ?? null}
         onChange={(_, val) => handleColumnSelect(val)}
         sx={{ width: '100%' }}
         renderInput={(params) => (
@@ -100,20 +119,16 @@ CsvMapperConditionalEntityMappingProps
           />
         )}
       />
-      <MUIAutocomplete<{ label: string, value: string }>
+      <MUIAutocomplete<Option>
         selectOnFocus
         openOnFocus
+        autoComplete
         autoSelect={false}
         autoHighlight
         options={operatorOptions}
         disabled={!columnBased?.enabled}
-        value={
-          columnBased?.enabled
-            ? (operatorOptions.find((opt) => (opt.value === columnBased?.operator)) ?? undefined)
-            : null
-          }
+        value={operatorOptions.find((opt) => opt.value === columnBased?.operator) ?? null}
         onChange={(_, val) => handleOperatorSelect(val)}
-        defaultValue={operatorOptions.find((opt) => opt.value === 'eq')}
         sx={{ width: '100%' }}
         renderInput={(params) => (
           <MuiTextField
@@ -139,11 +154,11 @@ CsvMapperConditionalEntityMappingProps
           component={TextField}
           label={t_i18n('Value')}
           name={`${representationName}.column_based.value`}
+          value={columnBased?.enabled ? columnBased.value : ''}
           variant='standard'
           style={{ width: '100%' }}
           disabled={!representation.column_based?.enabled}
           error={!columnBased?.value && columnBased?.enabled}
-          value={columnBased?.enabled ? columnBased.value : ''}
         />
       </div>
     </div>