front: add some data sources and licenses

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

@@ -4,7 +4,7 @@
   "disconnect": "Abmelden",
   "informations": {
     "application": "Anwendung",
-    "releaseInformations": "Versionsinformationen",
+    "librairies": "Versionsinformationen",
     "version": "Version"
   },
   "language": {

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

@@ -5,7 +5,8 @@
   "help": "Help",
   "informations": {
     "application": "Application",
-    "releaseInformations": "Libraries & licenses",
+    "dataSources": "Data sources",
+    "librairies": "Libraries & licenses",
     "version": "Version"
   },
   "language": {

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

@@ -4,7 +4,7 @@
   "disconnect": "Desconexión",
   "informations": {
     "application": "Aplicación",
-    "releaseInformations": "Información sobre la versión",
+    "librairies": "Información sobre la versión",
     "version": "Versión"
   },
   "language": {

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

@@ -5,7 +5,8 @@
   "help": "Aide",
   "informations": {
     "application": "Application",
-    "releaseInformations": "Librairies & licences",
+    "dataSources": "Sources de données",
+    "librairies": "Librairies & licences",
     "version": "Version"
   },
   "language": {

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

@@ -4,7 +4,7 @@
   "disconnect": "Disconnessione",
   "informations": {
     "application": "Applicazione",
-    "releaseInformations": "Informazioni sulla versione",
+    "librairies": "Informazioni sulla versione",
     "version": "Versione"
   },
   "language": {

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

@@ -4,7 +4,7 @@
   "disconnect": "断線",
   "informations": {
     "application": "アプリケーション",
-    "releaseInformations": "バージョン情報",
+    "librairies": "バージョン情報",
     "version": "バージョン"
   },
   "language": {

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

@@ -4,7 +4,7 @@
   "disconnect": "Разъединение",
   "informations": {
     "application": "Приложение",
-    "releaseInformations": "Информация о версии",
+    "librairies": "Информация о версии",
     "version": "Версия"
   },
   "language": {

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

@@ -4,7 +4,7 @@
   "disconnect": "Відключення",
   "informations": {
     "application": "Заявка",
-    "releaseInformations": "Інформація про версію",
+    "librairies": "Інформація про версію",
     "version": "Версія"
   },
   "language": {

front/src/common/ReleaseInformations/LicenseAttributions.tsx

@@ -2,57 +2,95 @@ import { useTranslation } from 'react-i18next';
 
 import attributionsLicenses from './json/licenses.json';
 
-type attributionsLicensesType = {
+type AttributionLicense = {
   name: string;
   version: string;
   copyright: string;
   publisher: string;
   url?: string;
-  licenses: string;
+  license: string;
 };
 
-const LicenseAttributions = () => {
-  const { t } = useTranslation('home/navbar');
-
-  // mglTraffic is not a lib from package.json, so we add it manually
-  const mglTrafficAttribution: attributionsLicensesType = {
-    licenses: 'CC-BY-NC-SA 3.0',
+// Libs which are not in the package.json, so we add it statically
+const DATA_SOURCES: AttributionLicense[] = [
+  {
+    license: 'https://geoservices.ign.fr/cgu-licences',
+    publisher: 'IGN',
+    copyright: '© IGN - 2021',
+    version: '',
+    name: 'IGN Ortho',
+    url: 'https://geoservices.ign.fr/services-web-experts-ortho',
+  },
+  {
+    license: 'https://data.sncf.com/pages/licence/#A1',
+    publisher: 'SNCF',
+    copyright: '',
+    version: '',
+    name: 'Open data SNCF',
+    url: 'https://ressources.data.sncf.com/pages/accueil/',
+  },
+  {
+    license: 'CC-BY-NC-SA 3.0',
     publisher: 'Marc Le Gad',
     copyright: '',
     version: '',
     name: 'MLG Traffic',
     url: 'http://www.mlgtraffic.net',
-  };
+  },
+  {
+    license: 'https://github.com/tilezen/joerd/blob/master/docs/attribution.md',
+    publisher: 'Mapzen',
+    copyright: '',
+    version: '',
+    name: 'Terrain Tiles',
+    url: 'https://registry.opendata.aws/terrain-tiles/',
+  },
+];
+
+type LicenseCardProps = { attribution: AttributionLicense };
+
+const LicenseCard = ({
+  attribution: { name, version, copyright, publisher, url, license },
+}: LicenseCardProps) => (
+  <a href={url} rel="noreferrer" target="blank">
+    <h3 className="d-flex mr-1 mb-0">
+      {name}
+      <small className="d-flex align-items-center ml-2">
+        {version}
+        {url && <i className="ml-2 icons-external-link" />}
+      </small>
+    </h3>
+    <div className="small ml-4 mb-2">
+      {copyright.replace('(c)', '©') || publisher || `${name} authors`}
+      {license && ` / ${license}`}
+    </div>
+  </a>
+);
+
+const LicenseAttributions = () => {
+  const { t } = useTranslation('home/navbar');
 
-  const attributionsArray = [
-    ...(Object.values(attributionsLicenses) as attributionsLicensesType[]),
-    mglTrafficAttribution,
-  ];
+  const attributionsArray = [...(Object.values(attributionsLicenses) as AttributionLicense[])];
 
   const attributions = attributionsArray
     .map((licence) => ({ ...licence, name: licence.name.replace('@', '') }))
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .map(({ name, version, copyright, publisher, url, licenses }) => (
-      <a key={name} href={url} rel="noreferrer">
-        <h3 className="d-flex mr-1 mb-0">
-          {name}
-          <small className="d-flex align-items-center ml-2">
-            {`${version}`}
-            {url && <i className="ml-2 icons-external-link" />}
-          </small>
-        </h3>
-        <div className="small ml-4 mb-2">
-          {copyright.replace('(c)', '©') || publisher || `${name} authors`}
-          {licenses && ` / ${licenses}`}
-        </div>
-      </a>
-    ));
+    .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <>
-      <h2 className="text-center mt-sm-1 mb-4">{t('informations.releaseInformations')}</h2>
-      <div className="license-attributions">{attributions}</div>
-    </>
+    <div className="col-md-6 h-100 d-flex flex-column">
+      <h2 className="text-center mb-4">{t('informations.dataSources')}</h2>
+      <div className="license-attributions">
+        {DATA_SOURCES.map((dataSource) => (
+          <LicenseCard attribution={dataSource} key={dataSource.name} />
+        ))}
+      </div>
+      <h2 className="text-center my-4">{t('informations.librairies')}</h2>
+      <div className="license-attributions licenses">
+        {attributions.map((attribution) => (
+          <LicenseCard attribution={attribution} key={attribution.name} />
+        ))}
+      </div>
+    </div>
   );
 };
 

front/src/common/ReleaseInformations/ReleaseInformations.tsx

@@ -69,9 +69,7 @@ function ReleaseInformations() {
                 </tbody>
               </table>
             </div>
-            <div className="col-md-6 h-100">
-              <LicenseAttributions />
-            </div>
+            <LicenseAttributions />
           </div>
         </div>
       </ModalBodySNCF>

front/src/common/ReleaseInformations/json/licenseCustomFormat.json

@@ -1,7 +1,7 @@
 {
   "name": "",
   "version": "",
-  "licenses": "",
+  "license": "",
   "copyright": "",
   "publisher": "",
   "licenseFile": false,

front/src/common/ReleaseInformations/json/licenses.json

@@ -1,6 +1,6 @@
 {
   "@osrd/[email protected]": {
-    "licenses": "The updated list is generated at build",
+    "license": "The updated list is generated at build",
     "publisher": "Joseph Marchand",
     "copyright": "This is an example",
     "name": "@osrd/example-library",

front/src/styles/scss/common/components/_releaseInformations.scss

@@ -4,16 +4,21 @@
   &-version {
     font-size: small;
   }
+
   .informations-modal-container {
     position: relative;
     height: 35rem;
+
     .license-attributions {
-      position: relative;
       background-color: var(--coolgray1);
       padding: 0.5rem;
       border-radius: 4px;
-      height: calc(100% - 3.8rem);
-      overflow: auto;
+
+      &.licenses {
+        flex-grow: 1;
+        overflow: auto;
+      }
+
       a[href^='http'] {
         h3,
         i,