Add information about post upgrade tasks in UI

5 files changed, 52 insertions, 2 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index b221f0a0e1..ebb7f0e18b 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -122,6 +122,10 @@ export default class AppRenderer {
       this.onDaemonDisconnected();
     });
 
+    IpcRendererEventChannel.daemon.listenIsPerformingPostUpgrade((isPerformingPostUpgrade) => {
+      this.setIsPerformingPostUpgrade(isPerformingPostUpgrade);
+    });
+
     IpcRendererEventChannel.account.listen((newAccountData?: IAccountData) => {
       this.setAccountExpiry(newAccountData?.expiry);
     });
@@ -203,6 +207,7 @@ export default class AppRenderer {
 
     this.setAccountExpiry(initialState.accountData?.expiry);
     this.setSettings(initialState.settings);
+    this.setIsPerformingPostUpgrade(initialState.isPerformingPostUpgrade);
     this.handleAccountChange({ deviceConfig: initialState.deviceConfig }, undefined);
     this.hasReceivedDeviceConfig = initialState.hasReceivedDeviceConfig;
     this.setAccountHistory(initialState.accountHistory);
@@ -770,6 +775,10 @@ export default class AppRenderer {
     this.setBridgeSettings(newSettings.bridgeSettings);
   }
 
+  private setIsPerformingPostUpgrade(isPerformingPostUpgrade: boolean) {
+    this.reduxActions.userInterface.setIsPerformingPostUpgrade(isPerformingPostUpgrade);
+  }
+
   private updateBlockedState(tunnelState: TunnelState, blockWhenDisconnected: boolean) {
     const actions = this.reduxActions.connection;
     switch (tunnelState.state) {
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index d9ae7f105f..282f49d01c 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -51,6 +51,7 @@ interface IProps {
   updateAccountToken: (accountToken: AccountToken) => void;
   clearAccountHistory: () => Promise<void>;
   createNewAccount: () => void;
+  isPerformingPostUpgrade?: boolean;
 }
 
 interface IState {
@@ -149,6 +150,10 @@ export default class Login extends React.Component<IProps, IState> {
   };
 
   private formTitle() {
+    if (this.props.isPerformingPostUpgrade) {
+      return messages.pgettext('login-view', 'Upgrading...');
+    }
+
     switch (this.props.loginState.type) {
       case 'logging in':
       case 'too many devices':
@@ -169,6 +174,10 @@ export default class Login extends React.Component<IProps, IState> {
   }
 
   private formSubtitle() {
+    if (this.props.isPerformingPostUpgrade) {
+      return messages.pgettext('login-view', 'Finishing upgrade.');
+    }
+
     switch (this.props.loginState.type) {
       case 'failed':
         return this.props.loginState.method === 'existing_account'
@@ -199,6 +208,10 @@ export default class Login extends React.Component<IProps, IState> {
   }
 
   private getStatusIconPath(): string | undefined {
+    if (this.props.isPerformingPostUpgrade) {
+      return 'icon-spinner';
+    }
+
     switch (this.props.loginState.type) {
       case 'logging in':
         return 'icon-spinner';
@@ -213,6 +226,7 @@ export default class Login extends React.Component<IProps, IState> {
 
   private allowInteraction() {
     return (
+      !this.props.isPerformingPostUpgrade &&
       this.props.loginState.type !== 'logging in' &&
       this.props.loginState.type !== 'ok' &&
       this.props.loginState.type !== 'too many devices'
@@ -291,7 +305,9 @@ export default class Login extends React.Component<IProps, IState> {
                 messages.pgettext('accessibility', 'Login')
               }>
               <StyledInputSubmitIcon
-                visible={this.props.loginState.type !== 'logging in'}
+                visible={
+                  this.props.loginState.type !== 'logging in' && !this.props.isPerformingPostUpgrade
+                }
                 source="icon-arrow"
                 height={16}
                 width={24}
diff --git a/gui/src/renderer/containers/LoginPage.tsx b/gui/src/renderer/containers/LoginPage.tsx
index 1abfa863a2..fd5aa5cbcd 100644
--- a/gui/src/renderer/containers/LoginPage.tsx
+++ b/gui/src/renderer/containers/LoginPage.tsx
@@ -13,11 +13,14 @@ const mapStateToProps = (state: IReduxState) => {
 
   const showBlockMessage = tunnelState.state === 'error' || blockWhenDisconnected;
 
+  const isPerformingPostUpgrade = state.userInterface.isPerformingPostUpgrade;
+
   return {
     accountToken,
     accountHistory,
     loginState: status,
     showBlockMessage,
+    isPerformingPostUpgrade,
   };
 };
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
diff --git a/gui/src/renderer/redux/userinterface/actions.ts b/gui/src/renderer/redux/userinterface/actions.ts
index 78b5bae756..ce0cd5401b 100644
--- a/gui/src/renderer/redux/userinterface/actions.ts
+++ b/gui/src/renderer/redux/userinterface/actions.ts
@@ -46,6 +46,11 @@ export interface ISetChangelog {
   changelog: IChangelog;
 }
 
+export interface ISetIsPerformingPostUpgrade {
+  type: 'SET_IS_PERFORMING_POST_UPGRADE';
+  isPerformingPostUpgrade: boolean;
+}
+
 export type UserInterfaceAction =
   | IUpdateLocaleAction
   | IUpdateWindowArrowPositionAction
@@ -55,7 +60,8 @@ export type UserInterfaceAction =
   | IRemoveScrollPosition
   | ISetMacOsScrollbarVisibility
   | ISetConnectedToDaemon
-  | ISetChangelog;
+  | ISetChangelog
+  | ISetIsPerformingPostUpgrade;
 
 function updateLocale(locale: string): IUpdateLocaleAction {
   return {
@@ -122,6 +128,13 @@ function setChangelog(changelog: IChangelog): ISetChangelog {
   };
 }
 
+function setIsPerformingPostUpgrade(isPerformingPostUpgrade: boolean): ISetIsPerformingPostUpgrade {
+  return {
+    type: 'SET_IS_PERFORMING_POST_UPGRADE',
+    isPerformingPostUpgrade,
+  };
+}
+
 export default {
   updateLocale,
   updateWindowArrowPosition,
@@ -132,4 +145,5 @@ export default {
   setMacOsScrollbarVisibility,
   setConnectedToDaemon,
   setChangelog,
+  setIsPerformingPostUpgrade,
 };
diff --git a/gui/src/renderer/redux/userinterface/reducers.ts b/gui/src/renderer/redux/userinterface/reducers.ts
index 58107b455e..ca470a8cba 100644
--- a/gui/src/renderer/redux/userinterface/reducers.ts
+++ b/gui/src/renderer/redux/userinterface/reducers.ts
@@ -11,6 +11,7 @@ export interface IUserInterfaceReduxState {
   macOsScrollbarVisibility?: MacOsScrollbarVisibility;
   connectedToDaemon: boolean;
   changelog: IChangelog;
+  isPerformingPostUpgrade: boolean;
 }
 
 const initialState: IUserInterfaceReduxState = {
@@ -21,6 +22,7 @@ const initialState: IUserInterfaceReduxState = {
   macOsScrollbarVisibility: undefined,
   connectedToDaemon: false,
   changelog: [],
+  isPerformingPostUpgrade: false,
 };
 
 export default function (
@@ -64,6 +66,12 @@ export default function (
         changelog: action.changelog,
       };
 
+    case 'SET_IS_PERFORMING_POST_UPGRADE':
+      return {
+        ...state,
+        isPerformingPostUpgrade: action.isPerformingPostUpgrade,
+      };
+
     default:
       return state;
   }