Skip to content

Commit

Permalink
front: change name in interne deployment
Browse files Browse the repository at this point in the history
  - change logo stdcm when using application internally

Signed-off-by: Uriel-Sautron <[email protected]>

  - add lmr logo in stdcm simulation report sheet when using the application internally

  - create hook useLogo

  - use useLogo in app

  - remove logo.ts

  - add customized name

  - change hook useLoge to useDeploymentSetting

 test: change name stdcm pdf

  - with the modifications on the names in internal deployment the name of the pdf changed from STDCM to Stdcm
  • Loading branch information
Uriel-Sautron committed Jan 16, 2025
1 parent 9ddc06c commit c380d4b
Show file tree
Hide file tree
Showing 16 changed files with 154 additions and 55 deletions.
2 changes: 0 additions & 2 deletions front/src/applications/editor/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { Route, Routes } from 'react-router-dom';
import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
import { useCurrentInfra } from 'modules/infra/useInfra';
import { getLogo } from 'utils/logo';

import Editor from './Editor';

Expand All @@ -16,7 +15,6 @@ export default function HomeEditorUnplugged() {
return (
<ModalProvider>
<NavBarSNCF
logo={getLogo()}
appName={
<>
{t('editor')}
Expand Down
6 changes: 1 addition & 5 deletions front/src/applications/operationalStudies/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import ProjectCard from 'modules/project/components/ProjectCard';
import cleanLocalStorageByProject from 'modules/project/helpers/cleanLocalStorageByProject';
import { getUserSafeWord } from 'reducers/user/userSelectors';
import { useAppDispatch } from 'store';
import { getLogo } from 'utils/logo';

import AddNewCard from './components/AddNewCard';
import useMultiSelection from './hooks/useMultiSelection';
Expand Down Expand Up @@ -165,10 +164,7 @@ const HomeOperationalStudies = () => {

return (
<>
<NavBarSNCF
logo={getLogo()}
appName={<div className="navbar-breadcrumbs">{t('projects')}</div>}
/>
<NavBarSNCF appName={<div className="navbar-breadcrumbs">{t('projects')}</div>} />
<main className="mastcontainer mastcontainer-no-mastnav">
<div className="p-3">
<div className="projects-toolbar">
Expand Down
2 changes: 0 additions & 2 deletions front/src/applications/referenceMap/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
import { useInfraActions, useInfraID } from 'common/osrdContext';
import { useAppDispatch } from 'store';
import { getLogo } from 'utils/logo';

import Map from './Map';

Expand Down Expand Up @@ -40,7 +39,6 @@ const HomeReferenceMap = () => {
return (
<ModalProvider>
<NavBarSNCF
logo={getLogo()}
appName={
<>
{t('map')}
Expand Down
3 changes: 1 addition & 2 deletions front/src/applications/rollingStockEditor/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next';

import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
import { getLogo } from 'utils/logo';

import RollingStockEditor from './views/RollingStockEditor';

Expand All @@ -11,7 +10,7 @@ const HomeRollingStockEditor = () => {

return (
<ModalProvider>
<NavBarSNCF logo={getLogo()} appName={<>{t('rollingStockEditor')}</>} />
<NavBarSNCF appName={<>{t('rollingStockEditor')}</>} />
<RollingStockEditor />
</ModalProvider>
);
Expand Down
11 changes: 10 additions & 1 deletion front/src/applications/stdcm/components/StdcmHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ import { useTranslation } from 'react-i18next';
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" />;
}
return <span className="stdcm-header__title pl-5">ST DCM</span>;
};

type StdcmHeaderProps = {
isDebugMode: boolean;
Expand All @@ -20,10 +28,11 @@ const StdcmHeader = ({
}: StdcmHeaderProps) => {
const { t } = useTranslation(['stdcm', 'translation']);
const isSuperUser = useSelector(getIsSuperUser);
const { stdcmLogo } = useDeploymentSettings();

return (
<div className="stdcm-header d-flex">
<span className="stdcm-header__title pl-5">ST DCM</span>
<LogoSTDCM logo={stdcmLogo} />
<div className="flex-grow-1 d-flex justify-content-center">
<span className="stdcm-header__notification " id="notification">
{t('stdcm:notificationTitle')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ 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';
Expand Down Expand Up @@ -35,13 +36,26 @@ 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} />;
}
return (
<>
<Text style={styles.header.title}>{t('stdcm')}</Text>
<Text style={styles.header.creation}>{t('stdcmCreation')}</Text>
</>
);
};

const SimulationReportSheet = ({
stdcmLinkedTrains,
stdcmData,
consist,
simulationReportSheetNumber,
operationalPointsList,
}: SimulationReportSheetProps) => {
const { stdcmSimulationSheetLogo } = useDeploymentSettings();
const { t } = useTranslation(['stdcm-simulation-report-sheet', 'stdcm']);
let renderedIndex = 0;

Expand All @@ -63,8 +77,7 @@ const SimulationReportSheet = ({
<View style={styles.header.numberDateBanner}>
<View style={styles.header.stdcmTitleBox}>
<View style={styles.header.stdcm}>
<Text style={styles.header.title}>{t('stdcm')}</Text>
<Text style={styles.header.creation}>{t('stdcmCreation')}</Text>
<LogoSTDCM logo={stdcmSimulationSheetLogo} t={t} />
</View>
</View>
<View style={styles.header.numericInfo}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ const styles = {
height: '24',
marginLeft: '20',
},
lmrLogo: {
width: 'auto',
marginRight: 'auto',
},
simulationTitle: {
fontSize: '28',
fontWeight: 'semibold',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
import { hasConflicts, hasResults } from 'applications/stdcm/utils/simulationOutputUtils';
import { type TrackRange } from 'common/api/osrdEditoastApi';
import NewMap from 'modules/trainschedule/components/ManageTrainSchedule/NewMap';
import useDeploymentSettings from 'utils/hooks/useDeploymentSettings';

import SimulationReportSheet from './SimulationReportSheet';
import StdcmDebugResults from './StdcmDebugResults';
Expand Down Expand Up @@ -50,6 +51,7 @@ const StcdmResults = ({
pathTrackRanges,
}: StcdmResultsProps) => {
const { t } = useTranslation('stdcm', { keyPrefix: 'simulation.results' });
const { stdcmName } = useDeploymentSettings();

const selectedSimulation = simulationsList[selectedSimulationIndex];
const { outputs } = selectedSimulation || {};
Expand Down Expand Up @@ -112,7 +114,7 @@ const StcdmResults = ({
operationalPointsList={operationalPointsList}
/>
}
fileName={`STDCM-${simulationReportSheetNumber}.pdf`}
fileName={`${stdcmName}-${simulationReportSheetNumber}.pdf`}
>
<Button
data-testid="download-simulation-button"
Expand Down
19 changes: 15 additions & 4 deletions front/src/common/BootstrapSNCF/NavBarSNCF.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { type ReactElement } from 'react';

import { Gear, Info, Report, ShieldCheck, SignOut } from '@osrd-project/ui-icons';
import cx from 'classnames';
import getUnicodeFlagIcon from 'country-flag-icons/unicode';
import i18n from 'i18next';
import { useTranslation } from 'react-i18next';
Expand All @@ -13,7 +14,7 @@ import ReleaseInformations from 'common/ReleaseInformations/ReleaseInformations'
import UserSettings from 'common/UserSettings';
import { getUserSafeWord } from 'reducers/user/userSelectors';
import useAuth from 'utils/hooks/OsrdAuth';
import { getLogo } from 'utils/logo';
import useDeploymentSettings from 'utils/hooks/useDeploymentSettings';
import { language2flag } from 'utils/strings';

import DropdownSNCF, { DROPDOWN_STYLE_TYPES } from './DropdownSNCF';
Expand All @@ -24,17 +25,27 @@ type Props = {
logo?: string;
};

const LegacyNavBarSNCF = ({ appName, logo = getLogo() }: Props) => {
const LegacyNavBarSNCF = ({ appName, logo }: Props) => {
const { openModal } = useModal();
const { digitalTwinLogo, digitalTwinName, isCustomizedDeployment } = useDeploymentSettings();
const safeWord = useSelector(getUserSafeWord);
const { t } = useTranslation('home/navbar');
const { logout, username } = useAuth();

return (
<div className="mastheader">
<div className="mastheader-logo flex-grow-0">
<div
className={cx(
isCustomizedDeployment && logo ? `mastheader-logo__horizon` : `mastheader-logo`,
`flex-grow-0`
)}
>
<Link to="/">
<img src={logo} data-testid="osrd-logo" alt="OSRD Logo" />
<img
src={logo ?? digitalTwinLogo}
data-testid={`${digitalTwinName.toLowerCase()}-logo`}
alt={`${digitalTwinName.toUpperCase()} Logo`}
/>
</Link>
</div>
<header role="banner" className="mastheader-title d-flex flex-grow-1">
Expand Down
5 changes: 3 additions & 2 deletions front/src/common/ReleaseInformations/ReleaseInformations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
import ModalBodySNCF from 'common/BootstrapSNCF/ModalSNCF/ModalBodySNCF';
import ModalHeaderSNCF from 'common/BootstrapSNCF/ModalSNCF/ModalHeaderSNCF';
import motriceParty from 'common/MotriceRelated/motriceParty';
import { getLogo } from 'utils/logo';
import useDeploymentSettings from 'utils/hooks/useDeploymentSettings';

import LicenseAttributions from './LicenseAttributions';

function ReleaseInformations() {
const { t } = useTranslation('home/navbar');
const { digitalTwinLogo } = useDeploymentSettings();
const { data: editoastVersion } = osrdEditoastApi.endpoints.getVersion.useQuery();
const { data: coreVersion } = osrdEditoastApi.endpoints.getVersionCore.useQuery();

Expand Down Expand Up @@ -45,7 +46,7 @@ function ReleaseInformations() {
rel="noopener noreferrer"
onMouseEnter={motriceParty}
>
<img src={getLogo()} alt="OSRD logo" width={192} />
<img src={digitalTwinLogo} alt="OSRD logo" width={192} />
</a>
<h2>OSRD</h2>
<h3>Open Source Railway Designer</h3>
Expand Down
5 changes: 3 additions & 2 deletions front/src/main/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ 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 { getOsrdLogo } from 'utils/logo';
import useDeploymentSettings from 'utils/hooks/useDeploymentSettings';

export default function Home() {
const { t } = useTranslation('home/home');
Expand All @@ -20,10 +20,11 @@ export default function Home() {
rollingStockEditorAllowed,
mapAllowed,
} = useAllowedUserRoles();
const { digitalTwinLogoWithName } = useDeploymentSettings();

return (
<ModalProvider>
<NavBarSNCF logo={getOsrdLogo()} />
<NavBarSNCF logo={digitalTwinLogoWithName} />
<main className="mastcontainer mastcontainer-no-mastnav">
<div className="cardscontainer">
<div className="row justify-content-center mb-2">
Expand Down
6 changes: 6 additions & 0 deletions front/src/styles/scss/_body.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,12 @@ body {
img {
height: 24px !important;
}

&__horizon {
img {
height: 40px;
}
}
}

.actionbar.fullscreen {
Expand Down
4 changes: 4 additions & 0 deletions front/src/styles/scss/applications/stdcm/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
justify-content: space-between;
padding-right: 50px;

&__logo {
padding: 10px 0 10px 10px;
}

&__title {
max-height: 48px;
color: rgba(0, 0, 0, 1);
Expand Down
88 changes: 88 additions & 0 deletions front/src/utils/hooks/useDeploymentSettings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { useEffect, useState } from 'react';

import defaultLogo from 'assets/logo-color.svg';
import defaultOsrdLogo from 'assets/logo-osrd-color-white.svg';
import proudLogo from 'assets/proud-logo-color.svg';
import proudOsrdLogo from 'assets/proud-logo-osrd-color-white.svg';
import xmasLogo from 'assets/xmas-logo-color.svg';
import xmasOsrdLogo from 'assets/xmas-logo-osrd-color-white.svg';

const MONTH_VALUES = {
JUNE: 5,
DECEMBER: 11,
};
type DeploymentSettings = {
digitalTwinName: string;
digitalTwinLogo: string;
digitalTwinLogoWithName: string;
stdcmName: string;
stdcmLogo?: string;
stdcmSimulationSheetLogo?: string;
isCustomizedDeployment: boolean;
};

const useDeploymentSettings = () => {
const [customizedDeploymentSetting, setCustomizedDeploymentSetting] =
useState<DeploymentSettings>({
digitalTwinName: 'Osrd',
digitalTwinLogo: defaultLogo,
digitalTwinLogoWithName: defaultOsrdLogo,
stdcmName: 'Stdcm',
stdcmLogo: undefined,
stdcmSimulationSheetLogo: undefined,
isCustomizedDeployment: false,
});

useEffect(() => {
const fetchInternalProd = async () => {
try {
const response = await fetch('/overrides/overrides.json');
if (!response.ok || response.headers.get('Content-Type') !== 'application/json') {
let digitalTwinLogo = defaultLogo;
let digitalTwinLogoWithName = defaultOsrdLogo;
const currentMonth = new Date().getMonth();

if (currentMonth === MONTH_VALUES.JUNE) {
digitalTwinLogo = proudLogo;
digitalTwinLogoWithName = proudOsrdLogo;
} else if (currentMonth === MONTH_VALUES.DECEMBER) {
digitalTwinLogo = xmasLogo;
digitalTwinLogoWithName = xmasOsrdLogo;
}

setCustomizedDeploymentSetting((prev) => ({
...prev,
isCustomizedDeployment: false,
digitalTwinLogo,
digitalTwinLogoWithName,
}));
} else {
const overridesData = await response.json();
const { icons, names } = overridesData;

const lmrLogoPath = `/overrides/${icons.stdcm.light}.svg`;
const lmrPngLogoPath = `/overrides/${icons.stdcm.light}@2x.png`;
const horizonLogoWithNamePath = `/overrides/${icons.digital_twin.dark}_Grey10.svg`;
const horizonLogoPath = `/overrides/${icons.digital_twin.dark}_Logo_Grey40.svg`;

setCustomizedDeploymentSetting({
digitalTwinName: names.digital_twin,
digitalTwinLogo: horizonLogoPath,
digitalTwinLogoWithName: horizonLogoWithNamePath,
stdcmName: names.stdcm,
stdcmLogo: lmrLogoPath,
stdcmSimulationSheetLogo: lmrPngLogoPath,
isCustomizedDeployment: true,
});
}
} catch (error) {
console.error('Error fetching overrides.json', error);
}
};
fetchInternalProd();
}, []);

return customizedDeploymentSetting;
};

export default useDeploymentSettings;
Loading

0 comments on commit c380d4b

Please sign in to comment.