modals

src/application/App.tsx

@@ -22,11 +22,8 @@ import IconGitHubSolid from "@apollo/icons/small/IconGitHubSolid.svg";
 import { SettingsModal } from "./components/Layouts/SettingsModal";
 import Logo from "@apollo/icons/logos/LogoSymbol.svg";
 import { BannerAlert } from "./components/BannerAlert";
-import {
-  useDevToolsActorRef,
-  useDevToolsSelector,
-} from "./machines/devtoolsMachine";
-import { ClientNotFoundModal } from "./components/ClientNotFoundModal";
+import { useDevToolsActorRef } from "./machines/devtoolsMachine";
+import { Modals } from "./components/Modals/Modals";
 import { ButtonGroup } from "./components/ButtonGroup";
 import {
   GitHubIssueLink,
@@ -85,12 +82,6 @@ export const App = () => {
     [onDevToolsEvent, refetch]
   );
 
-  const modalOpen = useDevToolsSelector((state) => state.context.modalOpen);
-  const isErrorState = useDevToolsSelector(
-    (state) => state.value.initialization === "error"
-  );
-  console.log("show error modal!", isErrorState);
-
   useActorEvent("registerClient", () => {
     send({ type: "client.register" });
     // Unfortunately after we clear the store above, the query ends up "stuck"
@@ -150,11 +141,7 @@ export const App = () => {
   return (
     <>
       <SettingsModal open={settingsOpen} onOpen={setSettingsOpen} />
-      <ClientNotFoundModal
-        open={modalOpen}
-        onClose={() => send({ type: "closeModal" })}
-        onRetry={() => send({ type: "connection.retry" })}
-      />
+      <Modals />
       <BannerAlert />
       <Tabs
         value={selected}

src/application/components/GitHubIssueLink.tsx

@@ -21,7 +21,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"})
 `,
   reproduction: `### Link to Reproduction
 <!-- Please provide a link to the reproduction of the issue. -->

src/application/components/ClientNotFoundModal.tsx → src/application/components/Modals/ClientNotFoundModal.tsx

@@ -1,8 +1,8 @@
-import { Button } from "./Button";
-import { ButtonGroup } from "./ButtonGroup";
-import { Disclosure } from "./Disclosure";
-import { GitHubIssueLink, SECTIONS, LABELS } from "./GitHubIssueLink";
-import { Modal } from "./Modal";
+import { Button } from "../Button";
+import { ButtonGroup } from "../ButtonGroup";
+import { Disclosure } from "../Disclosure";
+import { GitHubIssueLink, SECTIONS, LABELS } from "../GitHubIssueLink";
+import { Modal } from "../Modal";
 import IconGitHubSolid from "@apollo/icons/small/IconGitHubSolid.svg";
 
 interface ClientNotFoundModalProps {

src/application/components/ClientNotFoundModal.vscode.tsx → src/application/components/Modals/ClientNotFoundModal.vscode.tsx

@@ -1,7 +1,7 @@
-import { CodeBlock } from "./CodeBlock";
-import { Disclosure } from "./Disclosure";
-import { GitHubIssueLink, SECTIONS, LABELS } from "./GitHubIssueLink";
-import { Modal } from "./Modal";
+import { CodeBlock } from "../CodeBlock";
+import { Disclosure } from "../Disclosure";
+import { GitHubIssueLink, SECTIONS, LABELS } from "../GitHubIssueLink";
+import { Modal } from "../Modal";
 import { expectTypeOf } from "expect-type";
 
 expectTypeOf<typeof import("./ClientNotFoundModal.jsx")>().toMatchTypeOf<

src/application/components/Modals/Modals.tsx

@@ -0,0 +1,55 @@
+import { useSelector } from "@xstate/react";
+import {
+  useDevToolsActorRef,
+  useDevToolsSelector,
+} from "../../machines/devtoolsMachine";
+import { ClientNotFoundModal } from "./ClientNotFoundModal";
+import { PortNotOpenModal } from "./PortNotOpenModal";
+import { UnknownErrorModal } from "./UnknownErrorModal";
+
+export function Modals() {
+  const { send } = useDevToolsActorRef();
+
+  let modalHandled = false;
+  const modals: React.ReactNode[] = [];
+
+  const openPortNotOpenModal = useDevToolsSelector(
+    (state) => state.context.listening === false
+  );
+  modals.push(
+    <PortNotOpenModal
+      key="portNotOpen"
+      open={!modalHandled && openPortNotOpenModal}
+    />
+  );
+  modalHandled ||= openPortNotOpenModal;
+
+  const reconnectActor = useDevToolsSelector(
+    (state) => state.children.reconnect
+  );
+  const openClientNotFoundModal = useSelector(
+    reconnectActor,
+    (state) => state?.status === "active" && state.value === "notFound"
+  );
+  modals.push(
+    <ClientNotFoundModal
+      key="clientNotFound"
+      open={!modalHandled && openClientNotFoundModal}
+      onClose={() => {}}
+      onRetry={() => send({ type: "connection.retry" })}
+    />
+  );
+  modalHandled ||= openClientNotFoundModal;
+
+  const isErrorState = useDevToolsSelector(
+    (state) => state.value.initialization === "error"
+  );
+  modals.push(
+    <UnknownErrorModal
+      key="unknownError"
+      open={!modalHandled && isErrorState}
+    />
+  );
+
+  return <>{modals}</>;
+}

src/application/components/Modals/PortNotOpenModal.tsx

@@ -0,0 +1 @@
+export { UnknownErrorModal as PortNotOpenModal } from "./UnknownErrorModal";

src/application/components/Modals/PortNotOpenModal.vscode.tsx

@@ -0,0 +1,74 @@
+import { expectTypeOf } from "expect-type";
+import { Button } from "../Button";
+import { GitHubIssueLink, SECTIONS, LABELS } from "../GitHubIssueLink";
+import { Modal } from "../Modal";
+import IconGitHubSolid from "@apollo/icons/small/IconGitHubSolid.svg";
+import { Disclosure } from "../Disclosure";
+import { useDevToolsSelector } from "../../machines/devtoolsMachine";
+
+expectTypeOf<typeof import("./PortNotOpenModal.jsx")>().toMatchTypeOf<
+  typeof import("./PortNotOpenModal.vscode.jsx")
+>();
+
+interface ErrorModalProps {
+  open: boolean;
+}
+
+export function PortNotOpenModal({ open }: ErrorModalProps) {
+  const port = useDevToolsSelector(
+    (state) => state.context.port ?? "<default port>"
+  );
+  return (
+    <Modal open={open} onClose={() => false} size="xl">
+      <Modal.Header>
+        <Modal.Title>DevTools Server not running on port {port}</Modal.Title>
+      </Modal.Header>{" "}
+      <Modal.Description>
+        The Apollo Client DevTools Server is currently not running. This can
+        have one of the following reasons:
+      </Modal.Description>
+      <Modal.Body>
+        <div className="mt-4 flex flex-col gap-2">
+          <Disclosure>
+            <Disclosure.Button>
+              Another instance of the DevTools is already running on port {port}
+            </Disclosure.Button>
+            <Disclosure.Panel>TODO</Disclosure.Panel>
+          </Disclosure>
+          <Disclosure>
+            <Disclosure.Button>
+              Another program is already running on port {port}
+            </Disclosure.Button>
+            <Disclosure.Panel>TODO</Disclosure.Panel>
+          </Disclosure>
+          <Disclosure>
+            <Disclosure.Button>
+              The DevTools were stopped manually
+            </Disclosure.Button>
+            <Disclosure.Panel>TODO</Disclosure.Panel>
+          </Disclosure>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          asChild
+          size="md"
+          variant="secondary"
+          icon={<IconGitHubSolid />}
+        >
+          <GitHubIssueLink
+            className="no-underline"
+            labels={[LABELS.bug]}
+            body={`
+${SECTIONS.defaultDescription}
+${SECTIONS.apolloClientVersion}
+${SECTIONS.devtoolsVersion}
+`}
+          >
+            <span>Create an issue</span>
+          </GitHubIssueLink>
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

src/application/components/Modals/UnknownErrorModal.tsx

@@ -0,0 +1,44 @@
+import { Button } from "../Button";
+import { GitHubIssueLink, SECTIONS, LABELS } from "../GitHubIssueLink";
+import { Modal } from "../Modal";
+import IconGitHubSolid from "@apollo/icons/small/IconGitHubSolid.svg";
+
+interface ErrorModalProps {
+  open: boolean;
+}
+
+export function UnknownErrorModal({ open }: ErrorModalProps) {
+  return (
+    <Modal open={open} onClose={() => false} size="xl">
+      <Modal.Header>
+        <Modal.Title>Error</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Modal.Description>
+          An unknown error occured. <br />
+          If this error persists, please open an issue on GitHub.
+        </Modal.Description>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          asChild
+          size="md"
+          variant="secondary"
+          icon={<IconGitHubSolid />}
+        >
+          <GitHubIssueLink
+            className="no-underline"
+            labels={[LABELS.bug]}
+            body={`
+${SECTIONS.defaultDescription}
+${SECTIONS.apolloClientVersion}
+${SECTIONS.devtoolsVersion}
+`}
+          >
+            <span>Create an issue</span>
+          </GitHubIssueLink>
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}