GitHub Exercise (using Source Control GUI)

Intro

This practice exercise repeats the actions from both the Beginning and Intermediate GitHub tutorials without the detailed explanations.
It uses the VS Code Source Control GUI toolbars and menus where possible.
Go through the whole exercise one or more times until you are comfortable with all the concepts and commands. Use the CheatSheet as reference.
To reset the git-demo project to the beginning of the GitHub tutorial enter:

git reset --hard v2-intermediate-git

VS Code Source Control feature:

The Source Control sidebar is built into Visual Studio Code.
Open it by clicking the Source Control toolbar on the left side Activity Bar:
The More actions drop-down menu is available by clicking ⋯ at the top of the Source Control sidebar.
The most commonly used Git commands have a GUI counterpart. Some, including logs, do not.

From Beginning GitHub tutorial

Add a Readme page to the git-demo project:

Add a Readme file

Add a Readme page:

README.md

The purpose of the project is to demonstrate Git and GitHub. It is meant to accompany a series of video tutorials and CheatSheets on those topics.

Add it to the staging area and commit it:

Open the Source Control sidebar:

Use one of the two following methods:

Source Control toolbars:

+ Stage the changes.
Message box: Add readme > ✓Commit

Source Control menu items:

⋯ > Changes > Stage All Changes
⋯ > Commit > Commit All

Make sure you are on the main branch, git status is clean, the commits are what you expect, and .gitignore has the files and directories you want to exclude:

git branches: In VS Code, to see what branch you are on, just look on the left side of the Status Bar. The branch you are on is listed there:

Clicking on the branch name will list both the local and remote branches.

git status: To see the Git status of your files, open the Source Control sidebar:

No files listed means no new or changed files since last commit.
Files listed under the Changes or Staged Changes headings indicates there are new files or existing files with changes.

git glog Log your commits.

Create a remote repo

Go to your GitHub home page and click the Create new repository button or link.

Enter the project name as the GitHub repository name: git-demo
Add an optional description: Demo app for learning Git and GitHub
Select public or private.
Skip the next prompts about adding readme, gitignore and license files.
Click the Create Repository button.
Copy the lines under …or push an existing repository from the command line

Add the remote and initial push to the project

Create a remote called origin, push it, push your tags:
Open the Source Control sidebar:

1. Add the remote to the project with an alias of "origin" for the remote URL.

Go back to the Github page and copy the URL.
⋯ > Remote > Add Remote > paste in the URL > enter a name: "origin"

2. Push the local repository to the remote by clicking the Publish Branch button.

3. Push tags from the command line: git push --tags

Print your remotes: git remote --verbose | git remove -v

Create branch, commit, merge it, push to remote

Create and checkout a branch using one of the following methods:

⋯ > Branch > Create Branch Name: feature4
Click "Main" branch in the bottom Status Bar > Select Create New Branch > Enter: feature4

Add your changes and save the files:

Open the Explorer sidebar.

feature4.txt

Some text.

app.txt

This is a demo app to learn Git.
Second line modified.
Third line modified in main branch and modified in feature3 branch.
Feature 1.
Feature 2.
Feature 3.
Feature 4.

Stage and commit the changes:

Open the Source Control sidebar and use one of the following methods:

Source Control toolbars:

+ Stage the changes.
Message box: Add readme > ✓Commit

Source Control Menu items:

⋯ > Changes > Stage All Changes
⋯ > Commit > Commit All

Switch back to the main branch:

On the status bar, click the "feature4" branch name > Select "main" branch.

Merge feature4 into main:

⋯ > Branch > Merge branch > select feature4

Push the new commit to the remote:

⋯ > push

Delete the feature4 branch:

⋯ > Branch > Delete branch > select feature4

Go to Github and refresh the page to see that feature4 has been added.

Add a tag

View our commits so far: git glog

Open the Source Control sidebar:
Add a tag to our local Git repository:

⋯ > Tags > Create Tag > Name: v3-beginning-github> Message: Beginning GitHub

Then push the tag to GitHub from the command line:

git push origin v3-beginning-github

Clone a Remote Repository

To close an existing repository:

From the GitHub repository click the "Code" button, then copy the HTTPS URL.

Then open a new window in VS Code: File menu > select New Window
Open the Source Control sidebar
Click the Clone Repository button.
Paste in the URL at the prompt.
Then select what directory to put it in and click select As Repository Destination.
If the repo's git history is not needed, delete it:

rm -rf .git

From Intermediate GitHub tutorial

Add a software license directly on GitHub using a license template

On the Github repository, click Add file button > select Create new file > file name: LICENSE or LICENSE.md in all caps > click Choose a license template > Select a license (e.g., MIT license) > click Review and submit button > click Commit changes button > change commit message: Add MIT license > select Commit directly to the main branch > click Commit changes.

Fetch or Pull from the remote repository

Let's get our local repo in sync with the remote, adding the License commit.
Do a fetch to check if there are additional commits. Check the status to see how many commits your are behind:

⋯ > Fetch
A Sync Changes 1 ↓ button should appear in the Source Control sidebar. The number 1 indicates the remote is 1 commit ahead. Or enter git status

Optionally, view the change details, comparing the main branch with the remote's main branch:

git diff main origin/main

Merge the changes from the remote's main branch into our local main branch:

Click the Sync Changes 1 ↓ button, or ⋯ > Pull

Log the commits, undo the last commit, the log the commits again to confirm it is gone:

git olog v3-beginning-github..
git reset --hard head^

git olog v3-beginning-github..

To skip the fetch step, just do a pull:

⋯ > Pull

git olog v3-beginning-github..

Shared Repository Collaboration Model - Example 1

A) Alias remote URL as "origin", and set origin/main as remote-tracking branch. We already did this step.

git remote -v Shows the remote alias and the URL it represents.
git branch --remotes Shows the remote for our current branch, main.

B) Create a topic branch, code it, then push it to the central repository:

Before working on a topic branch, make sure we are in sync with the remote:
Confirm you are in sync with the remote:

⋯ > Pull

We are in sync, so now we can create and checkout a new branch. Use one of the following methods:

⋯ > Branch > Create Branch Name: feature5
Click "Main" branch in the bottom Status Bar > select Create New Branch > Enter: feature5

Code the topic branch and make commits:

feature5.txt

Some text.

Source Control toolbars:

+ Stage the changes.
Message box: Add feature5.txt > ✓Commit

app.txt

...
Feature 5.

Source Control toolbars:

+ Stage the changes.
Message box: Add feature 5 to app.txt > ✓Commit

Switch back to the main branch then do a git pull to confirm you are still in sync with the remote:

On the status bar, click the "feature5" branch name > Select "main" branch.
⋯ > pull

Switch back to the feature5 branch again, log the commits, then push the commits to the remote:

Click "Main" branch in the bottom Status Bar > Select: feature5
git olog -2 Logs our two commits that will get pushed to the central repo
Click the Publish Branch button to push it to the remote.

C) In the remote repo, create a pull request from the topic branch:

Go to the Github repository > click Compare & Pull request button > modify commit message: Add feature 5 > give more info in the comment > click Create pull request button.

D & E) Reviewer(s) review the pull request. Submitter makes any requested changes, the pushes revised commits. In our case we are not requiring a review.

F) Merge the pull request:

Click Merge pull request button > select Create a merge commit > Optionally modify the commit message > click Confirm merge.

Click the Delete Branch button.

View the new commits: Go back to the repo main page > click commits link.

G) Sync your local repo with the remote:

In the local repo checkout the main branch and do a git pull, then log the commits:

On the status bar, click the "feature5" branch name > Select "main" branch.
⋯ > pull
git glog

Delete the feature5 branch:

⋯ > Branch > Delete branch > select feature5

Shared Repository Model - Example 2:

A) Our remote is set up with alias origin.
B) In the local repo create a topic branch, code it, push it to the central repository:

Make sure you are still in sync with the remote: ⋯ > Pull
We are in sync, so create and checkout a new topic branch. Use one of the following methods:

⋯ > Branch > Create Branch Name: feature6
Click "Main" branch in the bottom Status Bar > Select Create New Branch > Enter: feature6

Add and commit your code:

feature6.txt

Some text.
There is a problem on this line.

Source Control toolbars:

+ Stage the changes.
Message box: Add feature6.txt > ✓Commit

app.txt

...
Feature 6.

Source Control toolbars:

+ Stage the changes.
Message box: Add feature 6 to app.txt > ✓Commit

GitHub: Simulate a change to the central repository by another collaborator:

Go to the GitHub repo > Click Add File button > select Create New File.
Name the file about.txt > Content: About this app
Click Commit Changes button > Change commit message to: Add about page
Select "Commit directly to the main branch" option > Click Commit Changes button.

Go back to your local repo. Switch to the main branch to pull any changes since starting our branch:

On the status bar, click the "feature6" branch name > Select "main" branch.
⋯ > pull

git log -1 Log the new commit.

Switch back to the feature6 branch again, merge in the main branch.

Click "Main" branch in the bottom Status Bar > Select: feature6
⋯ > Branch > Merge Branch > select: main
git olog -4 Log the last 4 commits.

Push the branch to the remote:

Click the Publish Branch button

C) In remote repo, create a pull request from the topic branch:

GitHub: There is a notification of the feature6 branch. Click Compare & Pull request button.
Modify pull request name Add feature 6 > add description as a comment.
Click Create a pull request button.

D) Reviewer(s) review the pull request: Approve, make comments, or request changes:

Simulate a reviewer: On the GitHub repo's navigation bar click the Pull Requests tab > click Add feature 6.

Click Files changed tab.
Review the changes.
Click Review changes button > Enter comment: There is a problem in feature6.txt
Select Comment as the type of review > click Submit review button.

E) If the reviewer requests changes, make changes to the local topic branch, then push the commit:

After reviewing the reviewer comment, fix the problem on feature6.txt, commit it and push the update:

feature6.txt

Some text.
This problem was corrected.

Source Control toolbars:

+ Stage the changes.
Message box: Correct problem in feature6.txt > ✓Commit

And push the branch again:

Click the Publish Branch button

F) Review the updated Pull request, then Merge it:

GitHub: Simulate the reviewer again. Click Pull Requests tab > click the Add Feature 6 pull request.
The Files changed tab will show the changes in the topic branch.
If everything looks good, an actual reviewer would click Review changes and approve it.

Change Merge pull request button to the squash and merge option then click and confirm it. This will combine the branch commits into one commit.
Click the Delete branch button.

G) When the pull request gets merged into the remote main branch, sync the local repo:

Switch to the main branch to pull the feature6 commits from the remote, then log the commits:

On the status bar, click the "feature6" branch name > Select "main" branch.
⋯ > pull

git glog v3-beginning-github..

Delete the feature6 branch:

⋯ > Branch > Delete branch > select feature6

Fork and Pull Model

Step A1 (Remote fork) Fork the repo:

In your GitHub git-demo repo, click the fork button to create a forked repo.
Name the forked repo git-demo-fork, then click the Create fork button.

Step A2 (Local fork): Copy the forked repo URL then clone it on your computer:

Click the Code button > The copy the repo's URL. It will be something like:

https://github.com/your-username/git-demo-fork.git

Open a new VS Code window: File menu > New Window.
Click the Clone Git Repository... link > paste in the URL and press enter > select a directory to place it.

Step A3 (Local fork): Alias original remote URL as "upstream":

When you clone the repo, git automatically adds origin as a remote pointing to your forked repo.
Add a second remote called upstream that points to the original source repository:

⋯ > Remote > Add Remote > enter the URL > enter a name: "upstream"

git remote -v shows our remotes.

Push proposed changes to your fork repo, remote name origin.
Pull updates from the source repo, remote name upstream.

Step B (Local fork): Create a local topic branch, code it, and push it to the forked repo:

Create and check out a new topic branch called feature7. Use one of the following methods:

⋯ > Branch > Create Branch Name: feature7
Click "Main" branch in the bottom Status Bar > select Create New Branch > enter: feature7

Code the topic branch:

Add feature7.txt file (with a bug in it), stage and commit it.

feature7.txt

Some text.
This is a bug.

Source Control toolbars:

+ Stage the changes.
Message box: Add feature 7 > ✓Commit

Modify the app file, stage and commit it.

app.txt

...
Feature 7.

Source Control toolbars:

+ Stage the changes.
Message box: Add feature 7 to app.txt > ✓Commit

git olog -2 Log the two commits

Switch to the main branch and do a pull on the upstream repo to make sure it is still in sync.

On the status bar, click the "feature7" branch name > Select "main" branch.
⋯ > Pull, Push > Pull from... > select remote: upstream > select branch to pull from: upstream/main

It is, so switch back to the feature7, and push it to the forked repo:

Click "Main" branch in the bottom Status Bar > select feature7
Click the Publish Branch button > select remote: origin

Step C (Remote fork): In the remote forked repo, create a pull request from the topic branch:

The GitHub git-demo-forked repo has a feature7 notification. Click Compare & pull request button.
This creates a Pull Request on the original repo. Modify the Pull request title: Add feature 7

Add a comment with info on the proposed changes: Adds functionality x, y, z.

Click Create pull request button.

Step D (Remote source): Source repo reviewer reviews the pull request.
Step E (Local fork): Make changes if the reviewer requests them. Assume no change requests are needed.

Step F (Remote source): If approved, the source repo administrator can Merge or Reject the Pull Request.

Assume you are the source repo administrator. Go to the Pull Request page.

Change the merge button option to Rebase and merge then click it.
That adds the commits from the topic branch to the main branch, but does not a separate merge commit.

Click the Confirm rebase and merge button
Click the Delete branch button.

Step G (Local fork): If reviewer merges your PR in original repo, sync the local and remote fork repos:

Go back to your local forked repo and checkout the main branch:

On the status bar, click the "feature7" branch name > Select "main" branch.

Then do a git pull from the original repo upstream from the main branch:

⋯ > Pull, Push > Pull from... > select remote: upstream > select branch to pull from: upstream/main

Then do a git push to your forked repo to also get it in sync with the git-demo source:

⋯ > Pull, Push > Push to... > select remote: origin

If you are done with the feature7 branch you can delete it:

⋯ > Branch > Delete branch > select feature7

Issues

Open an issue for a bug in feature7: Click the Issues tab > New issue button.
Add a title: Feature 7 contains a bug
In the message field, provide details:

Put more details here. 
Mention @someUsername and they will be notified.

Tasklist
- [ ] Task1
- [ ] Task2

Click Submit new issue button. Note the issue number.

Assignees ⚙ setting: Assign yourself to the issue
Labels ⚙ setting. Select the bug label.

Add a comment:

The problem seems to be coming from feature7.txt on line 2:
`This is a bug.`

Click Comment button.

Fix the issue:

Step A) is already done. We have a fork and cloned it to our computer.

Step B) In your local repo create a topic branch, code it, push the topic branch:

In Local git-demo-fork repo main branch, confirm you are still in sync with the remote:

⋯ > Pull, Push > Pull from... > select remote: upstream > select branch to pull from: upstream/main

Create and checkout a branch to fix the issue using one of the following methods:

⋯ > Branch > Create Branch Name: patch-feature7
Click "Main" branch in the bottom Status Bar > select Create New Branch > enter: patch-feature7

Then fix the issue in your code. Change line 2 and save the file.

feature7.txt

Some text.
This bug has been patched.

Stage and commit the change with an extended message: Change #4 to your issue number:

git commit -am 'Fix bug in feature7
 
fixes #4 issue'

Switch to the main branch, and make sure it is still in sync:

On the status bar, click the "patch-feature7" branch name > Select "main" branch.
⋯ > Pull, Push > Pull from... > select remote: upstream > select branch to pull from: upstream/main

It is, so switch back to the patch-feature7, and push it to the forked repo:

Click "Main" branch in the bottom Status Bar > select patch-feature7
Click the Publish Branch button > select remote: origin

Step C) In the remote forked repo, create a pull request from the topic branch:

In the git-demo-fork repo next to the push notification, click Compare & pull request button.

This takes you to the source git-demo repo. Click Create pull request button.

Steps D & E) Skip the review and review followup steps.

Step F) Merge the pull request:

Select the type of merge you want to do: Change the merge button type to Confirm squash and merge and click it.
Click the Delete branch button.

Step G) Sync the fork repos:

In the local git-demo-fork repo, switch to the main branch:

On the status bar, click the "patch-feature7" branch name > Select "main" branch.

Pull from the upstream remote to get your local fork repo back in sync with the source repo:

⋯ > Pull, Push > Pull from... > select remote: upstream > select branch to pull from: upstream/main

But your remote git-demo-fork repo is still out of sync, so do a push to the "origin" remote:

⋯ > Pull, Push > Push to... > select remote: origin

If you don't need the patch-feature7 branch anymore, you can delete it:

⋯ > Branch > Delete branch > select patch-feature7