chore(website): update report as issue to use new issue forms (#4916)

typescript-eslint · May 23, 2022 · 1e1e85e · 1e1e85e
1 parent 91468ab
commit 1e1e85e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 20 deletions.
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
@@ -12,7 +12,7 @@ import CopyIcon from '@site/src/icons/copy.svg';
 
 import useDebouncedToggle from './hooks/useDebouncedToggle';
 
-import { createMarkdown } from './lib/markdown';
+import { createMarkdown, createMarkdownParams } from './lib/markdown';
 
 import type { RuleDetails } from './types';
 
@@ -97,8 +97,8 @@ function OptionsSelector({
     }
     window
       .open(
-        `https://github.com/typescript-eslint/typescript-eslint/issues/new?body=${encodeURIComponent(
-          createMarkdown(state),
+        `https://github.com/typescript-eslint/typescript-eslint/issues/new?${createMarkdownParams(
+          state,
         )}`,
         '_blank',
       )
@@ -202,7 +202,7 @@ function OptionsSelector({
           </Tooltip>
         </button>
         <button className={styles.optionLabel} onClick={openIssue}>
-          Report Issue
+          Report as Issue
           <CopyIcon />
         </button>
       </Expander>

diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -48,7 +48,7 @@ function Playground(): JSX.Element {
     rules: {},
     tsConfig: {},
   });
-  const { isDarkTheme } = useColorMode();
+  const { colorMode } = useColorMode();
   const [esAst, setEsAst] = useState<TSESTree.Program | string | null>();
   const [tsAst, setTsAST] = useState<SourceFile | string | null>();
   const [scope, setScope] = useState<Record<string, unknown> | string | null>();
@@ -83,7 +83,7 @@ function Playground(): JSX.Element {
             jsx={state.jsx}
             code={state.code}
             tsConfig={state.tsConfig}
-            darkTheme={isDarkTheme}
+            darkTheme={colorMode === 'dark'}
             sourceType={state.sourceType}
             rules={state.rules}
             showAST={state.showAST}

diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
@@ -35,7 +35,7 @@ export const useSandboxServices = (
 ): Error | SandboxServices | undefined => {
   const [services, setServices] = useState<Error | SandboxServices>();
   const [loadedTs, setLoadedTs] = useState<string>(props.ts);
-  const { isDarkTheme } = useColorMode();
+  const { colorMode } = useColorMode();
 
   useEffect(() => {
     if (props.ts !== loadedTs) {
@@ -77,7 +77,7 @@ export const useSandboxServices = (
           ts,
         );
         sandboxInstance.monaco.editor.setTheme(
-          isDarkTheme ? 'vs-dark' : 'vs-light',
+          colorMode === 'dark' ? 'vs-dark' : 'vs-light',
         );
 
         const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN(

diff --git a/packages/website/src/components/lib/markdown.ts b/packages/website/src/components/lib/markdown.ts
@@ -29,25 +29,50 @@ function createSummaryJson(
   return '';
 }
 
+export function genVersions(state: ConfigModel): string {
+  return [
+    '| package | version |',
+    '| -- | -- |',
+    `| \`@typescript-eslint/eslint-plugin\` | \`${process.env.TS_ESLINT_VERSION}\` |`,
+    `| \`@typescript-eslint/parser\` | \`${process.env.TS_ESLINT_VERSION}\` |`,
+    `| \`TypeScript\` | \`${state.ts}\` |`,
+    `| \`ESLint\` | \`${process.env.ESLINT_VERSION}\` |`,
+    `| \`node\` | \`web\` |`,
+  ].join('\n');
+}
+
 export function createMarkdown(state: ConfigModel): string {
   return [
-    '## Repro',
     `[Playground](${document.location.toString()})`,
     createSummary(state.code, 'Code', 'ts', 30),
     createSummaryJson(state.rules, 'rules', 'Eslint config'),
     createSummaryJson(state.tsConfig, 'compilerOptions', 'TypeScript config'),
-    '## Expected Result\n',
-    '## Actual Result\n',
-    '## Additional Info\n',
-    '## Versions',
-    `| package                            | version |
-| ---------------------------------- | ------- |
-| \`@typescript-eslint/eslint-plugin\` | \`${process.env.TS_ESLINT_VERSION}\` |
-| \`@typescript-eslint/parser\`        | \`${process.env.TS_ESLINT_VERSION}\` |
-| \`TypeScript\`                       | \`${state.ts}\` |
-| \`ESLint\`                           | \`${process.env.ESLINT_VERSION}\` |
-| \`Env\`                              | \`web\` |`,
+    genVersions(state),
   ]
     .filter(Boolean)
     .join('\n\n');
 }
+
+export function createMarkdownParams(state: ConfigModel): string {
+  const params = {
+    template: '1-bug-report-plugin.yaml',
+    title: 'Bug: [rule name here] <short description of the issue>',
+    'playground-link': document.location.toString(),
+    'repro-code': state.code,
+    'eslint-config':
+      `module.exports = ` +
+      JSON.stringify(
+        { parser: '@typescript-eslint/parser', rules: state.rules },
+        null,
+        2,
+      ),
+    'typescript-config': JSON.stringify(
+      { compilerOptions: state.tsConfig },
+      null,
+      2,
+    ),
+    versions: genVersions(state),
+  };
+
+  return new URLSearchParams(params).toString();
+}