[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.

[tay1orjones]

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

We have our github actions workflow "deploy" published storybook urls to an environment. It leaves condensed entries on the PR timeline for each commit/publish with a button to "View deployment". The deployments/environments section above the status checks also shows the most recent publish. IMO this is way better than those hefty comments from other tools. In this same step a job summary is created.

chromatic-react:
  runs-on: ubuntu-latest
  outputs:
    buildUrl: ${{ steps.chromatic.outputs.buildUrl }}
    storybookUrl: ${{ steps.chromatic.outputs.storybookUrl }}
  steps:
    - id: chromatic
      name: Run Chromatic
      uses: chromaui/action@4d8ebd13658d795114f8051e25c28d66f14886c6 # v13.1.2
      with:
        projectToken: #####
        workingDir: packages/react
        buildScriptName: storybook:build
        
react-storybook-preview:
  runs-on: ubuntu-latest
  needs: chromatic-react
  environment:
    name: '@carbon/react storybook preview'
    url: ${{ needs.chromatic-react.outputs.storybookUrl }}
  steps:
    - name: Generate job summary
      env:
        buildUrl: ${{ needs.chromatic-react.outputs.buildUrl }}
        storybookUrl: ${{ needs.chromatic-react.outputs.storybookUrl }}
      run: |
        echo "### @carbon/react storybook deploy preview :rocket:" >> $GITHUB_STEP_SUMMARY
        echo "" >> $GITHUB_STEP_SUMMARY # this is a blank line
        echo "- Storybook deploy preview: ${{ env.storybookUrl }}" >> $GITHUB_STEP_SUMMARY
        echo "- Commit: ${{ github.event.pull_request.head.sha }}" >> $GITHUB_STEP_SUMMARY
        echo "- Chromatic build URL: ${{ env.buildUrl }}" >> $GITHUB_STEP_SUMMARY

It would be nice if the action had this built in so the timeline could correctly show that "Chromatic deployed to ..." instead of the github action actor.