updated to Block Kit and Block Kit modals instead of legacy attachments and dialogs

Author: pichsenmeister

package.json

@@ -5,7 +5,8 @@
   "description": "Sample Slack app that responds to an Slack slash command with an interactive message",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "DEBUG=slash-command-template node src/index.js"
+    "start": "DEBUG=slash-command-template node src/index.js",
+    "dev": "nodemon src/index.js"
   },
   "authors": [
     "Sachin Ranchod <sranchod@slack-corp.com>",
@@ -22,5 +23,8 @@
     "dotenv": "^4.0.0",
     "express": "^4.15.2",
     "tsscmp": "^1.0.6"
+  },
+  "devDependencies": {
+    "nodemon": "^1.19.4"
   }
 }

src/index.js

@@ -44,48 +44,100 @@ app.post('/command', (req, res) => {
   if (signature.isVerified(req)) {
     // create the dialog payload - includes the dialog structure, Slack API token,
     // and trigger ID
-    const dialog = {
+    const view = {
       token: process.env.SLACK_ACCESS_TOKEN,
       trigger_id,
-      dialog: JSON.stringify({
-        title: 'Submit a helpdesk ticket',
+      view: JSON.stringify({
+        type: 'modal',
+        title: {
+          type: 'plain_text',
+          text: 'Submit a helpdesk ticket'
+        },
         callback_id: 'submit-ticket',
-        submit_label: 'Submit',
-        elements: [
+        submit: {
+          type: 'plain_text',
+          text: 'Submit'
+        },
+        blocks: [
           {
-            label: 'Title',
-            type: 'text',
-            name: 'title',
-            value: text,
-            hint: '30 second summary of the problem',
+            block_id: 'title_block',
+            type: 'input',
+            label: {
+              type: 'plain_text',
+              text: 'Title'
+            },
+            element: {
+              action_id: 'title',
+              type: 'plain_text_input'
+            },
+            hint: {
+              type: 'plain_text',
+              text: '30 second summary of the problem'
+            }
           },
           {
-            label: 'Description',
-            type: 'textarea',
-            name: 'description',
-            optional: true,
+            block_id: 'description_block',
+            type: 'input',
+            label: {
+              type: 'plain_text',
+              text: 'Description'
+            },
+            element: {
+              action_id: 'description',
+              type: 'plain_text_input',
+              multiline: true
+            },
+            optional: true
           },
           {
-            label: 'Urgency',
-            type: 'select',
-            name: 'urgency',
-            options: [
-              { label: 'Low', value: 'Low' },
-              { label: 'Medium', value: 'Medium' },
-              { label: 'High', value: 'High' },
-            ],
-          },
-        ],
-      }),
+            block_id: 'urgency_block',
+            type: 'input',
+            label: {
+              type: 'plain_text',
+              text: 'Importance'
+            },
+            element: {
+              action_id: 'urgency',
+              type: 'static_select',
+              options: [
+                {
+                  text: {
+                    type: "plain_text",
+                    text: "High"
+                  },
+                  value: "high"
+                },
+                {
+                  text: {
+                    type: "plain_text",
+                    text: "Medium"
+                  },
+                  value: "medium"
+                },
+                {
+                  text: {
+                    type: "plain_text",
+                    text: "Low"
+                  },
+                  value: "low"
+                }
+              ]
+            },
+            optional: true
+          }
+        ]
+      })
     };
 
+    console.log('open view')
+
     // open the dialog by calling dialogs.open method and sending the payload
-    axios.post(`${apiUrl}/dialog.open`, qs.stringify(dialog))
+    axios.post(`${apiUrl}/views.open`, qs.stringify(view))
       .then((result) => {
-        debug('dialog.open: %o', result.data);
+        debug('views.open: %o', result.data);
         res.send('');
       }).catch((err) => {
-        debug('dialog.open call failed: %o', err);
+        debug('views.open call failed: %o', err);
         res.sendStatus(500);
       });
   } else {
@@ -103,14 +155,14 @@ app.post('/interactive', (req, res) => {
 
   // check that the verification token matches expected value
   if (signature.isVerified(req)) {
-    debug(`Form submission received: ${body.submission.trigger_id}`);
+    debug(`Form submission received: ${body.view}`);
 
     // immediately respond with a empty 200 response to let
     // Slack know the command was received
     res.send('');
 
     // create Helpdesk ticket
-    ticket.create(body.user.id, body.submission);
+    ticket.create(body.user.id, body.view);
   } else {
     debug('Token mismatch');
     res.sendStatus(404);

src/ticket.js

@@ -13,33 +13,33 @@ const sendConfirmation = (ticket) => {
     channel: ticket.userId,
     as_user: true,
     text: 'Helpdesk ticket created!',
-    attachments: JSON.stringify([
+    blocks: JSON.stringify([
       {
-        title: `Ticket created for ${ticket.userEmail}`,
-        // Get this from the 3rd party helpdesk system
-        title_link: 'http://example.com',
-        text: ticket.text,
-        fields: [
-          {
-            title: 'Title',
-            value: ticket.title,
-          },
-          {
-            title: 'Description',
-            value: ticket.description || 'None provided',
-          },
-          {
-            title: 'Status',
-            value: 'Open',
-            short: true,
-          },
-          {
-            title: 'Urgency',
-            value: ticket.urgency,
-            short: true,
-          },
-        ],
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: '*Helpdesk ticket created!*'
+        }
+      },
+      {
+        type: 'divider'
+      },
+      {
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: `*Title*\n${ticket.title}\n\n*Description*\n${ticket.description}`
+        }
       },
+      {
+        type: 'context',
+        elements: [
+          {
+            type: 'mrkdwn',
+            text: `*Urgency*: ${ticket.urgency}`
+          }
+        ]
+      }
     ]),
   })).then((result) => {
     debug('sendConfirmation: %o', result.data);
@@ -51,7 +51,8 @@ const sendConfirmation = (ticket) => {
 
 // Create helpdesk ticket. Call users.find to get the user's email address
 // from their user ID
-const create = (userId, submission) => {
+const create = (userId, view) => {
+  let values = view.state.values
   const ticket = {};
 
   const fetchUserEmail = new Promise((resolve, reject) => {
@@ -64,9 +65,9 @@ const create = (userId, submission) => {
   fetchUserEmail.then((result) => {
     ticket.userId = userId;
     ticket.userEmail = result;
-    ticket.title = submission.title;
-    ticket.description = submission.description;
-    ticket.urgency = submission.urgency;
+    ticket.title = values.title_block.title.value;
+    ticket.description = values.description_block.description.value;
+    ticket.urgency = values.urgency_block.urgency.selected_option.text.text;
     sendConfirmation(ticket);
 
     return ticket;

src/verifySignature.js

@@ -1,7 +1,7 @@
 const crypto = require('crypto');
 const timingSafeCompare = require('tsscmp');
 
-const isVerified = (req) => {
+const isVerified = (req) => { 
   const signature = req.headers['x-slack-signature'];
   const timestamp = req.headers['x-slack-request-timestamp'];
   const hmac = crypto.createHmac('sha256', process.env.SLACK_SIGNING_SECRET);