front: custom help modal

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

Author: ElysaSrc

front/public/locales/en/home/navbar.json

@@ -2,6 +2,7 @@
   "about": "About",
   "attributions": "Attributions",
   "disconnect": "Sign out",
+  "help": "Help",
   "informations": {
     "application": "Application",
     "releaseInformations": "Libraries & licenses",

front/public/locales/fr/home/navbar.json

@@ -2,6 +2,7 @@
   "about": "À propos",
   "attributions": "Attributions",
   "disconnect": "Déconnexion",
+  "help": "Aide",
   "informations": {
     "application": "Application",
     "releaseInformations": "Librairies & licences",

front/src/common/BootstrapSNCF/NavBarSNCF.tsx

@@ -1,13 +1,14 @@
 import { type ReactElement } from 'react';
 
-import { Gear, Info, ShieldCheck, SignOut } from '@osrd-project/ui-icons';
+import { Gear, Info, Report, ShieldCheck, SignOut } from '@osrd-project/ui-icons';
 import getUnicodeFlagIcon from 'country-flag-icons/unicode';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import ChangeLanguageModal from 'common/ChangeLanguageModal';
+import HelpModal from 'common/HelpModal/HelpModal';
 import ReleaseInformations from 'common/ReleaseInformations/ReleaseInformations';
 import UserSettings from 'common/UserSettings';
 import { getUserSafeWord } from 'reducers/user/userSelectors';
@@ -78,6 +79,17 @@ const LegacyNavBarSNCF = ({ appName, logo = getLogo() }: Props) => {
                 </span>
                 {t('about')}
               </button>,
+              <button
+                type="button"
+                className="btn-link text-reset"
+                onClick={() => openModal(<HelpModal />, 'lg')}
+                key="help"
+              >
+                <span className="mr-2">
+                  <Report />
+                </span>
+                {t('help')}
+              </button>,
               <button
                 type="button"
                 className="btn-link text-reset"

front/src/common/HelpModal/HelpModal.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import ModalBodySNCF from 'common/BootstrapSNCF/ModalSNCF/ModalBodySNCF';
+import ModalHeaderSNCF from 'common/BootstrapSNCF/ModalSNCF/ModalHeaderSNCF';
+
+const DEFAULT_TEXT = '# [email protected]';
+
+const HelpModal = () => {
+  const { t } = useTranslation('home/navbar');
+  const [helpModalText, setHelpModalText] = useState<string>('');
+
+  useEffect(() => {
+    const checkHelpMarkdown = async () => {
+      try {
+        const response = await fetch('/help.md');
+
+        if (!response.ok || response.headers.get('Content-Type') !== 'text/markdown') {
+          setHelpModalText(DEFAULT_TEXT);
+          return;
+        }
+
+        setHelpModalText(await response.text());
+      } catch {
+        setHelpModalText(DEFAULT_TEXT);
+      }
+    };
+    checkHelpMarkdown();
+  }, []);
+
+  return (
+    <div className="informations-modal">
+      <ModalHeaderSNCF withCloseButton>{t('help')}</ModalHeaderSNCF>
+      <ModalBodySNCF>
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{helpModalText}</ReactMarkdown>
+      </ModalBodySNCF>
+    </div>
+  );
+};
+
+export default HelpModal;