Feat: Template mapping editor interfaces

package.json

@@ -14,10 +14,12 @@
     "i18next-http-backend": "^2.2.0",
     "lodash.chunk": "^4.2.0",
     "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
     "lodash.unionby": "^4.8.0",
     "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-ace-builds": "^7.4.1",
     "react-bootstrap": "^0.33.1",
     "react-dom": "^18.2.0",
     "react-form-stepper": "^2.0.3",

public/locales/fr/translation.json

@@ -55,10 +55,10 @@
   "formerly": "auparavant",
   "on": "le",
   "Begin typing to see a list of suggestions": "Commencez à saisir pour voir une liste de suggestions",
-  "Select the context in which you are developing your data management plan" : "Sélectionnez le contexte dans lequel vous élaborez votre plan de gestion de données",
-  "For a research project" : "Pour un projet de recherche",
-  "For a research entity" : "Pour une entité de recherche",
-  "Confirm my choice" : "Valider mon choix",
+  "Select the context in which you are developing your data management plan": "Sélectionnez le contexte dans lequel vous élaborez votre plan de gestion de données",
+  "For a research project": "Pour un projet de recherche",
+  "For a research entity": "Pour une entité de recherche",
+  "Confirm my choice": "Valider mon choix",
   "Default template": "Modèle par défaut",
   "Your organisation": "Votre organisme",
   "Other organisation": "Autre organisme",
@@ -73,7 +73,7 @@
   "Research Entity Details": "Renseignements sur l'entité de recherche",
   "Test Plan (e.g. as part of a training course)": "Plan test (par ex, dans le cadre d'une formation)",
   "Click here if you have a funded project": "Cliquez ici si vous avez un projet financé",
-  "Click here to select the guidance of your plan":"Cliquez ici pour sélectionner les recommandations appliquées à votre plan",
+  "Click here to select the guidance of your plan": "Cliquez ici pour sélectionner les recommandations appliquées à votre plan",
   "If your project is financed by one of the funders on the list, you can automatically retrieve the administrative information you entered when applying for a grant.": "Si votre projet est financé par l’un des financeurs de la liste, vous pouvez récupérer automatiquement les informations administratives que vous avez déjà saisies lors de la demande de subvention.",
   "'{{projectTitle}}' project data has successfully been imported": "Données du projet '{{projectTitle}}' ont été importées avec succès.",
   "An error occurred during the import of the project information": "Une erreur s'est produite lors de l'import des données projet",
@@ -128,7 +128,7 @@
   "Attributed roles (Associated research outputs)": "Rôles attribués (Produits de recherche associés)",
   "Add: person or organisation": "Ajouter : personne ou organisation",
   "Edit: person or organisation": "Modifier : personne ou organisation",
-  "A problem has occurred while deleting the {{record}}" : "Un problème s'est produit lors de la suppression du {{record}}",
+  "A problem has occurred while deleting the {{record}}": "Un problème s'est produit lors de la suppression du {{record}}",
   "comment": "commentaire",
   "contributor": "contributeur",
   "You are leading or participating in a research project, you are carrying out a research activity, you are preparing a doctorate.": "Vous dirigez ou participez à un projet de recherche, vous menez une activité de recherche, vous préparez un doctorat.",
@@ -158,12 +158,12 @@
   "Select plan language": "Sélectionnez la langue du plan",
   "Create your plan in 3 steps": "Créez votre plan en 3 étapes",
   "Read article": "Lire l'article",
-  "Registration was successful !" :"L’enregistrement a été effectué avec succès !",
-  "List of customized forms" : "Liste de formulaires personnalisés",
-  "Cancel" : "Annuler",
+  "Registration was successful !": "L’enregistrement a été effectué avec succès !",
+  "List of customized forms": "Liste de formulaires personnalisés",
+  "Cancel": "Annuler",
   "Templates from others organizations (<organizationsIcon />) or funders (<fundersIcon />)": "Autres modèles: financeurs (<fundersIcon />) ou organismes de recherche (<organizationsIcon />)",
-  "The template will be in English" : "Le modèle sera en anglais",
-  "The template will be in French":"Le modèle sera en français",
+  "The template will be in English": "Le modèle sera en anglais",
+  "The template will be in French": "Le modèle sera en français",
   "Français": "Français",
   "English (GB)": "English (GB)",
   "Finish": "Terminer",
@@ -201,5 +201,22 @@
   "Search...": "Rechercher...",
   "Your plan does not yet include any research output": "Votre plan ne comporte encore aucun produit de recherche",
   "Create a research output": "Créer un produit de recherche",
-  "A ‘type’ is required to create a search product.": "Un \"type\" est nécessaire pour créer un produit de recherche."
-}
+  "A ‘type’ is required to create a search product.": "Un \"type\" est nécessaire pour créer un produit de recherche.",
+  "Template Mappings": "Correspondances de modèles",
+  "of": "sur",
+  "elements": "éléments",
+  "Filter": "Filtrer",
+  "Here you can map the sections of a structured template to the sections of a classic template.": "Ici, vous pouvez faire correspondre les sections d'un modèle structuré aux sections d'un modèle classique.",
+  "Target": "Cible",
+  "Target Template": "Modèle cible",
+  "Source Template": "Modèle source",
+  "Created At": "Créé le",
+  "Updated At": "Mis à jour le",
+  "No template mappings found": "Aucune correspondance de modèle trouvée",
+  "New Mapping": "Nouvelle correspondance",
+  "All Mappings": "Toutes les correspondances",
+  "Create Mapping": "Créer",
+  "Save mapping": "Enregistrer",
+  "Open a question in the target template to get started.": "Ouvrez une question dans le modèle cible pour commencer.",
+  "Edit Export Template": "Modifier le modèle d'export"
+}

src/__tests__/SectionsContent.test.js

@@ -3,7 +3,7 @@ import { render, act } from "@testing-library/react";
 import { BrowserRouter as Router } from "react-router-dom";
 import "@testing-library/jest-dom/extend-expect";
 import WritePlan from "../components/WritePlan/WritePlan";
-import { writePlan } from "../services";
+import { sectionsContent } from "../services";
 import Global from "../components/context/Global";
 
 jest.mock("../services/DmpWritePlanApi.js");
@@ -259,7 +259,7 @@ const mockSectionsData = {
 };
 describe("Redaction component", () => {
   beforeEach(() => {
-    writePlan.getPlanData.mockResolvedValue(mockSectionsData);
+    sectionsContent.getPlanData.mockResolvedValue(mockSectionsData);
   });
 
   afterEach(() => {

src/__tests__/WritePlan.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, fireEvent, screen, act } from "@testing-library/react";
 import WritePlan from "../components/WritePlan/WritePlan";
-import { writePlan } from "../services";
+import { sectionsContent } from "../services";
 import { GlobalContext } from "../components/context/Global";
 import "@testing-library/jest-dom";
 import { BrowserRouter as Router } from "react-router-dom";
@@ -26,7 +26,7 @@ const globalState = {
 
 describe("WritePlan", () => {
   beforeEach(() => {
-    writePlan.getPlanData.mockResolvedValue({
+    sectionsContent.getPlanData.mockResolvedValue({
       data: {
         plan: {
           id: 1,

src/components/FormComponents/SelectWithCreate.jsx → src/components/FormComponents/DropdownsToEntryTable.jsx

@@ -11,8 +11,8 @@ import { GlobalContext } from '../context/Global.jsx';
 import {
   createOptions,
   createRegistryPlaceholder,
-} from '../../utils/GeneratorUtils';
-import { service } from '../../services';
+} from '../../utils/GeneratorUtils.js';
+import { service } from '../../services/index.js';
 import * as styles from '../assets/css/form.module.css';
 import CustomSelect from '../Shared/CustomSelect.jsx';
 import FragmentList from './FragmentList.jsx';
@@ -21,8 +21,11 @@ import ModalForm from '../Forms/ModalForm.jsx';
 import swalUtils from '../../utils/swalUtils.js';
 import { getErrorMessage } from '../../utils/utils.js';
 import { checkFragmentExists } from '../../utils/JsonFragmentsUtils.js';
+import useSectionsMapping from '../../hooks/useSectionsMapping.js';
+import CustomButton from '../Styled/CustomButton.jsx';
+import MappingButton from './MappingButton.jsx';
 
-function SelectWithCreate({
+function DropdownsToEntryTable({
   label,
   formLabel,
   propName,
@@ -32,13 +35,17 @@ function SelectWithCreate({
   registries,
   overridable = false,
   readonly = false,
+  jsonPath = null
 }) {
   const { t } = useTranslation();
   const {
     locale,
     loadedRegistries, setLoadedRegistries,
     loadedTemplates, setLoadedTemplates,
   } = useContext(GlobalContext);
+
+  const { mapping } = useSectionsMapping();
+
   const { control } = useFormContext();
   const { field } = useController({ control, name: propName });
   const [show, setShow] = useState(false);
@@ -208,66 +215,77 @@ function SelectWithCreate({
         </div>
         <span className={styles.errorMessage}>{error}</span>
         {/* ************Select ref************** */}
-        <div className="row">
-          {registries && registries.length > 1 && (
-            <div className="col-md-6">
-              <div className="row">
-                <div className={`col-md-11 ${styles.select_wrapper}`}>
-                  <CustomSelect
-                    onSelectChange={handleSelectRegistry}
-                    options={registries.map((registry) => ({
-                      value: registry,
-                      label: registry,
-                    }))}
-                    name={propName}
-                    selectedOption={
-                      selectedRegistry ? { value: selectedRegistry, label: selectedRegistry } : null
-                    }
-                    isDisabled={readonly}
-                    placeholder={t("Select a registry")}
-                  />
+        {mapping
+          ? <CustomButton
+            title={t("Open element modal")}
+            handleClick={handleEdit}
+            buttonColor="rust"
+          />
+          : <div className="row">
+            {registries && registries.length > 1 && (
+              <div className="col-md-6">
+                <div className="row">
+                  <div className={`col-md-11 ${styles.select_wrapper}`}>
+                    <CustomSelect
+                      onSelectChange={handleSelectRegistry}
+                      options={registries.map((registry) => ({
+                        value: registry,
+                        label: registry,
+                      }))}
+                      name={propName}
+                      selectedOption={
+                        selectedRegistry ? { value: selectedRegistry, label: selectedRegistry } : null
+                      }
+                      isDisabled={readonly}
+                      placeholder={t("Select a registry")}
+                    />
+                    <MappingButton path={jsonPath} label={label}/>
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
+            )}
 
-          <div className={registries && registries.length > 1 ? "col-md-6" : "col-md-12"}>
-            <div className="row">
-              <div className={`col-md-11 ${styles.select_wrapper}`}>
-                {options && (
-                  <CustomSelect
-                    onSelectChange={handleSelectRegistryValue}
-                    options={options}
-                    name={propName}
-                    isDisabled={readonly || !selectedRegistry}
-                    async={options.length > ASYNC_SELECT_OPTION_THRESHOLD}
-                    placeholder={createRegistryPlaceholder(registries, overridable, 'complex', t)}
-                    overridable={false}
-                  />
+            <div className={registries && registries.length > 1 ? "col-md-6" : "col-md-12"}>
+              <div className="row">
+                <div className={`col-md-11 ${styles.select_wrapper}`}>
+                  {options && (
+                    <>
+                      <CustomSelect
+                        onSelectChange={handleSelectRegistryValue}
+                        options={options}
+                        name={propName}
+                        isDisabled={readonly || !selectedRegistry}
+                        async={options.length > ASYNC_SELECT_OPTION_THRESHOLD}
+                        placeholder={createRegistryPlaceholder(registries, overridable, 'complex', t)}
+                        overridable={false}
+                      />
+                      <MappingButton path={jsonPath} label={label} />
+                    </>
+                  )}
+                </div>
+                {!readonly && overridable && (
+                  <div className="col-md-1">
+                    <ReactTooltip
+                      id="select-with-create-add-button"
+                      place="bottom"
+                      effect="solid"
+                      variant="info"
+                      content={t('Add')}
+                    />
+                    <FaPlus
+                      data-tooltip-id="select-with-create-add-button"
+                      onClick={() => {
+                        setShow(true);
+                        setIndex(null);
+                      }}
+                      className={styles.icon}
+                    />
+                  </div>
                 )}
               </div>
-              {!readonly && overridable && (
-                <div className="col-md-1">
-                  <ReactTooltip
-                    id="select-with-create-add-button"
-                    place="bottom"
-                    effect="solid"
-                    variant="info"
-                    content={t('Add')}
-                  />
-                  <FaPlus
-                    data-tooltip-id="select-with-create-add-button"
-                    onClick={() => {
-                      setShow(true);
-                      setIndex(null);
-                    }}
-                    className={styles.icon}
-                  />
-                </div>
-              )}
             </div>
           </div>
-        </div>
+        }
         <span className={styles.errorMessage}>{error}</span>
         {template && (
           <FragmentList
@@ -290,10 +308,11 @@ function SelectWithCreate({
           show={show}
           handleSave={handleSave}
           handleClose={handleClose}
+          jsonPath={jsonPath}
         />
       )}
     </div>
   );
 }
 
-export default SelectWithCreate;
+export default DropdownsToEntryTable;