Rework reconnect logic, add "Port could not be opened" modal #1513
Conversation
phryneas
force-pushed
the
pr/vscode-connect-info
branch
from
f79588c
to
f68639f
Compare
phryneas
force-pushed
the
pr/port-info
branch
from
202b490
to
2648fde
Compare
| onClose={() => send({ type: "closeModal" })} | ||
| onRetry={() => send({ type: "retry" })} | ||
| /> | ||
| <Modals /> |
There was a problem hiding this comment.
All modals live in that file now.
| <BannerAlert /> | ||
| <Tabs | ||
| value={selected} | ||
| onChange={(screen) => currentScreen(screen)} | ||
| className="flex flex-col h-screen bg-primary dark:bg-primary-dark" | ||
| > | ||
| <div className="flex items-center border-b border-b-primary dark:border-b-primary-dark gap-4 px-4"> | ||
| <a | ||
| <ExternalLink |
There was a problem hiding this comment.
<a tags in VSCode cannot open new windows, so I need a component for that. The base implementation really just renders an a tag, and we have a .vscode.tsx version of that.
| @@ -21,7 +22,7 @@ export const SECTIONS = { | |||
| <!-- Please provide the version of \`@apollo/client\` you are using. --> | |||
| `, | |||
| devtoolsVersion: `### Apollo Client Devtools version | |||
| ${VERSION} | |||
| ${VERSION} (${__IS_FIREFOX__ ? "Firefox" : __IS_VSCODE__ ? "VSCode" : "Chrome"}) | |||
There was a problem hiding this comment.
Some additional info can be very helpful here to distinguish the different builds in bug reports.
| @@ -18,15 +18,17 @@ interface ModalProps { | |||
| className?: string; | |||
| children: ReactNode; | |||
| open: boolean; | |||
| onClose: (value: boolean) => void; | |||
| onClose?: (value: boolean) => void; | |||
There was a problem hiding this comment.
Making onClose optional since most of our modals cannot be closed.
| open: boolean; | ||
| onClose: () => void; | ||
| onRetry: () => void; | ||
| } |
There was a problem hiding this comment.
This modal cannot be closed anymore - before, closing it would leave the user with a somewhat defunct UI, so it never made much sense to me. Going this step massively simplifies logic.
| invoke: { | ||
| id: "reconnect", | ||
| src: "reconnect", | ||
| }, |
There was a problem hiding this comment.
This invokes the child machine while in this state and stops it as soon as this state is left.
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export const DevToolsMachineContext = createContext<DevToolsActor | null>(null); |
There was a problem hiding this comment.
We now use Context to pass this down into the React app - but not the createContext from xState, as that would create the actor from the machine and we want to create the actor outside of React (the Actor renders React).
| "reconnect.retry": "retrying", | ||
| }, | ||
| entry: ["notifyNotFound"], | ||
| }, |
There was a problem hiding this comment.
Previously, this also had a timedout state, but we never triggered it from anywhere.
| }, | ||
| }, | ||
| }, | ||
| notFound: { |
There was a problem hiding this comment.
The modal is now shown while the machine is in this state. If we wanted to show the modal in more states that just one, we could look into tag.
| export const reconnectMachine = setup({ | ||
| delays: { connectTimeout: 500 }, | ||
| }).createMachine({ |
There was a problem hiding this comment.
In VSCode, we want to show this from the start, as it has valuable information.
We will wait for a very short amount of time though, in case something immediately connects - that way we avoid flickering of the modal.
phryneas
force-pushed
the
pr/vscode-connect-info
branch
from
f68639f
to
961a1ae
Compare
phryneas
force-pushed
the
pr/port-info
branch
from
405da4b
to
6975f63
Compare
commit: |
Also see the accompanying apollographql/vscode-graphql#197