For my second issue for Hacktoberfest, I chose to contribute to the Thermal Project. Thermal is a free, open-source, cross-platform Git GUI built by developers for developers. This blog post will briefly discuss how I tackled this issue and what I learned in the process.
The Issue Explained
This issue is a bug fix. Basically, when a user adds a new local repository and selects a folder from the file explorer, the file path doesn’t show up in the text field (as shown in the image below).
To get started, I first read the contribution guidelines and set up my development environment. The development tools required for this project were Git, Yarn, and Node.js. The project is mainly based on vue.js and Electron. As the issue deals with a bug affecting the front-end, I figured that I would have to narrow down the Vue Component handling the “Add Local Repository” feature.
After traversing through the file hierarchy, I found the addLocalRepository.vue component which was responsible for opening up a modal and handling folder selection options. Next, I had to read the getting started documentation from the Vue.js website as this is a new framework for me. After covering the basics, I tried to read the code from the repository in order to get an idea about what could be causing this problem. After playing around with a lot of template elements, I found the culprit to be the InputText element. The thermal project had its own custom form elements like inputText which were similar to HTML input elements but in this case, the data binding didn’t work as expected.
So after I determined the root cause of this bug, I fixed it with three simple lines of code:
this.pathToRepository = event.target.files.path.split("\\").join("/");var repositoryPathInput = document.getElementById("pathToRepository"); repositoryPathInput.value = this.pathToRepository;
Basically, I selected the custom inputText element having the id “pathToRepository” and assigned its value to be the same as the pathToRepository variable which is binded to the element (using Vue.js two-way data binding with v-model attribute). Thus, the selected path now appeared in the input field. Finally, I did a unit test and created a pull request.
See the fixed input field path here:
- Learned to find the root cause of a bug.
- Learned about Vue.js directives.
- Learned about Vue.js components and their lifecycles.
- Learned about class and style bindings in Vue.js.
- Learned about event-handling in Vue.js.