First research output (deletion, creation)

public/locales/fr/translation.json

@@ -194,9 +194,12 @@
   "There seems to be no question for this category.": "Il semble ne pas y avoir de question pour cette catégorie",
   "Oh, it seems that this help page is still under development and does not yet contain any content.": "Oh, il semble que cette page d'aide soit encore en cours de développement et ne contienne pas encore de contenu.",
   "This record already exists.": "Cet élément est déjà présent.",
-  "Search by <DOI> or <Title>": "Recherche par <DOI> ou <Titre>"
+  "Search by <DOI> or <Title>": "Recherche par <DOI> ou <Titre>",
   "Glossary": "Glossaire",
   "Oh, it seems that this glossary page is still under development and does not yet contain any content.": "Oh, il semble que cette page de glossaire soit encore en cours de développement et ne contienne pas encore de contenu.",
   "There don't seem to be any terms for this letter.": "Il ne semble pas y avoir de termes pour cette lettre",
-  "Search...": "Rechercher..."
+  "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."
 }

src/components/ResearchOutput/AddResearchOutput.jsx

@@ -17,7 +17,7 @@ const EndButton = styled.div`
   justify-content: end;
 `;
 
-function AddResearchOutput({ planId, handleClose, edit = false }) {
+function AddResearchOutput({ planId, handleClose, edit = false, close = true }) {
   const {
     locale,
     displayedResearchOutput, setDisplayedResearchOutput,
@@ -34,6 +34,10 @@ function AddResearchOutput({ planId, handleClose, edit = false }) {
   const selectedOption = options.find((opt) => opt.value === type);
 
   useEffect(() => {
+    service.getRegistryByName('ResearchDataType').then((res) => {
+      setOptions(createOptions(res.data, locale));
+    });
+
     if (edit) {
       setAbbreviation(displayedResearchOutput.abbreviation);
       setTitle(displayedResearchOutput.title);
@@ -42,17 +46,13 @@ function AddResearchOutput({ planId, handleClose, edit = false }) {
     }
 
     if (!edit) {
-      const maxOrder = Math.max(...researchOutputs.map(ro => ro.order));
+      const maxOrder = researchOutputs && researchOutputs.length > 0 ? Math.max(...researchOutputs.map(ro => ro.order)) : 0;
       setAbbreviation(`${t('RO')} ${maxOrder + 1}`);
       setTitle(`${t('Research output')} ${maxOrder + 1}`);
       setHasPersonalData(false);
       setType(null);
     }
-
-    service.getRegistryByName('ResearchDataType').then((res) => {
-      setOptions(createOptions(res.data, locale));
-    });
-  }, []);
+  }, [locale]);
 
   /**
    * This is a function that handles the selection of a value and sets it as the type.
@@ -66,6 +66,11 @@ function AddResearchOutput({ planId, handleClose, edit = false }) {
    */
   const handleSave = async (e) => {
     e.stopPropagation();
+
+    if (!type || type.length === 0) {
+      return toast.error(t('Un "type" est nécessaire pour créer un produit de recherche.'));
+    }
+
     const researchOutputInfo = {
       plan_id: planId,
       abbreviation,
@@ -152,6 +157,7 @@ function AddResearchOutput({ planId, handleClose, edit = false }) {
             selectedOption={selectedOption}
             placeholder={t("Select a value from the list")}
             overridable={false}
+            isDisabled={edit}
           />
         )}
       </div>
@@ -170,9 +176,11 @@ function AddResearchOutput({ planId, handleClose, edit = false }) {
         </div>
       </div>
       <EndButton>
-        <Button onClick={handleClose} style={{ margin: '0 5px 0 5px' }}>
-          {t("Close")}
-        </Button>
+        {close && (
+          <Button onClick={handleClose} style={{ margin: '0 5px 0 5px' }}>
+            {t("Close")}
+          </Button>
+        )}
         <Button bsStyle="primary" onClick={handleSave} style={{ backgroundColor: "var(--rust)", color: "white", margin: '0 5px 0 5px'  }}>
           {t(edit ? "Save" : "Add")}
         </Button>

src/components/ResearchOutput/ResearchOutputInfobox.jsx

@@ -52,7 +52,7 @@ function ResearchOutputInfobox({ handleEdit, handleDelete, readonly }) {
                 </button>
               </>
             )}
-            {!readonly && researchOutputs.length > 1 && (
+            {!readonly && researchOutputs.length > 0 && (
               <>
                 <Tooltip anchorSelect="#deleteBtn" place="bottom">
                   {t("Delete")}

src/components/WritePlan/SectionsContent.jsx

@@ -13,7 +13,6 @@ import ResearchOutputModal from "../ResearchOutput/ResearchOutputModal";
 import ResearchOutputInfobox from "../ResearchOutput/ResearchOutputInfobox";
 import * as styles from "../assets/css/write_plan.module.css";
 
-
 function SectionsContent({ planId, templateId, readonly }) {
   const { t } = useTranslation();
   const {

src/components/WritePlan/WritePlan.jsx

@@ -4,6 +4,7 @@ import { format } from "date-fns";
 import { fr, enGB } from "date-fns/locale";
 import { FaRegCompass } from "react-icons/fa6";
 import { Tooltip as ReactTooltip } from 'react-tooltip';
+import { Panel } from 'react-bootstrap';
 
 import SectionsContent from "./SectionsContent";
 import { writePlan } from "../../services";
@@ -15,6 +16,7 @@ import ResearchOutputsTabs from "./ResearchOutputsTabs";
 import * as styles from "../assets/css/sidebar.module.css";
 import consumer from "../../cable";
 import { useTour } from "../Shared/Joyride/JoyrideContext";
+import AddResearchOutput from "../ResearchOutput/AddResearchOutput";
 
 const locales = { fr, en: enGB };
 
@@ -38,7 +40,7 @@ function WritePlan({
     displayedResearchOutput, setDisplayedResearchOutput,
     researchOutputs, setResearchOutputs,
     setQuestionsWithGuidance,
-    planInformations,
+    planInformations, setPlanInformations,
   } = useContext(GlobalContext);
   const subscriptionRef = useRef(null);
   const [loading, setLoading] = useState(false);
@@ -136,7 +138,7 @@ function WritePlan({
     <div style={{ position: 'relative' }}>
       {loading && <CustomSpinner isOverlay={true}></CustomSpinner>}
       {error && <CustomError error={error}></CustomError>}
-      {!error && researchOutputs && (
+      {!error && researchOutputs && researchOutputs.length > 0 && (
         <>
           <div style={{ margin: '10px 30px 10px 30px' }}>
             <GuidanceChoice planId={planId} style={{ flexGrow: 1 }} />
@@ -203,6 +205,18 @@ function WritePlan({
           </div>
         </>
       )}
+      {!loading && !error && researchOutputs?.length === 0 && (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <Panel style={{ width: '700px' }}>
+            <Panel.Body>
+              <h2 style={{ textAlign: 'center' }}>{t('Your plan does not yet include any research output')}</h2>
+              <div style={{ justifyContent: 'center', alignItems: 'center', left: 0 }}>
+                <AddResearchOutput planId={planId} handleClose={() => {}} close={false} show={true} edit={false} />
+              </div>
+            </Panel.Body>
+          </Panel>
+        </div>
+      )}
     </div>
   );
 }