Make upgrade details conditionally render based on if an upgrade exists

Render NoUpdateAvailable if the app upgrade does not exist

2 files changed, 52 insertions, 50 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx
index 5d56347a50..f22ff484dd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx
@@ -1,9 +1,16 @@
 import styled from 'styled-components';
 
+import { messages } from '../../../../shared/gettext';
 import { useHistory } from '../../../lib/history';
+import { AppNavigationHeader } from '../../app-navigation-header';
 import { BackAction } from '../../KeyboardNavigation';
+import { SettingsContainer } from '../../Layout';
 import { Layout } from '../../Layout';
+import { NavigationContainer } from '../../NavigationContainer';
+import { NavigationScrollbars } from '../../NavigationScrollbars';
 import { Footer, UpgradeDetails } from './components';
+import { NoUpgradeAvailable } from './components/no-upgrade-available';
+import { useHasUpgrade } from './hooks';
 
 const StyledFooter = styled.div`
   // TODO: Use color from Colors
@@ -15,11 +22,24 @@ const StyledFooter = styled.div`
 
 export const AppUpgradeView = () => {
   const { pop } = useHistory();
+  const hasUpgrade = useHasUpgrade();
 
   return (
     <BackAction action={pop}>
       <Layout>
-        <UpgradeDetails />
+        <SettingsContainer>
+          <NavigationContainer>
+            <AppNavigationHeader
+              title={
+                // TRANSLATORS: Title in navigation bar
+                messages.pgettext('app-upgrade-view', 'Update available')
+              }
+            />
+            <NavigationScrollbars>
+              {hasUpgrade ? <UpgradeDetails /> : <NoUpgradeAvailable />}
+            </NavigationScrollbars>
+          </NavigationContainer>
+        </SettingsContainer>
         <StyledFooter>
           <Footer />
         </StyledFooter>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx
index 4d227496de..1e6bc2b7d4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx
@@ -3,12 +3,9 @@ import { sprintf } from 'sprintf-js';
 import { messages } from '../../../../../../shared/gettext';
 import { Container, Flex, TitleBig, TitleLarge } from '../../../../../lib/components';
 import { formatHtml } from '../../../../../lib/html-formatter';
-import { AppNavigationHeader } from '../../../../app-navigation-header';
 import { ChangelogList } from '../../../../changelog-list';
-import { SettingsContainer } from '../../../../Layout';
-import { NavigationContainer } from '../../../../NavigationContainer';
-import { NavigationScrollbars } from '../../../../NavigationScrollbars';
 import { HeaderSubTitle } from '../../../../SettingsHeader';
+import { AppUpgradeHeader } from '../app-upgrade-header';
 import { NoChangelogUpdates } from './components';
 import { useCacheDir, useChangelog, useShowChangelogList, useTitle } from './hooks';
 
@@ -19,52 +16,37 @@ export function UpgradeDetails() {
   const cacheDir = useCacheDir();
 
   return (
-    <SettingsContainer>
-      <NavigationContainer>
-        <AppNavigationHeader
-          title={
-            // TRANSLATORS: Title in navigation bar
+    <Flex $flexDirection="column" $gap="large" $padding={{ bottom: 'medium' }}>
+      <AppUpgradeHeader>
+        <TitleBig as="h2">
+          {
+            // TRANSLATORS: Main title for the update available view
             messages.pgettext('app-upgrade-view', 'Update available')
           }
-        />
-        <NavigationScrollbars>
-          <Flex $flexDirection="column" $gap="large" $padding={{ bottom: 'medium' }}>
-            <Container size="4" $flexDirection="column" $gap="small">
-              <TitleBig as="h2">
-                {
-                  // TRANSLATORS: Main title for the update available view
-                  messages.pgettext('app-upgrade-view', 'Update available')
-                }
-              </TitleBig>
-              {cacheDir !== undefined && (
-                <HeaderSubTitle>
-                  {formatHtml(
-                    sprintf(
-                      messages.pgettext(
-                        'app-upgrade-view',
-                        'Installer will be downloaded to <b>%(cacheDir)s</b>.',
-                      ),
-                      { cacheDir },
-                    ),
-                  )}
-                </HeaderSubTitle>
-              )}
-            </Container>
-            <Flex $flexDirection="column" $gap="small">
-              <Container size="4">
-                <TitleLarge as="h2">{title}</TitleLarge>
-              </Container>
-              <Container size="3" $flexDirection="column">
-                {showChangelogList ? (
-                  <ChangelogList changelog={changelog} />
-                ) : (
-                  <NoChangelogUpdates />
-                )}
-              </Container>
-            </Flex>
-          </Flex>
-        </NavigationScrollbars>
-      </NavigationContainer>
-    </SettingsContainer>
+        </TitleBig>
+        {cacheDir !== undefined && (
+          <HeaderSubTitle>
+            {formatHtml(
+              sprintf(
+                // TRANSLATORS: Info about which directory the app update will be downloaded to
+                messages.pgettext(
+                  'app-upgrade-view',
+                  'Installer will be downloaded to <b>%(cacheDir)s</b>.',
+                ),
+                { cacheDir },
+              ),
+            )}
+          </HeaderSubTitle>
+        )}
+      </AppUpgradeHeader>
+      <Flex $flexDirection="column" $gap="small">
+        <Container size="4">
+          <TitleLarge as="h2">{title}</TitleLarge>
+        </Container>
+        <Container size="3" $flexDirection="column">
+          {showChangelogList ? <ChangelogList changelog={changelog} /> : <NoChangelogUpdates />}
+        </Container>
+      </Flex>
+    </Flex>
   );
 }