feat: add avs and desktop versions to preferences-about [WPB-4969] (#…

…17525)

* feat: add avs version to webapp (#17518) (#17520)

Co-authored-by: Patryk Górka <[email protected]>

* runfix: import package json in webapp directly

* feat: show preferences>about also on desktop

* test: update tests

* feat: add desktop version to about page

* chore: lowercase preferences about version

---------

Co-authored-by: Otto the Bot <[email protected]>

src/i18n/en-US.json

@@ -1199,7 +1199,9 @@
   "preferencesAboutSupportContact": "Contact Support",
   "preferencesAboutSupportWebsite": "Support website",
   "preferencesAboutTermsOfUse": "Terms of use",
-  "preferencesAboutVersion": "Version {{version}}",
+  "preferencesAboutVersion": "{{brandName}} for web version {{version}}",
+  "preferencesAboutDesktopVersion": "Desktop version {{version}}",
+  "preferencesAboutAVSVersion": "AVS version {{version}}",
   "preferencesAboutWebsite": "{{brandName}} website",
   "preferencesAccount": "Account",
   "preferencesAccountAccentColor": "Set a profile color",

src/script/Config.ts

@@ -20,6 +20,8 @@
 import {Runtime} from '@wireapp/commons';
 
 import {createUuid} from 'Util/uuid';
+
+import packageJson from '../../package.json';
 const env = window.wire.env;
 
 export const ACCENT_ID = {
@@ -83,6 +85,8 @@ const config = {
     clientToken: env.DATADOG_CLIENT_TOKEN,
     applicationId: env.DATADOG_APPLICATION_ID,
   },
+
+  AVS_VERSION: packageJson.dependencies['@wireapp/avs'],
 } as const;
 
 export type Configuration = typeof config;
@@ -91,6 +95,13 @@ const Config = {
   getConfig: () => {
     return config;
   },
+  getDesktopConfig: () => {
+    if (!Runtime.isDesktopApp) {
+      return undefined;
+    }
+
+    return window.desktopAppConfig;
+  },
 };
 
 export {Config};

src/script/conversation/linkPreviews/index.ts

@@ -51,6 +51,7 @@ type LinkPreviewContent = {
 declare global {
   interface Window {
     openGraphAsync?: (url: string) => Promise<OpenGraphResult>;
+    desktopAppConfig?: {version: string};
   }
 }
 const logger = getLogger('LinkPreviewRepository');

src/script/page/LeftSidebar/panels/Preferences.test.tsx

@@ -44,12 +44,12 @@ describe('Preferences', () => {
     expect(queryByText('preferencesAV')).toBeNull();
   });
 
-  it('renders the about section in a web app', () => {
+  it('renders the about section in a desktop app', () => {
     jest.spyOn(Runtime, 'isDesktopApp').mockReturnValue(true);
     jest.spyOn(Runtime, 'isSupportingLegacyCalling').mockReturnValue(false);
     const {queryByText} = render(<Preferences {...defaultParams} />);
     expect(queryByText('preferencesAV')).toBeNull();
-    expect(queryByText('preferencesAbout')).toBeNull();
+    expect(queryByText('preferencesAbout')).not.toBeNull();
   });
 
   it('renders the a/v section in a desktop app', () => {

src/script/page/LeftSidebar/panels/Preferences.tsx

@@ -127,7 +127,6 @@ const Preferences: React.FC<PreferencesProps> = ({
     teamRepository.getTeam();
   }, [teamRepository]);
 
-  const isDesktop = Runtime.isDesktopApp();
   const supportsCalling = Runtime.isSupportingLegacyCalling();
 
   const {setCurrentView} = useAppMainState(state => state.responsiveView);
@@ -179,7 +178,6 @@ const Preferences: React.FC<PreferencesProps> = ({
     },
     {
       IconComponent: Icon.About,
-      hidden: isDesktop,
       id: ContentState.PREFERENCES_ABOUT,
       label: t('preferencesAbout'),
       uieName: 'go-about',

src/script/page/MainContent/panels/preferences/AboutPreferences.tsx

@@ -41,6 +41,7 @@ interface AboutPreferencesProps {
 const AboutPreferences: React.FC<AboutPreferencesProps> = ({selfUser, teamState = container.resolve(TeamState)}) => {
   const inTeam = teamState.isInTeam(selfUser);
   const config = Config.getConfig();
+  const desktopConfig = Config.getDesktopConfig();
   const websiteUrl = URL.WEBSITE;
   const privacyPolicyUrl = getPrivacyPolicyUrl();
 
@@ -110,7 +111,13 @@ const AboutPreferences: React.FC<AboutPreferencesProps> = ({selfUser, teamState
         </PreferencesSection>
       )}
       <PreferencesSection hasSeparator>
-        <p className="preferences-detail">{t('preferencesAboutVersion', config.VERSION)}</p>
+        {desktopConfig && (
+          <p className="preferences-detail">{t('preferencesAboutDesktopVersion', desktopConfig.version)}</p>
+        )}
+        <p className="preferences-detail">
+          {t('preferencesAboutVersion', {brandName: config.BRAND_NAME, version: config.VERSION})}
+        </p>
+        <p className="preferences-detail">{t('preferencesAboutAVSVersion', config.AVS_VERSION)}</p>
         <p className="preferences-detail">{t('preferencesAboutCopyright')}</p>
       </PreferencesSection>
     </PreferencesPage>

src/script/util/Environment.ts

@@ -49,6 +49,7 @@ interface Environment {
     isProduction: typeof isProduction;
   };
   version: (showWrapperVersion?: boolean) => string;
+  avsVersion: () => string;
 }
 
 export const Environment: Environment = {
@@ -67,4 +68,5 @@ export const Environment: Environment = {
     const showElectronVersion = electronVersion && showWrapperVersion;
     return showElectronVersion ? electronVersion : Config.getConfig().VERSION;
   },
+  avsVersion: (): string => Config.getConfig().AVS_VERSION,
 };