[MM-54591] Use getVersion endpoint to report app name (#2862)

src/main/preload/desktopAPI.js

@@ -4,7 +4,7 @@
 
 'use strict';
 
-import {ipcRenderer, contextBridge, app} from 'electron';
+import {ipcRenderer, contextBridge} from 'electron';
 
 import {
     GET_LANGUAGE_INFORMATION,
@@ -110,8 +110,6 @@ 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/DownloadsDropdownItem.tsx

@@ -10,17 +10,24 @@ import UpdateWrapper from './Update/UpdateWrapper';
 type OwnProps = {
     activeItem?: DownloadedItem;
     item: DownloadedItem;
+    appName: string;
 }
 
-const DownloadsDropdownItem = ({item, activeItem}: OwnProps) => {
+const DownloadsDropdownItem = ({item, activeItem, appName}: OwnProps) => {
     if (item.type === 'update' && item.state !== 'progressing') {
-        return <UpdateWrapper item={item}/>;
+        return (
+            <UpdateWrapper
+                item={item}
+                appName={appName}
+            />
+        );
     }
 
     return (
         <DownloadsDropdownItemFile
             item={item}
             activeItem={activeItem}
+            appName={appName}
         />
     );
 };

src/renderer/components/DownloadsDropdown/DownloadsDropdownItemFile.tsx

@@ -15,9 +15,10 @@ import Thumbnail from './Thumbnail';
 type OwnProps = {
     activeItem?: DownloadedItem;
     item: DownloadedItem;
+    appName: string;
 }
 
-const DownloadsDropdownItemFile = ({item, activeItem}: OwnProps) => {
+const DownloadsDropdownItemFile = ({item, activeItem, appName}: OwnProps) => {
     const [threeDotButtonVisible, setThreeDotButtonVisible] = useState(false);
     const translate = useIntl();
 
@@ -28,7 +29,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: window.desktop.getAppName()}) :
+        translate.formatMessage({id: 'renderer.downloadsDropdown.Update.MattermostVersionX', defaultMessage: `{appName} version ${item.filename}`}, {version: item.filename, appName}) :
         item.filename;
 
     return (

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

@@ -12,9 +12,10 @@ import Thumbnail from '../Thumbnail';
 
 type OwnProps = {
     item: DownloadedItem;
+    appName: string;
 }
 
-const UpdateAvailable = ({item}: OwnProps) => {
+const UpdateAvailable = ({item, appName}: OwnProps) => {
     const onButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         e?.preventDefault?.();
         window.desktop.downloadsDropdown.startUpdateDownload();
@@ -36,7 +37,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: window.desktop.getAppName(),
+                            appName,
                         }}
                     />
                 </div>

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

@@ -15,9 +15,10 @@ import FileSizeAndStatus from '../FileSizeAndStatus';
 
 type OwnProps = {
     item: DownloadedItem;
+    appName: string;
 }
 
-const UpdateAvailable = ({item}: OwnProps) => {
+const UpdateAvailable = ({item, appName}: OwnProps) => {
     const translate = useIntl();
 
     const onButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -31,7 +32,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: window.desktop.getAppName()})}
+                        {translate.formatMessage({id: 'renderer.downloadsDropdown.Update.MattermostVersionX', defaultMessage: `{appName} version ${item.filename}`}, {version: item.filename, appName})}
                     </div>
                     <div
                         className={classNames('DownloadsDropdown__File__Body__Details__FileSizeAndStatus', {

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

@@ -11,14 +11,25 @@ import 'renderer/css/components/Button.scss';
 
 type OwnProps = {
     item: DownloadedItem;
+    appName: string;
 }
 
-const UpdateWrapper = ({item}: OwnProps) => {
+const UpdateWrapper = ({item, appName}: OwnProps) => {
     if (item.state === 'available') {
-        return <UpdateAvailable item={item}/>;
+        return (
+            <UpdateAvailable
+                item={item}
+                appName={appName}
+            />
+        );
     }
     if (item.state === 'completed') {
-        return <UpdateDownloaded item={item}/>;
+        return (
+            <UpdateDownloaded
+                item={item}
+                appName={appName}
+            />
+        );
     }
     return null;
 };

src/renderer/downloadsDropdown.tsx

@@ -18,6 +18,7 @@ type State = {
     darkMode?: boolean;
     windowBounds?: Electron.Rectangle;
     item?: DownloadedItem;
+    appName?: string;
 }
 
 class DownloadsDropdown extends React.PureComponent<Record<string, never>, State> {
@@ -40,6 +41,9 @@ class DownloadsDropdown extends React.PureComponent<Record<string, never>, State
             window.desktop.downloadsDropdown.focus();
         });
 
+        window.desktop.getVersion().then(({name}) => {
+            this.setState({appName: name});
+        });
         window.desktop.downloadsDropdown.requestInfo();
     }
 
@@ -81,6 +85,10 @@ class DownloadsDropdown extends React.PureComponent<Record<string, never>, State
     }
 
     render() {
+        if (!this.state.appName) {
+            return null;
+        }
+
         return (
             <IntlProvider>
                 <div
@@ -115,6 +123,7 @@ class DownloadsDropdown extends React.PureComponent<Record<string, never>, State
                                     item={downloadItem}
                                     key={downloadItem.filename}
                                     activeItem={this.state.item}
+                                    appName={this.state.appName || ''}
                                 />
                             );
                         })}

src/types/window.ts

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