'Report a bug' link from AMO footer leads to a 404 page

[AlexandraMoga]

Describe the problem and steps to reproduce it:

1. Open AMO - https://addons.mozilla.org/en-US/firefox/
2. Scroll down to the footer section
3. Click on the 'Report a bug' link in the 'Add-ons' column

What happened?

The link leads to a non-existent page - https://developer.mozilla.org/Add-ons/AMO/Policy/Contact

What did you expect to happen?

The link leads to a Contact page

Mentor: @bobsilverberg

[caitmuenster]

Thanks for catching this, @AlexandraMoga! "Report a bug" should link to https://developer.mozilla.org/docs/Mozilla/Add-ons/Contact_us

[bobsilverberg]

While this may be a good first bug, it's also something we should probably fix ASAP, so I'm thinking about just fixing it. WDYT @caitmuenster @jvillalobos?

[jvillalobos]

There are no more pushes this year, so this is going to sit here for at least a couple of weeks. I don't think there's any rush right now.

[bobsilverberg]

There are no more pushes this year, so this is going to sit here for at least a couple of weeks. I don't think there's any rush right now.

Good point! Ok, let's label it as an actual GFB, and I'll add myself as a mentor.

[matheusinacio7]

Hello!

I'm new to open-source (and somewhat new to coding as well), and I'd like to start contributing.

This seems like a very good starting point. Probably just changing the code that generates the href should do the trick, right?

How can I do this?

[bobsilverberg]

@heyset That is correct. It looks like the code for that is at https://github.com/mozilla/addons-frontend/blob/master/src/amo/components/Footer/index.js#L92.

[amankrx]

Hello,
I would like to work on this as my first contribution to mozilla.
I've gone through the basics and have build firefox locally. I was not getting any good issues to work on for few days, and would love to contribute on this as my first issue.

[bobsilverberg]

@amankr1619 Thanks for your interest, but it looks like someone else will be working on this.

[amankrx]

OK thanks, I will look for something else then..

[matheusinacio7]

@heyset That is correct. It looks like the code for that is at https://github.com/mozilla/addons-frontend/blob/master/src/amo/components/Footer/index.js#L92.

Alright. Thanks. I'll work on this right now.

[matheusinacio7]

@bobsilverberg Can you help me?

I've installed WLS 2 on my PC, created the local folder inside the virtual machine and cloned the repository. I've located the file in my folder and also the relevant line.

How should I proceed?

How do I run tests locally in my local repo? Running yarn test appears to test things, but can I actually open a browser window to check the final files?

Should I create a local branch?

Sorry if I'm asking too many questions. This is my first contribution ever, and also the first time I've ever used a virtual machine or actually tried to work on any big project.

Here's a screenshot of where I am right now:

[sarthakkundra]

This assigned person seems to be inactive for a long time. Can I make a PR to fix this? @bobsilverberg

[matheusinacio7]

Hello!

Actually, I'm not inactive. I've been checking everyday to see if someone has commented something that could help me with the next steps.

It'd be great to get some help on how to continue from where I am so I could get started on contributing, but I understand if it's necessary to just fix the issue due to priority.

[sarthakkundra]

Hi @heyset . First of all I am so sorry for assuming you were inactive. Also I thought this issue needs to be resolved ASAP as no users were being able to report a bug if they experienced one.

To see how I fixed that you can click on the linked PR, which has open written beside it.

As far as I can see you were at the correct path. You just had to change the URL there to the correct one and then edit the corresponding test accordingly. If you want a local copy of the website to be running on your setup using the code you have opened in your text editor you can run yarn amo:dev and then you can play around on the site.

Once again I am so sorry for jumping the gun here. Feel free to ask any more doubts if you have any.

[matheusinacio7]

@sarthakkundra I understand completely, no offense taken.

I'll take this opportunity to ask questions then, if you don't mind. I'm trying to get into open source, but I'm still a bit confused by the workflow.

I have run yarn and yarn amo:dev, then I opened my browser in localhost:3000 (and tried localhost:3333 too), but the site looks broken, doesn't seem to have any CSS applied to it. I'm not sure how to fix this issue. Does it have something to do with the fact that I'm running the command from a WSL Ubuntu command line (as per instructions on the contributing guide) while trying to open the page on the browser on my windows? I'm not used to running WSL.

[bobsilverberg]

Sorry @heyset, vacation time interfered and then I needed to get caught up. I'm not sure exactly what the problem is with the css on your local machine. Can you check the console and see if there are any relevant error messages?

Even with broken css, you could still potentially verify the fix for this by scrolling to the footer and checking that the link points to the correct place. Also, you should be able to update and run the test to verify that it's also working. I would suggest you update either the code or the test first, and then run the test to verify it fails (which it should if you've only updated one or the other), and then update the other piece and run the test again and see that it passes.

If you'd like to try doing those things you can submit a patch similar to what @sarthakkundra has done already. If you'd like to wait to work on something else I will review @sarthakkundra's patch. Please let me know how you'd like to proceed.

[matheusinacio7]

@bobsilverberg Hello! I imagined you were busy due to holidays + coming back from them haha

Here is attached as a .txt file everything that is going on in the console after I run yarn amo:dev and after I open the page in a browser on the localhost:3000 address:
yarn log.txt

And, indeed, by fixing the line 92 at /src/amo/components/Footer/index.js the link works, even with the broken css, so I think the webpack server is running fine, at least as far as outputting the basic structure is concerned.

I don't really know what to do next, though. I'd be totally okay with you reviewing and merging @sarthakkundra patch, but I would absolutely love to get help on how do I proceed to

1. Build/apply the patch in order to open the pull request. What should I do?
2. Fix the broken CSS on my local machine.

I'm very hyped to be getting on the opensource train, but I'm confused by the workflow, since the courses I have taken so far only deal with small scale projects. I want to learn, so I can maybe do some meaningful contributions to Firefox and other awesome opensource projects in the near future.

[sarthakkundra]

@heyset To answer your questions

1. You can do git pull after the PR is merged to have the changes I did on your local machine or you can look at the PR and basically copy what I did there but that will be a waste of time in my opinion.
2. Can you open the source panel on your dev tools and see what files are causing the render? I think it's an issue of JS not being rendered rather than CSS because this is how the website looks when you open it for the first time or go to a new page (it has a JS load flash). @bobsilverberg thoughts?

[matheusinacio7]

@sarthakkundra Thanks for your reply.

About the first question: It really is more focused on getting to know how the contributing workflow works after the pull.

Here is the source panel on chrome dev tools:

Firefox Style Editor says the page has no stylesheet:

[sarthakkundra]

@heyset You can pick an issue just like you picked this one by commenting. After that preferably you should do the following steps.

1. Create a new branch with git checkout -b branchname.
2. Code your fix.
3. Test your fix yourself and then run yarn test and make sure all the tests are passing as well. If not fix them accordingly (Note :- if you added a new feature it is appreciated if you write a corresponding test for it as well).
4. Push your code to Github and create a PR.

Hope this helps :) Also as far as the sources are considered you'll have to dig in them to see if there are source JS files there or not.

[matheusinacio7]

@sarthakkundra It does help! It's kind of what I had in mind, but doing the first contribution gets me a little insecure haha

There seems to be no .js file in the source, just .svg and .png. Any idea how can I fix this?

[sarthakkundra]

@heyset No idea. Try different browser maybe that helps but I doubt.

[sarthakkundra]

@bobsilverberg Can you please merge the PR as there seems to be no conflict. Thanks!

[AlexandraMoga]

This issue is verified fixed on -dev: