Skip to content
file-text

GitHub Action

replace-comment-html

v1.0.2 Latest version

replace-comment-html

file-text

replace-comment-html

This action upserts HTML in GitHub issue or pull request comments using CSS selectors

Installation

Copy and paste the following snippet into your .yml file.

 
              
- name: replace-comment-html

              
  uses: htunnicliff/[email protected]
Learn more about this action in htunnicliff/replace-comment-html

Choose a version

Replace Comment HTML

This action upserts HTML in GitHub issue or pull request comments using CSS selectors.

Usage

Here's an example of how you might use this action in a workflow:

name: Deploy Previews

on:
  pull_request:
    branches:
      - main

jobs:
  deploy:
    strategy:
      matrix:
        env: [dev, stage, prod]
    steps:
      # ... steps to deploy preview envionment ...

      # Create a comment with an empty table
      - uses: htunnicliff/replace-comment-html@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          selector: "#preview-links"
          mode: create-only # This will create the table if it doesn't exist
          html: |
            <table id="preview-links">
              <thead>
                <tr>
                  <th>Environment</th>
                  <th>Preview Link</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>

      # Add a row for the deployed environment
      - uses: htunnicliff/replace-comment-html@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          parent-selector: "#preview-links tbody" # Append this row to the <tbody>
          selector: "tr#preview-link-${{ matrix.env }}"
          mode: upsert # This will update the row if it exists, or create it if it doesn't
          html: |
            <tr id="preview-link-${{ matrix.env }}">
              <td>${{ matrix.env }}</td>
              <td>
                <a href="https://preview-${{ matrix.env }}.example.com">Preview</a>
              </td>
            </tr>

      # ...

The resulting comment will contain a table that looks like this:

<table id="preview-links">
  <thead>
    <tr>
      <th>Environment</th>
      <th>Preview Link</th>
    </tr>
  </thead>
  <tbody>
    <tr id="preview-link-dev">
      <td>dev</td>
      <td>
        <a href="https://preview-dev.example.com">Preview</a>
      </td>
    </tr>
    <tr id="preview-link-stage">
      <td>stage</td>
      <td>
        <a href="https://preview-stage.example.com">Preview</a>
      </td>
    </tr>
    <tr id="preview-link-prod">
      <td>prod</td>
      <td>
        <a href="https://preview-prod.example.com">Preview</a>
      </td>
    </tr>
  </tbody>
</table>

If this workflow runs again and a row exists with the given CSS selector, it will be replaced with a new version while other HTML remains unmodified.

Inputs

Name Description Default
html HTML to create or update
selector A CSS selector for identifying the element to update
parent-selector A CSS selector for identfying a parent to append the element to null
token GITHUB_TOKEN or a repo scoped personal access token. ${{ github.token }}
repository The repository to update the comment in. ${{ github.repository }}
issue-number The issue or pull request number to update the comment in. Current PR or issue number
mode The strategy to use for modifying comments (either upsert or create-only) upsert

Outputs

Name Description
comment-id The ID of the comment that was created or updated