front: move the deployment settings in high level context

Signed-off-by: Clara Ni <[email protected]>
OpenRailAssociation · Feb 18, 2025 · 0cd3f6b · 0cd3f6b
1 parent f4e0c84
commit 0cd3f6b
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 51 deletions.
diff --git a/front/.gitignore b/front/.gitignore
@@ -38,3 +38,6 @@ npm-debug.log*
 /.env
 # .env.local is up to the developer
 /.env.local
+
+# config overrides
+/overrides
diff --git a/front/src/applications/stdcm/components/StdcmHeader.tsx b/front/src/applications/stdcm/components/StdcmHeader.tsx
@@ -6,11 +6,22 @@ import { useSelector } from 'react-redux';
 import { getIsSuperUser } from 'reducers/user/userSelectors';
 import useDeploymentSettings from 'utils/hooks/useDeploymentSettings';
 
-const LogoSTDCM = ({ logo }: { logo: string | undefined }) => {
-  if (logo) {
-    return <img src={logo} data-testid="lmr-logo" alt="LMR Logo" className="stdcm-header__logo" />;
+const LogoSTDCM = () => {
+  const deploymentSettings = useDeploymentSettings();
+
+  if (deploymentSettings) {
+    return deploymentSettings.stdcmLogo ? (
+      <img
+        src={deploymentSettings.stdcmLogo}
+        data-testid="lmr-logo"
+        alt="LMR Logo"
+        className="stdcm-header__logo"
+      />
+    ) : (
+      <span className="stdcm-header__title pl-5">STDCM</span>
+    );
   }
-  return <span className="stdcm-header__title pl-5">ST DCM</span>;
+  return null;
 };
 
 type StdcmHeaderProps = {
@@ -28,11 +39,10 @@ const StdcmHeader = ({
 }: StdcmHeaderProps) => {
   const { t } = useTranslation(['stdcm', 'translation']);
   const isSuperUser = useSelector(getIsSuperUser);
-  const { stdcmLogo } = useDeploymentSettings();
 
   return (
     <div className="stdcm-header d-flex">
-      <LogoSTDCM logo={stdcmLogo} />
+      <LogoSTDCM />
       <div className="flex-grow-1 d-flex justify-content-center">
         <span className="stdcm-header__notification " id="notification">
           {t('stdcm:notificationTitle')}

diff --git a/front/src/applications/stdcm/components/StdcmResults/SimulationReportSheet.tsx b/front/src/applications/stdcm/components/StdcmResults/SimulationReportSheet.tsx
@@ -8,7 +8,6 @@ import logoSNCF from 'assets/simulationReportSheet/logo_sncf_reseau.png';
 import i18n from 'i18n';
 import type { StdcmPathStep } from 'reducers/osrdconf/types';
 import { dateToHHMMSS, formatDateToString, formatDay } from 'utils/date';
-import useDeploymentSettings from 'utils/hooks/useDeploymentSettings';
 import { msToKmh } from 'utils/physics';
 import { capitalizeFirstLetter } from 'utils/strings';
 import { secToMin } from 'utils/timeManipulation';
@@ -36,9 +35,10 @@ const getArrivalTimes = (step: StdcmPathStep, t: TFunction, shouldDisplay: boole
   return '';
 };
 
-const LogoSTDCM = ({ logo, t }: { logo: string | undefined; t: TFunction }) => {
-  if (logo) {
-    return <Image src={logo} style={styles.header.lmrLogo} />;
+const LogoSTDCM = ({ logoUrl }: { logoUrl?: string }) => {
+  const { t } = useTranslation(['stdcm-simulation-report-sheet']);
+  if (logoUrl) {
+    return <Image src={logoUrl} style={styles.header.lmrLogo} />;
   }
   return (
     <>
@@ -54,8 +54,8 @@ const SimulationReportSheet = ({
   consist,
   simulationReportSheetNumber,
   operationalPointsList,
+  deploymentSettings,
 }: SimulationReportSheetProps) => {
-  const { stdcmSimulationSheetLogo } = useDeploymentSettings();
   const { t } = useTranslation(['stdcm-simulation-report-sheet', 'stdcm']);
   let renderedIndex = 0;
 
@@ -77,7 +77,7 @@ const SimulationReportSheet = ({
         <View style={styles.header.numberDateBanner}>
           <View style={styles.header.stdcmTitleBox}>
             <View style={styles.header.stdcm}>
-              <LogoSTDCM logo={stdcmSimulationSheetLogo} t={t} />
+              <LogoSTDCM logoUrl={deploymentSettings?.stdcmSimulationSheetLogo} />
             </View>
           </View>
           <View style={styles.header.numericInfo}>

diff --git a/front/src/applications/stdcm/components/StdcmResults/StdcmResults.tsx b/front/src/applications/stdcm/components/StdcmResults/StdcmResults.tsx
@@ -46,7 +46,7 @@ const StcdmResults = ({
 }: StcdmResultsProps) => {
   const infraId = useInfraID();
   const { t } = useTranslation('stdcm', { keyPrefix: 'simulation.results' });
-  const { stdcmName } = useDeploymentSettings();
+  const deploymentSettings = useDeploymentSettings();
 
   const selectedSimulation = useSelector(getSelectedSimulation);
   const retainedSimulationIndex = useSelector(getRetainedSimulationIndex);
@@ -111,9 +111,10 @@ const StcdmResults = ({
                             consist={selectedSimulation.inputs.consist}
                             simulationReportSheetNumber={simulationReportSheetNumber}
                             operationalPointsList={operationalPointsList}
+                            deploymentSettings={deploymentSettings}
                           />
                         }
-                        fileName={`${stdcmName}-${simulationReportSheetNumber}.pdf`}
+                        fileName={`${deploymentSettings?.stdcmName || 'Stdcm'}-${simulationReportSheetNumber}.pdf`}
                       >
                         <Button
                           data-testid="download-simulation-button"

diff --git a/front/src/applications/stdcm/types.ts b/front/src/applications/stdcm/types.ts
@@ -14,6 +14,7 @@ import type {
 import type { SpeedSpaceChartData } from 'modules/simulationResult/types';
 import type { SuggestedOP } from 'modules/trainschedule/components/ManageTrainSchedule/types';
 import type { StdcmPathStep } from 'reducers/osrdconf/types';
+import type { DeploymentSettings } from 'utils/hooks/useDeploymentSettings';
 import type { ValueOf } from 'utils/types';
 
 export type StdcmRequestStatus = ValueOf<typeof STDCM_REQUEST_STATUS>;
@@ -58,6 +59,7 @@ export type SimulationReportSheetProps = {
   simulationReportSheetNumber: string;
   operationalPointsList: StdcmResultsOperationalPoint[];
   userName?: string;
+  deploymentSettings?: DeploymentSettings;
 };
 
 export type StdcmResultsOperationalPoint = {

diff --git a/front/src/common/BootstrapSNCF/NavBarSNCF.tsx b/front/src/common/BootstrapSNCF/NavBarSNCF.tsx
@@ -1,4 +1,4 @@
-import { type ReactElement } from 'react';
+import { useMemo, type ReactElement } from 'react';
 
 import { Gear, Info, Report, ShieldCheck, SignOut } from '@osrd-project/ui-icons';
 import cx from 'classnames';
@@ -22,30 +22,51 @@ import { useModal } from './ModalSNCF';
 
 type Props = {
   appName?: string | ReactElement;
-  logo?: string;
+  showLogoWithName?: boolean;
 };
 
-const LegacyNavBarSNCF = ({ appName, logo }: Props) => {
+const LegacyNavBarSNCF = ({ appName, showLogoWithName }: Props) => {
   const { openModal } = useModal();
-  const { digitalTwinLogo, digitalTwinName, isCustomizedDeployment } = useDeploymentSettings();
+  const deploymentSettings = useDeploymentSettings();
   const safeWord = useSelector(getUserSafeWord);
   const { t } = useTranslation('home/navbar');
   const { logout, username } = useAuth();
 
+  const { logoUrl, name } = useMemo(() => {
+    if (!deploymentSettings)
+      return {
+        logoUrl: undefined,
+        name: 'Osrd',
+      };
+    return {
+      logoUrl: showLogoWithName
+        ? deploymentSettings.digitalTwinLogoWithName
+        : deploymentSettings.digitalTwinLogo,
+      name: deploymentSettings.digitalTwinName,
+    };
+  }, [deploymentSettings, showLogoWithName]);
+
   return (
     <div className="mastheader">
       <div
         className={cx(
-          isCustomizedDeployment && logo ? `mastheader-logo__horizon` : `mastheader-logo`,
-          `flex-grow-0`
+          'flex-grow-0',
+          deploymentSettings?.isCustomizedDeployment && showLogoWithName
+            ? 'mastheader-logo-with-name'
+            : 'mastheader-logo',
+          { 'without-image': logoUrl }
         )}
       >
         <Link to="/">
-          <img
-            src={logo ?? digitalTwinLogo}
-            data-testid={`${digitalTwinName.toLowerCase()}-logo`}
-            alt={`${digitalTwinName.toUpperCase()} Logo`}
-          />
+          {logoUrl ? (
+            <img
+              src={logoUrl}
+              data-testid={`${name.toLowerCase()}-logo`}
+              alt={`${name.toUpperCase()} Logo`}
+            />
+          ) : (
+            <div style={{ width: '24px' }} />
+          )}
         </Link>
       </div>
       <header role="banner" className="mastheader-title d-flex flex-grow-1">

diff --git a/front/src/common/ReleaseInformations/ReleaseInformations.tsx b/front/src/common/ReleaseInformations/ReleaseInformations.tsx
@@ -13,7 +13,7 @@ import LicenseAttributions from './LicenseAttributions';
 
 function ReleaseInformations() {
   const { t } = useTranslation('home/navbar');
-  const { digitalTwinLogo } = useDeploymentSettings();
+  const deploymentSettings = useDeploymentSettings();
   const { data: editoastVersion } = osrdEditoastApi.endpoints.getVersion.useQuery();
   const { data: coreVersion } = osrdEditoastApi.endpoints.getVersionCore.useQuery();
 
@@ -46,7 +46,7 @@ function ReleaseInformations() {
                   rel="noopener noreferrer"
                   onMouseEnter={motriceParty}
                 >
-                  <img src={digitalTwinLogo} alt="OSRD logo" width={192} />
+                  <img src={deploymentSettings?.digitalTwinLogo} alt="OSRD logo" width={192} />
                 </a>
                 <h2>OSRD</h2>
                 <h3>Open Source Railway Designer</h3>

diff --git a/front/src/main/app.tsx b/front/src/main/app.tsx
@@ -29,6 +29,7 @@ import { stdcmConfSlice } from 'reducers/osrdconf/stdcmConf';
 import stdcmConfSelectors from 'reducers/osrdconf/stdcmConf/selectors';
 import { useAppDispatch } from 'store';
 import useAuth from 'utils/hooks/OsrdAuth';
+import { DeploymentContextProvider } from 'utils/hooks/useDeploymentSettings';
 
 import('@sncf/bootstrap-sncf.metier.reseau/dist/css/bootstrap-sncf.min.css');
 
@@ -125,9 +126,11 @@ export default function App() {
   const { isLoading } = useAuth();
   return (
     <Suspense fallback={<Loader />}>
-      <NotificationsState />
-      {!isLoading && <RouterProvider router={router} />}
-      {isLoading && <Loader />}
+      <DeploymentContextProvider>
+        <NotificationsState />
+        {!isLoading && <RouterProvider router={router} />}
+        {isLoading && <Loader />}
+      </DeploymentContextProvider>
     </Suspense>
   );
 }
diff --git a/front/src/main/home.tsx b/front/src/main/home.tsx
@@ -9,7 +9,6 @@ import useAllowedUserRoles from 'common/authorization/hooks/useAllowedUserRoles'
 import Card from 'common/BootstrapSNCF/CardSNCF/CardSNCF';
 import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
-import useDeploymentSettings from 'utils/hooks/useDeploymentSettings';
 
 export default function Home() {
   const { t } = useTranslation('home/home');
@@ -20,11 +19,10 @@ export default function Home() {
     rollingStockEditorAllowed,
     mapAllowed,
   } = useAllowedUserRoles();
-  const { digitalTwinLogoWithName } = useDeploymentSettings();
 
   return (
     <ModalProvider>
-      <NavBarSNCF logo={digitalTwinLogoWithName} />
+      <NavBarSNCF showLogoWithName />
       <main className="mastcontainer mastcontainer-no-mastnav">
         <div className="cardscontainer">
           <div className="row justify-content-center mb-2">

diff --git a/front/src/styles/scss/_body.scss b/front/src/styles/scss/_body.scss
@@ -68,11 +68,17 @@ body {
     height: 24px !important;
   }
 
-  &__horizon {
+  &-with-name {
     img {
       height: 40px;
     }
   }
+
+  .without-image {
+    img {
+      width: 24px;
+    }
+  }
 }
 
 .actionbar.fullscreen {

diff --git a/front/src/styles/scss/common/components/_releaseInformations.scss b/front/src/styles/scss/common/components/_releaseInformations.scss
@@ -9,6 +9,10 @@
     position: relative;
     height: 560px;
 
+    img {
+      min-height: 192px;
+    }
+
     .license-attributions {
       background-color: var(--coolgray1);
       padding: 8px;

diff --git a/.../src/utils/hooks/useDeploymentSettings.ts → ...src/utils/hooks/useDeploymentSettings.tsx b/.../src/utils/hooks/useDeploymentSettings.ts → ...src/utils/hooks/useDeploymentSettings.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 
 import defaultLogo from 'assets/logo-color.svg';
 import defaultOsrdLogo from 'assets/logo-osrd-color-white.svg';
@@ -11,7 +11,18 @@ const MONTH_VALUES = {
   JUNE: 5,
   DECEMBER: 11,
 };
-type DeploymentSettings = {
+
+const defaultSettings = {
+  digitalTwinName: 'Osrd',
+  digitalTwinLogo: defaultLogo,
+  digitalTwinLogoWithName: defaultOsrdLogo,
+  stdcmName: 'Stdcm',
+  stdcmLogo: undefined,
+  stdcmSimulationSheetLogo: undefined,
+  isCustomizedDeployment: false,
+};
+
+export type DeploymentSettings = {
   digitalTwinName: string;
   digitalTwinLogo: string;
   digitalTwinLogoWithName: string;
@@ -21,17 +32,15 @@ type DeploymentSettings = {
   isCustomizedDeployment: boolean;
 };
 
-const useDeploymentSettings = () => {
+export type DeploymentSettingsContext = DeploymentSettings | undefined;
+
+const deploymentSettingsContext = createContext<DeploymentSettingsContext>(undefined);
+
+type DeploymentContextProviderProps = { children: ReactNode };
+
+export const DeploymentContextProvider = ({ children }: DeploymentContextProviderProps) => {
   const [customizedDeploymentSetting, setCustomizedDeploymentSetting] =
-    useState<DeploymentSettings>({
-      digitalTwinName: 'Osrd',
-      digitalTwinLogo: defaultLogo,
-      digitalTwinLogoWithName: defaultOsrdLogo,
-      stdcmName: 'Stdcm',
-      stdcmLogo: undefined,
-      stdcmSimulationSheetLogo: undefined,
-      isCustomizedDeployment: false,
-    });
+    useState<DeploymentSettings>();
 
   useEffect(() => {
     const fetchInternalProd = async () => {
@@ -50,12 +59,11 @@ const useDeploymentSettings = () => {
             digitalTwinLogoWithName = xmasOsrdLogo;
           }
 
-          setCustomizedDeploymentSetting((prev) => ({
-            ...prev,
-            isCustomizedDeployment: false,
+          setCustomizedDeploymentSetting({
+            ...defaultSettings,
             digitalTwinLogo,
             digitalTwinLogoWithName,
-          }));
+          });
         } else {
           const overridesData = await response.json();
           const { icons, names } = overridesData;
@@ -79,10 +87,17 @@ const useDeploymentSettings = () => {
         console.error('Error fetching overrides.json', error);
       }
     };
+
     fetchInternalProd();
   }, []);
 
-  return customizedDeploymentSetting;
+  return (
+    <deploymentSettingsContext.Provider value={customizedDeploymentSetting}>
+      {children}
+    </deploymentSettingsContext.Provider>
+  );
 };
 
+const useDeploymentSettings = () => useContext(deploymentSettingsContext);
+
 export default useDeploymentSettings;