some more improvements to the diff notes coderesolve-btn-precompile

caches the discussion resolved status instead of looping through each
note everytime we want to check
moves some code to underscore to be a bit more performant

[ci skip]

10 files changed, 97 insertions, 83 deletions

diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.vue b/app/assets/javascripts/diff_notes/components/resolve_btn.vue
index 0dcdcf0cfc1..ff208a61ec6 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.vue
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.vue
@@ -46,11 +46,12 @@
     data() {
       return {
         loading: false,
+        discussions: CommentsStore.state,
       };
     },
     computed: {
       discussion() {
-        return CommentsStore.state[this.discussionId];
+        return this.discussions[this.discussionId];
       },
       note() {
         return this.discussion ? this.discussion.getNote(this.noteId) : {};
@@ -94,7 +95,7 @@
 
             const resolvedBy = data ? data.resolved_by : null;
 
-            CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolvedBy);
+            CommentsStore.update(this.discussion, this.note, !this.isResolved, resolvedBy);
             this.discussion.updateHeadline(data);
             gl.mrWidget.checkStatus();
           })
@@ -123,8 +124,7 @@
 
 <template>
   <div class="note-actions-item">
-    <button v-tooltip
-      data-container="body"
+    <button data-container="body"
       class="note-action-button line-resolve-btn"
       type="button"
       :class="{ 'is-active': isResolved, 'is-disabled': !canResolve }"
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js
deleted file mode 100644
index 96e5a440357..00000000000
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable comma-dangle, object-shorthand, func-names, no-param-reassign */
-/* global DiscussionMixins */
-/* global CommentsStore */
-
-import Vue from 'vue';
-
-window.ResolveCount = Vue.extend({
-  mixins: [DiscussionMixins],
-  props: {
-    loggedOut: Boolean
-  },
-  data: function () {
-    return {
-      discussions: CommentsStore.state
-    };
-  },
-  computed: {
-    allResolved: function () {
-      return this.resolvedDiscussionCount === this.discussionCount;
-    },
-    resolvedCountText() {
-      return this.discussionCount === 1 ? 'discussion' : 'discussions';
-    }
-  }
-});
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.vue b/app/assets/javascripts/diff_notes/components/resolve_count.vue
new file mode 100644
index 00000000000..c090d21eabe
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.vue
@@ -0,0 +1,50 @@
+<script>
+  import jumpToDiscussionBtn from './jump_to_discussion.vue';
+  import statusSuccessSvg from '../icons/status_success.svg';
+
+  export default {
+    mixins: [DiscussionMixins],
+    components: {
+      jumpToDiscussionBtn,
+    },
+    props: {
+      loggedOut: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        discussions: CommentsStore.state
+      };
+    },
+    computed: {
+      allResolved() {
+        return this.resolvedDiscussionCount === this.discussionCount;
+      },
+      resolvedCountText() {
+        return this.discussionCount === 1 ? 'discussion' : 'discussions';
+      },
+    },
+    created() {
+      this.statusSuccessSvg = statusSuccessSvg;
+    }
+  };
+</script>
+
+<template>
+  <div class="line-resolve-all-container prepend-top-10">
+    <div class="line-resolve-all"
+      v-if="discussionCount > 0"
+      :class="{ 'has-next-btn': !loggedOut && !allResolved }">
+      <span class="line-resolve-btn is-disabled"
+        :class="{ 'is-active': allResolved }"
+        v-html="statusSuccessSvg">
+      </span>
+      <span class="line-resolve-text">
+        {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
+      </span>
+    </div>
+    <jump-to-discussion-btn />
+  </div>
+</template>
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index f648db1615d..641ea461852 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -5,13 +5,13 @@ import Vue from 'vue';
 import resolveBtn from './components/resolve_btn.vue';
 import resolveDiscussionBtn from './components/resolve_discussion_btn.vue';
 import jumpToDiscussionBtn from './components/jump_to_discussion.vue';
+import resolveCount from './components/resolve_count.vue';
 import './models/discussion';
 import './models/note';
 import './stores/comments';
 import './services/resolve';
 import './mixins/discussion';
 import './components/comment_resolve_btn';
-import './components/resolve_count';
 import './components/diff_note_avatars';
 import './components/new_issue_for_discussion';
 
@@ -148,10 +148,22 @@ $(() => {
   gl.diffNotesCompileComponents();
 
   new Vue({
-    el: '#resolve-count-app',
+    el: document.getElementById('resolve-count-app'),
     components: {
-      'resolve-count': ResolveCount
-    }
+      resolveCount,
+    },
+    data() {
+      return {
+        loggedOut: gl.utils.convertPermissionToBoolean(this.$options.el.dataset.loggedOut),
+      };
+    },
+    render(createElement) {
+      return createElement('resolve-count', {
+        props: {
+          loggedOut: true,
+        },
+      });
+    },
   });
 
   $(window).trigger('resize.nav');
diff --git a/app/assets/javascripts/diff_notes/mixins/discussion.js b/app/assets/javascripts/diff_notes/mixins/discussion.js
index 36c4abf02cf..d46bae25a08 100644
--- a/app/assets/javascripts/diff_notes/mixins/discussion.js
+++ b/app/assets/javascripts/diff_notes/mixins/discussion.js
@@ -8,26 +8,22 @@ window.DiscussionMixins = {
     resolvedDiscussionCount: function () {
       let resolvedCount = 0;
 
-      for (const discussionId in this.discussions) {
-        const discussion = this.discussions[discussionId];
-
-        if (discussion.isResolved()) {
+      _.each(this.discussions, (discussion) => {
+        if (discussion.resolved) {
           resolvedCount += 1;
         }
-      }
+      });
 
       return resolvedCount;
     },
     unresolvedDiscussionCount: function () {
       let unresolvedCount = 0;
 
-      for (const discussionId in this.discussions) {
-        const discussion = this.discussions[discussionId];
-
-        if (!discussion.isResolved()) {
+      _.each(this.discussions, (discussion) => {
+        if (!discussion.resolved) {
           unresolvedCount += 1;
         }
-      }
+      });
 
       return unresolvedCount;
     }
diff --git a/app/assets/javascripts/diff_notes/models/discussion.js b/app/assets/javascripts/diff_notes/models/discussion.js
index dc43e4b2cc7..02c33119805 100644
--- a/app/assets/javascripts/diff_notes/models/discussion.js
+++ b/app/assets/javascripts/diff_notes/models/discussion.js
@@ -9,10 +9,13 @@ class DiscussionModel {
     this.notes = {};
     this.loading = false;
     this.canResolve = false;
+    this.resolved = false;
   }
 
   createNote (noteObj) {
     Vue.set(this.notes, noteObj.noteId, new NoteModel(this.id, noteObj));
+
+    this.resolved = noteObj.resolved;
   }
 
   deleteNote (noteId) {
@@ -28,36 +31,29 @@ class DiscussionModel {
   }
 
   isResolved () {
-    for (const noteId in this.notes) {
-      const note = this.notes[noteId];
-
-      if (!note.resolved) {
-        return false;
-      }
-    }
-    return true;
+    return _.every(this.notes, note => note.resolved);
   }
 
   resolveAllNotes (resolved_by) {
-    for (const noteId in this.notes) {
-      const note = this.notes[noteId];
-
+    _.each(this.notes, (note) => {
       if (!note.resolved) {
-        note.resolved = true;
-        note.resolved_by = resolved_by;
+        note.resolved = true; // eslint-disable-line no-param-reassign
+        note.resolved_by = resolved_by; // eslint-disable-line no-param-reassign
       }
-    }
+    });
+
+    this.resolved = true;
   }
 
   unResolveAllNotes () {
-    for (const noteId in this.notes) {
-      const note = this.notes[noteId];
-
+    _.each(this.notes, (note) => {
       if (note.resolved) {
-        note.resolved = false;
-        note.resolved_by = null;
+        note.resolved = false; // eslint-disable-line no-param-reassign
+        note.resolved_by = null; // eslint-disable-line no-param-reassign
       }
-    }
+    });
+
+    this.resolved = false;
   }
 
   updateHeadline (data) {
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js b/app/assets/javascripts/diff_notes/stores/comments.js
index d802db7d3af..70e1958c753 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js
+++ b/app/assets/javascripts/diff_notes/stores/comments.js
@@ -26,11 +26,10 @@ window.CommentsStore = {
 
     discussion.createNote(noteObj);
   },
-  update: function (discussionId, noteId, resolved, resolved_by) {
-    const discussion = this.state[discussionId];
-    const note = discussion.getNote(noteId);
+  update: function (discussion, note, resolved, resolved_by) {
     note.resolved = resolved;
     note.resolved_by = resolved_by;
+    discussion.resolved = discussion.isResolved();
   },
   delete: function (discussionId, noteId) {
     const discussion = this.state[discussionId];
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 6d7c7e3c930..2bde5174367 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -347,7 +347,7 @@ $(function () {
   loadAwardsHandler();
   new Aside();
 
-  gl.utils.renderTimeago();
+  // gl.utils.renderTimeago();
 
   $(document).trigger('init.scrolling-tabs');
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 0a194f3707f..53d6cf85af0 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -701,10 +701,7 @@ ul.notes {
     margin-right: 0;
     padding-left: $gl-padding;
   }
-
-  > div {
-    white-space: nowrap;
-  }
+  white-space: nowrap;
 
   .btn-group {
     margin-left: -4px;
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index d27e121beb4..0a6cdfd2266 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -53,18 +53,7 @@
                 = link_to diffs_project_merge_request_path(@project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
                   Changes
                   %span.badge= @merge_request.diff_size
-        #resolve-count-app.line-resolve-all-container.prepend-top-10{ "v-cloak" => true }
-          %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
-            %div
-              .line-resolve-all{ "v-show" => "discussionCount > 0",
-                ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
-                %span.line-resolve-btn.is-disabled{ type: "button",
-                    ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
-                  = render "shared/icons/icon_status_success.svg"
-                %span.line-resolve-text
-                  {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
-              = render "discussions/new_issue_for_all_discussions", merge_request: @merge_request
-              = render "discussions/jump_to_next"
+        #resolve-count-app{ data: { logged_out: current_user.nil?.to_s } }
 
     .tab-content#diff-notes-app
       #notes.notes.tab-pane.voting_notes