Update

Author: seratch

README.md

@@ -20,17 +20,17 @@ slack create my-deepl-slack-app -t seratch/run-on-slack-deepl
 cd my-deepl-slack-app/
 ```
 
-### 1. Enable reaction_added trigger
+### 1. Enable Setup Workflow
 
-First off, open `triggers/reaction_added.ts` source file and modify it to have a
-valid list of channel IDs to enable this app. And then, run the following CLI
-command:
+First off, let's enable the "setup" workflow!
 
 ```bash
 slack deploy
-slack trigger create --trigger-def triggers/reaction_added.ts
+slack trigger create --trigger-def triggers/setup.ts
 ```
 
+You will get a URL (e.g., `https://slack.com/shortcuts/Ft***/****`) to invoke the setup workflow. Once you can share the URL in your Slack workspace, any users in the workspace can enable the translator app in any public channels.
+
 ### 2. Set DeepL API key to the app
 
 Add your DeepL API key to the app env variables:

functions/lang_selector.ts

@@ -1,14 +1,14 @@
 import { DefineFunction, Schema } from "deno-slack-sdk/mod.ts";
 import { SlackFunctionHandler } from "deno-slack-sdk/types.ts";
 import { reactionToLang } from "./languages.ts";
-import { getLogger } from "../utils/logger.ts";
-import { resolveFunctionSourceFile } from "../utils/source_file_resoluion.ts";
+import { Logger } from "../utils/logger.ts";
+import { FunctionSourceFile } from "../utils/function_source_file.ts";
 
 export const def = DefineFunction({
   callback_id: "lang_selector",
   title: "Language selector",
   description: "A funtion to identify the language to translate into",
-  source_file: resolveFunctionSourceFile(import.meta.url),
+  source_file: FunctionSourceFile(import.meta.url),
   input_parameters: {
     properties: {
       reaction: {
@@ -31,7 +31,7 @@ const handler: SlackFunctionHandler<typeof def.definition> = async ({
   inputs,
   env,
 }) => {
-  const logger = await getLogger(env.logLevel);
+  const logger = Logger(env.LOG_LEVEL);
   logger.debug(`lang_selector inputs: ${JSON.stringify(inputs)}`);
   const reactionName = inputs.reaction;
   let lang = undefined;

functions/setup.ts

@@ -0,0 +1,201 @@
+import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
+import { SlackAPI } from "deno-slack-api/mod.ts";
+import { Logger } from "../utils/logger.ts";
+import { FunctionSourceFile } from "../utils/function_source_file.ts";
+
+/**
+ * See https://api.slack.com/future/functions/custom
+ */
+export const def = DefineFunction({
+  callback_id: "manage-reaction-added-event-trigger",
+  title: "Manage a reaction_added event trigger",
+  source_file: FunctionSourceFile(import.meta.url),
+  input_parameters: {
+    properties: {
+      interactivity: { type: Schema.slack.types.interactivity },
+      workflowCallbackId: { type: Schema.types.string },
+    },
+    required: ["interactivity", "workflowCallbackId"],
+  },
+  output_parameters: {
+    properties: {},
+    required: [],
+  },
+});
+
+export default SlackFunction(def, async ({
+  inputs,
+  env,
+  token,
+}) => {
+  const logger = Logger(env.logLevel);
+  logger.debug(inputs);
+
+  const client = SlackAPI(token);
+  const allTriggers = await client.workflows.triggers.list({});
+  logger.info(allTriggers);
+  let triggerToUpdate = undefined;
+  // find the trigger to update
+  if (allTriggers.triggers) {
+    for (const trigger of allTriggers.triggers) {
+      if (
+        trigger.workflow.callback_id === inputs.workflowCallbackId &&
+        trigger.event_type === "slack#/events/reaction_added"
+      ) {
+        triggerToUpdate = trigger;
+      }
+    }
+  }
+  const channelIds = triggerToUpdate?.channel_ids != undefined
+    ? triggerToUpdate.channel_ids
+    : [];
+  await client.views.open({
+    interactivity_pointer: inputs.interactivity.interactivity_pointer,
+    view: {
+      "type": "modal",
+      "callback_id": "configure-workflow",
+      "title": {
+        "type": "plain_text",
+        "text": "Workflow Configuration",
+      },
+      "notify_on_close": true,
+      "submit": {
+        "type": "plain_text",
+        "text": "Confirm",
+      },
+      "blocks": [
+        {
+          "type": "input",
+          "block_id": "block",
+          "element": {
+            "type": "multi_channels_select",
+            "placeholder": {
+              "type": "plain_text",
+              "text": "Select channels to add",
+            },
+            "initial_channels": channelIds,
+            "action_id": "channels",
+          },
+          "label": {
+            "type": "plain_text",
+            "text": "Channels to enable the workflow",
+          },
+        },
+      ],
+    },
+  });
+  return {
+    completed: false,
+  };
+})
+  .addViewSubmissionHandler(
+    ["configure-workflow"],
+    async ({ view, inputs, env, token }) => {
+      const logger = Logger(env.logLevel);
+      const { workflowCallbackId } = inputs;
+      const channelIds = view.state.values.block.channels.selected_channels;
+      const triggerInputs = {
+        channelId: {
+          value: "{{data.channel_id}}",
+        },
+        messageTs: {
+          value: "{{data.message_ts}}",
+        },
+        reaction: {
+          value: "{{data.reaction}}",
+        },
+      };
+
+      const client = SlackAPI(token);
+      const allTriggers = await client.workflows.triggers.list({});
+      let modalMessage = "The configuration is done!";
+      try {
+        let triggerToUpdate = undefined;
+        // find the trigger to update
+        if (allTriggers.triggers) {
+          for (const trigger of allTriggers.triggers) {
+            if (
+              trigger.workflow.callback_id === workflowCallbackId &&
+              trigger.event_type === "slack#/events/reaction_added"
+            ) {
+              triggerToUpdate = trigger;
+              break;
+            }
+          }
+        }
+
+        if (triggerToUpdate === undefined) {
+          const creation = await client.workflows.triggers.create({
+            type: "event",
+            name: "reaction_added event trigger",
+            workflow: `#/workflows/${workflowCallbackId}`,
+            event: {
+              event_type: "slack#/events/reaction_added",
+              channel_ids: channelIds,
+            },
+            inputs: triggerInputs,
+          });
+          logger.info(`A new trigger created: ${JSON.stringify(creation)}`);
+        } else {
+          const update = await client.workflows.triggers.update({
+            trigger_id: triggerToUpdate.id,
+            type: "event",
+            name: "reaction_added event trigger",
+            workflow: `#/workflows/${workflowCallbackId}`,
+            event: {
+              event_type: "slack#/events/reaction_added",
+              channel_ids: channelIds,
+            },
+            inputs: triggerInputs,
+          });
+          logger.info(`A new trigger updated: ${JSON.stringify(update)}`);
+        }
+        for (const channelId of channelIds) {
+          const joinResult = await client.conversations.join({
+            channel: channelId,
+          });
+          logger.debug(joinResult);
+          if (joinResult.error) {
+            modalMessage =
+              `Failed to join <#${channelId}> due to ${joinResult.error}`;
+          }
+        }
+      } catch (e) {
+        logger.error(e);
+        modalMessage = e;
+      }
+      // nothing to return if you want to close this modal
+      return {
+        response_action: "update",
+        view: {
+          "type": "modal",
+          "callback_id": "configure-workflow",
+          "notify_on_close": true,
+          "title": {
+            "type": "plain_text",
+            "text": "Workflow Configuration",
+          },
+          "blocks": [
+            {
+              "type": "section",
+              "text": {
+                "type": "mrkdwn",
+                "text": modalMessage,
+              },
+            },
+          ],
+        },
+      };
+    },
+  )
+  .addViewClosedHandler(
+    ["configure-workflow"],
+    ({ view, env }) => {
+      const logger = Logger(env.logLevel);
+      logger.debug(JSON.stringify(view, null, 2));
+      return {
+        outputs: {},
+        completed: true,
+      };
+    },
+  );

functions/translator.ts

@@ -2,14 +2,14 @@ import { DefineFunction, Schema } from "deno-slack-sdk/mod.ts";
 import { SlackFunctionHandler } from "deno-slack-sdk/types.ts";
 import { SlackAPI } from "deno-slack-api/mod.ts";
 import { SlackAPIClient } from "deno-slack-api/types.ts";
-import { getLogger } from "../utils/logger.ts";
-import { resolveFunctionSourceFile } from "../utils/source_file_resoluion.ts";
+import { Logger } from "../utils/logger.ts";
+import { FunctionSourceFile } from "../utils/function_source_file.ts";
 
 export const def = DefineFunction({
   callback_id: "translator",
   title: "Translator",
   description: "A funtion to translate a Slack message",
-  source_file: resolveFunctionSourceFile(import.meta.url),
+  source_file: FunctionSourceFile(import.meta.url),
   input_parameters: {
     properties: {
       channelId: {
@@ -39,7 +39,7 @@ const handler: SlackFunctionHandler<typeof def.definition> = async ({
   token,
   env,
 }) => {
-  const logger = await getLogger(env.logLevel);
+  const logger = Logger(env.LOG_LEVEL);
   logger.debug(`translator inputs: ${JSON.stringify(inputs)}`);
   const emptyOutputs = { outputs: {} };
   if (inputs.lang === undefined) {

import_map.json

@@ -1,6 +1,6 @@
 {
   "imports": {
-    "deno-slack-sdk/": "https://deno.land/x/deno_slack_sdk@1.1.2/",
-    "deno-slack-api/": "https://deno.land/x/deno_slack_api@1.1.0/"
+    "deno-slack-sdk/": "https://deno.land/x/deno_slack_sdk@1.2.0/",
+    "deno-slack-api/": "https://deno.land/x/deno_slack_api@1.2.0/"
   }
 }

manifest.ts

@@ -1,16 +1,28 @@
 import { Manifest } from "deno-slack-sdk/mod.ts";
 import reacjilator from "./workflows/reacjilator.ts";
+import setup from "./workflows/setup.ts";
 
 export default Manifest({
   name: "DeepL for Slack",
   description: "A beta app that enbales using DeepL for Slack messages",
   icon: "assets/icon.png",
-  workflows: [reacjilator],
-  outgoingDomains: ["api-free.deepl.com", "api.deepl.com"],
+  workflows: [
+    reacjilator,
+    setup,
+  ],
+  outgoingDomains: [
+    "api-free.deepl.com",
+    "api.deepl.com",
+  ],
   botScopes: [
+    // reacjilator
     "commands",
     "chat:write",
     "channels:history",
     "reactions:read",
+    // setup
+    "triggers:read",
+    "triggers:write",
+    "channels:join",
   ],
 });

slack.json

@@ -1,5 +1,5 @@
 {
   "hooks": {
-    "get-hooks": "deno run -q --allow-read --allow-net https://deno.land/x/deno_slack_hooks@0.3.0/mod.ts"
+    "get-hooks": "deno run -q --allow-read --allow-net https://deno.land/x/deno_slack_hooks@0.4.0/mod.ts"
   }
 }

triggers/reaction_added.ts triggers/hard-code-example.ts

@@ -12,15 +12,9 @@ const trigger: Trigger<typeof workflowDef.definition> = {
     channel_ids: ["CLT1F93TP"],
   },
   inputs: {
-    channelId: {
-      value: "{{data.channel_id}}",
-    },
-    messageTs: {
-      value: "{{data.message_ts}}",
-    },
-    reaction: {
-      value: "{{data.reaction}}",
-    },
+    channelId: { value: "{{data.channel_id}}" },
+    messageTs: { value: "{{data.message_ts}}" },
+    reaction: { value: "{{data.reaction}}" },
   },
 };
 

triggers/setup.ts

@@ -0,0 +1,13 @@
+import { Trigger } from "deno-slack-api/types.ts";
+import workflowDef from "../workflows/setup.ts";
+
+const trigger: Trigger<typeof workflowDef.definition> = {
+  type: "shortcut",
+  name: "Open the configuration modal for reacjilator",
+  workflow: `#/workflows/${workflowDef.definition.callback_id}`,
+  inputs: {
+    interactivity: { value: "{{data.interactivity}}" },
+  },
+};
+
+export default trigger;

utils/function_source_file.ts

@@ -0,0 +1,11 @@
+export const FunctionSourceFile = function (
+  // Pass the value of import.meta.url in a function code
+  importMetaUrl: string,
+  // If you have sub diretories under "functions" dir, set the depth.
+  // When you place functions/pto/data_submission.ts, the depth for the source file is 1.
+  depth = 0,
+): string {
+  const sliceStart = -2 - depth;
+  const path = new URL("", importMetaUrl).pathname;
+  return path.split("/").slice(sliceStart).join("/");
+};

utils/logger.ts

@@ -1,12 +1,12 @@
 import * as log from "https://deno.land/std@0.157.0/log/mod.ts";
 
-export async function getLogger(
+export const Logger = function (
   level?: string,
-): Promise<log.Logger> {
+): log.Logger {
   const logLevel: log.LevelName = level === undefined
     ? "DEBUG"
     : level as log.LevelName;
-  await log.setup({
+  log.setup({
     handlers: {
       console: new log.handlers.ConsoleHandler(logLevel),
     },
@@ -18,4 +18,4 @@ export async function getLogger(
     },
   });
   return log.getLogger();
-}
+};