feat: add report an issue button

src/assets/scss/components/playground-configuration.scss

@@ -242,6 +242,11 @@
 	}
 }
 
+.report-issue-btn {
+	width: 100%;
+	margin-top: 20px;
+}
+
 .playground__config-options__section--rules {
 	font-size: 0.875rem;
 }

src/playground/App.js

@@ -334,6 +334,7 @@ const App = () => {
 						data-open={isConfigHidden ? true : showConfigMenu}
 					>
 						<Configuration
+							errors={messages}
 							initialOptions={fillOptionsDefaults(
 								getDefaultOptions(),
 							)}

src/playground/components/Configuration.js

@@ -105,6 +105,7 @@ export default function Configuration({
 	initialOptions,
 	rulesMeta,
 	eslintVersion,
+	errors,
 	onUpdate,
 	options,
 	ruleNames,
@@ -232,7 +233,11 @@ export default function Configuration({
 	return (
 		<div className="playground__config-options__sections">
 			<div className="playground__config-options__section">
-				<ShareURL url={window.location} />
+				<ShareURL
+					errors={errors}
+					url={window.location}
+					config={configFileContent}
+				/>
 			</div>
 			<div className="playground__config-options__section">
 				<button

src/playground/components/ShareURL.js

@@ -1,6 +1,10 @@
 import React, { useState } from "react";
 
-export default function ShareURL({ url }) {
+const getTemplate = code => `\`\`\`js
+${code}
+\`\`\``;
+
+export default function ShareURL({ url, errors, config }) {
 	const [isDataCopied, setIsDataCopied] = useState(false);
 	const [showShareURL, setShowShareURL] = useState(false);
 
@@ -10,7 +14,7 @@ export default function ShareURL({ url }) {
 				className="playground-toggle c-btn c-btn--ghost"
 				onClick={() => setShowShareURL(currentValue => !currentValue)}
 			>
-				<h2 data-config-section-title>Share URL</h2>
+				<h2 data-config-section-title>Share</h2>
 				<svg
 					height="20"
 					width="20"
@@ -89,6 +93,46 @@ export default function ShareURL({ url }) {
 							</span>
 						)}
 					</div>
+
+					<button
+						onClick={() => {
+							const reportUrl = new URL(
+								"https://github.com/eslint/eslint/issues/new",
+							);
+							const params = {
+								labels: "bug,repro:yes",
+								template: "bug-report.yml",
+								"repro-url": window.location.href,
+								"lint-output": errors
+									.map(
+										({ line, column, message, ruleId }) =>
+											`${line}:${column} ${message} (${ruleId})`,
+									)
+									.join("\n"),
+								description: getTemplate(config),
+							};
+
+							Object.entries(params).forEach(([key, value]) => {
+								reportUrl.searchParams.append(key, value);
+							});
+
+							if (reportUrl.search.length > 8148) {
+								reportUrl.searchParams.set(
+									"description",
+									"<!-- The configuration has been saved to clipboard. Please paste it here 👇🏻 -->",
+								);
+
+								navigator?.clipboard.writeText(
+									getTemplate(config),
+								);
+							}
+
+							window.open(reportUrl, "_blank");
+						}}
+						className="c-btn c-btn--secondary report-issue-btn"
+					>
+						Report an issue
+					</button>
 				</div>
 			)}
 		</div>