7-github-flow.md

Lab 7: GitHub Flow

Now that main is protected, you won't be able to commit and push changes directly. Instead, you will need to create a feature branch and open a pull request (PR). In this lab, you will create and review PRs for one another, following GitHub flow.

Scenario

As you've probably noticed by now, the game has a bug where any tiles in the left- or bottom-most squares do not move. This must be fixed, but we want to ensure that the fix is reviewed by at least one other person before it is merged into main.

Task 1: Create a Fix Branch

1. Ensure you're working on the main branch

   git checkout main

2. Create a new branch for the fix

   git checkout -b fix/stuck-tiles

Task 2: Implement the Fix

1. Open src/application.ts

2. Locate the comment // Lab 7: Grid Size

3. Update the input parameter to GameManager to 5 instead of 3

   // Lab 7: Grid Size
   new GameManager(5)

   Note: Updating this to 5 is still not the right fix! We're going to do this on purpose to see how we can fix it in a PR.

4. Save the file

Task 3: Commit the Changes

1. Add the changes to the staging area

   git add src/application.ts

2. Commit the changes

   git commit -m "Increase grid input size to 5"

3. Push your branch to GitHub

   git push

Task 4: Open a Pull Request

1. In your browser, navigate to your repository on GitHub

2. Click on the Pull requests tab

3. Click the New pull request button

4. Click the Compare button, then select your fix/stuck-tiles branch

5. Click Create pull request

6. Enter a title and description for your PR

7. Click Create pull request

   At this point, your PR will not be able to be merged. Someone in the class will need to review it first.

8. Copy the URL of your PR and paste it into the meeting chat

Task 5: Review a Pull Request (Suggest Changes)

As other people in the class post their PRs, try to review one and provide feedback. In particular, you should suggest a fix to the incorrect grid size that was added in the PR.

1. Click on the link to a PR in the meeting chat

   Save this link, as you will need it later to approve the PR.

2. Click the Files changed tab

3. Next to the line that was changed in src/application.ts, click plus sign (+) to add a comment

   

4. Click the Add a suggestion button to suggest changing the input from 5 to 4

   

5. Click Start a review

6. Click Finish your review

7. Add a comment to the PR suggesting the change

8. Ensure Comment is selected as the review type

   

9. Click Submit review

Task 6: Implement the Suggested Change

When someone has reviewed your PR and suggested the change, you should implement it and push the changes to your branch.

1. In your browser, navigate to your PR on GitHub
2. Scroll down to the comments and locate the one with the suggestion
3. Click the Commit suggestion button
4. Enter a commit message
5. Click Commit changes

Task 7: Review a Pull Request (Approve)

Once the author of the PR you reviewed has implemented your suggestion, you should review the PR again and approve it.

1. Open the link to the PR you reviewed previously

2. Click on the Files changed tab

3. Ensure that the suggestion you made is implemented correctly

4. Click the Review changes button

5. Enter a comment

6. Ensure Approve is selected as the review type

7. Click Submit review

   

Task 8: Merge the Pull Request

Once your PR has been approved, you can merge it into main.

1. Click the Merge pull request button
2. Click Confirm merge
3. Click Delete branch

Congratulations! You've successfully contributed to projects using GitHub flow.

Need Help?

If you're having trouble with any of the steps, you can ask for help in the meeting chat.

The code changes for this lab can be found in the solutions directory.

• Copy the contents of solutions/7-github-flow/application.ts and replace the contents of src/application.ts