mozilla-frontend-infra / codetribute Goto Github PK

Create search bar to filter based on projects

The current error panel has transparent white text and a black arrow on a red background.

Let's add more contrast by making the text and arrow both white. You can see how we do it in taskcluster-web.

The material design is designed to be used with the Roboto font. The project is currently defaulting to the Helvetica font. You can see that by opening the dev-tools in Firefox and inspecting which font has the underline:

We can make use of react-fout-stager to load the font in stages so that we maintain the UX.

This include creating a loader file which read the yaml files to be exported.

Add filter based on the project in the Toolbar on top of the task table

Based on this https://help.github.com/articles/searching-issues-and-pull-requests/#search-by-label, we need to add " before and after the label, for issue with space.

On table header click, we are now able to sort based on the clicked header. Yet, the url stays the same. It may be better to have query string with parameter of sort on and sort direction so that people can bookmark it and return to it without too much clicking. It will also help later when we add filter by

Now that we have each project's information, the data.yaml is not used anymore.

As of now, the bugs we are fetching from bugzilla are those labeled 'good-first-bug' as its tag, when I check on a few website linking to bugsahoy, most of the site mentioned that BugsAhoy are meant for mentored bugs so i think we may need to add capabilities for mentored bugs
TODO: find appropriate query to query mentored bugs

STR:

1. Navigate to http://codetribute.netlify.com/
2. Press Tab to have the cursor show inside the search bar
3. Press Tab again

Expected: The focus is now on the first project and the user is able to traverse the list of projects via the tabs key.
Actual: The focus goes somewhere besides the URL.

Project introductions take a lot of vertical space. Let's have the panel closed by default so contributors can see the list of tasks on page load.

The button when clicked will redirect user to one of the bugs page

The spinner in the project view is too close to the project introduction panel:

Let's add some spacing between the panel and the spinner.

Info button when clicked will show information about the bug / issue.

It will only display the last label because of the mergeAll implementation.

When user clicks on the chip, it should filter the bugs that has that tag

Fetch data using graphql to get the issue and related info and display them on the table.

The project summary sometimes takes a lot of horizontal space. We should perhaps add a maximum width and ... at the end to show the text is cut. To see the full summary, we could use a tooltip.

Example: Bug 1135584 takes a lot of horizontal space pushing subsequent columns further

It would be neat to be able to hide the project introduction if a user does not want to be bothered by it. Material UI offers the expansion panel which we could make use of it. When a user enters the page, we could have the panel expanded by default.

Scrolling the table horizontally scrolls "Bugs & Issues" and the filter icon as well. The expected outcome is to only have the table content be scrolled.

Clicking on "I'm Feeling Adventurous" currently opens a new window. Let's have it open a new tab instead.

The last updated column in the project table shows the date in the long format (2018-05-04T21:58:21Z). It would be nice if we can have last updated to be something like "2 days ago". We can achieve that with https://date-fns.org/v2.0.0-alpha.9/docs/formatDistance.

In a11y.yaml, we actually need to add additional keyword to the query on top of the good-first-bug that we implement

Clicking on the "Tag" column throws an error in the console: referenceElement.match is not a function.

• create view in route : /projects/:id
• create table for bugs
• load project description and display it

We should try to have links inside the project introduction open in a new tab since they are external to the app.

Running codetribute locally I get errors in the console. Let's make the console happy :)

In many of the material-ui components, the API exposes a component prop giving you the ability to change its DOM element.

Tags like that are a little bit hard to scan. Let's find a better way to display tags in the UI. We can probably show each tag in a Chip.

Add documentation

For developers looking at the codetribute pages, they may want to know how to edit the source, or fix items in the source.

Can we put a link to this github repo on the page somewhere?

Organize the .yaml files (one .yaml file per repository) and put them in an appropriate directory

using the bugzilla graphql gateway repository inside mozilla frontend infra

Add a README file to tell other people what is this project, how can they use it (Usages / Installation), how can they contribute, etc.

Example:
https://github.com/mozilla-frontend-infra/bugzilla-graphql-gateway/blob/master/README.md

One of the benefits of bugsahoy was that you could filter by language (c++/js/etc). There's lots of people that don't know all languages, so it would help people when finding associated bugs.

codetribute could maybe just list the languages, and add a filter, or just do a filter.

I believe it is generally the mentored bugs that have been annotated in the past (not always the good-first-bugs). There are generally annotated in the whiteboard with one of:

[lang=js][lang=xul]
[lang=js,xul]
[lang=js/xul]

The description is in the format of ( ID - title ), sorting by using string may not be suitable for ID which is a number.

Now on the project page, there is a filter icon, which when clicked will show the filters. It would be nice to have reset button to reset all the filter back to the default state.