New GitHub issue form for React DevTools bug reports

Added a new bug report template built with GitHub issue forms:
https://gh-community.github.io/issue-template-feedback/structured/

And updated DevTools bug report link to send information formatted for this new template.

.github/ISSUE_TEMPLATE/devtools_bug_report.yml

@@ -0,0 +1,78 @@
+name: "DevTools bug report"
+description: "Report a problem with React DevTools"
+title: "[DevTools Bug]: "
+labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"]
+body:
+- type: input
+  attributes:
+    label: Website or app
+    description: |
+      Which website or app were you using when the bug happened?
+    placeholder: |
+      e.g. website URL, public GitHub repo, or Code Sandbox app
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Repro steps
+    description: |
+      What were you doing on the website or app when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
+
+      Issues filed without repro steps may be closed.
+    placeholder: |
+      Example bug report:
+      1. Log in with username/password
+      2. Click "Messages" on the left menu
+      3. Open any message in the list
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: How often does this bug happen?
+    description: |
+      Following the repro steps above, how easily are you able to reproduce this bug?
+    options:
+      - Every time
+      - Often
+      - Sometimes
+      - Only once
+  validations:
+    required: true
+- type: input
+  id: automated_package
+  attributes:
+    label: DevTools package (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_version
+  attributes:
+    label: DevTools version (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_error_message
+  attributes:
+    label: Error message (automated)
+    description: |
+      Please do not edit this field.
+- type: textarea
+  id: automated_call_stack
+  attributes:
+    label: Error call stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: textarea
+  id: automated_component_stack
+  attributes:
+    label: Error component stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: input
+  id: automated_github_query_string
+  attributes:
+    label: GitHub query string (automated)
+    description: |
+      Please do not edit this field.

packages/react-devtools-core/webpack.backend.js

@@ -54,6 +54,7 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),

packages/react-devtools-core/webpack.standalone.js

@@ -54,6 +54,7 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,

packages/react-devtools-extensions/webpack.backend.js

@@ -51,6 +51,7 @@ module.exports = {
       __DEV__: true,
       __PROFILE__: false,
       __EXPERIMENTAL__: true,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),

packages/react-devtools-extensions/webpack.config.js

@@ -58,6 +58,7 @@ module.exports = {
       __EXTENSION__: true,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,

packages/react-devtools-inline/webpack.config.js

@@ -52,6 +52,7 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js

@@ -12,9 +12,14 @@ import Icon from '../Icon';
 import {searchGitHubIssuesURL} from './githubAPI';
 import styles from './shared.css';
 
-function encodeURIWrapper(string: string): string {
-  return encodeURI(string).replace(/#/g, '%23');
-}
+const LABELS = [
+  'Component: Developer Tools',
+  'Type: Bug',
+  'Status: Unconfirmed',
+];
+
+// This must match the filename in ".github/ISSUE_TEMPLATE/"
+const TEMPLATE = 'devtools_bug_report.yml';
 
 type Props = {|
   callStack: string | null,
@@ -35,44 +40,21 @@ export default function ReportNewIssue({
   const gitHubAPISearch =
     errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)';
 
-  const title = `Error: "${errorMessage || ''}"`;
-  const labels = ['Component: Developer Tools', 'Status: Unconfirmed'];
-
-  const body = `
-<!-- Please answer both questions below before submitting this issue. -->
-
-### Which website or app were you using when the bug happened?
-
-Please provide a link to the URL of the website (if it is public), a CodeSandbox (https://codesandbox.io/s/new) example that reproduces the bug, or a project on GitHub that we can checkout and run locally.
-
-### What were you doing on the website or app when the bug happened?
-
-If possible, please describe how to reproduce this bug on the website or app mentioned above:
-1. <!-- FILL THIS IN -->
-2. <!-- FILL THIS IN -->
-3. <!-- FILL THIS IN -->
-
-<!--------------------------------------------------->
-<!-- Please do not remove the text below this line -->
-<!--------------------------------------------------->
-
-### Generated information
-
-DevTools version: ${process.env.DEVTOOLS_VERSION || ''}
-
-Call stack:
-${callStack || '(none)'}
-
-Component stack:
-${componentStack || '(none)'}
-
-GitHub URL search query:
-${gitHubAPISearch}
-  `;
-
-  bugURL += `/issues/new?labels=${encodeURIWrapper(
-    labels.join(','),
-  )}&title=${encodeURIWrapper(title)}&body=${encodeURIWrapper(body.trim())}`;
+  const title = `[DevTools Error] ${errorMessage || ''}`;
+
+  const parameters = [
+    `template=${TEMPLATE}`,
+    `labels=${encodeURIComponent(LABELS.join(','))}`,
+    `title=${encodeURIComponent(title)}`,
+    `automated_package=${process.env.DEVTOOLS_PACKAGE || ''}`,
+    `automated_version=${process.env.DEVTOOLS_VERSION || ''}`,
+    `automated_error_message=${encodeURIComponent(errorMessage || '')}`,
+    `automated_call_stack=${encodeURIComponent(callStack || '')}`,
+    `automated_component_stack=${encodeURIComponent(componentStack || '')}`,
+    `automated_github_query_string=${gitHubAPISearch}`,
+  ];
+
+  bugURL += `/issues/new?${parameters.join('&')}`;
 
   return (
     <div className={styles.GitHubLinkRow}>

packages/react-devtools-shell/webpack.config.js

@@ -52,6 +52,7 @@ const config = {
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),
   ],