feat: Add Kudos Button in New User Notification Plugin - MEED-2479 - M…

…eeds-io/MIPs#80 (#350)

kudos-services/src/main/resources/locale/notification/KudosNotification_en.properties

@@ -10,3 +10,4 @@ Notification.kudos.received=You have received a kudos from {0}
 Notification.kudos.spaceReceived=Space {0} has received a kudos from {1}
 Notification.label.SayHello=Hi
 Notification.label.ViewFullDiscussion=View the full discussion
+Notification.plugin.NewUserKudosButtonTitle=Say welcome

kudos-webapps/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -144,4 +144,24 @@
     </depends>
   </module>
 
+  <module>
+    <name>kudosNotificationExtension</name>
+    <load-group>notificationGRP</load-group>
+    <script>
+      <path>/js/notificationExtension.bundle.js</path>
+    </script>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+  </module>
+
 </gatein-resources>

kudos-webapps/src/main/webapp/vue-app/notification-extension/components/NewUserKudosButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-btn
+    id="NewUserKudosButton"
+    class="btn primary px-2"
+    outlined
+    small
+    @click.stop.prevent="openKudosForm">
+    {{ helloIcon }} {{ $t('Notification.plugin.NewUserKudosButtonTitle') }}
+  </v-btn>
+</template>
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: null,
+    },
+  },
+  data: () => ({
+    helloIcon: window.decodeURIComponent('\uD83D\uDC4B'),
+  }),
+  methods: {
+    openKudosForm() {
+      document.dispatchEvent(new CustomEvent('exo-kudos-open-send-modal', {detail: {
+        id: this.notification?.from?.username,
+        type: 'USER_PROFILE',
+      }}));
+    },
+  },
+};
+</script>

kudos-webapps/src/main/webapp/vue-app/notification-extension/extensions.js

@@ -0,0 +1,24 @@
+/*
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2023 Meeds Association [email protected]
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+extensionRegistry.registerComponent('WebNotification', 'NewUserPlugin-actions', {
+  type: 'NewUserKudosButton',
+  rank: 10,
+  vueComponent: Vue.options.components['user-notification-new-user-kudos'],
+});

kudos-webapps/src/main/webapp/vue-app/notification-extension/initComponents.js

@@ -0,0 +1,28 @@
+/*
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2023 Meeds Association [email protected]
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import NewUserKudosButton from './components/NewUserKudosButton.vue';
+
+const components = {
+  'user-notification-new-user-kudos': NewUserKudosButton,
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}

kudos-webapps/src/main/webapp/vue-app/notification-extension/main.js

@@ -0,0 +1,33 @@
+/*
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2023 Meeds Association [email protected]
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import './initComponents.js';
+import './extensions.js';
+
+const lang = eXo.env.portal.language;
+const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.notification.KudosNotification-${lang}.json`;
+
+export function init() {
+  return exoi18n.loadLanguageAsync(lang, url)
+    .then(() => {
+      new Vue({
+        i18n: exoi18n.i18n,
+      });
+    });
+}

kudos-webapps/webpack.common.js

@@ -8,7 +8,8 @@ const config = {
     kudos: './src/main/webapp/vue-app/kudos/main.js',
     kudosAdmin: './src/main/webapp/vue-app/kudos-admin/main.js',
     kudosOverview: './src/main/webapp/vue-app/kudos-overview/main.js',
-    engagementCenterExtensions: './src/main/webapp/vue-app/engagementCenterExtensions/extensions.js'
+    engagementCenterExtensions: './src/main/webapp/vue-app/engagementCenterExtensions/extensions.js',
+    notificationExtension: './src/main/webapp/vue-app/notification-extension/main.js',
   },
   module: {
     rules: [