Change Discord interaction to select menu

The Discord button system works for up to 5 buttons,
so more than 5 CTFs will crash the code. See: Discord bot supports up to 5 CTFs, crashes otherwise TFNS#408
Therefore we change it to select dropdowns to support an arbitrary amount.

Author: JJ-8

api/src/discord/agile/commands/archiveCtf.ts

@@ -1,12 +1,12 @@
 import {
   ActionRowBuilder,
   ApplicationCommandType,
-  ButtonBuilder,
-  ButtonInteraction,
-  ButtonStyle,
   Client,
   CommandInteraction,
   PermissionFlagsBits,
+  StringSelectMenuBuilder,
+  StringSelectMenuInteraction,
+  StringSelectMenuOptionBuilder,
 } from "discord.js";
 import { Command } from "../../interfaces/command";
 import {
@@ -20,10 +20,12 @@ import {
   createPadWithoutLimit,
   getMessagesOfCategories,
 } from "../../utils/messages";
-import { DiscordButtonInteraction } from "../../interfaces/interaction";
+import { DiscordInputInteraction } from "../../interfaces/interaction";
+
+const customId = "archive-ctf-interaction";
 
 async function handleArchiveInteraction(
-  interaction: ButtonInteraction,
+  interaction: StringSelectMenuInteraction,
   ctfName: string
 ) {
   const guild = interaction.guild;
@@ -54,10 +56,10 @@ async function handleArchiveInteraction(
   return true;
 }
 
-export const HandleArchiveCtfInteraction: DiscordButtonInteraction = {
-  customId: "archive-ctf-button",
-  handle: async (client: Client, interaction: ButtonInteraction) => {
-    const ctfName = interaction.customId.replace("archive-ctf-button-", "");
+export const HandleArchiveCtfInteraction: DiscordInputInteraction = {
+  customId: customId,
+  handle: async (client: Client, interaction: StringSelectMenuInteraction) => {
+    const ctfName = interaction.values[0];
     await interaction.deferUpdate();
     await interaction.editReply({
       content: `Archiving the CTF channels and roles for ${ctfName}`,
@@ -97,19 +99,23 @@ async function archiveCtfLogic(
     return;
   }
 
-  const buttons: ButtonBuilder[] = [];
+  const options: StringSelectMenuOptionBuilder[] = [];
   for (let i = 0; i < ctfNames.length; i++) {
-    buttons.push(
-      new ButtonBuilder()
-        .setCustomId(`archive-ctf-button-${ctfNames[i]}`)
+    options.push(
+      new StringSelectMenuOptionBuilder()
         .setLabel(ctfNames[i])
-        .setStyle(ButtonStyle.Success)
+        .setValue(ctfNames[i])
     );
   }
 
-  const actionRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
-    buttons
-  );
+  const select = new StringSelectMenuBuilder();
+  select
+    .setCustomId(customId)
+    .setPlaceholder("Choose the CTF")
+    .addOptions(options);
+
+  const actionRow =
+    new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(select);
 
   await interaction.editReply({
     content: "Which CTF do you want to archive?",

api/src/discord/agile/commands/createCtf.ts

@@ -1,12 +1,12 @@
 import {
   ActionRowBuilder,
   ApplicationCommandType,
-  ButtonBuilder,
-  ButtonInteraction,
-  ButtonStyle,
   Client,
   CommandInteraction,
   PermissionFlagsBits,
+  StringSelectMenuBuilder,
+  StringSelectMenuInteraction,
+  StringSelectMenuOptionBuilder,
 } from "discord.js";
 import { Command } from "../../interfaces/command";
 import {
@@ -18,13 +18,15 @@ import {
   createChannelsAndRolesForCtf,
   getChannelCategoriesForCtf,
 } from "../channels";
-import { DiscordButtonInteraction } from "../../interfaces/interaction";
+import { DiscordInputInteraction } from "../../interfaces/interaction";
 import { getChallengesFromDatabase } from "../../database/tasks";
 
-export const HandleCreateCtfInteraction: DiscordButtonInteraction = {
-  customId: "create-ctf-button",
-  handle: async (client: Client, interaction: ButtonInteraction) => {
-    const ctfName = interaction.customId.replace("create-ctf-button-", "");
+const customId = "create-ctf-interaction";
+
+export const HandleCreateCtfInteraction: DiscordInputInteraction = {
+  customId: customId,
+  handle: async (client: Client, interaction: StringSelectMenuInteraction) => {
+    const ctfName = interaction.values[0];
     await interaction.deferUpdate();
     await interaction.editReply({
       content: `Creating the CTF channels and roles for ${ctfName}`,
@@ -79,21 +81,23 @@ async function createCtfLogic(client: Client, interaction: CommandInteraction) {
     return;
   }
 
-  // Make a loop to create buttons for each CTF
-  const buttons: ButtonBuilder[] = [];
+  const options: StringSelectMenuOptionBuilder[] = [];
   for (let i = 0; i < ctfNames.length; i++) {
-    buttons.push(
-      new ButtonBuilder()
-        .setCustomId(`create-ctf-button-${ctfNames[i]}`)
+    options.push(
+      new StringSelectMenuOptionBuilder()
         .setLabel(ctfNames[i])
-        .setStyle(ButtonStyle.Success)
+        .setValue(ctfNames[i])
     );
   }
+  const select = new StringSelectMenuBuilder();
+  select
+    .setCustomId(customId)
+    .setPlaceholder("Choose the CTF")
+    .addOptions(options);
 
   // Create the action row with the button components
-  const actionRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
-    buttons
-  );
+  const actionRow =
+    new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(select);
 
   await interaction.editReply({
     content: ctfNamesMessage,

api/src/discord/agile/commands/deleteCtf.ts

@@ -1,13 +1,13 @@
 import {
   ActionRowBuilder,
   ApplicationCommandType,
-  ButtonBuilder,
-  ButtonInteraction,
-  ButtonStyle,
   Client,
   CommandInteraction,
   Interaction,
   PermissionFlagsBits,
+  StringSelectMenuBuilder,
+  StringSelectMenuInteraction,
+  StringSelectMenuOptionBuilder,
 } from "discord.js";
 import { Command } from "../../interfaces/command";
 import {
@@ -18,7 +18,9 @@ import { getChannelCategoriesForCtf } from "../channels";
 import { handleDeleteCtf } from "../hooks";
 import { getTaskByCtfIdAndNameFromDatabase } from "../../database/tasks";
 import { discordArchiveTaskName } from "../../utils/messages";
-import { DiscordButtonInteraction } from "../../interfaces/interaction";
+import { DiscordInputInteraction } from "../../interfaces/interaction";
+
+const customId = "delete-ctf-interaction";
 
 export async function handleDeleteInteraction(
   interaction: Interaction,
@@ -58,19 +60,23 @@ async function deleteCtfLogic(client: Client, interaction: CommandInteraction) {
     return;
   }
 
-  const buttons: ButtonBuilder[] = [];
+  const options: StringSelectMenuOptionBuilder[] = [];
   for (let i = 0; i < ctfNames.length; i++) {
-    buttons.push(
-      new ButtonBuilder()
-        .setCustomId(`delete-ctf-button-${ctfNames[i]}`)
+    options.push(
+      new StringSelectMenuOptionBuilder()
         .setLabel(ctfNames[i])
-        .setStyle(ButtonStyle.Success)
+        .setValue(ctfNames[i])
     );
   }
 
-  const actionRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
-    buttons
-  );
+  const select = new StringSelectMenuBuilder();
+  select
+    .setCustomId(customId)
+    .setPlaceholder("Choose the CTF")
+    .addOptions(options);
+
+  const actionRow =
+    new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(select);
 
   await interaction.editReply({
     content:
@@ -79,10 +85,10 @@ async function deleteCtfLogic(client: Client, interaction: CommandInteraction) {
   });
 }
 
-export const HandleDeleteCtfInteraction: DiscordButtonInteraction = {
-  customId: "delete-ctf-button",
-  handle: async (client: Client, interaction: ButtonInteraction) => {
-    const ctfName = interaction.customId.replace("delete-ctf-button-", "");
+export const HandleDeleteCtfInteraction: DiscordInputInteraction = {
+  customId: customId,
+  handle: async (client: Client, interaction: StringSelectMenuInteraction) => {
+    const ctfName = interaction.values[0];
     await interaction.deferUpdate();
     await interaction.editReply({
       content: `Deleting the CTF channels and roles for ${ctfName}`,

api/src/discord/interfaces/interaction.ts

@@ -1,6 +1,9 @@
-import { ButtonInteraction, Client } from "discord.js";
+import { Client, StringSelectMenuInteraction } from "discord.js";
 
-export interface DiscordButtonInteraction {
+export interface DiscordInputInteraction {
   customId: string;
-  handle: (client: Client, interaction: ButtonInteraction) => Promise<void>;
+  handle: (
+    client: Client,
+    interaction: StringSelectMenuInteraction
+  ) => Promise<void>;
 }

api/src/discord/listeners/interactionCreate.ts

@@ -7,19 +7,19 @@ import {
 export default (client: Client): void => {
   client.on("interactionCreate", async (interaction: Interaction) => {
     //check if it is a button interaction
-    if (interaction.isButton()) {
-      await handleButtonInteraction(client, interaction);
+    if (interaction.isStringSelectMenu()) {
+      await handleInputInteraction(client, interaction);
     } else if (interaction.isCommand() || interaction.isContextMenuCommand()) {
       await handleSlashCommand(client, interaction);
     }
   });
 };
 
-const handleButtonInteraction = async (
+const handleInputInteraction = async (
   client: Client,
   interaction: Interaction
 ): Promise<void> => {
-  if (!interaction.isButton()) {
+  if (!interaction.isStringSelectMenu()) {
     return;
   }
   const handler = (await getChannelHandleStyleInteractions()).find((i) =>

api/src/discord/utils/channelStyle.ts

@@ -1,12 +1,12 @@
 import config from "../../config";
 import { Hooks } from "../interfaces/hooks";
 import { Command } from "../interfaces/command";
-import { DiscordButtonInteraction } from "../interfaces/interaction";
+import { DiscordInputInteraction } from "../interfaces/interaction";
 
 const channelStyle = config.discord.channelHandleStyle;
 
 export async function getChannelHandleStyleInteractions(): Promise<
-  DiscordButtonInteraction[]
+  DiscordInputInteraction[]
 > {
   switch (channelStyle) {
     case "agile": {