frontend prevent authored votes

3 files changed, 59 insertions, 9 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index ce426741637..d8a73b0f5e7 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,3 +1,5 @@
+/* global Flash */
+
 import Cookies from 'js-cookie';
 
 import emojiMap from 'emojis/digests.json';
@@ -124,6 +126,8 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
   }
 
   const $menu = $('.emoji-menu');
+  const $thumbsBtn = $menu.find('[data-name="thumbsup"], [data-name="thumbsdown"]').parent();
+  const $userAuthored = this.isUserAuthored($addBtn);
   if ($menu.length) {
     if ($menu.is('.is-visible')) {
       $addBtn.removeClass('is-active');
@@ -147,6 +151,8 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
       }, 200);
     });
   }
+
+  $thumbsBtn.toggleClass('disabled', $userAuthored);
 };
 
 // Create the emoji menu with the first category of emojis.
@@ -259,7 +265,8 @@ AwardsHandler.prototype.addAward = function addAward(
   callback,
 ) {
   const normalizedEmoji = this.normalizeEmojiName(emoji);
-  this.postEmoji(awardUrl, normalizedEmoji, () => {
+  const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
+  this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => {
     this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
     return typeof callback === 'function' ? callback() : undefined;
   });
@@ -324,6 +331,10 @@ AwardsHandler.prototype.isActive = function isActive($emojiButton) {
   return $emojiButton.hasClass('active');
 };
 
+AwardsHandler.prototype.isUserAuthored = function isUserAuthored($button) {
+  return $button.hasClass('js-user-authored');
+};
+
 AwardsHandler.prototype.decrementCounter = function decrementCounter($emojiButton, emoji) {
   const counter = $('.js-counter', $emojiButton);
   const counterNumber = parseInt(counter.text(), 10);
@@ -428,20 +439,35 @@ AwardsHandler.prototype.createEmoji = function createEmoji(votesBlock, emoji) {
   });
 };
 
-AwardsHandler.prototype.postEmoji = function postEmoji(awardUrl, emoji, callback) {
-  return $.post(awardUrl, {
-    name: emoji,
-  }, (data) => {
-    if (data.ok) {
-      callback();
-    }
-  });
+AwardsHandler.prototype.postEmoji = function postEmoji($emojiButton, awardUrl, emoji, callback) {
+  if (this.isUserAuthored($emojiButton)) {
+    this.userAuthored($emojiButton);
+  } else {
+    $.post(awardUrl, {
+      name: emoji,
+    }, (data) => {
+      if (data.ok) {
+        callback();
+      }
+    }).fail(() => new Flash('Something went wrong on our end.'));
+  }
 };
 
 AwardsHandler.prototype.findEmojiIcon = function findEmojiIcon(votesBlock, emoji) {
   return votesBlock.find(`.js-emoji-btn [data-name="${emoji}"]`);
 };
 
+AwardsHandler.prototype.userAuthored = function userAuthored($emojiButton) {
+  const oldTitle = this.getAwardTooltip($emojiButton);
+  const newTitle = 'You cannot vote on your own issue, MR and note';
+  gl.utils.updateTooltipTitle($emojiButton, newTitle).tooltip('show');
+  // Restore tooltip back to award list
+  return setTimeout(() => {
+    $emojiButton.tooltip('hide');
+    gl.utils.updateTooltipTitle($emojiButton, oldTitle);
+  }, 2800);
+};
+
 AwardsHandler.prototype.scrollToAwards = function scrollToAwards() {
   const options = {
     scrollTop: $('.awards').offset().top - 110,
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index e1e6ca25446..33c900e264b 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -47,6 +47,10 @@
       }
     };
 
+    gl.utils.updateTooltipTitle = function($tooltipEl, newTitle) {
+      return $tooltipEl.attr('title', newTitle).tooltip('fixTitle');
+    };
+
     w.gl.utils.disableButtonIfEmptyField = function(field_selector, button_selector, event_name) {
       event_name = event_name || 'input';
       var closest_submit, field, that;
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index b849cc2d853..f614f262316 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -38,6 +38,15 @@
     height: 300px;
     overflow-y: scroll;
   }
+
+  .disabled {
+    cursor: default;
+    opacity: 0.5;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }
 
 .emoji-search {
@@ -154,6 +163,17 @@
     }
   }
 
+  &.user-authored {
+    cursor: default;
+    opacity: 0.65;
+
+    &:hover,
+    &:active {
+      background-color: $white-light;
+      border-color: $border-color;
+    }
+  }
+
   &.btn {
     &:focus {
       outline: 0;