From d9ad2a893290cb945d66b6af2ff112b4bdc972e7 Mon Sep 17 00:00:00 2001 From: Lorenzo Blasa Date: Thu, 5 Oct 2023 04:37:16 -0700 Subject: [PATCH] Remove troubleshoot from here Summary: Simplify how messages (state updates) are shown in Flipper UI. This main change was introduced as a way to show the 'Start' server button whenever we were in a disconnected state. This is not as simple as the server may be restarting or the client may be even have reset the WS connection. Hence you the experience where this UI is shown and immediately dismissed. This UI is only ever shown if at one point the server was alive, period. So, in this case, either the server becomes available again OR the user quits the PWA/tab/browser and launches again. IMHO, this is a better experience that totally assuming the server is dead. In a next iteration, we can be more clever and have a timeout such that if after a set period of time the server doesn't become online, then we show a button to start (or force kill) the server. Reviewed By: aigoncharov Differential Revision: D49915698 fbshipit-source-id: 03fcc150ed1f1303d1d727c82a71eb32616208e8 --- desktop/flipper-ui-browser/src/global.tsx | 1 - desktop/flipper-ui-browser/src/index.tsx | 11 +- desktop/static/index.web.dev.html | 84 ++++--------- desktop/static/index.web.html | 137 +++------------------- 4 files changed, 36 insertions(+), 197 deletions(-) diff --git a/desktop/flipper-ui-browser/src/global.tsx b/desktop/flipper-ui-browser/src/global.tsx index 21158a317..5726c1831 100644 --- a/desktop/flipper-ui-browser/src/global.tsx +++ b/desktop/flipper-ui-browser/src/global.tsx @@ -19,6 +19,5 @@ declare global { flipperShowMessage?(message: string): void; flipperHideMessage?(): void; - flipperShowNoConnection?(): void; } } diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx index 237170b86..f0171a2c0 100644 --- a/desktop/flipper-ui-browser/src/index.tsx +++ b/desktop/flipper-ui-browser/src/index.tsx @@ -78,7 +78,7 @@ async function start() { window.flipperHideMessage?.(); break; case FlipperServerState.DISCONNECTED: - window?.flipperShowNoConnection?.(); + window.flipperShowMessage?.('Waiting for server...'); break; } }, @@ -98,13 +98,6 @@ async function start() { initializeRenderHost(flipperServer, flipperServerConfig); initializePWA(); - // By turning this in a require, we force the JS that the body of this module (init) has completed (initializeElectron), - // before starting the rest of the Flipper process. - // This prevent issues where the render host is referred at module initialisation level, - // but not set yet, which might happen when using normal imports. - // TODO: remove - window.flipperShowMessage?.('Connected to Flipper Server successfully'); - // @ts-ignore // eslint-disable-next-line import/no-commonjs require('flipper-ui-core').startFlipperDesktop(flipperServer); @@ -113,7 +106,7 @@ async function start() { start().catch((e) => { console.error('Failed to start flipper-ui-browser', e); - window.flipperShowMessage?.('Failed to start flipper-ui-browser: ' + e); + window.flipperShowMessage?.('Failed to start UI with error: ' + e); }); async function initializePWA() { diff --git a/desktop/static/index.web.dev.html b/desktop/static/index.web.dev.html index 9381024a6..6114d95aa 100644 --- a/desktop/static/index.web.dev.html +++ b/desktop/static/index.web.dev.html @@ -98,29 +98,6 @@
-
- Flipper is not running in the background - -

It can be started by clicking the button below.

-
- -
-
-

- Flipper will automatically reload once the connection is re-established. -

-

If is taking a bit longer than it should, you can manually start Flipper.

-

From the terminal, please run:

- -
-
-

shell

-
-
-

> open -a 'Flipper' --args '--server'

-
-
-
@@ -133,7 +110,6 @@ (async function () { // Line below needed to make Metro work. Alternatives could be considered. window.global = window; - let suppressErrors = false; let connected = false; // Listen to changes in the network state, reload when online. @@ -143,19 +119,24 @@ window.location.reload(); }); - function toggleTroubleshoot(troubleshootOn) { - const root = document.getElementById('root'); - const troubleshoot = document.getElementById('troubleshoot'); - - if (troubleshootOn) { - root.style.display = 'none'; - troubleshoot.style.display = 'flex'; - } else { - root.style.display = 'block'; - troubleshoot.style.display = 'none'; - } + const root = document.getElementById('root'); + const troubleshootBox = document.getElementById('troubleshoot'); + + function showMessage(text, centered) { + troubleshootBox.innerText = text; + + root.style.display = 'none'; + troubleshootBox.style.display = 'flex'; } + function hideMessage() { + root.style.display = 'block'; + troubleshootBox.style.display = 'none'; + } + + window.flipperShowMessage = showMessage; + window.flipperHideMessage = hideMessage; + const params = new URL(location.href).searchParams; let token = params.get('token'); if (!token) { @@ -173,8 +154,7 @@ if (typeof message.event === 'string') { switch (message.event) { case 'hasErrors': { - showMessage(message.payload); - suppressErrors = true; + console.warn('Error message received'. message.payload); break; } case 'plugins-source-updated': { @@ -190,41 +170,17 @@ socket.addEventListener('error', (e) => { if (!connected) { - showMessage('Socket failed to connect. Is the server running? Have you provided a valid authentication token?'); + console.warn('Socket failed to connect. Is the server running? Have you provided a valid authentication token?'); } else { - showMessage('Socket failed with error.'); + console.warn('Socket failed with error.', e); } - - suppressErrors = true; }); socket.addEventListener('open', () => { connected = true; }) - function showMessage(text) { - // Dismiss the troubleshoot as otherwise no other message is shown. - toggleTroubleshoot(false); - - if (suppressErrors) { - return; - } - - const box = document.getElementById('loading'); - if (box) { - box.textContent = text; - } - } - - window.flipperShowMessage = showMessage; - window.flipperShowNoConnection = () => { - toggleTroubleshoot(true); - }; - window.flipperHideMessage = () => { - toggleTroubleshoot(false); - } - // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases) try { if (window.flipperConfig.theme === 'dark') { @@ -242,7 +198,7 @@ script.src = window.flipperConfig.entryPoint; script.onerror = (e) => { - showMessage('Failed to load entry point. Check Chrome console for more info.'); + showMessage('Failed to load entry point. Check Chrome Dev Tools console for more info.'); }; document.body.appendChild(script); diff --git a/desktop/static/index.web.html b/desktop/static/index.web.html index 3f63b037b..08b9b2b5c 100644 --- a/desktop/static/index.web.html +++ b/desktop/static/index.web.html @@ -39,98 +39,15 @@ text-align: center; } - .console { - font-family: 'Fira Mono'; - width: 600px; - height: 250px; - box-sizing: border-box; - margin: auto; - } - - .console header { - border-top-left-radius: 15px; - border-top-right-radius: 15px; - background-color: #9254de; - height: 45px; - line-height: 45px; - text-align: center; - color: white; - } - - .console .consolebody { - border-bottom-left-radius: 15px; - border-bottom-right-radius: 15px; - box-sizing: border-box; - padding: 0px 10px; - height: calc(100% - 40px); - overflow: scroll; - background-color: #000; - color: white; - text-align: left; - } - - input[type="submit"] { - background-color: #9254de; - color: white; - font-family: system-ui; - font-size: 15px; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - } - - input[type="submit"]:hover { - background-color: #722ed1; - } - - input[type="submit"]:active { - background-color: #722ed1; - } - #troubleshoot { display: none; background-color: white; } - - .__infinity-dev-box-error { - background-color: red; - font-family: monospace; - font-size: 12px; - z-index: 10; - bottom: 0; - left: 0; - position: absolute; - } -
-
- Flipper is not running in the background - -

It can be started by clicking the button below.

-
- -
-
-

- Flipper will automatically reload once the connection is re-established. -

-

If is taking a bit longer than it should, you can manually start Flipper.

-

From the terminal, please run:

- -
-
-

shell

-
-
-

> open -a 'Flipper' --args '--server'

-
-
-
@@ -139,7 +56,6 @@
-