Fix wonder-stuff-tool-new-pkg output after publishing a new package

[beaesguerra]

Summary:

I went through the process of publishing a new npm package. It was helpful and I was able to publish the new package successfully!

One small thing I noticed after publishing is the url to the package in the output was giving a 404 error page because the "@" is not accounted for in the package name "@khanacademy/package-name".

1. Go to https://www.npmjs.com/package/khanacademy%2Feslint-plugin-wonder-blocks
2. Navigate to the package settings
3. Configure Trusted Publishing for your GitHub repository
4. You can now publish new versions using GitHub Actions without needing tokens!

This PR fixes that so the @ symbol is encoded and included in the url so the output would be something like: https://www.npmjs.com/package/%40khanacademy%2Feslint-plugin-wonder-blocks

Issue: FEI-7600

Test plan:

Tests pass. I added a new unit test to cover this case, since I would prefer to avoid publishing unneeded placeholder packages to npm to test this!

[changeset-bot]

🦋 Changeset detected

Latest commit: 80f2859

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@khanacademy/wonder-stuff-tool-publish-new-pkg	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.15%. Comparing base (f141b44) to head (80f2859).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1236      +/-   ##
==========================================
+ Coverage   82.79%   83.15%   +0.35%     
==========================================
  Files          63       63              
  Lines         843      843              
  Branches      210      205       -5     
==========================================
+ Hits          698      701       +3     
+ Misses        145      142       -3     

Files with missing lines	Coverage Δ
.../wonder-stuff-tool-new-pkg/src/print-next-steps.ts	100.00% <ø> (+100.00%)	⬆️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f141b44...80f2859. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Size Change: 0 B

Total Size: 4.22 kB

ℹ️ View Unchanged

Filename	Size
packages/wonder-stuff-core/dist/browser/es/index.js	1.52 kB
packages/wonder-stuff-sentry/dist/browser/es/index.js	1.6 kB
packages/wonder-stuff-testing/dist/browser/es/index.js	1.1 kB

_{compressed-size-action}

[beaesguerra]

Let me know if this was intentional or if I'm missing some context behind this!

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/frontend-infra for changes to .changeset/moody-signs-talk.md, packages/wonder-stuff-tool-new-pkg/src/print-next-steps.ts, packages/wonder-stuff-tool-new-pkg/src/__tests__/print-next-steps.test.ts

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[jeremywiebe]

Cool!

[jeremywiebe]

I'm not sure why I went with a swapping @ with "". I think this is definitely a bug! Thanks for fixing.

[jeresig]

Thanks for fixing this!