From b2a77fec72e449be2132e0d4a3987eec17dd0bdf Mon Sep 17 00:00:00 2001
From: Clara Ni <clara.ni@outlook.fr>
Date: Tue, 26 Nov 2024 17:28:51 +0100
Subject: [PATCH] front: display electrical profile set name in scenario

Signed-off-by: Clara Ni <clara.ni@outlook.fr>
---
 .../en/operationalStudies/scenario.json       |  4 +++
 .../fr/operationalStudies/scenario.json       |  4 +++
 .../Scenario/ScenarioDescription.tsx          | 34 ++++++++++++++++---
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/front/public/locales/en/operationalStudies/scenario.json b/front/public/locales/en/operationalStudies/scenario.json
index 3fd71b1a66e..62a3330dcbd 100644
--- a/front/public/locales/en/operationalStudies/scenario.json
+++ b/front/public/locales/en/operationalStudies/scenario.json
@@ -1,5 +1,9 @@
 {
   "editScenario": "Edit scenario",
+  "description": {
+    "electricalProfileWithName": "Electrical profiles : {{name}} | ID{{id}}",
+    "electricalProfileWithId": "Electrical profiles : ID{{id}}"
+  },
   "displayTrainsWithDetails": "Mask/unmask trains detail",
   "electricalProfileSet": "Electrical profiles set",
   "errorMessages": {
diff --git a/front/public/locales/fr/operationalStudies/scenario.json b/front/public/locales/fr/operationalStudies/scenario.json
index 4e9d8a4223f..162c440f044 100644
--- a/front/public/locales/fr/operationalStudies/scenario.json
+++ b/front/public/locales/fr/operationalStudies/scenario.json
@@ -1,5 +1,9 @@
 {
   "editScenario": "Modifier le scénario",
+  "description": {
+    "electricalProfileWithName": "Profils électriques : {{name}} | ID{{id}}",
+    "electricalProfileWithId": "Profils électriques : ID{{id}}"
+  },
   "displayTrainsWithDetails": "Afficher/masquer le détail des trains",
   "electricalProfileSet": "Set de profils électriques",
   "errorMessages": {
diff --git a/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx b/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx
index d0d5e9cd690..3bbb3f63bc8 100644
--- a/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx
+++ b/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx
@@ -1,9 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Blocked, ChevronLeft, Pencil, X } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
 
-import type { InfraWithState, ScenarioResponse } from 'common/api/osrdEditoastApi';
+import {
+  osrdEditoastApi,
+  type InfraWithState,
+  type ScenarioResponse,
+} from 'common/api/osrdEditoastApi';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import AddAndEditScenarioModal from 'modules/scenario/components/AddOrEditScenarioModal';
 import useOutsideClick from 'utils/hooks/useOutsideClick';
@@ -30,6 +34,15 @@ const ScenarioDescription = ({
   const collapsedDescriptionRef = useRef<HTMLDivElement | null>(null);
   const [isTooLongDescription, setIsTooLongDescription] = useState<boolean>(false);
 
+  const { data: electricalProfileSets } =
+    osrdEditoastApi.endpoints.getElectricalProfileSet.useQuery();
+
+  const electricalProfileSet = useMemo(
+    () =>
+      electricalProfileSets?.find((profile) => profile.id === scenario.electrical_profile_set_id),
+    [electricalProfileSets]
+  );
+
   const toggleDescription = () => {
     setIsOpenedDescription(!isOpenedDescription);
   };
@@ -114,9 +127,20 @@ const ScenarioDescription = ({
         </button>
       </div>
       <div className="scenario-details-electrical-profile-set">
-        {scenario.electrical_profile_set_id
-          ? scenario.electrical_profile_set_id
-          : t('noElectricalProfileSet')}
+        {scenario.electrical_profile_set_id ? (
+          <span>
+            {electricalProfileSet?.name
+              ? t('description.electricalProfileWithName', {
+                  name: electricalProfileSet.name,
+                  id: scenario.electrical_profile_set_id,
+                })
+              : t('description.electricalProfileWithId', {
+                  id: scenario.electrical_profile_set_id,
+                })}
+          </span>
+        ) : (
+          t('noElectricalProfileSet')
+        )}
       </div>
 
       <div className="scenario-details-infra-name">