converting to an adaptive card and adding link (#9)

<!-- markdownlint-disable-next-line first-line-heading -->
## Description

Adding ability to display a link button through the notification in
teams

## Context

Enables users to optionally provide a link and to display this in the
notification. Also switched to using AdaptiveCards for the incoming
webhook format.

## Type of changes

- [X] Refactoring (non-breaking change)
- [X] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would change existing
functionality)
- [ ] Bug fix (non-breaking change which fixes an issue)

## Checklist

- [X] I am familiar with the [contributing
guidelines](../docs/CONTRIBUTING.md)
- [X] I have followed the code style of the project
- [X] I have added tests to cover my changes
- [X] I have updated the documentation accordingly
- [ ] This PR is a result of pair or mob programming

---

## Sensitive Information Declaration

To ensure the utmost confidentiality and protect your and others
privacy, we kindly ask you to NOT including [PII (Personal Identifiable
Information) / PID (Personal Identifiable
Data)](https://digital.nhs.uk/data-and-information/keeping-data-safe-and-benefitting-the-public)
or any other sensitive data in this PR (Pull Request) and the codebase
changes. We will remove any PR that do contain any sensitive
information. We really appreciate your cooperation in this matter.

- [X] I confirm that neither PII/PID nor sensitive data are included in
this PR and the codebase changes.

Author: walteck

.github/workflows/test.yml

@@ -22,3 +22,4 @@ jobs:
           teams-webhook-url: ${{ secrets.TEAMS_WEBHOOK_URL }}
           message-title: Title
           message-text: Text
+          link: ${{ github.event.pull_request.html_url }}

README.md

@@ -25,12 +25,13 @@ Add the following section to your existing workflow file:
 
 ```yml
       - name: Testing action to notify Teams
-        uses: nhs-england-tools/notify-msteams-action@v0.0.2
+        uses: nhs-england-tools/notify-msteams-action@v0.0.3
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           teams-webhook-url: ${{ secrets.TEAMS_WEBHOOK_URL }}
           message-title: "Replace with an appropriate title"
           message-text: "Replace with appropriate text"
+          link: https://google.com
 ```
 
 Follow the instructions [to add an Incoming Webhook](https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook?tabs=dotnet) to the Teams channel of your choice.
@@ -71,6 +72,7 @@ The steps above detail how to quickly use this action within your repository. Th
 - message-title - the title for your message - this will be displayed in the notification
 - message-text - the text for your message - this will be displayed in the notification
 - message-colour - The colour to use for the header line in the notification
+- link - optional if required provide a link to be presented in the notification
 
 ## Architecture
 

__tests__/main.test.ts

@@ -13,9 +13,10 @@ test('test building a message card', async () => {
   const repoName = 'XXXXXX'
   const repoUrl = 'XXXXXX'
   const repoBranch = 'XXXXXX'
-  const avatar_url = 'XXXXXX'
+  const avatar_url = 'https://avatars.githubusercontent.com/u/105098969'
   const login = 'XXXXXX'
   const author_url = 'XXXXXX'
+  const link = 'https://google.com'
   const message = buildMessageCard(
     messageTitle,
     messageBody,
@@ -27,8 +28,44 @@ test('test building a message card', async () => {
     repoBranch,
     avatar_url,
     login,
-    author_url
+    author_url,
+    link
   )
   const messageJson = JSON.parse(message)
-  expect(messageJson.summary).toBe(messageTitle)
+  expect(messageJson.type).toBe('message')
+  expect(messageJson.attachments[0].content.body[0].text).toBe(messageTitle)
+  expect(messageJson.attachments[0].content.actions[0].url).toBe(link)
+})
+
+test('test building a message card with no link', async () => {
+  const messageTitle = 'This is a title'
+  const messageBody = 'This is some text'
+  const messageColour = 'HEXCOL'
+  const runNumber = 'XXXXXX'
+  const runId = 'XXXXXX'
+  const repoName = 'XXXXXX'
+  const repoUrl = 'XXXXXX'
+  const repoBranch = 'XXXXXX'
+  const avatar_url = 'https://avatars.githubusercontent.com/u/105098969'
+  const login = 'XXXXXX'
+  const author_url = 'XXXXXX'
+  const link = ''
+  const message = buildMessageCard(
+    messageTitle,
+    messageBody,
+    messageColour,
+    runNumber,
+    runId,
+    repoName,
+    repoUrl,
+    repoBranch,
+    avatar_url,
+    login,
+    author_url,
+    link
+  )
+  const messageJson = JSON.parse(message)
+  expect(messageJson.type).toBe('message')
+  expect(messageJson.attachments[0].content.body[0].text).toBe(messageTitle)
+  expect(messageJson.attachments[0].content.actions).toStrictEqual([])
 })

action.yml

@@ -18,6 +18,9 @@ inputs:
   message-colour:
     required: false
     description: 'The colour to use for the header line in the notification'
+  link:
+    required: false
+    description: 'A link to include in the message'
 runs:
   using: 'node16'
   main: 'dist/index.js'

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "notify-msteams-action",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "private": true,
     "description": "GitHub Action to notify an MS Teams channel",
     "main": "lib/main.js",

package.json

@@ -12,6 +12,7 @@ async function run(): Promise<void> {
     const messageBody = core.getInput('message-text', {required: true})
     const messageColour =
       core.getInput('message-colour', {required: false}) || '00cbff'
+    const link = core.getInput('link', {required: false}) || ''
 
     const [owner, repoName] = (process.env.GITHUB_REPOSITORY || '').split('/') // https://docs.github.com/en/actions/learn-github-actions/variables#default-environment-variables
     const sha = process.env.GITHUB_SHA || ''
@@ -46,7 +47,8 @@ async function run(): Promise<void> {
       repoBranch,
       avatar_url,
       login,
-      author_url
+      author_url,
+      link
     )
 
     const response = await axios.post(teamsWebhookUrl, messageCard, {

src/main.ts

@@ -9,38 +9,110 @@ export function buildMessageCard(
   repoBranch: string,
   avatar_url: string,
   login: string,
-  author_url: string
+  author_url: string,
+  link: string
 ): string {
-  const card = {
-    '@type': 'MessageCard',
-    '@context': 'https://schema.org/extensions',
-    $schema: 'https://adaptivecards.io/schemas/adaptive-card.json',
-    version: '1.0',
-    summary: messageTitle,
-    themeColor: messageColour,
-    title: messageTitle,
-    sections: [
+  let actions: Record<string, string>[] = []
+  if (link !== '') {
+    actions = [
+      {
+        type: 'Action.OpenUrl',
+        title: 'View',
+        url: link,
+        role: 'button'
+      }
+    ]
+  }
+
+  const title = {
+    type: 'TextBlock',
+    size: 'Large',
+    weight: 'Bolder',
+    text: messageTitle,
+    wrap: true
+  }
+
+  const subtitle = {
+    type: 'ColumnSet',
+    columns: [
       {
-        activityTitle: `[${repoName}](${repoUrl})`,
-        activitySubtitle: `by [${login}](${author_url})`,
-        activityImage: avatar_url,
-        facts: [
+        type: 'Column',
+        width: 'auto',
+        items: [
           {
-            name: 'Run Number',
-            value: runNumber
-          },
+            type: 'Image',
+            url: avatar_url,
+            size: 'Small',
+            style: 'Person',
+            altText: login
+          }
+        ]
+      },
+      {
+        type: 'Column',
+        width: 'stretch',
+        items: [
           {
-            name: 'Run ID',
-            value: runId
+            type: 'TextBlock',
+            text: `[${repoName}](${repoUrl})`,
+            weight: 'Bolder',
+            size: 'Medium',
+            wrap: true
           },
           {
-            name: 'Branch',
-            value: repoBranch
+            type: 'TextBlock',
+            text: `by [${login}](${author_url})`,
+            weight: 'Bolder',
+            size: 'Small',
+            wrap: true
           }
-        ],
-        text: messageBody
+        ]
+      }
+    ]
+  }
+
+  const message = {
+    type: 'TextBlock',
+    text: messageBody,
+    wrap: true
+  }
+
+  const facts = {
+    type: 'FactSet',
+    facts: [
+      {
+        title: 'Run Number',
+        value: runNumber
+      },
+      {
+        title: 'Run ID',
+        value: runId
+      },
+      {
+        title: 'Branch',
+        value: repoBranch
+      }
+    ]
+  }
+
+  const adaptiveCard = {
+    type: 'AdaptiveCard',
+    $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+    version: '1.4',
+    body: [title, subtitle, message, facts],
+    actions
+  }
+
+  const card = {
+    type: 'message',
+    attachments: [
+      {
+        contentType: 'application/vnd.microsoft.card.adaptive',
+        contentUrl: null,
+        content: adaptiveCard
       }
     ]
   }
+
   return JSON.stringify(card)
 }