[MM-54321] Expose app name through the API correctly (#2813)

src/main/preload/desktopAPI.js

@@ -4,7 +4,7 @@
 
 'use strict';
 
-import {ipcRenderer, contextBridge} from 'electron';
+import {ipcRenderer, contextBridge, app} from 'electron';
 
 import {
     GET_LANGUAGE_INFORMATION,
@@ -110,6 +110,8 @@ contextBridge.exposeInMainWorld('mas', {
 });
 
 contextBridge.exposeInMainWorld('desktop', {
+    getAppName: () => app.name,
+
     quit: (reason, stack) => ipcRenderer.send(QUIT, reason, stack),
     openAppMenu: () => ipcRenderer.send(OPEN_APP_MENU),
     closeServersDropdown: () => ipcRenderer.send(CLOSE_SERVERS_DROPDOWN),

src/renderer/components/DownloadsDropdown/DownloadsDropdownItemFile.tsx

@@ -7,8 +7,6 @@ import classNames from 'classnames';
 
 import {useIntl} from 'react-intl';
 
-import {app} from 'electron';
-
 import FileSizeAndStatus from './FileSizeAndStatus';
 import ProgressBar from './ProgressBar';
 import ThreeDotButton from './ThreeDotButton';
@@ -30,7 +28,7 @@ const DownloadsDropdownItemFile = ({item, activeItem}: OwnProps) => {
     };
 
     const itemFilename = item.type === 'update' ?
-        translate.formatMessage({id: 'renderer.downloadsDropdown.Update.MattermostVersionX', defaultMessage: `{appName} version ${item.filename}`}, {version: item.filename, appName: app.name}) :
+        translate.formatMessage({id: 'renderer.downloadsDropdown.Update.MattermostVersionX', defaultMessage: `{appName} version ${item.filename}`}, {version: item.filename, appName: window.desktop.getAppName()}) :
         item.filename;
 
     return (

src/renderer/components/DownloadsDropdown/Update/UpdateAvailable.tsx

@@ -8,8 +8,6 @@ import {FormattedMessage} from 'react-intl';
 
 import {Button} from 'react-bootstrap';
 
-import {app} from 'electron';
-
 import Thumbnail from '../Thumbnail';
 
 type OwnProps = {
@@ -38,7 +36,7 @@ const UpdateAvailable = ({item}: OwnProps) => {
                         defaultMessage={`A new version of the {appName} Desktop App (version ${item.filename}) is available to install.`}
                         values={{
                             version: item.filename,
-                            appName: app.name,
+                            appName: window.desktop.getAppName(),
                         }}
                     />
                 </div>

src/renderer/components/DownloadsDropdown/Update/UpdateDownloaded.tsx

@@ -10,8 +10,6 @@ import {Button} from 'react-bootstrap';
 
 import classNames from 'classnames';
 
-import {app} from 'electron';
-
 import Thumbnail from '../Thumbnail';
 import FileSizeAndStatus from '../FileSizeAndStatus';
 
@@ -33,7 +31,7 @@ const UpdateAvailable = ({item}: OwnProps) => {
                 <Thumbnail item={item}/>
                 <div className='DownloadsDropdown__File__Body__Details'>
                     <div className='DownloadsDropdown__File__Body__Details__Filename'>
-                        {translate.formatMessage({id: 'renderer.downloadsDropdown.Update.MattermostVersionX', defaultMessage: `{appName} version ${item.filename}`}, {version: item.filename, appName: app.name})}
+                        {translate.formatMessage({id: 'renderer.downloadsDropdown.Update.MattermostVersionX', defaultMessage: `{appName} version ${item.filename}`}, {version: item.filename, appName: window.desktop.getAppName()})}
                     </div>
                     <div
                         className={classNames('DownloadsDropdown__File__Body__Details__FileSizeAndStatus', {

src/types/window.ts

@@ -31,6 +31,8 @@ declare global {
             getThumbnailLocation: (location: string) => Promise<string>;
         };
         desktop: {
+            getAppName: () => string;
+
             quit: (reason: string, stack: string) => void;
             openAppMenu: () => void;
             closeServersDropdown: () => void;