Skip to content

chore(website): error viewer in playground #5061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 14 commits into from
May 26, 2022
Merged

chore(website): error viewer in playground #5061

merged 14 commits into from
May 26, 2022

Conversation

armano2
Copy link
Collaborator

@armano2 armano2 commented May 23, 2022 •
edited
Loading

PR Checklist

Overview

Supper basic design for listing all errors when no ast viewer is selected, prints both ts and eslint errors (and any other errors reported by editor)

Changes

  • playground by default displays all errors in right panel with ability to fix fixable eslint errors
  • suggestions are now correctly displayed in Fix me in editor

Demo

image

@armano2 armano2 added the DO NOT MERGE PRs which should not be merged yet label May 23, 2022
@nx-cloud
Copy link

nx-cloud bot commented May 23, 2022 •
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3694da2. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 47 targets

Sent with 💌 from NxCloud.

@typescript-eslint
Copy link
Contributor

Thanks for the PR, @armano2!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint. As a thank you, your profile/company logo will be added to our main README which receives thousands of unique visitors per day.

@armano2 armano2 marked this pull request as draft May 23, 2022 20:01
@netlify
Copy link

netlify bot commented May 23, 2022 •
edited
Loading

✅ Deploy Preview for typescript-eslint ready!

Name Link
🔨 Latest commit 3694da2
🔍 Latest deploy log https://app.netlify.com/sites/typescript-eslint/deploys/628f8ef7fe53d900084a2a5a
😎 Deploy Preview https://deploy-preview-5061--typescript-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@armano2 armano2 added package: website Issues related to the @typescript-eslint website enhancement New feature or request labels May 23, 2022
@bradzacher
Copy link
Member

this is so good.

leoclap

@armano2
Copy link
Collaborator Author

armano2 commented May 23, 2022 •
edited
Loading

while working on this i noticed that we are displaying in UI only first fixer or suggestion,

image
vs
image

https://deploy-preview-5061--typescript-eslint.netlify.app/play/#ts=4.7.1-rc&sourceType=module&code=JYMwBAFALgTgrgUzAMmZAjGA1GdBKPMAbwF8BYAKAHcALYAGyQhAEN6BnJAHy7ACIWfbPwBGfQqUoQAHgC4wAexEArBAGMohALwA+MLERgeYVh269pYAPz74Seac4BuSkA&rules=N4IgAgLgngDgpgZwMYCcCWMIFpEBs0B2EA9AhOktgEYD2NucAhgTgB4wqIJo0EIgAuANog4KFDRQgANKEa5cNAO4BlcoQDmggGbyEcaSHmKlAOQCuAWypideg0YXKLCxlQYB5KgCs4lO7j6AL4AukFAA&tsConfig=N4IgzgLgTglgxhAcgVwDaoMIAsCmcDWYIAXNMjgL5A

should we fix it with this change or should i push it separately?

@bradzacher
Copy link
Member

Just do it here if you like!

@armano2 armano2 changed the title POC: for error viewer in playground POC: error viewer in playground May 24, 2022
@armano2
Copy link
Collaborator Author

armano2 commented May 24, 2022

most of functionalities seem to be working now, any ideas how fixers should look like?

@bradzacher
Copy link
Member

any ideas how fixers should look like?

I'm okay with having the button on the message like you've currently got.
Maybe make the text say "Fix" instead of "apply"

image

Do you have handling for suggestion fixers?
Maybe if it has suggestions then it can be a split button eg:
image

@armano2
Copy link
Collaborator Author

armano2 commented May 24, 2022 •
edited
Loading

yes, suggestions and fixers are joined together, you can see an example here Demo I was thinking about adding dropdown, but, its going to be even harder to make it work well in mobile (witch is most likely next)

strict-boolean-expressions has only suggestions

@armano2 armano2 changed the title POC: error viewer in playground chore(website): error viewer in playground May 24, 2022
@armano2 armano2 marked this pull request as ready for review May 24, 2022 22:24
@armano2 armano2 removed the DO NOT MERGE PRs which should not be merged yet label May 25, 2022
@JoshuaKGoldberg
Copy link
Member

What an odd Netlify failure... https://app.netlify.com/sites/typescript-eslint/deploys/628d85ad0e4cb800089c5202

9:27:08 PM: [3/5] Fetching packages...
9:27:09 PM: error Couldn't find a package.json file in "/opt/build/repo/packages/utils"

JoshuaKGoldberg
JoshuaKGoldberg previously approved these changes May 25, 2022
View reviewed changes
Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 Glorious!! This is going to be awesome to have in prod!

@armano2 armano2 mentioned this pull request May 25, 2022
Closed
JoshuaKGoldberg
JoshuaKGoldberg previously approved these changes May 25, 2022
View reviewed changes
Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!! 👏

@armano2 armano2 mentioned this pull request May 25, 2022
Merged
3 tasks
bradzacher
bradzacher previously approved these changes May 26, 2022
View reviewed changes
Copy link
Member

@bradzacher bradzacher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sobeautiful.gif

@armano2 @JoshuaKGoldberg
Update packages/website/src/components/ErrorsViewer.tsx
3694da2 
Co-authored-by: Josh Goldberg <me@joshuakgoldberg.com>
@armano2 armano2 dismissed stale reviews from bradzacher and JoshuaKGoldberg via 3694da2 May 26, 2022 14:30
@bradzacher bradzacher merged commit eaa5d7b into main May 26, 2022
@bradzacher bradzacher deleted the chore/errors-view-in-playground branch May 26, 2022 15:34
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 26, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@bradzacher bradzacher bradzacher approved these changes

@JoshuaKGoldberg JoshuaKGoldberg JoshuaKGoldberg left review comments

Assignees
No one assigned
Labels
enhancement New feature or request package: website Issues related to the @typescript-eslint website
Projects
No open projects
Website Playground
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Bug(website): compiler options are not passed to the lint run
3 participants
@armano2 @bradzacher @JoshuaKGoldberg