A while ago I opened a pull request for my first more ‘significant’ fix to an issue on the Mozilla addons-frontend repository. In the past I only picked up really small issues- stuff like ‘remove a line of code here’ or ‘minor css fix needed there’. However, as I get more involved in contributing to open-source projects, I’ve reached a point where I understand the basic flow and I’m comfortable with the general process.
This bug was slightly more involved, and a perfect way to familiarize myself with the AMO code base. It was an issue labelled ‘good first bug’, but it was suggested that it was more suitable for someone who knew React. I’ve learnt and worked with React, so I figured I’d give it a shot.
It took me a while from the time I commented saying I wanted to pick it up, to open a pull request. I had to figure out how to swap in a component that would hide text which was beyond a certain number of words, to instead display a ‘read more’ button, which when pressed would expand the readable text.
I had to track down the code which rendered the reviews, and figure out how to utilize the component suggested in the issue for reviews where the text was too long.
I started up the testing server and inspected the page using the React Developer Tools add-on. I ran some searches on the code files to find examples of where the expandable component was used, and tried to use it in various ways before finally figuring it out.
I still have to fix/create tests for the new implementation, and I’ll update this post to include some more detailed information about how I did everything at a later time.