Create Figma Mockups

[moul]

We will try two new things:

1. To use Figma instead of Sketch
2. To delegate completely the styling implementation to someone else

Can you start mockups on Figma of some screens you want to see on yolo?
I've no fear to add more views later, so focus on what you think to be the most useful things for now 👍

[alexsland]

As far as I can tell for now

The following pages:

• Login
• List of builds, with "switcher" for iOS, android, macOS...

For each "build", a generic component displaying the following informations:

• code related informations:
  • branch
  • title
  • author with github avatar maybe ?
  • commit message
  • commit hash (does it really needs to be displayed ?)
  • state graphic with color and/or icon
  • link to logs
• build informations:
  • date
  • also add duration ? (time to build)
  • state graphic with color and/or icon
  • URL (buildkite) -> only display the build number ?
  • Download link large obvious button
  • Plist link

For each pages: mobile and desktop/tv view (responsive)

[moul]

• Login

there is a chance that the login UI will be managed by an external service, but I prefer that you plan to have one as a backup plan 👍

• List of builds, with "switcher" for iOS, android, macOS...

yep 👍, in the future there will be more filters (by branch, or at least a branch == master checkbox), maybe by author, etc, try to find a way of having multiple filters (I don't think we will need a "advanced filters" dropdown menu, this will be limited to 3 or 4 different filters)
Another filter you can add right now is the "Project" one, because yolo supports having multiple projects at the same time, in our case we will have at least "Berty Chat" and "Berty Demo"

For each "build", a generic component displaying the following informations:

• code related informations:
  • branch
  • title
  • author with github avata maybe ?
  • commit message
  • commit hash (does it really needs to be displayed ?)
  • state graphic with color and/or icon
  • link to logs
• build informations:
  • date
  • also add duration ? (time to build)
  • state graphic with color and/or icon
  • URL (buildkite) -> only display the build number ?
  • Download link large obvious button
  • Plist link

Code related pieces of information will be available on most CI but not on all, so make this part optional

Commit hash is important yes, because it is the most reliable way of having a "version", so yes we need to display it explicitely (will be shorted to ~8 chars length)

About GitHub, yes author with GitHub avatar, just take into account that there is always one "author", the one opening the PR, but it can be multiple commiters, multiple reviewers, if you plan to display those pieces of information make them "arrays"
Also, when GitHub relatinoship is available, we can also have more details like amount of comments, amount of "+1" "-1" reactions etc

Build duration will be available most of the time but on some artifact stores it may be missing, so yes keep it but it can be empty in some cases

For each pages: mobile and desktop/tv view (responsive)

Yep 👍

---

Also, as a bonus you can imagine a kind of dashboard page with what you hope you could see, even if not possible, it can be a good source of inspiration to actually develop the dashboard, maybe something similar to what we had with a thread by subproject + some timelines, histograms etc?

---

Ohhhh and last thing, this time we have a DB, I plan to log the actual amount of downloads, so you can already add this new info too

[moul]

@alexsland can you share a link (even if it's only WIP) so that @ekelen can have an idea of how it will be?

[alexsland]

Hi @ekelen

Here is a first draft, for mobile version :

1. List "light"
   • just basic info, when clicking chevron down shows full version
   • first color tag is for CI state, second and eventually third are for build state
2. List "full"
   • first line has unique block info, and code author info
   • second line is for code related info (commit hash, CI state, commit message, link to logs, link to github) - need to add branch name
   • third and eventually fourth lines are for build info (platform, build id, build state, time and duration)
   • if the build succeeds and the artifact too we display a big download button (green for master branch, purple for other branches) - need to handle when build succeeds but artifact fails
3. When clicking on the floating filter button, the filter drawer/modal appears, (at bottom of page for easy thumb reach, will be probably different on desktop)

Additional notes:

• All the cases/situations/states are not handled yet
• This pages are missing a header (I also need to do a logo for yolo...)
• States have only 3 colors : yellow, green, red but can have multiple labels (running, passed, failed, scheduled, skipped....)
• We keep the blue for interface buttons (like in the filters)
• Desktop version will have the same blocks, with probably more info and probably a large "dashboard" view
• I will also do a darkmode

[alexsland]

Sketch file : https://sketch.cloud/s/DZ194
Design specs : https://hackmd.io/@berty/H1fZ9D_PU

Sketch

yolo_v2

Shared on Sketch Cloud by Alexandra Grasland

403 Forbidden - HackMD

[moul]

Thank you @alexsland

To close this PR, can you open a pull-request that updates the main README with those two links somewhere?

[ekelen]

If this isn't done, can I do it so I can close this + its dependant #12 ?

[github-actions]

🎉 This issue has been resolved in version 2.15.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀