Move changelog from dialog to separate view

desktop/packages/mullvad-vpn/locales/messages.pot

@@ -167,7 +167,6 @@ msgstr ""
 msgid "Go to System Settings"
 msgstr ""
 
-#. This is a button which closes a dialog.
 msgid "Got it!"
 msgstr ""
 
@@ -342,6 +341,10 @@ msgctxt "accessibility"
 msgid "More information"
 msgstr ""
 
+msgctxt "accessibility"
+msgid "New version installed, click here to see the changelog"
+msgstr ""
+
 msgctxt "accessibility"
 msgid "Opens externally"
 msgstr ""
@@ -578,6 +581,22 @@ msgctxt "api-access-methods-view"
 msgid "With the “Mullvad bridges” method, the app communicates with a Mullvad API server via a Mullvad bridge server. It does this by sending the traffic obfuscated by Shadowsocks."
 msgstr ""
 
+msgctxt "app-info-view"
+msgid "App info"
+msgstr ""
+
+msgctxt "app-info-view"
+msgid "App is out of sync. Please quit and restart."
+msgstr ""
+
+msgctxt "app-info-view"
+msgid "App version"
+msgstr ""
+
+msgctxt "app-info-view"
+msgid "Update available. Install the latest app version to stay up to date."
+msgstr ""
+
 msgctxt "auth-failure"
 msgid "Blocking internet: account is out of time"
 msgstr ""
@@ -595,7 +614,15 @@ msgid "You are logged in with an invalid account number. Please log out and try
 msgstr ""
 
 msgctxt "changelog"
-msgid "Changes in this version:"
+msgid "See full changelog"
+msgstr ""
+
+msgctxt "changelog-view"
+msgid "No updates or changes were made in this release for this platform."
+msgstr ""
+
+msgctxt "changelog-view"
+msgid "What's new"
 msgstr ""
 
 #. The selected location label displayed on the main view, when a user selected a specific host to connect to.
@@ -884,6 +911,10 @@ msgctxt "in-app-notifications"
 msgid "BLOCKING INTERNET"
 msgstr ""
 
+msgctxt "in-app-notifications"
+msgid "Click here to see what's new."
+msgstr ""
+
 #. The in-app banner displayed to the user when the app update is available.
 msgctxt "in-app-notifications"
 msgid "Install the latest app version to stay up to date."
@@ -897,6 +928,10 @@ msgctxt "in-app-notifications"
 msgid "NEW DEVICE CREATED"
 msgstr ""
 
+msgctxt "in-app-notifications"
+msgid "NEW VERSION INSTALLED"
+msgstr ""
+
 msgctxt "in-app-notifications"
 msgid "Please quit and restart the app."
 msgstr ""
@@ -1522,11 +1557,7 @@ msgid "API access"
 msgstr ""
 
 msgctxt "settings-view"
-msgid "App is out of sync. Please quit and restart."
-msgstr ""
-
-msgctxt "settings-view"
-msgid "App version"
+msgid "App info"
 msgstr ""
 
 msgctxt "settings-view"
@@ -1537,10 +1568,6 @@ msgctxt "settings-view"
 msgid "Support"
 msgstr ""
 
-msgctxt "settings-view"
-msgid "Update available. Install the latest app version to stay up to date."
-msgstr ""
-
 #. Navigation button to the 'User interface settings' view
 msgctxt "settings-view"
 msgid "User interface settings"
@@ -1551,6 +1578,10 @@ msgctxt "settings-view"
 msgid "VPN settings"
 msgstr ""
 
+msgctxt "settings-view"
+msgid "What's new"
+msgstr ""
+
 msgctxt "split-tunneling-view"
 msgid "%(applicationName)s is problematic and can’t be excluded from the VPN tunnel."
 msgstr ""
@@ -2305,9 +2336,6 @@ msgstr ""
 msgid "Always-on VPN assigned to other VPN"
 msgstr ""
 
-msgid "App info"
-msgstr ""
-
 msgid "At least one method needs to be enabled"
 msgstr ""
 
@@ -2344,6 +2372,9 @@ msgstr ""
 msgid "Changelog"
 msgstr ""
 
+msgid "Changes in this version:"
+msgstr ""
+
 msgid "Changes to DNS related settings might not go into effect immediately due to cached results."
 msgstr ""
 

desktop/packages/mullvad-vpn/src/config.json

@@ -4,7 +4,8 @@
     "purchase": "https://mullvad.net/account/",
     "faq": "https://mullvad.net/help/tag/mullvad-app/",
     "privacyGuide": "https://mullvad.net/help/first-steps-towards-online-privacy/",
-    "download": "https://mullvad.net/download/vpn/"
+    "download": "https://mullvad.net/download/vpn/",
+    "changelog": "https://github.com/mullvad/mullvadvpn-app/blob/main/CHANGELOG.md"
   },
   "colors": {
     "darkerBlue": "rgba(25, 38, 56, 0.95)",

desktop/packages/mullvad-vpn/src/main/account.ts

@@ -13,7 +13,7 @@ import {
   AccountExpiredNotificationProvider,
   CloseToAccountExpiryNotificationProvider,
   SystemNotificationCategory,
-} from '../shared/notifications/notification';
+} from '../shared/notifications';
 import { Scheduler } from '../shared/scheduler';
 import AccountDataCache from './account-data-cache';
 import { DaemonRpc } from './daemon-rpc';

desktop/packages/mullvad-vpn/src/main/index.ts

@@ -363,6 +363,7 @@ class ApplicationMain
       this.daemonRpc.disconnect();
     }
 
+    this.settings.gui.changelogDisplayedForVersion = this.version.currentVersion.gui;
     for (const logger of [log, this.rendererLog]) {
       try {
         logger?.disposeDisposableOutputs();
@@ -786,7 +787,6 @@ class ApplicationMain
       splitTunnelingApplications: this.splitTunnelingApplications,
       macOsScrollbarVisibility: this.macOsScrollbarVisibility,
       changelog: this.changelog ?? [],
-      forceShowChanges: CommandLineOptions.showChanges.match,
       navigationHistory: this.navigationHistory,
       currentApiAccessMethod: this.currentApiAccessMethod,
       isMacOs13OrNewer: isMacOs13OrNewer(),

desktop/packages/mullvad-vpn/src/main/notification-controller.ts

@@ -16,7 +16,7 @@ import {
   SystemNotificationCategory,
   SystemNotificationProvider,
   SystemNotificationSeverityType,
-} from '../shared/notifications/notification';
+} from '../shared/notifications';
 import { Scheduler } from '../shared/scheduler';
 
 const THROTTLE_DELAY = 500;

desktop/packages/mullvad-vpn/src/main/version.ts

@@ -8,7 +8,7 @@ import {
   SystemNotificationCategory,
   UnsupportedVersionNotificationProvider,
   UpdateAvailableNotificationProvider,
-} from '../shared/notifications/notification';
+} from '../shared/notifications';
 import { DaemonRpc } from './daemon-rpc';
 import { IpcMainEventChannel } from './ipc-event-channel';
 import { NotificationSender } from './notification-controller';

desktop/packages/mullvad-vpn/src/renderer/app.tsx

@@ -39,7 +39,6 @@ import log, { ConsoleOutput } from '../shared/logging';
 import { LogLevel } from '../shared/logging-types';
 import { Scheduler } from '../shared/scheduler';
 import AppRouter from './components/AppRouter';
-import { Changelog } from './components/Changelog';
 import ErrorBoundary from './components/ErrorBoundary';
 import KeyboardNavigation from './components/KeyboardNavigation';
 import Lang from './components/Lang';
@@ -243,7 +242,7 @@ export default class AppRenderer {
     this.setUpgradeVersion(initialState.upgradeVersion);
     this.setGuiSettings(initialState.guiSettings);
     this.storeAutoStart(initialState.autoStart);
-    this.setChangelog(initialState.changelog, initialState.forceShowChanges);
+    this.setChangelog(initialState.changelog);
     this.setCurrentApiAccessMethod(initialState.currentApiAccessMethod);
     this.reduxActions.userInterface.setIsMacOs13OrNewer(initialState.isMacOs13OrNewer);
 
@@ -297,7 +296,6 @@ export default class AppRenderer {
                     <ModalContainer>
                       <KeyboardNavigation>
                         <AppRouter />
-                        <Changelog />
                       </KeyboardNavigation>
                       {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
                     </ModalContainer>
@@ -1002,9 +1000,8 @@ export default class AppRenderer {
     this.reduxActions.settings.updateAutoStart(autoStart);
   }
 
-  private setChangelog(changelog: IChangelog, forceShowChanges: boolean) {
+  private setChangelog(changelog: IChangelog) {
     this.reduxActions.userInterface.setChangelog(changelog);
-    this.reduxActions.userInterface.setForceShowChanges(forceShowChanges);
   }
 
   private updateLocation() {

desktop/packages/mullvad-vpn/src/renderer/components/AppRouter.tsx

@@ -38,6 +38,7 @@ import TooManyDevices from './TooManyDevices';
 import TransitionContainer, { TransitionView } from './TransitionContainer';
 import UdpOverTcp from './UdpOverTcp';
 import UserInterfaceSettings from './UserInterfaceSettings';
+import { AppInfoView, ChangelogView } from './views';
 import VpnSettings from './VpnSettings';
 import WireguardSettings from './WireguardSettings';
 
@@ -103,6 +104,8 @@ export default function AppRouter() {
             <Route exact path={RoutePath.selectLocation} component={SelectLocation} />
             <Route exact path={RoutePath.editCustomBridge} component={EditCustomBridge} />
             <Route exact path={RoutePath.filter} component={Filter} />
+            <Route exact path={RoutePath.appInfo} component={AppInfoView} />
+            <Route exact path={RoutePath.changelog} component={ChangelogView} />
           </Switch>
         </TransitionView>
       </TransitionContainer>

desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx

@@ -1,42 +1,39 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const SIDE_BUTTON_WIDTH = 44;
+import { ButtonProps } from './common/molecules';
 
 const ButtonRow = styled.div({
   display: 'flex',
-  flexDirection: 'row',
+  gap: '1px',
 });
 
 const MainButton = styled.button({
-  display: 'flex',
-  flex: 1,
   borderTopRightRadius: 0,
   borderBottomRightRadius: 0,
+  paddingLeft: '44px',
+  '&:focus-visible': {
+    zIndex: 10,
+  },
 });
 
 const SideButton = styled.button({
-  display: 'flex',
   borderTopLeftRadius: 0,
   borderBottomLeftRadius: 0,
-  width: SIDE_BUTTON_WIDTH,
-  marginLeft: '1px !important',
+  '&:focus-visible': {
+    zIndex: 10,
+  },
 });
 
-export interface MultiButtonCompatibleProps {
-  className?: string;
-  textOffset?: number;
-}
-
-interface IMultiButtonProps {
-  mainButton: React.ComponentType<MultiButtonCompatibleProps>;
-  sideButton: React.ComponentType<MultiButtonCompatibleProps>;
+interface MultiButtonProps {
+  mainButton: React.ComponentType<ButtonProps>;
+  sideButton: React.ComponentType<ButtonProps>;
 }
 
-export function MultiButton(props: IMultiButtonProps) {
+export function MultiButton(props: MultiButtonProps) {
   return (
     <ButtonRow>
-      <MainButton as={props.mainButton} textOffset={SIDE_BUTTON_WIDTH + 1} />
+      <MainButton as={props.mainButton} />
       <SideButton as={props.sideButton} />
     </ButtonRow>
   );