Project setup
PR visuals
Verified against Soffi ·
A diff tells a reviewer which lines changed. PR visuals show what that does to the screen: Soffi deploys both versions of your app, the pull request and its base branch, and screenshots the pages the change touches on each. Reviewers see the effect without pulling the branch, and designers can check a frontend change they didn't write.
Pull requests opened from Soffi
When someone ships a Workspace, the before and after screenshots go into the pull request's description. Nothing needs turning on for this.
Comparisons for every pull request
For pull requests opened anywhere else, an Admin can turn on automatic comparisons. Open the Project from Projects in the left rail and choose PR visuals.
Turn on Compare pull requests automatically
Choose the service to image. Only React services that build from the Project's primary repository are offered.
Choose the base branches
Pull requests into the repository's default branch qualify unless you turn that off. Add other branches only if just trusted people push to them, because a comparison's baseline and run configuration come from the base branch.
Set the wait after the last push
The default is 10 minutes. Every push restarts the wait, so a burst of pushes produces one comparison of the settled head.
Choose trusted authors
Members and repository writers covers members of your Soffi Organization, members or owners of the repository's GitHub organization, and collaborators with write access. Members of this organization only narrows it to people in your Soffi Organization.
Save
Comparisons appear in the list below the settings.What a comparison does
There's nothing to configure beyond the settings above. Soffi deploys the pull request beside its base branch, signs in the same way your previews do, seeds any data the pages need from the Data Twin, picks the pages the change touches, and screenshots each on both versions. A head that has already been imaged isn't imaged again.
If the pull request changes the sign-in code itself, the usual preview sign-in can't be applied, so the comparison says why and images the sign-in page before and after instead.
Each comparison's status is in plain language: a skipped pull request says why, for example that it changed no frontend code, and a failed one says what stopped it. Open a comparison to see its screenshots. The same comparison appears in the Visual diff panel of the pull request's Workspace.
To compare one pull request by hand, enter its number under Comparisons and click Start comparison. Editors and above can start, cancel, and stop comparisons.
Posting to GitHub
Nothing is posted to GitHub until an Admin publishes it. Publish to GitHub posts the before and after screenshots and Soffi's summary as a comment on the pull request, from the Soffi GitHub App, and everyone who can see the pull request will see them. A comparison whose pages may not be the pull request's own change is marked for review before anyone publishes it.