feat(project): collaboration tab has inside issues and merge requests

[vfried]

I created a new tab that has inside Issues that where previously Kus and also Merge Requests that where before Previous Changes.

I decided to refactor the way the issues look:

Before they looked like:

There is one layout issue i couldn't solve, when clicking on a merge request the "merge requests" tab gets unselected:

I can try and fix this when i'm back or leave it and create a bug for this.

I can't deploy to virginiatest because is being used but you can use this image to test: virfried/renku-ui:0.6.5-e392a4b

Closes #599
Closes #446

[lorenzo-cavazzi]

I love the new collaboration tab, it's much cleaner than the previous solution. I added a couple of minor suggestions on the layout and I pushed a commit with a fix for the MergeRequestSuggestions component so that the buttons will not overflow. Fell free to change it or include it in your bigger commit (I didn't know how to suggest a change on untouched code lines).

I replicated the small issue you found when clicking on "Create Pending Change". I guess the problem is that the url changes to something like this /projects/lorenzo.cavazzi.tech/zurich-bikes-tutorial/collaboration/mergeRequests/undefined and no tab is underlined on the left because of the final /undefined in the url. EDIT: I guess the problem may be in "Project.js" at line 330 this.props.history.push(${this.getSubUrls().mergeRequestsOverviewUrl}/${newMRiid}) where newMRiid seems to be undefined.

I'll test a little more the Issues section but everything seems to work 😄

[lorenzo-cavazzi]

The Issues part is amazing! I didn't find any problem there.

I have only a request (that may be moved to a separate issue): when creating a new issue, I end up on a page that is not part of the new Collaboration tab. It would be great if the "New Issue" page would be moved there. The url could be changed from /issue_new to /collaboration/issues/new to be coherent with the current routing (/collaboration/issues*) and to simplify including it in the tab.

[lorenzo-cavazzi]

this seems to address also #446

[rokroskar]

This is looking really good! Did you leave "pending change" in a few places on purpose? e.g.
and

[rokroskar]

One more minor thing - the x you use here is used in gitlab for failed CI jobs/pipelines - maybe we should use something else?

[vfried]

This is looking really good! Did you leave "pending change" in a few places on purpose? e.g.

Just to confuse the users haha 😏
I just changed the "pending changes" i missed.

Regarding the icons, that's a good point... I'll try to replace them for something better.

[vfried]

New deployment with latest changes (icons and replacement of some "pending changes" labels) https://virginiatest.dev.renku.ch/projects/virginiafriedrich/zurich-bikes-2/collaboration/issues/10/

[rokroskar]

Hmm I'm wondering if it would be better to have the issues display in a single pane rather than side-by-side with the issue list? Visualizing an embedded notebook becomes very cluttered: https://virginiatest.dev.renku.ch/projects/virginiafriedrich/zurich-bikes-2/collaboration/issues/9/

On a wide screen it's fine but on a small-ish laptop it's probably not very usable.

[ciyer]

This is not the end of the work on the issues or merge requests.

The main change in this issue is to get the "Pending Changes" and "Kus" renamed and placed together in a better location. Since the code was being touched anyway, there were some other improvements made as well.

I agree that issues and merge requests should take up the majority of the screen width, but I want to do that in another GitHub issue.

[ciyer]

Looks very nice! This cleans up the tabs quite a bit.

Requests have been addressed

[vfried]

I added an icon that hides/shows the issues list allowing the user to have a better overview of the issue:

It would be nice to add a css transition to this but i am using display block/none and css doesn't suport transitons for the "display" property.

Testing available in virginiatest.dev.renku.ch

Addresses @rokroskar reqest on top.

[rokroskar]

That looks great, thanks @vfried! Next, keyboard shortcuts for browsing through the issues :)

[ciyer]

Very nice improvements. This cleans up the project page and improves functionality, and will be a good base for building out the collaboration functionality.