Skip to content
This repository has been archived by the owner on Nov 22, 2024. It is now read-only.

Commit

Permalink
DIY fix connectivity modal
Browse files Browse the repository at this point in the history 
Reviewed By: LukeDefeo, lblasa

Differential Revision: D59865310

fbshipit-source-id: bcfd9fd02bb33d889efa071c1474896689372f21
  • Loading branch information
@antonk52 @facebook-github-bot
antonk52 authored and facebook-github-bot committed Jul 18, 2024
1 parent 85a0256 commit 5840e87
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 21 deletions.
147 changes: 126 additions & 21 deletions desktop/flipper-ui/src/app-connection-updates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@
*/

import {css} from '@emotion/css';
import {Button, message, notification, Typography} from 'antd';
import {Button, message, Modal, notification, Typography} from 'antd';
import React from 'react';
import {Layout} from './ui';
import {Dialog} from 'flipper-plugin';
import {getFlipperServer} from './flipperServer';

type ConnectionUpdate = {
key: string;
type: 'loading' | 'info' | 'success' | 'success-info' | 'error' | 'warning';
os: string;
app: string;
device: string;
title: string;
Expand Down Expand Up @@ -97,7 +100,7 @@ export const connectionUpdate = (
duration = 3;
} else if (update.type === 'loading') {
// seconds until show how to debug hanging connection
duration = 10;
duration = 30;
}
message.open({
key: update.key,
Expand All @@ -111,29 +114,131 @@ export const connectionUpdate = (
message.destroy(update.key);
}
: undefined,
// NOTE: `onClose` is only called when the message is closed by antd because of `duration`
// It is not closed when we call `message.destroy(key)`.
// Thus we can use it trigger a timeout modal for hanging "attempting to connect" messages
onClose: () => {
// only called if closed by timeout
console.log('on close called for ', update.key);
if (update.type === 'loading') {
// TODO show conect timeout modal NEXT DIFF
console.log('show a modal with step');

notification.error({
key: update.key,
message: 'App failed to connect',
description: (
<div>
<div>To fix try the following</div>
<div>uno</div>
<div>dos</div>
<div>tres</div>
</div>
),
duration: 0,
onClose: () => notification.close(update.key),
});
Dialog.showModal((hide) => (
<DIYConnectivityFixModal
onHide={hide}
app={update.app}
os={update.os}
/>
));
}
},
});
}
};

const styles = {
numberedList: {
listStyle: 'auto',
paddingLeft: 16,
display: 'flex',
flexDirection: 'column',
gap: 4,
} satisfies React.CSSProperties,
title: {
marginBottom: 8,
} satisfies React.CSSProperties,
};

function DIYConnectivityFixModal({
app,
os,
onHide,
}: {
app: string;
os: string;
onHide: () => void;
}) {
return (
<Modal onCancel={onHide} open footer={null}>
<div>
<Typography.Title style={styles.title}>
Connecting to {app} has timed out.
</Typography.Title>
<Typography.Paragraph>
This is usually can be fixed in a few ways. Try the following in the
order presented.
</Typography.Paragraph>
<Typography.Title level={2} style={styles.title}>
Least involved
</Typography.Title>
<ol style={styles.numberedList}>
<li>
<Typography.Text>
Completly close the app on the device
</Typography.Text>
</li>
<li>
<Button
type="primary"
size="small"
onClick={() => {
getFlipperServer()
.exec(os === 'iOS' ? 'ios-idb-kill' : 'android-adb-kill')
.then(() => {
notification.info({
message: `Restarted ${os} connections`,
});
})
.catch((e) => {
notification.error({
message: `Failed to restart ${os} connections`,
description: e.message,
});
});
}}>
Click to restart{' '}
{os === 'iOS'
? 'IDB (iOS connections)'
: 'ADB (Android connections)'}
</Button>
</li>
<li>
<Typography.Text>Launch the app on the device</Typography.Text>
</li>
</ol>
<Typography.Title level={2} style={styles.title}>
More involved
</Typography.Title>
<ol style={styles.numberedList}>
<li>
<Typography.Text>Restart device</Typography.Text>
</li>
<li>
<Button
type="primary"
size="small"
onClick={() => {
getFlipperServer()
.exec('restart')
.then(() => {
notification.info({
message: `Restarted ${os} connections`,
});
})
.catch((e) => {
notification.error({
message: `Failed to restart ${os} connections`,
description: e.message,
});
});
}}>
Click to restart Flipper
</Button>
</li>
</ol>
<Typography.Title level={2} style={styles.title}>
Most involved
</Typography.Title>
<Typography.Paragraph>
This can be frequently fixed by restarting your computer.
</Typography.Paragraph>
</div>
</Modal>
);
}
5 changes: 5 additions & 0 deletions desktop/flipper-ui/src/dispatcher/flipperServer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export function connectFlipperServerToStore(
type: 'loading',
app: client.appName,
device: client.deviceName,
os: client.os,
title: 'is attempting to connect...',
},
troubleshootConnection,
Expand All @@ -113,6 +114,7 @@ export function connectFlipperServerToStore(
{
key: buildGenericClientId(client),
type,
os: client.os,
app: client.appName,
device: client.deviceName,
title: 'failed to establish a connection',
Expand Down Expand Up @@ -161,6 +163,7 @@ export function connectFlipperServerToStore(
key: buildGenericClientId(client),
type: 'info',
app: client.appName,
os: client.os,
device: client.deviceName,
title: step,
},
Expand All @@ -182,6 +185,7 @@ export function connectFlipperServerToStore(
type: 'success',
app: payload.query.app,
device: payload.query.device,
os: payload.query.os,
title: 'successfully connected',
},
troubleshootConnection,
Expand All @@ -198,6 +202,7 @@ export function connectFlipperServerToStore(
key: buildGenericClientIdFromQuery(existingClient.query),
type: 'success-info',
app: existingClient.query.app,
os: existingClient.query.os,
device: existingClient.query.device,
title: 'disconnected',
},
Expand Down

0 comments on commit 5840e87

Please sign in to comment.