Add comments to the experiment table view [SCI-7217] (#4583)

app/assets/javascripts/experiments/table.js

@@ -93,8 +93,12 @@ ExperimnetTable.render.tags = function(data) {
 };
 
 ExperimnetTable.render.comments = function(data) {
-  const value = parseInt(data, 10) === 0 ? '+' : data;
-  return `<a href="">${value}</a>`;
+  return `<a href="#" 
+    class="open-comments-sidebar" id="comment-count-${data.id}" 
+    data-object-type="MyModule" data-object-id="${data.id}">
+      ${data.count > 0 ? data.count : '+'}
+      ${data.count_unseen > 0 ? `<span class="unseen-comments"> ${data.count_unseen} </span>` : ''}
+  </a>`;
 };
 
 ExperimnetTable.init();

app/assets/javascripts/sitewide/comments_sidebar.js

@@ -28,7 +28,7 @@ var CommentsSidebar = (function() {
     var commentsAmount = $(SIDEBAR).find('.comments-list .comment-container').length;
     if (commentsCounter.length) {
       // Replace the number in comment element
-      commentsCounter.text(commentsCounter.text().replace(/\d+/g, commentsAmount));
+      commentsCounter.text(commentsCounter.text().replace(/[\d\\+]+/g, commentsAmount));
     }
   }
 
@@ -37,6 +37,7 @@ var CommentsSidebar = (function() {
       commentsCounter = $(`#comment-count-${$(this).data('objectId')}`);
       closeCallback = $(this).data('closeCallback');
       CommentsSidebar.open($(this).data('objectType'), $(this).data('objectId'));
+      $(this).parent().find('.unseen-comments').remove();
       e.preventDefault();
     });
   }
@@ -152,7 +153,7 @@ var CommentsSidebar = (function() {
     open: function(objectType, objectId) {
       $(SIDEBAR).find('.comments-subject-title').empty();
       $(SIDEBAR).find('.comments-list').empty();
-      $(SIDEBAR).find('.comment-input-field').val('');
+      $(SIDEBAR).find('.comment-input-field').val('').focus();
       $('.error-container').empty();
       $(SIDEBAR).find('.sidebar-footer').removeClass('update');
       $(SIDEBAR).data('object-type', objectType).data('object-id', objectId);

app/assets/stylesheets/experiment/table.scss

@@ -115,4 +115,25 @@
     }
 
   }
+
+  .unseen-comments {
+    @include font-small;
+    align-items: center;
+    background-color: $brand-complementary;
+    border: 2px solid $color-white;
+    border-radius: 50%;
+    color: $color-black;
+    display: flex;
+    font-weight: bold;
+    height: 16px;
+    justify-content: center;
+    margin-bottom: 10px;
+    margin-left: -1px;
+    min-width: 16px;
+  }
+
+  .open-comments-sidebar {
+    display: contents;
+    margin-bottom: 0;
+  }
 }

app/helpers/comment_helper.rb

@@ -278,4 +278,8 @@ module CommentHelper
   def has_unseen_comments?(commentable)
     commentable.comments.any? { |comment| comment.unseen_by.include?(current_user.id) }
   end
+
+  def count_unseen_comments(commentable, current_user)
+    commentable.comments.count { |comment| comment.unseen_by.include?(current_user.id) }
+  end
 end

app/services/experiments/table_view_service.rb

@@ -4,6 +4,7 @@ module Experiments
   class TableViewService
     include Rails.application.routes.url_helpers
     include ActionView::Helpers::DateHelper
+    include CommentHelper
     include ProjectsHelper
     include InputSanitizeHelper
     include Canaid::Helpers::PermissionsHelper
@@ -117,7 +118,11 @@ module Experiments
     end
 
     def comments_presenter(my_module)
-      my_module.task_comments.length
+      {
+        id: my_module.id,
+        count: my_module.comments.count,
+        count_unseen: count_unseen_comments(my_module, @user)
+      }
     end
   end
 end