Update client not found modal to make creating an issue more prominent (

#1426)

.changeset/green-ducks-greet.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Make creating an issue more prominent in the client not found modal by adding a tertiary "Create an issue" button and adding a sentence linking to an issue in the intro paragraph.

src/application/App.tsx

@@ -94,11 +94,8 @@ const GET_OPERATION_COUNTS: TypedDocumentNode<
 `;
 
 const ISSUE_BODY = `
-<!-- Please provide a detailed description of the issue you are experiencing. It is most helpful if you are able to provide a minimal reproduction of the issue. -->
-
-### Link to Reproduction
-<!-- Please provide a link to the reproduction of the issue. -->
-
+${SECTIONS.defaultDescription}
+${SECTIONS.reproduction}
 ${SECTIONS.apolloClientVersion}
 ${SECTIONS.devtoolsVersion}
 `;

src/application/components/ClientNotFoundModal.tsx

@@ -3,6 +3,7 @@ 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 {
   open: boolean;
@@ -31,19 +32,35 @@ export function ClientNotFoundModal({
     <Modal open={open} onClose={onClose} size="xl">
       <Modal.Header>
         <Modal.Title>Could not find client</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <p>
+        <Modal.Description>
           An Apollo Client instance was not found, either because an Apollo
           Client instance was never created, or because it could not be
-          discovered. This is most commonly fixed by setting the{" "}
-          <ConnectToDevToolsOptionLink /> to <code>true</code>.
-        </p>
-        <p className="mt-4">
-          If this was reached in error, please try one of the following
-          suggestions or click the &quot;Retry&quot; button to try looking for
-          the client again.
-        </p>
+          discovered. You can often solve this issue by setting the{" "}
+          <ConnectToDevToolsOptionLink /> in your <code>ApolloClient</code>{" "}
+          instance to <code>true</code>.
+        </Modal.Description>
+        <Modal.Description>
+          If you&apos;ve already set the <ConnectToDevToolsOptionLink />, please
+          try one of the following suggestions or click the <code>Retry</code>{" "}
+          button to look for the client again.
+        </Modal.Description>
+        <Modal.Description>
+          Please{" "}
+          <GitHubIssueLink
+            labels={[LABELS.bug]}
+            body={`
+${SECTIONS.defaultDescription}
+${SECTIONS.apolloClientVersion}
+${SECTIONS.devtoolsVersion}
+`}
+          >
+            create an issue
+          </GitHubIssueLink>{" "}
+          if you have followed the suggestions and continue to see this message.
+          This could be a bug with Apollo Client Devtools.
+        </Modal.Description>
+      </Modal.Header>
+      <Modal.Body>
         <div className="mt-4 flex flex-col gap-2">
           <Disclosure>
             <Disclosure.Button>
@@ -152,11 +169,8 @@ export function ClientNotFoundModal({
                   labels={[LABELS.bug]}
                   repository="apollo-client"
                   body={`
-<!-- Please provide a detailed description of the issue you are experiencing. It is most helpful if you are able to provide a minimal reproduction of the issue. -->
-
-### Link to Reproduction
-<!-- Please provide a link to the reproduction of the issue. -->
-
+${SECTIONS.defaultDescription}
+${SECTIONS.reproduction}
 ${SECTIONS.apolloClientVersion}
 ${SECTIONS.devtoolsVersion}
 `}
@@ -206,11 +220,11 @@ ${SECTIONS.devtoolsVersion}
               I&apos;ve exhausted all other options
             </Disclosure.Button>
             <Disclosure.Panel>
-              This is likely a bug with Apollo Client Devtools. Please create a{" "}
+              This could be a bug with Apollo Client Devtools. Please create a{" "}
               <GitHubIssueLink
                 labels={[LABELS.bug, LABELS.clientDiscovery]}
                 body={`
-${SECTIONS.default}
+${SECTIONS.defaultDescription}
 ${SECTIONS.apolloClientVersion}
 ${SECTIONS.devtoolsVersion}
 `}
@@ -223,6 +237,24 @@ ${SECTIONS.devtoolsVersion}
         </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>
         <ButtonGroup>
           <Button type="button" size="md" variant="secondary" onClick={onClose}>
             Close

src/application/components/GitHubIssueLink.tsx

@@ -12,16 +12,19 @@ interface GitHubIssueLinkProps {
 }
 
 const WHITESPACE = /\s/g;
-const DEFAULT_BODY =
-  "<!-- Please provide a detailed description of the issue you are experiencing and the steps to reproduce it.-->\n";
+const DEFAULT_DESCRIPTION =
+  "<!-- Please provide a detailed description of the issue you are experiencing. It is most helpful if you are able to provide a minimal reproduction of the issue. -->\n";
 
 export const SECTIONS = {
-  default: DEFAULT_BODY,
+  defaultDescription: DEFAULT_DESCRIPTION,
   apolloClientVersion: `### \`@apollo/client\` version
 <!-- Please provide the version of \`@apollo/client\` you are using. -->
 `,
   devtoolsVersion: `### Apollo Client Devtools version
 ${VERSION}
+`,
+  reproduction: `### Link to Reproduction
+<!-- Please provide a link to the reproduction of the issue. -->
 `,
 } as const;
 
@@ -35,7 +38,7 @@ export const GitHubIssueLink = forwardRef<
   GitHubIssueLinkProps
 >(function GitHubIssueLink(
   {
-    body = DEFAULT_BODY,
+    body = DEFAULT_DESCRIPTION,
     className,
     repository = "apollo-client-devtools",
     labels,

src/application/components/Modal/Description.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface DescriptionProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export function Description({ className, children }: DescriptionProps) {
+  return (
+    <p
+      className={twMerge(
+        "text-secondary dark:text-secondary-dark text-md font-normal",
+        className
+      )}
+    >
+      {children}
+    </p>
+  );
+}

src/application/components/Modal/Header.tsx

@@ -8,7 +8,7 @@ interface HeaderProps {
 
 export function Header({ className, children }: HeaderProps) {
   return (
-    <header className={clsx(className, "flex pt-6 px-6 pb-4 gap-2")}>
+    <header className={clsx(className, "flex flex-col pt-6 px-6 pb-4 gap-2")}>
       {children}
     </header>
   );

src/application/components/Modal/Modal.tsx

@@ -9,6 +9,7 @@ import { Fragment } from "react";
 import { clsx } from "clsx";
 
 import { Body } from "./Body";
+import { Description } from "./Description";
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { Title } from "./Title";
@@ -78,6 +79,7 @@ export function Modal({
 }
 
 Modal.Body = Body;
+Modal.Description = Description;
 Modal.Footer = Footer;
 Modal.Header = Header;
 Modal.Title = Title;