Added support for custom kudos

Author: mkimberlin

server/src/main/java/com/objectcomputing/checkins/services/slack/SlackController.java

@@ -0,0 +1,41 @@
+package com.objectcomputing.checkins.services.slack;
+
+import io.micronaut.http.HttpResponse;
+import io.micronaut.http.annotation.Controller;
+import io.micronaut.http.annotation.Get;
+import io.micronaut.scheduling.TaskExecutors;
+import io.micronaut.scheduling.annotation.ExecuteOn;
+import io.micronaut.security.annotation.Secured;
+import io.micronaut.security.rules.SecurityRule;
+import io.swagger.v3.oas.annotations.tags.Tag;
+
+import java.net.URI;
+import java.util.Map;
+import java.util.UUID;
+
+@Controller("/services/slack")
+@ExecuteOn(TaskExecutors.BLOCKING)
+@Secured(SecurityRule.IS_AUTHENTICATED)
+@Tag(name = "slack")
+public class SlackController {
+
+    private final SlackSearch slackSearch;
+
+    public SlackController(SlackSearch slackSearch) {
+        this.slackSearch = slackSearch;
+    }
+
+    @Get("/emoji")
+    public HttpResponse<Map<String, String>> customEmoji() {
+        Map<String, String> customEmoji = slackSearch.getCustomEmoji();
+
+        return HttpResponse
+                .ok()
+                .headers(headers -> headers.location(URI.create("/services/slack/emoji")))
+                .body(customEmoji);
+    }
+
+    protected URI location(UUID uuid) {
+        return URI.create("/services/slack/" + uuid);
+    }
+}

server/src/main/java/com/objectcomputing/checkins/services/slack/SlackSearch.java

@@ -2,7 +2,9 @@
 
 import com.objectcomputing.checkins.configuration.CheckInsConfiguration;
 import com.slack.api.methods.request.conversations.ConversationsInfoRequest;
+import com.slack.api.methods.request.emoji.EmojiListRequest;
 import com.slack.api.methods.response.conversations.ConversationsInfoResponse;
+import com.slack.api.methods.response.emoji.EmojiListResponse;
 import com.slack.api.model.block.LayoutBlock;
 import com.slack.api.Slack;
 import com.slack.api.methods.MethodsClient;
@@ -20,6 +22,7 @@
 
 import java.util.List;
 import java.io.IOException;
+import java.util.Map;
 
 import jnr.ffi.annotations.In;
 import org.slf4j.Logger;
@@ -122,5 +125,26 @@ public String findUserEmail(String userId) {
         }
         return null;
     }
+
+
+
+    public Map<String, String> getCustomEmoji() {
+        String token = configuration.getApplication().getSlack().getBotToken();
+        if (token != null) {
+            try {
+                MethodsClient client = Slack.getInstance().methods(token);
+                EmojiListResponse response = client.emojiList(EmojiListRequest.builder().build());
+
+                if (response.isOk()) {
+                    return response.getEmoji();
+                }
+            } catch(IOException e) {
+                LOG.error("SlackSearch.getCustomEmoji: " + e.toString());
+            } catch(SlackApiException e) {
+                LOG.error("SlackSearch.getCustomEmoji: " + e.toString());
+            }
+        }
+        return null;
+    }
 }
 

web-ui/src/api/emoji.js

@@ -0,0 +1,11 @@
+import { resolve } from './api.js';
+
+const emojiUrl = '/services/slack/emoji';
+
+export const getCustomEmoji = async (cookie) => {
+  return resolve({
+    url: emojiUrl,
+    responseType: 'json',
+    headers: { 'X-CSRF-Header': cookie, Accept: 'application/json' }
+  });
+};

web-ui/src/components/kudos/PublicKudosCard.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   Card,
@@ -15,8 +15,12 @@ import {
   selectCsrfToken,
   selectActiveOrInactiveProfile
 } from '../../context/selectors';
+import {
+  UPDATE_TOAST
+} from '../../context/actions';
 import { AppContext } from '../../context/AppContext';
 import { getAvatarURL } from '../../api/api';
+import { getCustomEmoji } from '../../api/emoji.js';
 import TeamIcon from '@mui/icons-material/Groups';
 import { Emoji, EmojiStyle } from 'emoji-picker-react';
 
@@ -35,35 +39,73 @@ const propTypes = {
   }).isRequired
 };
 
-// TODO: Include support for custom Slack emojis and maybe move into it's own component and state
-const parseEmojiData = () => {
-  let shortcodeMap = {};
-  for (const category in emojis) {
-    if (Object.hasOwn(emojis, category)) {
-      let emojiList = emojis[category];
-      shortcodeMap = emojiList.reduce((acc, current) => {
-        current?.n?.forEach(
-          name => (acc[name.replace(/\s/g, '_')] = { unified: current.u })
-        );
-        return acc;
-      }, shortcodeMap);
-    }
-  }
-  return shortcodeMap;
-};
-
-const emojiShortcodeMap = parseEmojiData();
-
-const getEmojiDataByShortcode = shortcode => {
-  return emojiShortcodeMap[shortcode.toLowerCase()] || null;
-};
-
 const KudosCard = ({ kudos }) => {
   const { state, dispatch } = useContext(AppContext);
   const csrf = selectCsrfToken(state);
+  const [ emojiShortcodeMap, setEmojiShortcodeMap ] = useState({});
+  const [ customLoaded, setCustomLoaded ] = useState(false);
 
   const sender = selectActiveOrInactiveProfile(state, kudos.senderId);
 
+  useEffect(() => {
+    let shortcodeMap = {};
+    for (const category in emojis) {
+      if (Object.hasOwn(emojis, category)) {
+        let emojiList = emojis[category];
+        emojiList.reduce((acc, current) => {
+          current?.n?.forEach(
+            name => (acc[name.replace(/\s/g, '_')] = { unified: current.u })
+          );
+          return acc;
+        }, shortcodeMap);
+      }
+    }
+    setEmojiShortcodeMap(shortcodeMap);
+  }, []);
+
+  useEffect(() => {
+    const loadCustomEmoji = async () => {
+      let res = await getCustomEmoji(csrf);
+      if (res && res.payload && res.payload.data && !res.error) {
+        const shortcodeMap = { ...emojiShortcodeMap };
+        let aliases = {};
+        let customEmoji = res.payload.data;
+        for(const emoji in customEmoji) {
+          if(Object.hasOwn(customEmoji, emoji)) {
+            if(customEmoji[emoji].startsWith("alias:")) {
+              aliases[emoji] = { alias: customEmoji[emoji].substring("alias:".length) };
+            } else {
+              shortcodeMap[emoji] = { customUrl: customEmoji[emoji] };
+            }
+          }
+        }
+        for(const emoji in aliases) {
+          if (Object.hasOwn(aliases, emoji)) {
+            shortcodeMap[emoji] = shortcodeMap[aliases[emoji]];
+          }
+        }
+        setEmojiShortcodeMap(shortcodeMap);
+        setCustomLoaded(true);
+      } else {
+        window.snackDispatch({
+          type: UPDATE_TOAST,
+          payload: {
+            severity: 'warning',
+            toast: `Custom emoji could not be loaded: ${res.error}`
+          }
+        });
+      }
+    }
+
+    if(csrf && !customLoaded) {
+      loadCustomEmoji();
+    }
+  }, [csrf, customLoaded, emojiShortcodeMap]);
+
+  const getEmojiDataByShortcode = useCallback(shortcode => {
+    return emojiShortcodeMap[shortcode.toLowerCase()] || null;
+  }, [emojiShortcodeMap]);
+
   const regexIndexOf = useCallback((text, regex, start) => {
     const indexInSuffix = text.slice(start).search(regex);
     return indexInSuffix < 0 ? indexInSuffix : indexInSuffix + start;
@@ -218,7 +260,7 @@ const KudosCard = ({ kudos }) => {
 
     // If the original text had no shortcodes, return it in an array
     return components.length === 0 ? [text] : components;
-  }, []);
+  }, [getEmojiDataByShortcode]);
 
   // Creates the final array of React components for the message body,
   // processing Slack links, member names, and emojis.