- remove flex-grow in scenario-timetable class, add class nge-iframe…

…, remove classname in tabs component
OpenRailAssociation · Jul 16, 2024 · 49314aa · 49314aa
1 parent f3ef3d3
commit 49314aa
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 125 deletions.
diff --git a/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx b/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx
@@ -54,7 +54,7 @@ const NGE = () => {
     };
   }, []);
 
-  return <iframe ref={frameRef} srcDoc={frameSrc} title="nge-iframe" />;
+  return <iframe ref={frameRef} srcDoc={frameSrc} title="NGE" className="nge-iframe-container" />;
 };
 
 export default NGE;
diff --git a/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx b/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx
@@ -199,117 +199,123 @@ const ScenarioV2 = () => {
             <div
               className={`scenario-sidemenu ${collapsedTimetable ? 'd-none' : 'col-hdp-3 col-xl-4 col-lg-5 col-md-6'}`}
             >
-              {scenario && (
-                <div className="scenario-details">
-                  <div className="scenario-details-name">
-                    <span className="flex-grow-1 scenario-name text-truncate" title={scenario.name}>
-                      {scenario.name}
-                    </span>
-                    <button
-                      data-testid="editScenario"
-                      className="scenario-details-modify-button"
-                      type="button"
-                      aria-label={t('editScenario')}
-                      onClick={() =>
-                        openModal(
-                          <AddAndEditScenarioModal editionMode scenario={scenario} />,
-                          'xl',
-                          'no-close-modal'
-                        )
-                      }
-                      title={t('editScenario')}
-                    >
-                      <Pencil />
-                    </button>
-                    <button
-                      type="button"
-                      className="scenario-details-modify-button"
-                      onClick={() => setTrainsWithDetails(!trainsWithDetails)}
-                      title={t('displayTrainsWithDetails')}
-                    >
-                      {trainsWithDetails ? <EyeClosed /> : <Eye />}
-                    </button>
-                    <button
-                      type="button"
-                      className="scenario-details-modify-button"
-                      aria-label={t('toggleTimetable')}
-                      onClick={() => setCollapsedTimetable(true)}
-                    >
-                      <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 className="scenario-sidemenu">
+                {scenario && (
+                  <div className="scenario-details">
+                    <div className="scenario-details-name">
+                      <span
+                        className="flex-grow-1 scenario-name text-truncate"
+                        title={scenario.name}
+                      >
+                        {scenario.name}
+                      </span>
+                      <button
+                        data-testid="editScenario"
+                        className="scenario-details-modify-button"
+                        type="button"
+                        aria-label={t('editScenario')}
+                        onClick={() =>
+                          openModal(
+                            <AddAndEditScenarioModal editionMode scenario={scenario} />,
+                            'xl',
+                            'no-close-modal'
+                          )
+                        }
+                        title={t('editScenario')}
+                      >
+                        <Pencil />
+                      </button>
+                      <button
+                        type="button"
+                        className="scenario-details-modify-button"
+                        onClick={() => setTrainsWithDetails(!trainsWithDetails)}
+                        title={t('displayTrainsWithDetails')}
+                      >
+                        {trainsWithDetails ? <EyeClosed /> : <Eye />}
+                      </button>
+                      <button
+                        type="button"
+                        className="scenario-details-modify-button"
+                        aria-label={t('toggleTimetable')}
+                        onClick={() => setCollapsedTimetable(true)}
+                      >
+                        <ChevronLeft />
+                      </button>
                     </div>
-                    <div className="col-md-6">
-                      <div className="scenario-details-electrical-profile-set">
-                        <span className="mr-2">
-                          <GiElectric />
-                        </span>
-                        {timetable.electrical_profile_set_id
-                          ? timetable.electrical_profile_set_id
-                          : t('noElectricalProfileSet')}
+                    <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>
-                  </div>
-                  {infra &&
-                    infra.state === 'TRANSIENT_ERROR' &&
-                    (reloadCount <= 5 ? (
-                      <div className="scenario-details-infra-error mt-1">
-                        {t('errorMessages.unableToLoadInfra', { reloadCount })}
+                      <div className="col-md-6">
+                        <div className="scenario-details-electrical-profile-set">
+                          <span className="mr-2">
+                            <GiElectric />
+                          </span>
+                          {timetable.electrical_profile_set_id
+                            ? timetable.electrical_profile_set_id
+                            : t('noElectricalProfileSet')}
+                        </div>
                       </div>
-                    ) : (
+                    </div>
+                    {infra &&
+                      infra.state === 'TRANSIENT_ERROR' &&
+                      (reloadCount <= 5 ? (
+                        <div className="scenario-details-infra-error mt-1">
+                          {t('errorMessages.unableToLoadInfra', { reloadCount })}
+                        </div>
+                      ) : (
+                        <div className="scenario-details-infra-error mt-1">
+                          {t('errorMessages.softErrorInfra')}
+                        </div>
+                      ))}
+                    {infra && infra.state === 'ERROR' && (
                       <div className="scenario-details-infra-error mt-1">
-                        {t('errorMessages.softErrorInfra')}
+                        {t('errorMessages.hardErrorInfra')}
                       </div>
-                    ))}
-                  {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>
-              )}
-              <MicroMacroButtons
-                isMacro={isMacro}
-                handleClickButton={handleClickMicroMacroButton}
-                t={t}
-              />
-              {!isMacro && (
-                <>
-                  {displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && infra && (
-                    <TimetableManageTrainScheduleV2
-                      displayTrainScheduleManagement={displayTrainScheduleManagement}
-                      setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
-                      setTrainResultsToFetch={setTrainResultsToFetch}
-                      trainIdToEdit={trainIdToEdit}
-                      setTrainIdToEdit={setTrainIdToEdit}
-                      infraState={infra.state}
-                    />
-                  )}
-                  {infra && (
-                    <TimetableV2
-                      setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
-                      trainsWithDetails={trainsWithDetails}
-                      infraState={infra.state}
-                      trainIds={timetable.train_ids}
-                      selectedTrainId={selectedTrainId}
-                      conflicts={conflicts}
-                      setTrainResultsToFetch={setTrainResultsToFetch}
-                      setSpaceTimeData={setTrainSpaceTimeData}
-                      setTrainIdToEdit={setTrainIdToEdit}
-                      trainIdToEdit={trainIdToEdit}
-                    />
-                  )}
-                </>
-              )}
+                    )}
+                    <div className="scenario-details-description">{scenario.description}</div>
+                  </div>
+                )}
+                <MicroMacroButtons
+                  isMacro={isMacro}
+                  handleClickButton={handleClickMicroMacroButton}
+                  t={t}
+                />
+                {!isMacro && (
+                  <>
+                    {displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none &&
+                      infra && (
+                        <TimetableManageTrainScheduleV2
+                          displayTrainScheduleManagement={displayTrainScheduleManagement}
+                          setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
+                          setTrainResultsToFetch={setTrainResultsToFetch}
+                          trainIdToEdit={trainIdToEdit}
+                          setTrainIdToEdit={setTrainIdToEdit}
+                          infraState={infra.state}
+                        />
+                      )}
+                    {infra && (
+                      <TimetableV2
+                        setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
+                        trainsWithDetails={trainsWithDetails}
+                        infraState={infra.state}
+                        trainIds={timetable.train_ids}
+                        selectedTrainId={selectedTrainId}
+                        conflicts={conflicts}
+                        setTrainResultsToFetch={setTrainResultsToFetch}
+                        setSpaceTimeData={setTrainSpaceTimeData}
+                        setTrainIdToEdit={setTrainIdToEdit}
+                        trainIdToEdit={trainIdToEdit}
+                      />
+                    )}
+                  </>
+                )}
+              </div>
             </div>
 
             <div className={collapsedTimetable ? 'col-12' : 'col-hdp-9 col-xl-8 col-lg-7 col-md-6'}>
@@ -363,7 +369,7 @@ const ScenarioV2 = () => {
                   </>
                 )}
                 {isMacro ? (
-                  <div className={cx(collapsedTimetable ? 'h-100' : 'macro-container')}>
+                  <div className={cx(collapsedTimetable ? 'macro-container' : 'h-100')}>
                     <NGE />
                   </div>
                 ) : (

diff --git a/front/src/common/Tabs.tsx b/front/src/common/Tabs.tsx
@@ -20,7 +20,6 @@ type TabsProps = {
   pills?: boolean;
   fullWidth?: boolean;
   fullHeight?: boolean;
-  className?: string;
 };
 
 const Tab = ({ label, content }: TabComponentProps) => (
@@ -29,27 +28,15 @@ const Tab = ({ label, content }: TabComponentProps) => (
   </div>
 );
 
-const Tabs = ({
-  tabs,
-  pills = false,
-  fullWidth = false,
-  fullHeight = false,
-  className = '',
-}: TabsProps) => {
+const Tabs = ({ tabs, pills = false, fullWidth = false, fullHeight = false }: TabsProps) => {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
   const handleTabClick = (index: number) => {
     setActiveTabIndex(index);
   };
 
   return (
-    <div
-      className={cx(
-        'tabs-container',
-        { 'full-width': fullWidth, 'full-height': fullHeight },
-        className
-      )}
-    >
+    <div className={cx('tabs-container', { 'full-width': fullWidth, 'full-height': fullHeight })}>
       <div className={cx('tabs', pills && 'pills')}>
         {tabs.map((tab, index) => (
           <div

diff --git a/front/src/styles/scss/applications/operationalStudies/_nge.scss b/front/src/styles/scss/applications/operationalStudies/_nge.scss
@@ -1,4 +1,4 @@
-iframe {
+.nge-iframe-container {
   width: 100%;
   height: 100%;
   border: 1px solid pink;

diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -119,7 +119,7 @@
     .scenario-timetable {
       display: flex;
       flex-direction: column;
-      flex-grow: 1;
+      height: calc(var(--content-height) - 8rem);
       .scenario-timetable-addtrains-buttons {
         display: flex;
         align-items: center;