Updates to the server button at the top right (#1141)

It now always shows a menu, so the user doesn’t unexpectedly perform an
action.

packages/desktop-client/e2e/onboarding.test.js

@@ -75,6 +75,7 @@ test.describe('Onboarding', () => {
     await configurationPage.startFresh();
 
     await navigation.clickOnNoServer();
+    await page.getByRole('button', { name: 'Start using a server' }).click();
 
     await expect(configurationPage.heading).toHaveText('Where’s the server?');
   });

packages/desktop-client/src/components/LoggedInUser.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 
+import { css } from 'glamor';
+
 import * as actions from 'loot-core/src/client/actions';
 
 import { colors } from '../style';
@@ -9,14 +11,16 @@ import { colors } from '../style';
 import { View, Text, Button, Tooltip, Menu } from './common';
 import { useServerURL } from './ServerContext';
 
+let fade = css.keyframes({
+  '0%': { opacity: 0 },
+  '100%': { opacity: 1 },
+});
+
 function LoggedInUser({
-  files,
-  budgetId,
+  hideIfNoServer,
   userData,
   getUserData,
-  setAppState,
   signOut,
-  pushModal,
   closeBudget,
   style,
   color,
@@ -34,80 +38,98 @@ function LoggedInUser({
     window.__history.push('/change-password');
   }
 
-  function onMenuSelect(type) {
+  async function onMenuSelect(type) {
     setMenuOpen(false);
 
     switch (type) {
       case 'change-password':
         onChangePassword();
         break;
+      case 'sign-in':
+        await closeBudget();
+        window.__history.push('/login');
+        break;
       case 'sign-out':
         signOut();
         break;
+      case 'config-server':
+        await closeBudget();
+        window.__history.push('/config-server');
+        break;
       default:
     }
   }
 
-  async function onClick() {
+  function serverMessage() {
     if (!serverUrl) {
-      await closeBudget();
-      window.__history.push('/config-server');
-    } else if (userData) {
-      setMenuOpen(true);
-    } else {
-      await closeBudget();
-      window.__history.push('/login');
+      return 'No server';
     }
+
+    if (userData?.offline) {
+      return 'Server offline';
+    }
+
+    return 'Server online';
+  }
+
+  if (hideIfNoServer && !serverUrl) {
+    return null;
   }
 
-  if (loading) {
+  if (loading && serverUrl) {
     return (
-      <Text style={[{ color: colors.n5, fontStyle: 'italic' }, style]}>
-        Loading account...
+      <Text
+        style={[
+          {
+            color: colors.n5,
+            fontStyle: 'italic',
+            animationName: fade,
+            animationDuration: '0.2s',
+            animationFillMode: 'both',
+            animationDelay: '0.5s',
+          },
+          style,
+        ]}
+      >
+        Connecting...
       </Text>
     );
-  } else if (userData) {
-    if (userData.offline) {
-      return <View style={[{ color }, style]}>Offline</View>;
-    }
+  }
 
-    return (
-      <View style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
-        <Button bare onClick={onClick} style={{ color }}>
-          {serverUrl ? 'Server' : 'No server'}
-        </Button>
-
-        {menuOpen && (
-          <Tooltip
-            position="bottom-right"
-            style={{ padding: 0 }}
-            onClose={() => setMenuOpen(false)}
-          >
-            <Menu
-              onMenuSelect={onMenuSelect}
-              items={[
-                { name: 'change-password', text: 'Change password' },
-                { name: 'sign-out', text: 'Sign out' },
-              ]}
-            />
-          </Tooltip>
-        )}
-      </View>
-    );
-  } else {
-    return (
-      <Button bare onClick={onClick} style={[{ color }, style]}>
-        Not logged in
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
+      <Button bare onClick={() => setMenuOpen(true)} style={{ color }}>
+        {serverMessage()}
       </Button>
-    );
-  }
+
+      {menuOpen && (
+        <Tooltip
+          position="bottom-right"
+          style={{ padding: 0 }}
+          onClose={() => setMenuOpen(false)}
+        >
+          <Menu
+            onMenuSelect={onMenuSelect}
+            items={[
+              serverUrl &&
+                !userData?.offline && {
+                  name: 'change-password',
+                  text: 'Change password',
+                },
+              serverUrl && { name: 'sign-out', text: 'Sign out' },
+              {
+                name: 'config-server',
+                text: serverUrl ? 'Change server URL' : 'Start using a server',
+              },
+            ]}
+          />
+        </Tooltip>
+      )}
+    </View>
+  );
 }
 
 export default connect(
-  state => ({
-    userData: state.user.data,
-    files: state.budgets.allFiles,
-    budgetId: state.prefs.local && state.prefs.local.id,
-  }),
+  state => ({ userData: state.user.data }),
   actions,
 )(withRouter(LoggedInUser));

packages/desktop-client/src/components/manager/ManagementApp.js

@@ -182,7 +182,10 @@ function ManagementApp({
                   <Switch>
                     <Route exact path="/config-server" children={null} />
                     <Route exact path="/">
-                      <LoggedInUser style={{ padding: '4px 7px' }} />
+                      <LoggedInUser
+                        hideIfNoServer
+                        style={{ padding: '4px 7px' }}
+                      />
                     </Route>
                   </Switch>
                 </View>

upcoming-release-notes/1141.md

+---
+category: Enhancements
+authors: [j-f1]
+---
+
+Make the behavior of the “Server” button in the top-right corner more consistent