Suggestion: Add playground quick links to open a new issue

[JoshuaKGoldberg]

What problem do you want to solve?

Sometimes I open the playground to confirm a reproduction of a rule bug or feature request, then immediately want to file a new issue with the playground. But there's no one-click way to do that. We have to manually copy the environment, configuration, and Minimal Reproduction Example into templates like 🐞 Report a problem. That's inconvenient, and users don't always fill out the templates correctly.

What do you think is the correct solution?

Proposal: let's add a button to the playground with a name like "Report an issue" that links to a pre-filled issue template?

For example, given eslint/eslint#18606 https://eslint.org/play/#eyJ0ZXh0IjoidHJ5IHtcbiAgdGhyb3cgbmV3IEVycm9yKCk7XG59IGNhdGNoIChfKSB7IFxufSIsIm9wdGlvbnMiOnsicnVsZXMiOnsibm8tdW51c2VkLXZhcnMiOlsid2FybiIseyJjYXVnaHRFcnJvcnNJZ25vcmVQYXR0ZXJuIjoiZm9vIn1dfSwibGFuZ3VhZ2VPcHRpb25zIjp7InNvdXJjZVR5cGUiOiJtb2R1bGUiLCJwYXJzZXJPcHRpb25zIjp7ImVjbWFGZWF0dXJlcyI6e319fX19, it would link to the equivalent of:

const url = new URL("https://github.com/eslint/eslint/issues/new?assignees=&labels=bug%2Crepro%3Aneeded&projects=&template=bug-report.yml");
url.searchParams.set("title", "Bug: [no-unused-vars] (fill in)");

// We'd need to add 'id's to the .github/bug-report.yml reproduction input
url.searchParams.set("reproduction", "https://eslint.org/play/#eyJ0ZXh0IjoidHJ5IHtcbiAgdGhyb3cgbmV3IEVycm9yKCk7XG59IGNhdGNoIChfKSB7IFxufSIsIm9wdGlvbnMiOnsicnVsZXMiOnsibm8tdW51c2VkLXZhcnMiOlsid2FybiIseyJjYXVnaHRFcnJvcnNJZ25vcmVQYXR0ZXJuIjoiZm9vIn1dfSwibGFuZ3VhZ2VPcHRpb25zIjp7InNvdXJjZVR5cGUiOiJtb2R1bGUiLCJwYXJzZXJPcHRpb25zIjp7ImVjbWFGZWF0dXJlcyI6e319fX19");
url.searchParams.set("what-actually-happened", "Error 3:10 '_' is defined but never used. Allowed unused caught errors must match /foo/u.  (no-unused-vars)");

Participation

• I am willing to submit a pull request for this change.

Additional comments

We do this in typescript-eslint and it's quite useful: typescript-eslint/typescript-eslint#4913 -> typescript-eslint/typescript-eslint#4916

[nzakas]

I'd like to see a mockup of where you envision this button going before giving a 👍. I like the idea, but as with everything, it's the implementation that matters most.

[JoshuaKGoldberg]

First thought: how about a Report issue on GitHub button under the existing sidebar UI?

[nzakas]

Only concern with that is when people have multiple rules configured, it will scroll of the bottom of the page and be out of sight, which seems like it would be a problem. (We do already have this problem with "Download this config file", but at least that is related to what's above it.)

[JoshuaKGoldberg]

Hmm, I can see why that'd be irksome. I suppose we could put it below rule reports:

This would also have the drawback of being pushed down, too, just by the rule warnings...

[nzakas]

What about overlaying the button inside the upper-right corner of the editor? Maybe shorten to "Report issue" to minimize disruption?

[JoshuaKGoldberg]

😬 as a user, I really dislike things popping over a text editor. Even if it's just floating in a right-side corner.

[harish-sethuraman]

Shall we rather add the button inside the share URL config? we can re name it to something better? Its on top + it can be collpased as well? Doesn't mess with other interfaces?

[nzakas]

@harish-sethuraman That's not a bad idea, but maybe we should rename to just "Share" and have the two options under there? (I supposed reporting an issue is another form of sharing?)