Update to feat: Add aircraft version check and user message when usin…

…g old version

flybywiresim#7655

.github/CHANGELOG.md

@@ -24,6 +24,7 @@
 1. [MISC] Added aircraft version check and uer notification - @frankkopp (Frank Kopp)
 1. [EFB] Added boarding time indication to Payload page - @ChristianLutzCL (Christian Lutz) @frankkopp (Frank Kopp)
 1. [ADIRU/ND/PFD] Initial support for polar navigation - @tracernz (Mike)
+1. [MISC] Added aircraft version check and uer notification - @frankkopp (Frank Kopp) 
 
 ## 0.9.0
 
@@ -1160,4 +1161,3 @@
 1. [DCDU] Fixed MSG- and MSG+ button labels - @tyler58546 (tyler58546)
 1. [ISIS] Fixed issue where ISIS was allowing a bug to be set while in the OFF state - Patrick Macken (@Pat M on
    Discord)
-1. [EFB] Added estimated boarding time to Payload screen - @ChristianLutzCL (Christian Lutz)

src/instruments/src/EFB/Localization/de.json

@@ -643,10 +643,13 @@
     "Wed": "Mi"
   },
   "VersionCheck": {
+    "Title": "Neue Version verfügbar",
+    "StatusBarWarning": "Neue A32NX Version verfügbar",
     "CurrentVersionText": "Momentan wird die $edition Edition in dieser Version genutzt:",
     "LatestVersionText": "Die aktuell verfügbare $edition Version ist:",
     "RecommendationText": "Bitte mit Hilfe des FlyByWire-Installer die neueste Version installieren.",
-    "StatusBarWarning": "Neue A32NX Version verfügbar",
-    "Title": "Neue Version verfügbar"
+    "TT": {
+      "StatusBarWarning": "Bitte mit Hilfe des FlyByWire-Installer die neueste Version installieren."
+    }
   }
 }

src/instruments/src/EFB/Localization/en.json

@@ -643,10 +643,13 @@
     "Wed": "Wed"
   },
   "VersionCheck": {
+    "Title": "New Version Available",
+    "StatusBarWarning": "Outdated Aircraft Version",
     "CurrentVersionText": "You are using the $edition edition with version:",
     "LatestVersionText": "Latest $edition version is",
     "RecommendationText": "Please update your aircraft using the FlyByWire Installer.",
-    "StatusBarWarning": "Outdated Aircraft Version",
-    "Title": "New Version Available"
+    "TT": {
+      "StatusBarWarning": "Please update your aircraft using the FlyByWire Installer."
+    }
   }
-}
+}

src/instruments/src/EFB/Settings/Pages/AboutPage.tsx

@@ -1,3 +1,6 @@
+// Copyright (c) 2022 FlyByWire Simulations
+// SPDX-License-Identifier: GPL-3.0
+
 import React, { useEffect, useState } from 'react';
 import { usePersistentProperty, useSessionStorage } from '@instruments/common/persistence';
 import { SentryConsentState, SENTRY_CONSENT_KEY } from '../../../../../sentry-client/src/FbwAircraftSentryClient';

src/instruments/src/EFB/StatusBar/StatusBar.tsx

@@ -152,9 +152,13 @@ export const StatusBar = ({ batteryLevel, isCharging }: StatusBarProps) => {
 
             <p>{`${dayName} ${monthName} ${dayOfMonth}`}</p>
 
-            <div className="flex overflow-hidden absolute left-48 justify-center items-center w-96 h-10 text-utility-red">
-                {outdatedVersionFlag ? 'OUTDATED AIRCRAFT VERSION' : ''}
-            </div>
+            {outdatedVersionFlag ? (
+                <div className="flex overflow-hidden absolute left-48 justify-center items-center w-96 h-10 ">
+                    <TooltipWrapper text={t('VersionCheck.TT.StatusBarWarning')}>
+                        <span className="text-utility-red">{t('VersionCheck.StatusBarWarning').toUpperCase()}</span>
+                    </TooltipWrapper>
+                </div>
+            ) : ''}
 
             <div className="flex absolute inset-x-0 flex-row justify-center items-center mx-auto space-x-4 w-min">
                 {(timeDisplayed === 'utc' || timeDisplayed === 'both') && (

src/instruments/src/EFB/Utils/AircraftVersionChecker.ts

@@ -1,12 +1,11 @@
-/* eslint-disable no-console */
 // Copyright (c) 2022 FlyByWire Simulations
 // SPDX-License-Identifier: GPL-3.0
 
+/* eslint-disable no-console */
 import Compare from 'semver/functions/compare';
 import { CommitInfo, GitVersions, ReleaseInfo } from '@flybywiresim/api-client';
-// jest in test-js.sh requires relative path  can't handle "@shared" alias
-// noinspection ES6PreferShortImport
-import { PopUp } from '../../../../shared/src/popup';
+import { PopUp } from '@shared/popup';
+import { t } from '../translation';
 
 /**
  * Contains the a32nx_build_info.json file's information in a structured way.
@@ -128,19 +127,13 @@ export class AircraftVersionChecker {
     public static getVersionInfo(versionString: string): VersionInfoData {
         const matchBuildInfo = versionString.match(/^v?((\d+)\.(\d+)\.(\d+))-(.*)\.(.{7})$/);
         if (matchBuildInfo) {
-            const version = matchBuildInfo[1];
-            const major = parseInt(matchBuildInfo[2], 10);
-            const minor = parseInt(matchBuildInfo[3], 10);
-            const patch = parseInt(matchBuildInfo[4], 10);
-            const branch = matchBuildInfo[5];
-            const commit = matchBuildInfo[6];
             return {
-                version,
-                major,
-                minor,
-                patch,
-                branch,
-                commit,
+                version: matchBuildInfo[1],
+                major: parseInt(matchBuildInfo[2], 10),
+                minor: parseInt(matchBuildInfo[3], 10),
+                patch: parseInt(matchBuildInfo[4], 10),
+                branch: matchBuildInfo[5],
+                commit: matchBuildInfo[6],
             };
         }
         throw new Error('Invalid version format');
@@ -242,12 +235,16 @@ export class AircraftVersionChecker {
     private static showVersionPopup(branchName, currentVersion, releaseVersion) {
         const popup = new PopUp();
         popup.showInformation(
-            'NEW VERSION AVAILABLE',
+            t('VersionCheck.Title'),
             `<div style="font-size: 100%; text-align: left;">
-                     You are using ${branchName} version:<br/><strong>${currentVersion}</strong><br/><br/> 
-                     Latest ${branchName} version is:<br /><strong>${releaseVersion}</strong><br/><br/>
-                     Please update your aircraft using the FlyByWire Installer.
-                     </div>`,
+                        ${t('VersionCheck.CurrentVersionText', [{ edition: branchName }])}<br>
+                        <strong>${currentVersion}</strong><br><br>
+                                        
+                        ${t('VersionCheck.LatestVersionText', [{ edition: branchName }])}<br>
+                        <strong>${releaseVersion}</strong><br/><br/>
+                        
+                        ${t('VersionCheck.RecommendationText')}
+                    </div>`,
             'normal',
             () => {},
         );

src/instruments/src/EFB/translation.ts

@@ -153,21 +153,44 @@ if (process.env.VITE_BUILD) {
     watchLanguageChanges();
 }
 
+const placeholderReplace = (translation: string, replacements: Record<string, string>[]): string => {
+    let result = translation;
+    replacements.forEach((replacement: Record<string, string>) => {
+        // Localazy uses $<key> as placeholder - $key will be replaced with the value of key
+        const searchValue = `$${Object.keys(replacement)[0]}`;
+        const replaceValue = Object.values(replacement)[0].toString();
+        result = result.replace(searchValue, replaceValue);
+    });
+    return result;
+};
+
 /**
  * Returns localized string in the currently configured language when provided with
  * correct identifier key.
  * It will fall back to the default language and will try to
  * find the key there.
  * If the key is not available in the default language the key itself will be returned.
  *
+ * If a replacement list is provided it will replace the placeholders in the string with the
+ * key as placeholder-text to be search and the value as the string to be put in place.
+ *
+ * Placeholders are defined as follows: $key
+ *
+ * E.g. "Hello $name" with {name: "John"} will return "Hello John"
+ *
  * Note: Currently all language files are imported and contain all keys so this is redundant
  * but still implemented for future changes.
  * @param key String identifier key
+ * @param replacements list of Records of key value pairs to replace in the string
  * @return translated string in the current language if available, or default
  *         language, or key string
  */
-export function t(key: string): string {
-    return currentLanguageMap.get(key) || defaultLanguage.get(key) || key;
+export function t(key: string, replacements?: Record<string, string>[]): string {
+    const translation = currentLanguageMap.get(key) || defaultLanguage.get(key) || key;
+    if (replacements) {
+        return placeholderReplace(translation, replacements);
+    }
+    return translation;
 }
 
 // Workaround after simvar hook changes - only required on FlyPadPage.tsx from flypad settings