feat: add report an issue button

harish-sethuraman commented 3 months ago

Prerequisites checklist

[x] I have read the contributing guidelines.

What is the purpose of this pull request?

Added report an issue button

What changes did you make? (Give an overview)

added button that allows pre filling data while creating bug reports in eslint repo

Is there anything you'd like reviewers to focus on?

pre-filled the reproducible example url field
pre-filled output field

should we do it for any other field?

netlify[bot] commented 3 months ago

Deploy Preview for pt-br-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/pt-br-eslint/deploys/66e1cb462ee8f90008a70101
Deploy Preview	https://deploy-preview-616--pt-br-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for new-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/new-eslint/deploys/66e1cb4656d0a10007b57e9d
Deploy Preview	https://deploy-preview-616--new-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for ja-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/ja-eslint/deploys/66e1cb463bfd4b0008797ebd
Deploy Preview	https://deploy-preview-616--ja-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for zh-hans-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/zh-hans-eslint/deploys/66e1cb464e39c700086fb471
Deploy Preview	https://deploy-preview-616--zh-hans-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for de-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/de-eslint/deploys/66e1cb46d6e93c000850fb08
Deploy Preview	https://deploy-preview-616--de-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for es-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/es-eslint/deploys/66e1cb46ad9ed6000899c6dc
Deploy Preview	https://deploy-preview-616--es-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for fr-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/fr-eslint/deploys/66e1cb468726180008b873ed
Deploy Preview	https://deploy-preview-616--fr-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for hi-eslint ready!

Name	Link
Latest commit	c6fe2354ed536b86bec7ab4711df2bf45a7c0669
Latest deploy log	https://app.netlify.com/sites/hi-eslint/deploys/66e1cb468a480f0008b851ff
Deploy Preview	https://deploy-preview-616--hi-eslint.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

nzakas commented 2 months ago

Is it possible to also include the configuration information in the issue?

harish-sethuraman commented 2 months ago

The playground link will have the configuration. Should we add the configuration inside What did you do? in case we want it apart from having it in playground @nzakas

amareshsm commented 2 months ago

Is it possible to also include the configuration information in the issue?

The playground link will have the configuration. Should we add the configuration inside What did you do? in case we want it apart from having it in playground @nzakas

+1

We should be able to get the necessary configuration information from the playground link, which should be sufficient I guess. If you'd like, we can also include the configuration details explicitly. We already have the configFileContent that we use for downloading the configuration, so we can use the same approach for this.

nzakas commented 2 months ago

Yes, I think it would be nice to output the configuration into the issue as well. It just makes it easier when reading the issue.

harish-sethuraman commented 2 months ago

To prefill the configuration to description box need to merge this https://github.com/eslint/eslint/pull/18817. This was a miss as last time I thought we wouldn't want to prefill description. Should we add ids to all elements?

nzakas commented 2 months ago

https://github.com/eslint/eslint/pull/18817 was merged.

harish-sethuraman commented 2 months ago

We will now add configuration file's content to report what did you do section. When lot of rules are selected the content becomes pretty long and github breaks when we try sending pretty long code through params. That is why I haven't added formatting to the config.

nzakas commented 2 months ago

Unfortunately, the configuration really isn't readable like this if there's more than a couple of rules. Is it not possible to add the three backticks before and after, or otherwise to format it a bit?

Can we include the code, too?

And can we include the playground link to jump right back to it?

harish-sethuraman commented 2 months ago

Unfortunately, the configuration really isn't readable like this if there's more than a couple of rules. Is it not possible to add the three backticks before and after, or otherwise to format it a bit?

If we add formatting to the rules and there are huge number of rules (seems like it breaks when I added more than 53 rules) then Im getting this while I redirect to github for creating a new issue.

Can we include the code, too?

Same for code if we start adding more code we would not be able to create a gh issue. Seems like its same with TSESLint's playground as well it breaks when we hit a limit :(

And can we include the playground link to jump right back to it?

we are adding the playground URL in the Link to Minimal Reproducible Example section

amareshsm commented 2 months ago

Should we disable the button with some error message when the users add many rules (i.e. more than 53 rules)?

nzakas commented 2 months ago

It might be nice to just check the length of the URL and show an error message in the playground when they click Share URL

harish-sethuraman commented 2 months ago

Should we disable the button with some error message when the users add many rules (i.e. more than 53 rules)?

it also depends on how much code the user has written so we can't rely only on the number of rules the user has selected.

Im not sure about the length that github supports. I can see that TSESLint playground also has the same issue where if we write way too much code we get the exact same error in github.

amareshsm commented 2 months ago

Should we disable the button with some error message when the users add many rules (i.e. more than 53 rules)?

it also depends on how much code the user has written so we can't rely only on the number of rules the user has selected.

Im not sure about the length that github supports. I can see that TSESLint playground also has the same issue where if we write way too much code we get the exact same error in github.

Yes, we can't display an error message based on the number of rules, but we can validate the length of the URL and ensure it doesn't exceed a certain limit.

nzakas commented 2 months ago

Yes, we can't display an error message based on the number of rules, but we can validate the length of the URL and ensure it doesn't exceed a certain limit.

That seems like a good idea. Just pop up an error if the URL gets too long. I think that's a better experience than letting the browser error out.

mdjermanovic commented 2 months ago

Prettier playground saves the issue body to the clipboard when it's too long:

harish-sethuraman commented 2 months ago

The total supported length of the search param seems to be 8148 characters. I'll add a comment like @mdjermanovic has shared that says paste from clipboard. This will allow users to paste the config into the issue? is that fine?

harish-sethuraman commented 2 months ago

fixed it

harish-sethuraman commented 1 day ago

@eslint/eslint-tsc can we close this please?

eslint / eslint.org