DevTools error boundary: Search for pre-existing GH issues

Author: Brian Vaughn

packages/react-devtools-shared/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
+    "@octokit/rest": "^18.5.2",
     "@reach/menu-button": "^0.1.17",
     "@reach/tooltip": "^0.2.2",
     "clipboard-js": "^0.3.6",

packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css

@@ -1,11 +1,35 @@
+.Loading {
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-background);
+  border-top: 1px solid var(--color-border);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  color: var(--color-dim);
+}
+
+.GitHubLinkRow {
+  padding: 0.25rem 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  background: var(--color-console-warning-background);
+  border-bottom: 1px solid var(--color-console-warning-border);
+  border-top: 1px solid var(--color-console-warning-border);
+}
+
 .ErrorBoundary {
   height: 100%;
   width: 100%;
   background-color: var(--color-background);
-  padding: 0.5rem;
   overflow: auto;
 }
 
+.ErrorInfo {
+  padding: 0.5rem;
+}
+
 .Header {
   font-size: var(--font-size-sans-large);
   font-weight: bold;
@@ -25,30 +49,20 @@
   padding: 0.5rem;
 }
 
-.IconAndLinkRow {
-  display: flex;
-  align-items: center;
-  margin-top: 0.5rem;
-  color: var(--color-text);
-}
-
-.RetryIcon {
+.ReportIcon {
   margin-right: 0.25rem;
-  color: var(--color-button-active);
 }
 
-.RetryButton {
-  margin-right: 0.25rem;
-  color: var(--color-text);
-}
-.RetryButton:hover {
-  color: var(--color-button-hover);
+.ReportLink {
+  color: var(--color-link);
 }
 
-.ReportIcon {
-  margin-right: 0.25rem;
+.ReproSteps {
+  margin-left: 0.25rem;
+  color: var(--color-console-warning-text);
 }
 
-.ReportLink {
-  color: var(--color-link);
+.UpdateExistingIssuePrompt {
+  margin-right: 0.25rem;
+  color: var(--color-console-warning-text);
 }