Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for block suggestion handlers #116

Merged
merged 9 commits into from
Oct 27, 2022
Merged

Conversation

filmaj
Copy link
Contributor

@filmaj filmaj commented Oct 20, 2022

Summary

This PR adds a new method available to app functions: addBlockSuggestionHandler.

It is a copy-paste of the existing Block Actions handler support, basically.

After merging this, we will have in place all of the available interactivity handlers. Thus, after this gets merged would be a good opportunity to review all the interactivity code and see how we should refactor it.

Testing

  1. Pull down this branch, and point a hermes app's import_map.json to the location of this checked out branch + /src/, e.g. file:///Users/fmaj/src/deno-slack-sdk/src/
  2. Add an external data source select menu to a message or view your app creates. Perhaps it can post a message that includes this in its Block Kit payload:
      {
        type: "input",
        block_id: "ext_select_block",
        optional: true,
        element: {
          type: "external_select",
          action_id: "ext_select_input",
          placeholder: {
            type: "plain_text",
            text: "Inspire",
          },
        },
        label: {
          type: "plain_text",
          text: "Inspirational Quote",
        },
      },
  1. Register a block suggestion handler in your app to respond to interactions with the above drop down menu. The following example keys off of the above block kit snippet's action_id:
export default SlackFunction(...).addBlockSuggestionHandler(
  "ext_select_input", // <-- the action id of the select drop down menu
  async (args) => { // <-- `args` here should be nicely typed, and block_suggestion-specific payload bits available under `args.body`
    console.log('BLOCK SUGGESTION HANDLER, ', JSON.stringify(args.body, null, 2));
    // Fetch an inspirational quote
    const apiResp = await fetch("https://motivational-quote-api.herokuapp.com/quotes");
    const quotes = await apiResp.json();
    console.log('Returning', quotes.length, 'quotes');
    const opts = {
      "options": quotes.map((q) => ({value: `${q.id}`, text: {type:"plain_text", text: q.quote.slice(0,70)}})) // <-- watch out! options have a max text length of 75 characters
    };
    return opts;
  }
);

@filmaj filmaj added the feature request New feature or request label Oct 20, 2022
@filmaj filmaj requested a review from a team as a code owner October 20, 2022 21:01
@filmaj filmaj self-assigned this Oct 20, 2022
@filmaj filmaj requested a review from a team as a code owner October 20, 2022 21:01
@codecov
Copy link

codecov bot commented Oct 24, 2022

Codecov Report

Merging #116 (114cf9e) into main (4ed03f0) will increase coverage by 0.10%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #116      +/-   ##
==========================================
+ Coverage   98.45%   98.56%   +0.10%     
==========================================
  Files          46       47       +1     
  Lines        1753     1875     +122     
  Branches       93      105      +12     
==========================================
+ Hits         1726     1848     +122     
  Misses         25       25              
  Partials        2        2              
Impacted Files Coverage Δ
...rc/functions/interactivity/block_actions_router.ts 100.00% <ø> (ø)
src/functions/interactivity/matchers.ts 100.00% <ø> (ø)
...functions/interactivity/block_suggestion_router.ts 100.00% <100.00%> (ø)
src/functions/interactivity/mod.ts 100.00% <100.00%> (ø)
src/functions/slack-function.ts 100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

const apiResp = await fetch("https://motivational-quote-api.herokuapp.com/quotes");
const quotes = await apiResp.json();
console.log('Returning', quotes.length, 'quotes');
const opts = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot the exact number but we may want to mention the maximum number of options/option_groups here for more developer-friendliness

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find a reference to what is the maximum number of options one can return... I did end up posting in our api docs channel about this issue: https://slack-pde.slack.com/archives/C8DPMVAQY/p1666275726696799

src/functions/types.ts Show resolved Hide resolved
Copy link
Collaborator

@shapirone shapirone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extremely well documented in md and in jsdoc with great test coverage. Thank you Fil! Left a couple questions/musings and nits, but nothing blocking.

@@ -0,0 +1,160 @@
import type { BlockAction, BlockElement } from "./block_kit_types.ts";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: any reason this file name is block_suggestion_types while we just use suggestion_router* elsewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really! Do you have a preference?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to keep it consistent. I'd probably search for block_suggestion_* first, but no strong opinion

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shapirone should I then rename the action_router to block_action_router, too?

docs/functions-suggestion-handlers.md Show resolved Hide resolved
export type BlockSuggestionBody =
& BlockAction // adds block_id and action_id properties
& {
// type: "block_suggestion";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think we can remove this. I'm not sure there's much value in strictly typing this.

src/functions/interactivity/suggestion_router.ts Outdated Show resolved Hide resolved
src/functions/interactivity/types.ts Show resolved Hide resolved
@filmaj filmaj force-pushed the block-suggestion-handler branch from 8b8173d to 114cf9e Compare October 27, 2022 16:12
@filmaj filmaj merged commit 72b57ac into main Oct 27, 2022
@filmaj filmaj deleted the block-suggestion-handler branch October 27, 2022 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants