Let user open Settings menu in offline mode (#582)

* Let user open Settings menu in offline mode

* Update tests to account for the top bar button behavior change

Author: wojtekn

src/components/tests/topbar.test.tsx

@@ -24,13 +24,11 @@ describe( 'TopBar', () => {
 		jest.clearAllMocks();
 	} );
 	it( 'Test unauthenticated TopBar has the Log in button', async () => {
-		const user = userEvent.setup();
 		const authenticate = jest.fn();
 		( useAuth as jest.Mock ).mockReturnValue( { isAuthenticated: false, authenticate } );
 		await act( async () => render( <TopBar onToggleSidebar={ jest.fn() } /> ) );
+		expect( screen.queryByRole( 'button', { name: 'Account' } ) ).not.toBeInTheDocument();
 		expect( screen.getByRole( 'button', { name: 'Log in' } ) ).toBeVisible();
-		await user.click( screen.getByRole( 'button', { name: 'Log in' } ) );
-		expect( authenticate ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	it( 'Test authenticated TopBar does not have the log in button and it has the settings and account buttons', async () => {
@@ -39,15 +37,6 @@ describe( 'TopBar', () => {
 		expect( screen.queryByRole( 'button', { name: 'Log in' } ) ).not.toBeInTheDocument();
 		expect( screen.getByRole( 'button', { name: 'Account' } ) ).toBeVisible();
 	} );
-	it( 'disables log in button when offline', async () => {
-		( useOffline as jest.Mock ).mockReturnValue( true );
-		( useAuth as jest.Mock ).mockReturnValue( { isAuthenticated: false } );
-		await act( async () => render( <TopBar onToggleSidebar={ jest.fn() } /> ) );
-		const loginButton = screen.getByRole( 'button', { name: 'Log in' } );
-		expect( loginButton ).toHaveAttribute( 'aria-disabled', 'true' );
-		fireEvent.mouseOver( loginButton );
-		expect( screen.getByRole( 'tooltip', { name: 'You’re currently offline.' } ) ).toBeVisible();
-	} );
 
 	it( 'shows offline indicator', async () => {
 		( useOffline as jest.Mock ).mockReturnValue( true );

src/components/top-bar.tsx

@@ -48,9 +48,7 @@ function OfflineIndicator() {
 }
 
 function Authentication() {
-	const { isAuthenticated, authenticate, user } = useAuth();
-	const isOffline = useOffline();
-	const offlineMessage = __( 'You’re currently offline.' );
+	const { isAuthenticated, user } = useAuth();
 	if ( isAuthenticated ) {
 		return (
 			<Button
@@ -66,29 +64,15 @@ function Authentication() {
 	}
 
 	return (
-		<Tooltip
-			disabled={ ! isOffline }
-			icon={ offlineIcon }
-			text={ offlineMessage }
-			placement="right"
-			className="flex"
+		<Button
+			onClick={ () => getIpcApi().showUserSettings() }
+			aria-label={ __( 'Log in' ) }
+			className="flex gap-x-2 justify-between w-full text-white rounded !px-0 !py-1 h-auto active:!text-white hover:!text-white hover:underline items-end"
 		>
-			<Button
-				aria-description={ isOffline ? offlineMessage : '' }
-				aria-disabled={ isOffline }
-				className="flex gap-x-2 justify-between w-full text-white rounded !px-0 !py-1 h-auto active:!text-white hover:!text-white hover:underline items-end"
-				onClick={ () => {
-					if ( isOffline ) {
-						return;
-					}
-					authenticate();
-				} }
-			>
-				<WordPressLogo />
+			<WordPressLogo />
 
-				<div className="text-xs text-right">{ __( 'Log in' ) }</div>
-			</Button>
-		</Tooltip>
+			<div className="text-xs text-right">{ __( 'Log in' ) }</div>
+		</Button>
 	);
 }