Improved Bounty Issuer Dashboard

martinklepsch commented 6 years ago

Fix #218 Fix #361 Fix #338

Stuff left to do

[x] visual design audit/improvements
[x] empty states
[x] various TODOs in the code

martinklepsch commented 6 years ago

~PR is currently broken.~ Fixed. Found an issue where winner_login was set to andytudhope but there was no claim with that username. For now I'll just remove all PRs that have andytudhope as winner from the UI. This should be addressed with some proper backend flag for revocation as soon as possible (see #284).

martinklepsch commented 6 years ago

@churik when you get to test this, please check that the information in the dashboard makes sense. Outside that dashboard not much should have changed. And please ping @EugeOrtiz after it has been merged so she can check for necessary UI tweaks on staging.

churik commented 6 years ago

1. No automatic update in `Dashboard`

It becomes even more inconvenient with a new dashboard because to see new data everywhere you should update it manually. This is already entered for old dashboard in https://github.com/status-im/open-bounty/issues/361, but for now, it is spread to all data - new claims, when claim changes status, when it appears in To confirm payment. EDIT Martin: ✅ (bounties are now reloaded in the same interval as other data) VERIFY Chu: ✅

new bounties appear;
"Confirm" button is enabled automatically;
bounties transfer from "Unclaimed" > "TO MERGE" > "TO CONFIRM BUTTON" automatically Fix #361

churik commented 6 years ago

2. No `Confirm payout` button when bounty has several claims and one was merged

Steps:

Requirements: GH account is whitelisted, signed app, test application is added to repo;

create issue with bounty
create PR "A" and PR "B" to fix it
merge PR "A"
log in to https://testing.openbounty.status.im (with deployed PR-392)
Open Dashboard -> click TO CONFIRM PAYMENT (wait 10 min)

Actual result:

Submitted a claim via PR "B"; No confirm button;

Expected result:

Submitted a claim via PR "A"; can confirm payout;

So, as a result we have:

in GitHub: 1) closed issue with winner set to PR "A" owner (in SOB bot comment); state Pending maintainer confirmation 2) PR "A" - merged 3) PR "B" - opened
in SOB (Dashboard -> TO CONFIRM PAYMENT): 1) No confirm button 2) Submitted a claim via PR "B"

An example in testing env:

EDIT Martin: ✅(Issue was that we found the winning claim based on a username match but in the case of multiple PRs we just took the first one. Changed it now so we exclude PRs that have not been merged.) VERIFY Chu: ✅

churik commented 6 years ago

3. PRs with long names (2+ rows on GitHub) are overlapped with time

Steps:

Requirements: GH account is whitelisted, signed app, test application is added to repo;

create issue with bounty
create PR "A" with long title (i.e. "FIRST long name issue FIRST long name issueFIRST long name issueFIRST long name issue FIRST long name issueFIRST long name issueFIRST long name issueFIRST long name issueFIRST long name issue FIRST long name issue FIRST long name)
Open Dashboard -> TO MERGE

Actual result:

monosnap screenshot tool 2018-04-20 16-23-10

Expected result:

no overlap

EDIT Martin: ✅ VERIFY Chu: ✅

churik commented 6 years ago

4. `Merged bounties` - what is it for?

I have no idea, what should be displayed here. Seems like it is for claims, which are already merged but not paid. Is it for state Update ETH address (when BHunter should set his ETH address)? In any case, it is not clear what is the idea of this column and when bounties should appear there.

EDIT Martin: ✅ removed VERIFY Chu: ✅

5. When update page, it would be nice to display spinner first

For now when I reload the page (in Dashboard), firstly "empty state" page is displayed, then spinner, then actual data is loaded. Video: http://take.ms/pPozF Would be nice to display spinner, then load actual data (remove this "empty state" page).

EDIT Martin: ✅

6. SOB doesn't open a new tab when you click on the link (the same tab is used)

Any links on SOB are opened in the same tab. Actually to leave site is really easy, but to get back, you should type URL in the browser again. Would be nice to open links in new tabs.

EDIT Martin: ✅ removed VERIFY Chu: ✅

7. "View pull request" overlaps PR link (iPhone 7, Safari)

Steps: Requirements: GH account is whitelisted, signed app, test application is added to repo;

create issue with bounty
create PR to fix it
Open Dashboard -> TO MERGE
Actual result

Expected result

no overlapping

EDIT Martin: ✅ removed VERIFY Chu: ✅

churik commented 6 years ago

8. Closed bounties and PRs are displayed on Dashboard

EDIT Martin: ⚠️I think I fixed Scenario 2 but Scenario 1 is a bit tricky still because we don't track the issue state in our DB I think. Maybe @siphiuel has some idea on that. Question also arises how we would show these bounties then — are they "revoked"? VERIFY chu: scenario 2 is fixed now

Steps:

Requirements: GH account is whitelisted, signed app, test application is added to repo;

Scenario 1 (Issue closing)

create issue with bounty
check that new bounty is displayed in "Bounties"
open Dashboard, check that new Bouty is displayed below "Bounties not claimed yet."
close issue
wait until bounty disappears from "Bounties"
check "Bounties not claimed yet." section

Scenario 2 (PR closing)

create issue with bounty
create PR to fix it
check that PR is displayed in Dashboard -> TO MERGE section
close PR
wait until claim disappears from "Bounties"
check TO MERGE

Actual result:

Scenario 1: an issue is still in "Bounties not claimed yet." Scenario 2: PR is still in "TO MERGE" section clos

Expected result:

Scenario 1: issue disappear from "Bounties not claimed yet." Scenario 2: PR disappear from "TO MERGE" section

martinklepsch commented 6 years ago

SOB doesn't open a new tab when you click on the link (the same tab is used)

Would like to hear what @EugeOrtiz thinks about this. I'd assume most of our users know how to open stuff in a new tab and I think sometimes people get annoyed by apps making that decision for them.

churik commented 6 years ago

9. Different styling in "Activity" fee in `develop` and in PR

Before - "Activity" page in current develop, after - in current PR. after BTW, design of "Bounties" page is the same.

EugeOrtiz commented 6 years ago

UI feedback - WIP

WEB DESKTOP General

[ ] ~Space between SOB header and “Manage bounties” title should be 40px~
[x] Menu name should be “Manage bounties"
[x] Dashboard title should be font-weight: 500;
[x] When I close the “first time” blue message, the tab “To merge” is highlighted, even though I was in “To confirm” - M cannot reproduce
[ ] ~Distance between “Manage bounties” title and tabs should be 40px~

Blue info “First time” message 🖖

[ ] ~Space between dashboard title and blue message should be 24px~
[ ] ~Box height should be 50px~
[x] Link “Chat with us” should open Riot in a new tab
[x] Close “X" icon is too small
[ ] A little animation (see comment on Zeplin) when closing the message would be nice to have 😃

Summary

[x] Review size of $ sign
[x] Review size of numbers
[x] Review numbers line height
[x] $ + number should be dark-gray

Tabs

[x] Distance between tabs should be 24px
[ ] Distance between blue line and first card should be 24px

ToMerge cards

[x] Review box paddings
[x] Review issue name style — M font-size 18px is not part of type scale. E Let's try it with 1.25rem then
[x] Review user name style
[x] This cards do not show currencies/value
[x] “Current claim” subtitle is missing
[x] User img should be 42x42
[x] Date should be #8d99a4 (gray)
[x] PR url here is not a link, it should be gray
[x] Button should be main-blue
[x] ~Button’s height should be 45px~
[x] Button’s label is missing letter spacing — 💬Martin: it has 1px letter spacing instead of 1.1px. Tried to generalize the various values used in the design. (0.9 & 1.1)
[x] Button is missing box shadows
[x] Button should open PR in a new tab
[x] Long title max is 2 lines, otherwise we should crop it with ellipsis “…” on the end of the 2nd line

ToConfirm cards

[x] Review box paddings
[x] Review issue name style — M font-size 18px is not part of type scale. E Let's try it with 1.25rem then
[x] Review user name style
[x] Case with ANT and SNT > ANT should get ETH colors. No matter the currency, if there are 2, they should get different styles
[x] User img should be 42x42
[x] Date should be #8d99a4 (gray)
[x] Link for PR should be main-blue
[x] CTA is missing
[ ] Main Button's height should be 45px (same as Confirm Payment)
[ ] Copy > Confirm card - Text should be "Claimed on - Merged on " — M: We don't have this information in our database (yet).

Secondary cards

[x] Review card sizes
[ ] Review card paddings
[ ] Review card border radius
[x] “Unclaimed bounties” (and similar titles) should be font-size 1.25em (20px)
[ ] Little counter > Height should be 24px
[ ] Little counter > Font size should be .87rem
[x] Little counter > Font color should be gray
[x] Long bounty title max is 2 lines, otherwise, we should crop it with an ellipsis “…” on the end of the 2nd line
[x] Bounty title: review line height
[x] Bounty date label should be #8d99a4 (gray)
[x] Bounty date label should be 14px
[x] Review crypto labels style (remove box, review font and letter spacing)
[x] “Value $XXX” label always goes beneath the currency labels (ETH, SNT, etc.)
[x] Review font-size for “Value $XXX”
[ ] "Show more"/"Show less"> Review chevron icon
[ ] Copy > it should be “Show more” or “Show less”
[ ] Behavior > “Show more” should open batches of 6 cards and keep saying “Show more” if more cards are available, otherwise it should say “Show less”.
[ ] Distance between card and “Show less” component should be 16px
[x] “Show more” label + icon should be main-blue
[ ] "Paid out" bounties card > Payout date is missing
[x] "Paid out" bounties card > Username should be gray
[x] "Paid out" bounties card > Review font size for “Paid out” label

WEB MOBILE

[x] Welcome blue message should be shown on top of summary:

martinklepsch commented 6 years ago

Case with ANT and SNT > ANT should get ETH colors. No matter the currency, if there are 2, they should get different styles.

I'm not sure I understand. Currently, ETH gets a particular color, and ERC20 tokens get the same.

From @churik: agree with @martinklepsch. Also don't fully understand why this happened: styling

Behavior > “Show more” should open batches of 6 cards and keep saying “Show more” if more cards are available, otherwise it should say “Show less”.

I started implementing this but then reverted my changes when stuff got hairy. I think for a V1 we should be okay with a show all button, especially since Andy is the only person with a large number of bounties. And even for him being able to expand all and then use browser tools like ctrl-f might be better.

Border radii scale

We briefly touched on this yesterday. I'd like us to define a scale for border-radius. Currently we have 4px, 8px, 16px but the designs use 8px, 10px. In a small refactoring I also made sure we use the same code to render balance-badges everywhere so we can easily change this across the entire site.

churik commented 6 years ago

10. Old bounties are displayed on top by default ('TO MERGE', 'TO CONFIRM')

Steps:

Requirements: GH account is whitelisted, signed app, test application is added to repo; there are some bounties in 'TO MERGE' column

Steps

create the issue with bounty
create PR to fix it
open 'Manage bounties' > 'TO MERGE' section

Actual result:

sorting

Expected result:

the latest bounty on the top EDIT Martin: ✅ VERIFY chu: ✅

EugeOrtiz commented 6 years ago

From @churik: agree with @martinklepsch. Also don't fully understand why this happened

Ok on the different styles (eth vs rest of tokens). @churik they have different styles from the primary cards because the ones at the bottom are secondary information and they take a lot of visual hierarchy with the badges background.

EugeOrtiz commented 6 years ago

More UI feedback (posted here as requested):

[x] Blue welcome message > Change distance between dashboard title and blue message to 16px
[ ] Summary > Tooltip is missing

@churik Other cases we should test:

[ ] Nothing to confirm zpl.io/bWRBO1P
[ ] Nothing to merge zpl.io/blm151v
[ ] BHunter's address pending zpl.io/aXzW9vP

arash009 commented 6 years ago

For the summary view "Paid out...", "Open for..." what format are we using for the $ values? Until we do localization or agree on a standard approach, we should make sure they are consistent across the platform, which is e.g $4301.01 for now

@arash009 you can see on screenshot below (answer from @churik): bax

martinklepsch commented 6 years ago

@arash009 we format numbers based on the users locale.

EDIT we format Dollar values based on the users locale. For crypto amounts we use the basic float format, eg 1000.25

churik commented 6 years ago

11. Unable to switch between 'To confirm', 'To merge' after posting first bounty

Steps:

Requirements: GH account is whitelisted;

Steps

sign up to testing.status.im for first time
update payment address
install GH test app to repo
add issue with bounty label
go to 'Manage bounties', try to switch between TO CONFIRM, TO MERGE

Actual result:

Error rendering component (in page > sW)
(anonymous) @ app.js?v=a65ebf0:782
app.js?v=a65ebf0:150 Uncaught Error: function Rf(a){switch(arguments.length){case 1:return Rf.j(arguments[0]);case 2:return Rf.h(arguments[0],arguments[1]);default:for(var c=[],d=arguments.length,e=0;;)if(e<d)c.push(arguments[e]),e+=1;else break;return Rf.l(arguments[0],arguments[1],new w(c.slice(2),0,null))}} is not ISeqable
    at K (app.js?v=a65ebf0:150)
    at Df (app.js?v=a65ebf0:201)
    at Gf (app.js?v=a65ebf0:202)
    at app.js?v=a65ebf0:1347
    at Object.reagentRender (app.js?v=a65ebf0:1347)
    at app.js?v=a65ebf0:780
    at FH (app.js?v=a65ebf0:781)
    at app.js?v=a65ebf0:782
    at YG (app.js?v=a65ebf0:757)
    at ZG (app.js?v=a65ebf0:758)

err1 Unable to open TO MERGE

Expected result:

No errors; TO MERGE is not available;

EDIT Martin: ✅ VERIFY chu: ✅

churik commented 6 years ago

Test results: https://ethstatus.testrail.net/index.php?/reports/view/15

Login - TestRail

status-im / open-bounty