Another week of Hacktoberfest and another pull request to do.I successfully did a pull request this week as well making it my 3rd Pull Request of 4 required to complete Hacktoberfest.
For the third PR( Pull Request), I worked on a project built with angular. The project named Codelab focuses on helping and guiding people to learn TypeScript and Angular. It is a fairly popular project with many 152 stars and 53 forks. It had some good amount of issues and I chose this issue to work on. The issue-1033 is basically a combination of bug fixes and enhancements. The issue is related to configuration of Monaco Editor . When a user is typing in Monaco Editor and presses Ctrl+S, the save page dialog box is opening which should be prevented. The issue also asks to add an indicator for showing that changes has been saved.
I replied to the issue that I want to work on it. The project contributor assigned me and provided some key points to get started with this issue.
I forked the repository (view my fork) and cloned it to my computer to start working on it. But there was one major thing. WHAT EVEN IS A MONACO EDITOR ?.
I went on to google and searched monaco editor.
It is an open source editor created my microsoft. It is really popular and is used in many projects. It is an open source editor created my microsoft. You can view the project on github by clicking here.
While going through the monaco editor repository, I read it’s documentation and how to configure it with different options. I stumbled upon Keybinding property which can be used to set what a key combination does. Now what left was that how to prevent the Save Dialog Box from opening. I googled more and found a solution that can solve this part of my problem.
I went back to the project and saw the files where the monaco editor was being configured(the project contributor specified me some files where editor configuration is done)
I found the sweet spot to add new key bindings in the configuration of the editor.
The code looked liked this
The code seemed to work and prevented the dialog box to appear and instead a alert box with text ‘Saved’ was now being displayed
The Second Part
I asked in the issue, about what they would like to see popup or happen on pressing Ctrl+ S and when one of them suggested a Snackbar and in specific the Angular Snackbar.
I went to the documentation of Angular Snackbar and learnt how to use it. Luckily, the project already is using Angular Material package and had MatSnackBar(Angular snackbar component name) package installed. I just imported that into the modules and used them in the function which was being called on pressing Ctrl+S. The new code looked like this:
Everything was working good with the snackbar implemented.
I pushed the changes to my new branch of my fork. You can view the branch with new code here and made a PR and waited on the review. The pull request can be viewed here. The Travis CI test failed as the project tests were not up to date yet.
I got review the next day and had some things to fix. One was removal of using const that =this and replacing it with arrow function and removing some unused code.
The next day I made the changes which were asked to be made. The code looked like this:
After some testing, I went on to commit the new changes but got some errors that this repository is out of date with my remote fork. I thought it was a vague error as no one else has access to my fork.
So i did the push with -F and it went through. I went back on github and saw my code in place but it had deleted somebody’s pushed commit on my fork. It was the updates test code to test my changes.
I tried to recover it but nothing worked. I tried reflogging to get back the commit hash. git reset with it but it didn’t seem to work. More search led me to the realization that the lost commit can be recovered only form the other side by the person who committed it. I pushed the commit and did mention this in the pull request.
The Travis CI test still fails but one of the contributors did approved my pull request. I was asked to do some minor changes and then it shall be merged.
Happy Coding !
- Original Repository: https://github.com/codelab-fun/codelab
- Github Issue: https://github.com/codelab-fun/codelab/issues/1033
- My Fork of the repository: https://github.com/jatinAroraGit/codelab
- My Fork’s Branch with the fix: https://github.com/jatinAroraGit/codelab/tree/issue-1033
- Pull Request: https://github.com/codelab-fun/codelab/pull/1163
- Guide to cloning repositories and submitting pull request: Release 0.1 Blog