Pull Request Merged Success Block for React

Nothing was merged or deployed. The six commits, their hashes, the twelve checks and the deploy times are typed sample data, and the lane buttons only change which commits look dimmed. The merge hash is copied through the browser's clipboard. To wire it, fill COMMITS newest first from your history (each with its lane and its parents' ids), GROUPS from the pull request's checks and STEPS from the deploy's events; the graph's lines and dots are worked out from the commits and their parents.

The drawing is hidden from assistive technology and the list beside it is its text equivalent: each commit is a row with its subject, short hash, the author's initials and the day, and the rows that matter carry a note (the merge commit, the deleted branch, where the branch started). A caption read only by screen readers says how the lanes join. The graph is left-to-right whatever the page's direction.

They are a group of three buttons (All, main and the branch) with one always on. Choosing a lane dims the other lane's commits and lines, keeps every row in place so the panel never changes height, and says how many commits are still lit.

Each row is 64 pixels tall and the graph is one SVG of the same height with two vertical lanes. Every edge is worked out from a commit and one of its parents: a straight line within a lane, a curve between lanes, so adding a commit to COMMITS moves the dots and lines with it. The end of a deleted branch is a dashed stub and a cross drawn from its newest commit.

The full 40-character merge commit hash, a typed sample, while the panel shows its first seven characters. A screen reader hears that it was copied.

Open the repository is the Shine Button in the header. It is a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.