Update modal usages to pass isOpen

10 files changed, 73 insertions, 66 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 7d873ffca5..d811f04a06 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -187,8 +187,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
           </NavigationContainer>
         </SettingsContainer>
 
-        {this.state.showConfirmBlockWhenDisconnectedAlert &&
-          this.renderConfirmBlockWhenDisconnectedAlert()}
+        {this.renderConfirmBlockWhenDisconnectedAlert()}
       </Layout>
     );
   }
@@ -221,6 +220,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
   private renderConfirmBlockWhenDisconnectedAlert = () => {
     return (
       <ModalAlert
+        isOpen={this.state.showConfirmBlockWhenDisconnectedAlert}
         type={ModalAlertType.caution}
         buttons={[
           <AppButton.RedButton key="confirm" onClick={this.confirmEnableBlockWhenDisconnected}>
diff --git a/gui/src/renderer/components/Changelog.tsx b/gui/src/renderer/components/Changelog.tsx
index 545ed6753b..039fe9bbc4 100644
--- a/gui/src/renderer/components/Changelog.tsx
+++ b/gui/src/renderer/components/Changelog.tsx
@@ -37,17 +37,15 @@ export function Changelog() {
 
   const { setDisplayedChangelog } = useAppContext();
 
-  if (
-    changelogDisplayedForVersion === currentVersion ||
-    changelog.length === 0 ||
-    window.env.development ||
-    /-dev-[0-9a-f]{6}$/.test(currentVersion)
-  ) {
-    return null;
-  }
+  const visible =
+    changelogDisplayedForVersion !== currentVersion &&
+    changelog.length > 0 &&
+    !window.env.development &&
+    !/-dev-[0-9a-f]{6}$/.test(currentVersion);
 
   return (
     <ModalAlert
+      isOpen={visible}
       buttons={[
         <AppButton.BlueButton key="close" onClick={setDisplayedChangelog}>
           {
diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index bbecd4b3f2..287ed58a4b 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -270,7 +270,11 @@ export default function CustomDnsSettings() {
         </Cell.FooterText>
       </StyledCustomDnsFooter>
 
-      {confirmAction && <ConfirmationDialog confirm={confirm} abort={abortConfirmation} />}
+      <ConfirmationDialog
+        isOpen={confirmAction !== undefined}
+        confirm={confirm}
+        abort={abortConfirmation}
+      />
     </>
   );
 }
@@ -391,6 +395,7 @@ function CellListItem(props: ICellListItemProps) {
 }
 
 interface IConfirmationDialogProps {
+  isOpen: boolean;
   confirm: () => void;
   abort: () => void;
 }
@@ -398,6 +403,7 @@ interface IConfirmationDialogProps {
 function ConfirmationDialog(props: IConfirmationDialogProps) {
   return (
     <ModalAlert
+      isOpen={props.isOpen}
       type={ModalAlertType.caution}
       buttons={[
         <AppButton.RedButton key="confirm" onClick={props.confirm}>
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index 6f29b3dad2..8b2439e406 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -87,7 +87,7 @@ export default class ExpiredAccountErrorView extends React.Component<
               </AppButton.GreenButton>
             </StyledFooter>
 
-            {this.state.showBlockWhenDisconnectedAlert && this.renderBlockWhenDisconnectedAlert()}
+            {this.renderBlockWhenDisconnectedAlert()}
           </StyledContainer>
         </StyledCustomScrollbars>
       </Layout>
@@ -192,6 +192,7 @@ export default class ExpiredAccountErrorView extends React.Component<
   private renderBlockWhenDisconnectedAlert() {
     return (
       <ModalAlert
+        isOpen={this.state.showBlockWhenDisconnectedAlert}
         type={ModalAlertType.caution}
         buttons={[
           <AppButton.BlueButton
diff --git a/gui/src/renderer/components/OpenVPNSettings.tsx b/gui/src/renderer/components/OpenVPNSettings.tsx
index b554eb2372..55157a9bfe 100644
--- a/gui/src/renderer/components/OpenVPNSettings.tsx
+++ b/gui/src/renderer/components/OpenVPNSettings.tsx
@@ -224,7 +224,7 @@ export default class OpenVpnSettings extends React.Component<IProps, IState> {
           </NavigationContainer>
         </SettingsContainer>
 
-        {this.state.showBridgeStateConfirmationDialog && this.renderBridgeStateConfirmation()}
+        {this.renderBridgeStateConfirmation()}
       </Layout>
     );
   }
@@ -326,6 +326,7 @@ export default class OpenVpnSettings extends React.Component<IProps, IState> {
   private renderBridgeStateConfirmation = () => {
     return (
       <ModalAlert
+        isOpen={this.state.showBridgeStateConfirmationDialog}
         type={ModalAlertType.info}
         message={messages.gettext('This setting increases latency. Use only if needed.')}
         buttons={[
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index f1c349c664..e3e4ccd270 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -351,21 +351,20 @@ export default class Preferences extends React.Component<IProps, IState> {
           </NavigationContainer>
         </StyledContainer>
 
-        {this.state.showKillSwitchInfo && (
-          <ModalAlert
-            message={messages.pgettext(
-              'preferences-view',
-              'The app has a built in kill switch that is enabled by default and cannot be disabled. This is to prevent your traffic from leaking outside of the VPN tunnel if your network suddenly stops working or if the tunnel fails for any reason. Mullvad automatically protects your data until your connection is reestablished.',
-            )}
-            type={ModalAlertType.info}
-            buttons={[
-              <AppButton.BlueButton key="back" onClick={this.hideKillSwitchInfo}>
-                {messages.gettext('Got it!')}
-              </AppButton.BlueButton>,
-            ]}
-            close={this.hideKillSwitchInfo}
-          />
-        )}
+        <ModalAlert
+          isOpen={this.state.showKillSwitchInfo}
+          message={messages.pgettext(
+            'preferences-view',
+            'The app has a built in kill switch that is enabled by default and cannot be disabled. This is to prevent your traffic from leaking outside of the VPN tunnel if your network suddenly stops working or if the tunnel fails for any reason. Mullvad automatically protects your data until your connection is reestablished.',
+          )}
+          type={ModalAlertType.info}
+          buttons={[
+            <AppButton.BlueButton key="back" onClick={this.hideKillSwitchInfo}>
+              {messages.gettext('Got it!')}
+            </AppButton.BlueButton>,
+          ]}
+          close={this.hideKillSwitchInfo}
+        />
       </Layout>
     );
   }
diff --git a/gui/src/renderer/components/RedeemVoucher.tsx b/gui/src/renderer/components/RedeemVoucher.tsx
index 7810112082..ef14ef77a9 100644
--- a/gui/src/renderer/components/RedeemVoucher.tsx
+++ b/gui/src/renderer/components/RedeemVoucher.tsx
@@ -207,6 +207,7 @@ export function RedeemVoucherSubmitButton() {
 }
 
 interface IRedeemVoucherAlertProps {
+  show: boolean;
   onClose?: () => void;
 }
 
@@ -220,6 +221,7 @@ export function RedeemVoucherAlert(props: IRedeemVoucherAlertProps) {
 
     return (
       <ModalAlert
+        isOpen={props.show}
         buttons={[
           <AppButton.BlueButton key="gotit" onClick={props.onClose}>
             {messages.gettext('Got it!')}
@@ -243,6 +245,7 @@ export function RedeemVoucherAlert(props: IRedeemVoucherAlertProps) {
   } else {
     return (
       <ModalAlert
+        isOpen={props.show}
         buttons={[
           <RedeemVoucherSubmitButton key="submit" />,
           <AppButton.BlueButton key="cancel" disabled={submitting} onClick={props.onClose}>
@@ -273,11 +276,9 @@ export function RedeemVoucherButton(props: IRedeemVoucherButtonProps) {
       <AppButton.GreenButton onClick={onClick} className={props.className}>
         {messages.pgettext('redeem-voucher-alert', 'Redeem voucher')}
       </AppButton.GreenButton>
-      {showAlert && (
-        <RedeemVoucherContainer>
-          <RedeemVoucherAlert onClose={onClose} />
-        </RedeemVoucherContainer>
-      )}
+      <RedeemVoucherContainer>
+        <RedeemVoucherAlert show={showAlert} onClose={onClose} />
+      </RedeemVoucherContainer>
     </>
   );
 }
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index 8f173cab2f..ace08cd694 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -183,26 +183,25 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
         {messages.pgettext('split-tunneling-view', 'Find another app')}
       </StyledBrowseButton>
 
-      {browseError && (
-        <ModalAlert
-          type={ModalAlertType.warning}
-          iconColor={colors.red}
-          message={sprintf(
-            // TRANSLATORS: Error message showed in a dialog when an application failes to launch.
-            messages.pgettext(
-              'split-tunneling-view',
-              'Unable to launch selection. %(detailedErrorMessage)s',
-            ),
-            { detailedErrorMessage: browseError },
-          )}
-          buttons={[
-            <AppButton.BlueButton key="close" onClick={hideBrowseFailureDialog}>
-              {messages.gettext('Close')}
-            </AppButton.BlueButton>,
-          ]}
-          close={hideBrowseFailureDialog}
-        />
-      )}
+      <ModalAlert
+        isOpen={browseError !== undefined}
+        type={ModalAlertType.warning}
+        iconColor={colors.red}
+        message={sprintf(
+          // TRANSLATORS: Error message showed in a dialog when an application failes to launch.
+          messages.pgettext(
+            'split-tunneling-view',
+            'Unable to launch selection. %(detailedErrorMessage)s',
+          ),
+          { detailedErrorMessage: browseError },
+        )}
+        buttons={[
+          <AppButton.BlueButton key="close" onClick={hideBrowseFailureDialog}>
+            {messages.gettext('Close')}
+          </AppButton.BlueButton>,
+        ]}
+        close={hideBrowseFailureDialog}
+      />
     </>
   );
 }
@@ -279,15 +278,14 @@ function LinuxApplicationRow(props: ILinuxApplicationRowProps) {
           <StyledCellWarningIcon source="icon-alert" tintColor={warningColor} width={18} />
         )}
       </StyledCellButton>
-      {showWarning && (
-        <ModalAlert
-          type={ModalAlertType.warning}
-          iconColor={warningColor}
-          message={warningMessage}
-          buttons={warningDialogButtons}
-          close={hideWarningDialog}
-        />
-      )}
+      <ModalAlert
+        isOpen={showWarning}
+        type={ModalAlertType.warning}
+        iconColor={warningColor}
+        message={warningMessage}
+        buttons={warningDialogButtons}
+        close={hideWarningDialog}
+      />
     </>
   );
 }
diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
index 16070a1531..76638acbcc 100644
--- a/gui/src/renderer/components/Support.tsx
+++ b/gui/src/renderer/components/Support.tsx
@@ -132,7 +132,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
   };
 
   public render() {
-    const { sendState, showOutdatedVersionWarning } = this.state;
+    const { sendState } = this.state;
     const header = (
       <SettingsHeader>
         <HeaderTitle>{messages.pgettext('support-view', 'Report a problem')}</HeaderTitle>
@@ -168,8 +168,8 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
             {content}
           </StyledContentContainer>
 
-          {sendState === SendState.confirm && this.renderNoEmailDialog()}
-          {showOutdatedVersionWarning && this.renderOutdateVersionWarningDialog()}
+          {this.renderNoEmailDialog()}
+          {this.renderOutdateVersionWarningDialog()}
         </StyledContainer>
       </Layout>
     );
@@ -247,6 +247,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
     );
     return (
       <ModalAlert
+        isOpen={this.state.sendState === SendState.confirm}
         type={ModalAlertType.warning}
         message={message}
         buttons={[
@@ -276,6 +277,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
     );
     return (
       <ModalAlert
+        isOpen={this.state.showOutdatedVersionWarning}
         type={ModalAlertType.warning}
         message={message}
         buttons={[
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 123f4b3b42..7456db290d 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -256,7 +256,7 @@ export default class WireguardSettings extends React.Component<IProps, IState> {
           </NavigationContainer>
         </SettingsContainer>
 
-        {this.state.showMultihopConfirmationDialog && this.renderMultihopConfirmation()}
+        {this.renderMultihopConfirmation()}
       </Layout>
     );
   }
@@ -283,6 +283,7 @@ export default class WireguardSettings extends React.Component<IProps, IState> {
   private renderMultihopConfirmation = () => {
     return (
       <ModalAlert
+        isOpen={this.state.showMultihopConfirmationDialog}
         type={ModalAlertType.info}
         message={
           // TRANSLATORS: Warning text in a dialog that is displayed after a setting is toggled.