From 977e0c9008088c2945dd18f3489828e00a51f78c Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Tue, 20 Jun 2023 14:57:23 -0400
Subject: [PATCH] Updates to the server button at the top right (#1141)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
It now always shows a menu, so the user doesn’t unexpectedly perform an
action.
---
.../desktop-client/e2e/onboarding.test.js | 1 +
.../src/components/LoggedInUser.js | 130 ++++++++++--------
.../src/components/manager/ManagementApp.js | 5 +-
upcoming-release-notes/1141.md | 6 +
4 files changed, 87 insertions(+), 55 deletions(-)
create mode 100644 upcoming-release-notes/1141.md
diff --git a/packages/desktop-client/e2e/onboarding.test.js b/packages/desktop-client/e2e/onboarding.test.js
index 05bc3ff77..92c6b0846 100644
--- a/packages/desktop-client/e2e/onboarding.test.js
+++ b/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?');
});
diff --git a/packages/desktop-client/src/components/LoggedInUser.js b/packages/desktop-client/src/components/LoggedInUser.js
index 0ff1c7534..9b9b68aaa 100644
--- a/packages/desktop-client/src/components/LoggedInUser.js
+++ b/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));
diff --git a/packages/desktop-client/src/components/manager/ManagementApp.js b/packages/desktop-client/src/components/manager/ManagementApp.js
index 5702ad46f..6e8d52e5f 100644
--- a/packages/desktop-client/src/components/manager/ManagementApp.js
+++ b/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>
diff --git a/upcoming-release-notes/1141.md b/upcoming-release-notes/1141.md
new file mode 100644
index 000000000..a05266c95
--- /dev/null
+++ b/upcoming-release-notes/1141.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [j-f1]
+---
+
+Make the behavior of the “Server†button in the top-right corner more consistent
--
GitLab