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 https://github.com/eslint/eslint/issues/18606's 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

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

Additional comments

We do this in typescript-eslint and it's quite useful: https://github.com/typescript-eslint/typescript-eslint/issues/4913 -> https://github.com/typescript-eslint/typescript-eslint/pull/4916

[nzakas]

I'd like to see a mockup of where you envision this button going before giving a :+1:. 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?)

[harish-sethuraman]

@JoshuaKGoldberg are you still working on this? Or I can help you with the change?

[JoshuaKGoldberg]

I was just waiting for a 👍 to implement. But I have a lot of ESLint work on my plate, go ahead - thanks for checking!

[amareshsm]

@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?)

I am 👍 for this change. Should we rename "Share" to "Share and Report" (similar to "Versioning and Config") and include a "Report an Issue" button within that section?

[harish-sethuraman]

As first part of the change, have raised an PR to add id's to template values. Should we also fill the What actually happened? section or should we not? because we are already getting the playground URL? that would suffice?

[amareshsm]

As first part of the change, have raised an PR to add id's to template values. Should we also fill the What actually happened? section or should we not? because we are already getting the playground URL? that would suffice?

In my opinion, we can pre-fill the "What actually happened?" field with the error details and allow the user to complete the "What did you expect to happen?" field.

[nzakas]

Closed by https://github.com/eslint/eslint.org/pull/724