[MM-63399] Add a changelog link for when the app auto updates (#3371)

* [MM-63399] Add a changelog link for when the app auto updates

* PR feedback

* PR feedback

i18n/en.json

@@ -301,6 +301,7 @@
   "renderer.downloadsDropdown.Update.MattermostVersionX": "{appName} version {version}",
   "renderer.downloadsDropdown.Update.NewDesktopVersionAvailable": "New Desktop version available",
   "renderer.downloadsDropdown.Update.RestartAndUpdate": "Restart & update",
+  "renderer.downloadsDropdown.Update.ViewChangelog": "View Changelog",
   "renderer.downloadsDropdownMenu.CancelDownload": "Cancel Download",
   "renderer.downloadsDropdownMenu.Clear": "Clear",
   "renderer.downloadsDropdownMenu.Open": "Open",

src/common/communication.ts

@@ -104,6 +104,7 @@ export const UPDATE_URL_VIEW_WIDTH = 'update-url-view-width';
 
 export const OPEN_SERVER_EXTERNALLY = 'open-server-externally';
 export const OPEN_SERVER_UPGRADE_LINK = 'open-server-upgrade-link';
+export const OPEN_CHANGELOG_LINK = 'open-changelog-link';
 
 export const PING_DOMAIN = 'ping-domain';
 

src/common/constants.ts

@@ -49,6 +49,7 @@ export const DEFAULT_ACADEMY_LINK = 'https://academy.mattermost.com/';
 export const DEFAULT_TE_REPORT_PROBLEM_LINK = 'https://mattermost.com/pl/report-a-bug';
 export const DEFAULT_EE_REPORT_PROBLEM_LINK = 'https://support.mattermost.com/hc/en-us/requests/new';
 export const DEFAULT_UPGRADE_LINK = 'https://forum.mattermost.com/t/mattermost-desktop-app-5-11-important-compatibility-notice/22599';
+export const DEFAULT_CHANGELOG_LINK = 'https://docs.mattermost.com/help/apps/desktop-changelog.html';
 
 export const ModalConstants = {
     SETTINGS_MODAL: 'settingsModal',

src/main/preload/internalAPI.js

@@ -99,6 +99,7 @@ import {
     GET_UNIQUE_SERVERS_WITH_PERMISSIONS,
     LOAD_INCOMPATIBLE_SERVER,
     OPEN_SERVER_UPGRADE_LINK,
+    OPEN_CHANGELOG_LINK,
 } from 'common/communication';
 
 console.log('Preload initialized');
@@ -127,6 +128,7 @@ contextBridge.exposeInMainWorld('desktop', {
     focusCurrentView: () => ipcRenderer.send(FOCUS_BROWSERVIEW),
     openServerExternally: () => ipcRenderer.send(OPEN_SERVER_EXTERNALLY),
     openServerUpgradeLink: () => ipcRenderer.send(OPEN_SERVER_UPGRADE_LINK),
+    openChangelogLink: () => ipcRenderer.send(OPEN_CHANGELOG_LINK),
     closeDownloadsDropdown: () => ipcRenderer.send(CLOSE_DOWNLOADS_DROPDOWN),
     closeDownloadsDropdownMenu: () => ipcRenderer.send(CLOSE_DOWNLOADS_DROPDOWN_MENU),
     openDownloadsDropdown: () => ipcRenderer.send(OPEN_DOWNLOADS_DROPDOWN),

src/main/views/viewManager.ts

@@ -19,6 +19,8 @@ import {
     SERVERS_UPDATE,
     REACT_APP_INITIALIZED,
     OPEN_SERVER_EXTERNALLY,
+    OPEN_SERVER_UPGRADE_LINK,
+    OPEN_CHANGELOG_LINK,
     HISTORY,
     GET_VIEW_INFO_FOR_TEST,
     SESSION_EXPIRED,
@@ -31,9 +33,9 @@ import {
     UNREADS_AND_MENTIONS,
     TAB_LOGIN_CHANGED,
     DEVELOPER_MODE_UPDATED,
-    OPEN_SERVER_UPGRADE_LINK,
 } from 'common/communication';
 import Config from 'common/config';
+import {DEFAULT_CHANGELOG_LINK} from 'common/constants';
 import {Logger} from 'common/log';
 import type {MattermostServer} from 'common/servers/MattermostServer';
 import ServerManager from 'common/servers/serverManager';
@@ -84,6 +86,7 @@ export class ViewManager {
         ipcMain.on(TAB_LOGIN_CHANGED, this.handleTabLoginChanged);
         ipcMain.on(OPEN_SERVER_EXTERNALLY, this.handleOpenServerExternally);
         ipcMain.on(OPEN_SERVER_UPGRADE_LINK, this.handleOpenServerUpgradeLink);
+        ipcMain.on(OPEN_CHANGELOG_LINK, this.handleOpenChangelogLink);
         ipcMain.on(UNREADS_AND_MENTIONS, this.handleUnreadsAndMentionsChanged);
         ipcMain.on(SESSION_EXPIRED, this.handleSessionExpired);
 
@@ -587,6 +590,10 @@ export class ViewManager {
         }
     };
 
+    private handleOpenChangelogLink = () => {
+        shell.openExternal(DEFAULT_CHANGELOG_LINK);
+    };
+
     private handleUnreadsAndMentionsChanged = (e: IpcMainEvent, isUnread: boolean, mentionCount: number) => {
         log.silly('handleUnreadsAndMentionsChanged', {webContentsId: e.sender.id, isUnread, mentionCount});
 

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

@@ -67,6 +67,16 @@ const UpdateAvailable = ({item, appName}: OwnProps) => {
                         />
                     </LoadingWrapper>
                 </button>
+                <a
+                    className='DownloadsDropdown__Update__Details__Changelog'
+                    onClick={() => window.desktop.openChangelogLink()}
+                    href='#'
+                >
+                    <FormattedMessage
+                        id='renderer.downloadsDropdown.Update.ViewChangelog'
+                        defaultMessage='View Changelog'
+                    />
+                </a>
             </div>
         </div>
     );

src/renderer/css/downloadsDropdown.scss

@@ -350,7 +350,7 @@ body {
                         }
 
                         .DownloadsDropdown__Update__Details__Description {
-                            color: rgba(63, 67, 80, 0.64);
+                            color: rgba(var(--center-channel-color-rgb), 0.64);
                             font-size: 10px;
                             font-style: normal;
                             font-weight: 400;
@@ -359,6 +359,19 @@ body {
                             max-width: 200px;
                         }
 
+                        .DownloadsDropdown__Update__Details__Changelog {
+                            color: var(--link-color);
+                            text-decoration: none;
+                            font-size: 12px;
+                            font-weight: 600;
+                            margin-top: 6px;
+                            display: inline-block;
+
+                            &:hover, &:focus {
+                                filter: brightness(90%);
+                            }
+                        }
+
                         button#downloadUpdateButton {
                             font-style: normal;
                             font-weight: 600;

src/types/window.ts

@@ -40,6 +40,7 @@ declare global {
             focusCurrentView: () => void;
             openServerExternally: () => void;
             openServerUpgradeLink: () => void;
+            openChangelogLink: () => void;
             closeDownloadsDropdown: () => void;
             closeDownloadsDropdownMenu: () => void;
             openDownloadsDropdown: () => void;