fix(discord): add selector for channels in ui (#3731)

Also added partials and intents to properly cache channels

locales/en/ui/integrations/discord.json

@@ -1,16 +1,14 @@
 {
   "settings": {
     "enabled": "Status",
-    "listenAtChannels": {
-      "title": "Listen at these channels (#name or id)",
-      "help": "Separated by comma (,)"
-    },
-    "sendOnlineAnnounceToChannel": "Send online announcement to this channel (#name or id)",
-    "sendGeneralAnnounceToChannel": "Send general announcement to this channel (#name or id)",
+    "listenAtChannels": "Listen for commands on this channel",
+    "sendOnlineAnnounceToChannel": "Send online announcement to this channel",
+    "sendGeneralAnnounceToChannel": "Send general announcement to this channel",
     "deleteMessagesAfterWhile": "Delete message after while",
     "clientId": "ClientId",
     "token": "Token",
     "joinToServerBtn": "Click to join bot to your server",
-    "cannotJoinToServerBtn": "Set token and clientId to be able to join bot to your server"
+    "cannotJoinToServerBtn": "Set token and clientId to be able to join bot to your server",
+    "noChannelSelected": "no channel selected"
   }
 }

src/bot/integrations/discord.ts

@@ -59,12 +59,21 @@ class Discord extends Integration {
   cannotJoinToServerBtn = null;
 
   @settings('bot')
+  @ui({
+    type: 'discord-channel',
+  })
   listenAtChannels = '';
 
   @settings('bot')
+  @ui({
+    type: 'discord-channel',
+  })
   sendOnlineAnnounceToChannel = '';
 
   @settings('bot')
+  @ui({
+    type: 'discord-channel',
+  })
   sendGeneralAnnounceToChannel = '';
 
   @settings('bot')
@@ -235,7 +244,10 @@ class Discord extends Integration {
 
   initClient() {
     if (!this.client) {
-      this.client = new DiscordJs.Client();
+      this.client = new DiscordJs.Client({
+        partials: ['REACTION', 'MESSAGE', 'CHANNEL'],
+        ws: { intents: ['GUILD_MESSAGES', 'GUILDS'] },
+      });
       this.client.on('ready', () => {
         if (this.client) {
           info(chalk.yellow('DISCORD: ') + `Logged in as ${get(this.client, 'user.tag', 'unknown')}!`);
@@ -347,6 +359,32 @@ class Discord extends Integration {
   }
 
   sockets() {
+    adminEndpoint(this.nsp, 'discord::getChannels', async (cb) => {
+      try {
+        if (this.client) {
+          cb(null, this.client.channels.cache
+            .filter(o => o.type === 'text')
+            .sort((a, b) => {
+              const nameA = (a as DiscordJs.TextChannel).name.toUpperCase(); // ignore upper and lowercase
+              const nameB = (b as DiscordJs.TextChannel).name.toUpperCase(); // ignore upper and lowercase
+              if (nameA < nameB) {
+                return -1;
+              }
+              if (nameA > nameB) {
+                return 1;
+              }
+              // names must be equal
+              return 0;
+            })
+            .map(o => ({ html: `<strong>#${(o as DiscordJs.TextChannel).name}</strong> &lt;${o.id}&gt;`, value: o.id }))
+          );
+        } else {
+          cb(null, []);
+        }
+      } catch (e) {
+        cb(e.stack, []);
+      }
+    });
     adminEndpoint(this.nsp, 'authorize', async (cb) => {
       if (this.token === '' || this.clientId === '') {
         cb('Cannot authorize! Missing clientId or token.', null);

src/panel/views/settings/components/interface/discord-channel.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="d-flex">
+    <div class="input-group-prepend">
+      <span class="input-group-text">
+        <template v-if="typeof translatedTitle === 'string'">{{ translatedTitle }}</template>
+        <template v-else>
+          {{ translatedTitle.title }}
+          <small class="text-info" data-toggle="tooltip" data-html="true" :title="translatedTitle.help">[?]</small>
+        </template>
+      </span>
+    </div>
+    <b-form-select v-model="currentValue" :options="channels"></b-form-select>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { getSocket } from 'src/panel/helpers/socket';
+
+@Component({})
+export default class discordChannel extends Vue {
+  @Prop() readonly value: any;
+  @Prop() readonly title: any;
+
+  socket = getSocket('/integrations/discord')
+  channels: { text: string, value: string }[] = []
+
+  currentValue = this.value;
+  translatedTitle = this.translate(this.title);
+
+  mounted() {
+    this.socket.emit('discord::getChannels', (err, channels) => {
+      console.groupCollapsed('discord::getChannels')
+      console.log({channels});
+      console.groupEnd();
+      if (err) {
+        return console.error(err);
+      }
+
+      // find channel in channels on current or unset current
+      if (!channels.find(o => String(o.value) === String(this.currentValue))) {
+        this.currentValue = '';
+      }
+      this.channels = [{ value: '', text: `-- ${this.translate('integrations.discord.settings.noChannelSelected')} --` }, ...channels];
+    });
+  }
+
+  @Watch('currentValue')
+  onChange() {
+    this.$emit('update', { value: this.currentValue });
+  }
+};
+</script>

src/panel/views/settings/interface.vue

@@ -254,6 +254,7 @@ enum State {
     'credits-custom-texts': () => import('./components/interface/credits-custom-texts.vue'),
     'credits-social': () => import('./components/interface/credits-social.vue'),
     'cron': () => import('./components/interface/cron.vue'),
+    'discord-channel': () => import('./components/interface/discord-channel.vue'),
     'global-ignorelist-exclude': () => import('./components/interface/global-ignorelist-exclude.vue'),
     'heist-levels': () => import('./components/interface/heist-levels.vue'),
     'heist-results': () => import('./components/interface/heist-results.vue'),