Skip to content
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.

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

docs: adds in information on how to test PRs in GitHub Codespaces #2617

Merged
merged 18 commits into from
Oct 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
41 changes: 41 additions & 0 deletions docs/codespace_pr_reviews.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Using Codesapces to review PRs without pulling a repo to your machine

shkeating marked this conversation as resolved.
Show resolved Hide resolved
1. go to the PR
2. click the `Code` button in the top right corner
3. click the `Codespaces` tab
4. `Create a new codespace on ...`

![Create a new codespace screenshot](https://github.com/trussworks/react-uswds/assets/59394696/9ebfff8a-353c-4064-bf70-8712bbfbbeda)

5. **Wait** for the codespace to finish setting up, you should see stuff happening in the `Terminal`. This is the codespace installig the correct versions of packages etc will run in the environment, so it's not necessary to have those updated locally, or even have the repo on your machine locally at all. If you mess with it before it is done it might not work. If you mess this up, you might see an error about your node version.

When it is complete, you should see a message like this in the terminal. If you don't see this, you should delete the codespace and start over.

![Github Codespace configuaration process](https://github.com/trussworks/react-uswds/assets/59394696/bdf6cd8d-22e2-4e6b-b778-65c83c51556a)

6. if the yarn install in that process was not successful (should look like the image above), run `yarn install`. Wait until it is done before you do anything. takes ~5ish minutes
7. if it is successful run `yarn storybook`. this might also take a couple of minutes to complete.
8. when the link the storybook will be hosted on is available, you will get a message saying your application is running on port 9009 in the bottom right corner. click the `Open in Browser` button

![application running message](https://github.com/trussworks/react-uswds/assets/59394696/9d6ac91d-5ea2-4bbc-a64d-685076444354)
shkeating marked this conversation as resolved.
Show resolved Hide resolved

If you don't see that message (it doesn't always happen) check the terminal for something like this:
![storybook started message in the terminal](https://user-images.githubusercontent.com/13249580/272653168-b9d66c78-3659-4c18-a7b4-c6d493354135.png)

If you see that, go to `Ports` tab in the top bar of that bottom section where your `Terminal` is. You can find a link under the column in the table labelled `Forwarded address`. Click that to open the Storybook site being hosted on Codespaces.

![Ports Tab table with forwarded address](https://github.com/trussworks/react-uswds/assets/59394696/a3075661-a1c2-476a-aeb9-974e6f9e036f)

9. It should open a new tab that will have a blank window until the storybook is completely done running its build. Might take a couple of minutes.
10. When the build completes, should show you the ReactUSWDS Storybook with the changes in the PR!

![storybook running in codespaces dev environment](https://github.com/trussworks/react-uswds/assets/59394696/cdfc67de-711f-43c2-928a-284158744f1f)

11. proceed as if you were running the PR on your own machine. hooray!
12. When your review is complete, you should delete the codespace. There are costs associated with storing codespaces. **You should therefore delete any codespaces you no longer need**.
Copy link
Contributor

Choose a reason for hiding this comment

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

Bummer that this isn't free for open source repositories, but I understand why. Looks like costs are pretty minimal, and free for the first (up-to) 60 hours per month.

This is definitely something we should still be vigilant about. It's easy to "leave the stove running" on this switching contexts to and from ReactUSWDS

Copy link
Contributor

Choose a reason for hiding this comment

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

Nothing to change on the PR, the step is explicit, just a thought I had while reading and learning about Codespaces (I haven't used them before!)


![how to delete the codespace screencap](https://github.com/trussworks/react-uswds/assets/59394696/45c1ea01-28f3-4b77-a6da-b6af81546bbc)

## Things to watch out for

If you disrupt the installation process when you start the Codespace, it can mess up the node installation. If this happens, your best bet is to go back to the PR, open the codespaces menu, delete the codespace, and make a new one. This will not mess up the PR.
shkeating marked this conversation as resolved.
Show resolved Hide resolved
4 changes: 4 additions & 0 deletions docs/design-pr-reviews.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ Storybook is our primary resource for everyone on the project outside of the des

To run storybook locally, run the command  yarn storybook  from your command line. This will host the project storybook at localhost:9009. It can be helpful to save this to your bookmarks bar.

**Running a PR branch for review in the browser without having the repo on your machine**

See [Codespaces for PR reviews](docs/codespace_pr_reviews.md).

**Reviewing a newly added component to storybook**

You can run storybook locally to measure and evaluate the component to ensure it meets your intentions, but you can also get a preview of what’s been added in Happo. When you add to Happo, it won’t show up as a failure that needs approval, but you can still navigate in to preview the added images.
Expand Down
Binary file added docs/image.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.