front: redesign top left of the scenario page

Signed-off-by: theocrsb <[email protected]>

Author: theocrsb

front/public/locales/en/operationalStudies/scenario.json

@@ -15,8 +15,9 @@
   "filterPlaceholder": "Filter, tags",
   "advancedFiltersPlaceholder": "Filter by family, serie, detail",
   "infraLoadingState": "{{step}}/7",
-  "macroscopic": "Macroscopic",
-  "microscopic": "Microscopic",
+  "infrastructure": "Infrastructure",
+  "macroscopic": "MACRO",
+  "microscopic": "MICRO",
   "modifyScenario": "Modify scenario",
   "noElectricalProfileSet": "No electrical profile",
   "scenarioCancel": "Cancel",

front/public/locales/fr/operationalStudies/scenario.json

@@ -14,8 +14,9 @@
   },
   "filterPlaceholder": "Filtre, étiquettes",
   "infraLoadingState": "{{step}}/7",
-  "macroscopic": "Macroscopique",
-  "microscopic": "Microscopique",
+  "infrastructure": "Infrastructure",
+  "macroscopic": "MACRO",
+  "microscopic": "MICRO",
   "modifyScenario": "Modifier le scénario",
   "noElectricalProfileSet": "Pas de profil électrique",
   "scenarioCancel": "Annuler",

front/src/applications/operationalStudies/components/MicroMacroSwitch.tsx

@@ -9,18 +9,18 @@ type MicroMacroSwitchProps = {
 const MicroMacroSwitch = ({ isMacro, setIsMacro }: MicroMacroSwitchProps) => {
   const { t } = useTranslation('operationalStudies/scenario');
   return (
-    <div className="tabs-container">
-      <div className="tabs">
+    <div className="micro-macro-container">
+      <div className="micro-macro-buttons">
         <div
-          className={cx('tab', { active: !isMacro })}
+          className={cx('micro-button', { active: !isMacro })}
           role="button"
           tabIndex={0}
           onClick={() => setIsMacro(false)}
         >
           {t('microscopic')}
         </div>
         <div
-          className={cx('tab', { active: isMacro })}
+          className={cx('macro-button', { active: isMacro })}
           role="button"
           tabIndex={0}
           onClick={() => setIsMacro(true)}

front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx

@@ -52,7 +52,6 @@ const ScenarioContent = ({
   const [displayTrainScheduleManagement, setDisplayTrainScheduleManagement] = useState<string>(
     MANAGE_TRAIN_SCHEDULE_TYPES.none
   );
-  const [showTrainDetails, setShowTrainDetails] = useState(false);
   const [collapsedTimetable, setCollapsedTimetable] = useState(false);
   const [trainIdToEdit, setTrainIdToEdit] = useState<number>();
   const [isMacro, setIsMacro] = useState(false);
@@ -138,8 +137,6 @@ const ScenarioContent = ({
                 scenario={scenario}
                 infra={infra}
                 infraReloadCount={reloadCount}
-                showTrainDetails={showTrainDetails}
-                toggleTrainDetails={() => setShowTrainDetails(!showTrainDetails)}
                 collapseTimetable={() => setCollapsedTimetable(true)}
               />
               <MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />
@@ -157,7 +154,6 @@ const ScenarioContent = ({
                   )}
                   <Timetable
                     setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
-                    trainsWithDetails={showTrainDetails}
                     infraState={infra.state}
                     trainIds={timetable.train_ids}
                     selectedTrainId={selectedTrainId}

front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx

@@ -1,9 +1,7 @@
-import { ChevronLeft, Eye, EyeClosed, Pencil } from '@osrd-project/ui-icons';
+import { ChevronLeft, Pencil } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
-import { GiElectric } from 'react-icons/gi';
 
 import InfraLoadingState from 'applications/operationalStudies/components/Scenario/InfraLoadingState';
-import infraLogo from 'assets/pictures/components/tracks.svg';
 import type { InfraWithState, ScenarioResponse } from 'common/api/osrdEditoastApi';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import AddAndEditScenarioModal from 'modules/scenario/components/AddOrEditScenarioModal';
@@ -12,31 +10,43 @@ type ScenarioDescriptionProps = {
   scenario: ScenarioResponse;
   infra?: InfraWithState;
   infraReloadCount: number;
-  showTrainDetails: boolean;
-  toggleTrainDetails: () => void;
   collapseTimetable: () => void;
 };
 
 const ScenarioDescription = ({
   scenario,
   infra,
   infraReloadCount,
-  showTrainDetails,
-  toggleTrainDetails,
   collapseTimetable,
 }: ScenarioDescriptionProps) => {
   const { t } = useTranslation('operationalStudies/scenario');
   const { openModal } = useModal();
 
   return (
-    <div className="scenario-details">
+    <div>
       <div className="scenario-details-name">
         <span className="flex-grow-1 scenario-name text-truncate" title={scenario.name}>
           {scenario.name}
         </span>
+      </div>
+
+      <div className="scenario-description">
+        {scenario.description && (
+          <div className="scenario-details-description">{scenario.description}</div>
+        )}
+        <div className="flex justify-end">
+          <button
+            type="button"
+            className="scenario-collapse-button"
+            aria-label={t('toggleTimetable')}
+            onClick={() => collapseTimetable()}
+          >
+            <ChevronLeft />
+          </button>
+        </div>
         <button
           data-testid="editScenario"
-          className="scenario-details-modify-button"
+          className="update-scenario"
           type="button"
           aria-label={t('editScenario')}
           onClick={() =>
@@ -50,42 +60,16 @@ const ScenarioDescription = ({
         >
           <Pencil />
         </button>
-        <button
-          type="button"
-          className="scenario-details-modify-button"
-          onClick={toggleTrainDetails}
-          title={t('displayTrainsWithDetails')}
-        >
-          {showTrainDetails ? <EyeClosed /> : <Eye />}
-        </button>
-        <button
-          type="button"
-          className="scenario-details-modify-button"
-          aria-label={t('toggleTimetable')}
-          onClick={() => collapseTimetable()}
-        >
-          <ChevronLeft />
-        </button>
       </div>
-      <div className="row">
-        <div className="col-md-6">
-          <div className="scenario-details-infra-name">
-            <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
-            {infra && <InfraLoadingState infra={infra} />}
-            <span className="scenario-infra-name">{scenario.infra_name}</span>
-            <small className="ml-auto text-muted">ID {scenario.infra_id}</small>
-          </div>
-        </div>
-        <div className="col-md-6">
-          <div className="scenario-details-electrical-profile-set">
-            <span className="mr-2">
-              <GiElectric />
-            </span>
-            {scenario.electrical_profile_set_id
-              ? scenario.electrical_profile_set_id
-              : t('noElectricalProfileSet')}
-          </div>
-        </div>
+      <div className="scenario-details-electrical-profile-set">
+        {scenario.electrical_profile_set_id
+          ? scenario.electrical_profile_set_id
+          : t('noElectricalProfileSet')}
+      </div>
+
+      <div className="scenario-details-infra-name">
+        {t('infrastructure')} :&nbsp;{infra && <InfraLoadingState infra={infra} />}
+        {scenario.infra_name} | ID {scenario.infra_id}
       </div>
       {infra &&
         infra.state === 'TRANSIENT_ERROR' &&
@@ -101,7 +85,6 @@ const ScenarioDescription = ({
       {infra && infra.state === 'ERROR' && (
         <div className="scenario-details-infra-error mt-1">{t('errorMessages.hardErrorInfra')}</div>
       )}
-      <div className="scenario-details-description">{scenario.description}</div>
     </div>
   );
 };

front/src/modules/trainschedule/components/Timetable/Timetable.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import { Alert, Download, Plus } from '@osrd-project/ui-icons';
+import { Alert } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { compact } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -21,7 +21,6 @@ import { timetableHasInvalidTrain } from './utils';
 
 type TimetableProps = {
   setDisplayTrainScheduleManagement: (mode: string) => void;
-  trainsWithDetails: boolean;
   infraState: InfraState;
   trainIds: number[];
   selectedTrainId?: number;
@@ -36,7 +35,6 @@ type TimetableProps = {
 
 const Timetable = ({
   setDisplayTrainScheduleManagement,
-  trainsWithDetails,
   infraState,
   trainIds,
   selectedTrainId,
@@ -107,29 +105,21 @@ const Timetable = ({
     <div className="scenario-timetable">
       <div className="scenario-timetable-addtrains-buttons">
         <button
-          className="btn btn-secondary btn-sm"
-          type="button"
-          data-testid="scenarios-import-train-schedule-button"
-          onClick={() => setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.import)}
-        >
-          <span className="mr-2">
-            <Download />
-          </span>
-          {t('timetable.importTrainSchedule')}
-        </button>
-        <button
-          className="btn btn-primary btn-sm"
           type="button"
           data-testid="scenarios-add-train-schedule-button"
           onClick={() => {
             setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.add);
           }}
         >
-          <span className="mr-2">
-            <Plus />
-          </span>
           {t('timetable.addTrainSchedule')}
         </button>
+        <button
+          type="button"
+          data-testid="scenarios-import-train-schedule-button"
+          onClick={() => setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.import)}
+        >
+          {t('timetable.importTrainSchedule')}
+        </button>
       </div>
       <TimetableToolbar
         trainSchedulesWithDetails={trainSchedulesWithDetails}
@@ -146,7 +136,6 @@ const Timetable = ({
       <div
         className={cx('scenario-timetable-trains', {
           expanded: conflictsListExpanded,
-          'with-details': trainsWithDetails,
         })}
       >
         {trainsDurationsIntervals &&

front/src/styles/scss/_variables.scss

@@ -32,6 +32,13 @@ $colors: (
   'coolgray5': #b9b9b9,
   'coolgray3': #d7d7d7,
   'coolgray1': #f2f2f2,
+  'primary60': #1844ef,
+  'grey20': #d3d1cf,
+  'grey40': #94918e,
+  'grey50': #797671,
+  'grey60': #5c5955,
+  'grey90': #1f1b17,
+  'ambientB10': #f7f6ee,
 );
 
 :root {