[github action] Is it possible to add the link to the build result in the GitHub action on PR page?

[ronny1020]

Feature request

Is it possible to add the link to the build result in the GitHub action on the PR page? With the link, we can easier find the build result.

Proposed solution

Add a message with the link on the GitHub PR page.

Additional context

A message like this kind of message with the link or result.

[ghengeveld]

Hi,

Could you clarify what link you mean exactly? The "build result" could refer to the GitHub Action job, the Chromatic build, or the built / published Storybook.

We currently send 3 commit status updates to pull requests, each with a different Details link:

• Storybook Published - links to your published Storybook
• UI Tests - links to the Chromatic build screen
• UI Review - links to the Chromatic PR screen

We don't post any PR comments like some other tools do. If you feel like this would be a valuable feature, could you elaborate on what you think this message should contain?

[ronny1020]

Thanks for the reply. I just can't find any build result link from the result.

Here is my action file.

name: 'Chromatic'

on: push

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: ./.github/actions/install-packages

      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true
          traceChanged: true

Besides, there could be multiple builds in one PR. It would be easier to know which build is from which push with the message.

[mitchwd]

+1 for this.
Implementing Github Action Job Summaries would be really useful for us. (https://github.blog/2022-05-09-supercharging-github-actions-with-job-summaries/)
Easy access to the outputs like buildUrl and storybookUrl, as well as a count of components would be useful for us!

I found a quick workaround that might help you @ronny1020:

1. Add an id tag to your existing deploy step (so you can reference that step's outputs from another step):

 - name: Deploy to Chromatic
    id: chromatic
    uses: chromaui/action@v1
    with:
      projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

2. Add a new step to use echo to return a markdown table with the outputs you want to see:

      - name: Publish Summary
        run: echo -e "| Results |  |\n| --- | --- |\n| Build Results | ${{steps.chromatic.outputs.buildUrl}} |\n| Storybook Preview | ${{steps.chromatic.outputs.storybookUrl}} |\n| Component Count | ${{steps.chromatic.outputs.componentCount}} |" >> $GITHUB_STEP_SUMMARY

This returns a nice summary that looks like this:

[supunTE]

Is there any way to do this without chromaui/action@v1 but with npx chromatic command?

[kyranjamie]

+1.

For Leather, we have a nice pattern of adding build info to top of PR body (to avoid spammy auto-comments that increment the comments count on Github).

E.g.

We want to add a Storybook and Chromatic link here, for product and design contributors to more easily find the links.