Hotfix: correct issues from PRs rollout (#10993)

* fix(various): correct issues from PRs rollout
1. Send Gems modal opens from profiles again
2. Contributor titles appear on hover again
3. Tags dropdown in tasks appears again
4. Only user's own @mentions get highlighted again

* fix(test): correct order of css classes in expect

test/client/unit/specs/libs/highlightUsers.js

@@ -7,14 +7,14 @@ describe('highlightUserAndEmail', () => {
 
     const result = highlightUsers(text, 'user', 'displayedUser');
 
-    expect(result).to.contain('<span class="at-highlight at-text">@displayedUser</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@displayedUser</span>');
   });
 
   it('highlights username', () => {
     const text = 'hello @user';
 
     const result = highlightUsers(text, 'user', 'displayedUser');
-    expect(result).to.contain('<span class="at-highlight at-text">@user</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@user</span>');
   });
 
   it('not highlights any email', () => {
@@ -32,8 +32,8 @@ describe('highlightUserAndEmail', () => {
 
     const result = highlightUsers(text, 'use', 'mentions');
 
-    expect(result).to.contain('<span class="at-highlight at-text">@mentions</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@mentions</span>');
-    expect(result).to.contain('<span class="at-highlight at-text">@use</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@use</span>');
-    expect(result).to.not.contain('<span class="at-highlight at-text">@mentions</span>.com');
+    expect(result).to.not.contain('<span class="at-text at-highlight">@mentions</span>.com');
   });
 });

website/client/components/header/menu.vue

@@ -3,6 +3,7 @@ div
   inbox-modal
   creator-intro
   profileModal
+  send-gems-modal
   b-navbar.topbar.navbar-inverse.static-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
     b-navbar-brand.brand
       .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
@@ -343,19 +344,21 @@ import syncIcon from 'assets/svg/sync.svg';
 import svgHourglasses from 'assets/svg/hourglass.svg';
 import logo from 'assets/svg/logo.svg';
 
+import creatorIntro from '../creatorIntro';
 import InboxModal from '../userMenu/inbox.vue';
 import notificationMenu from './notificationsDropdown';
-import creatorIntro from '../creatorIntro';
 import profileModal from '../userMenu/profileModal';
+import sendGemsModal from 'client/components/payments/sendGemsModal';
 import userDropdown from './userDropdown';
 
 export default {
   components: {
-    userDropdown,
+    creatorIntro,
     InboxModal,
     notificationMenu,
-    creatorIntro,
     profileModal,
+    sendGemsModal,
+    userDropdown,
   },
   data () {
     return {

website/client/components/payments/sendGemsModal.vue

@@ -91,7 +91,6 @@ import notificationsMixin from 'client/mixins/notifications';
 const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
 
 export default {
-  props: ['userReceivingGems'],
   mixins: [paymentsMixin, notificationsMixin],
   data () {
     return {
@@ -110,6 +109,7 @@ export default {
         hrefTechAssistanceEmail: `<a href="mailto:${TECH_ASSISTANCE_EMAIL}">${TECH_ASSISTANCE_EMAIL}</a>`,
       },
       sendingInProgress: false,
+      userReceivingGems: null,
     };
   },
   computed: {
@@ -176,5 +176,11 @@ export default {
       this.$root.$emit('bv::hide::modal', 'send-gems');
     },
   },
+  mounted () {
+    this.$root.$on('habitica::send-gems', (data) => {
+      this.userReceivingGems = data;
+      this.$root.$emit('bv::show::modal', 'send-gems');
+    });
+  },
 };
 </script>

website/client/components/tasks/taskModal.vue

@@ -1009,7 +1009,7 @@ export default {
       }
     },
     handleClick (e) {
-      if (this.$refs.popup && !this.$refs.popup.$el.contains(e.target)) {
+      if (this.$refs.popup && !this.$refs.popup.$el.parentNode.contains(e.target)) {
         this.closeTagsPopup();
       }
     },

website/client/components/userLink.vue

@@ -103,7 +103,7 @@
         return this.icons[`tier${this.level}`];
       },
       tierTitle () {
-        return achievementsLib.getContribText(this.level, this.isNPC) || '';
+        return achievementsLib.getContribText(this.contributor, this.isNPC) || '';
       },
       levelStyle () {
         return this.userLevelStyleFromLevel(this.level, this.isNPC);

website/client/components/userMenu/profile.vue

@@ -136,7 +136,6 @@
     v-show='selectedPage === "stats"',
     :showAllocation='showAllocation()',
     v-if='user.preferences')
-  send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>
 
 <style lang="scss" >
@@ -388,7 +387,6 @@ import { mapState } from 'client/libs/store';
 import cloneDeep from 'lodash/cloneDeep';
 
 import MemberDetails from '../memberDetails';
-import sendGemsModal from 'client/components/payments/sendGemsModal';
 import markdown from 'client/directives/markdown';
 import achievementsLib from '../../../common/script/libs/achievements';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
@@ -414,7 +412,6 @@ export default {
     markdown,
   },
   components: {
-    sendGemsModal,
     MemberDetails,
     profileStats,
   },
@@ -434,7 +431,6 @@ export default {
       }),
       adminToolsLoaded: false,
       userIdToMessage: '',
-      userReceivingGems: '',
       editing: false,
       editingProfile: {
         name: '',
@@ -592,8 +588,7 @@ export default {
       axios.post(`/api/v4/user/block/${this.user._id}`);
     },
     openSendGemsModal () {
-      this.userReceivingGems = this.user;
+      this.$root.$emit('habitica::send-gems', this.user);
-      this.$root.$emit('bv::show::modal', 'send-gems');
     },
     adminRevokeChat () {
       if (!this.hero.flags) {

website/client/libs/highlightUsers.js

@@ -9,15 +9,14 @@ const finalMentionRegEx = new RegExp(`${optionalAnchorTagRegExStr}${mentionRegEx
 export function highlightUsers (text, userName, displayName) {
   const currentUser = [`@${userName}`, `@${displayName}`].map(escapeRegExp);
 
-
   text = text.replace(finalMentionRegEx, (fullMatched, preMention, mentionStr, postMention) => {
     if (preMention && preMention.includes('<a') || Boolean(postMention)) {
       return fullMatched;
     }
 
-    const isUserMention = currentUser.includes(mentionStr) ? 'at-text' : '';
+    const isUserMention = currentUser.includes(mentionStr) ? 'at-highlight' : '';
 
-    return fullMatched.replace(mentionStr, `<span class="at-highlight ${isUserMention}">${mentionStr}</span>`);
+    return fullMatched.replace(mentionStr, `<span class="at-text ${isUserMention}">${mentionStr}</span>`);
   });
 
   return text;