Make commands copyable via Github's code block copy button. (#18)

canva-public · Aug 4, 2021 · 2ea399a · 2ea399a
1 parent c4bdb56
commit 2ea399a
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 8 deletions.
diff --git a/__tests__/fixtures/pull_request/github/comment_create_body_expected.js b/__tests__/fixtures/pull_request/github/comment_create_body_expected.js
@@ -6,11 +6,74 @@ module.exports = {
 
 By commenting on this PR with: \`:rocket:[<pipeline>]\`, e.g.
 
-| Comment | Description | More info |
-| --- | --- | --- |
-| \`:rocket:[a-pipeline]\` |  | [:information_source:](https://example.com/does-templating-work?COMMITISH=c0ffeec0ffeec0ffeec0ffeec0ffeec0ffeec0ffeec0ffe&ORG=some-org&REPO=some-repo "See more information") |
-| \`:rocket:[some-pipeline]\` |  | [:heavy_plus_sign:](https://github.com/some-org/some-repo/new/master?filename=.buildkite%2Fpipeline%2Fdescription%2Fsome-org%2Fsome-pipeline.md&value=%23+some-pipeline%0A%0A%5BDocument+some-pipeline%27s+RocketBot+options+here%5D "Add more information") |
-| \`:rocket:[some-pipeline-lite]\` | This is a proper description with a \\| pipe | [:information_source:](https://github.com/some-org/some-repo/blob/master/.buildkite/pipeline/description/some-org/some-pipeline-lite.md "See more information") |
+<table>
+<thead>
+<tr>
+<th>Comment</th>
+<th>Description</th>
+<th>More info</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+\`\`\`
+:rocket:[a-pipeline]
+\`\`\`
+
+</td>
+<td>
+
+
+
+</td>
+<td>
+
+[:information_source:](https://example.com/does-templating-work?COMMITISH=c0ffeec0ffeec0ffeec0ffeec0ffeec0ffeec0ffeec0ffe&ORG=some-org&REPO=some-repo "See more information")
+
+</td>
+</tr>
+<tr>
+<td>
+
+\`\`\`
+:rocket:[some-pipeline]
+\`\`\`
+
+</td>
+<td>
+
+
+
+</td>
+<td>
+
+[:heavy_plus_sign:](https://github.com/some-org/some-repo/new/master?filename=.buildkite%2Fpipeline%2Fdescription%2Fsome-org%2Fsome-pipeline.md&value=%23+some-pipeline%0A%0A%5BDocument+some-pipeline%27s+RocketBot+options+here%5D "Add more information")
+
+</td>
+</tr>
+<tr>
+<td>
+
+\`\`\`
+:rocket:[some-pipeline-lite]
+\`\`\`
+
+</td>
+<td>
+
+This is a proper description with a \\| pipe
+
+</td>
+<td>
+
+[:information_source:](https://github.com/some-org/some-repo/blob/master/.buildkite/pipeline/description/some-org/some-pipeline-lite.md "See more information")
+
+</td>
+</tr>
+</tbody>
+</table>
 
 _Note: you can pass [custom environment variables](https://github.com/canva-public/rocketbot/blob/main/docs/guides/pass-in-variables.md) to some builds._
 

diff --git a/src/events/pr_opened.ts b/src/events/pr_opened.ts
@@ -76,7 +76,26 @@ export async function prOpened(
     .map(({ slug, description: desc }) => {
       // TODO: proper markdown sanitization
       const description = (desc?.trim() ?? '').trim().replace(/\|/g, '\\|');
-      return `| \`:rocket:[${slug}]\` | ${description} | ${links[slug]} |`;
+      // We need raw HTML tables to be able to insert a code block to enable Github's copy button
+      return `<tr>
+<td>
+
+\`\`\`
+:rocket:[${slug}]
+\`\`\`
+
+</td>
+<td>
+
+${description}
+
+</td>
+<td>
+
+${links[slug]}
+
+</td>
+</tr>`;
     })
     .join('\n');
   const commentData = await githubAddComment(
@@ -91,9 +110,18 @@ export async function prOpened(
 
 By commenting on this PR with: \`:rocket:[<pipeline>]\`, e.g.
 
-| Comment | Description | More info |
-| --- | --- | --- |
+<table>
+<thead>
+<tr>
+<th>Comment</th>
+<th>Description</th>
+<th>More info</th>
+</tr>
+</thead>
+<tbody>
 ${pipelineList}
+</tbody>
+</table>
 
 _Note: you can pass [custom environment variables](https://github.com/canva-public/rocketbot/blob/main/docs/guides/pass-in-variables.md) to some builds._