Merge branch 'batch-comments-review-preview' into 'master'

Added previewing of batch comments

Closes #4327

See merge request gitlab-org/gitlab-ee!7936

app/assets/javascripts/notes/stores/getters.js

@@ -192,5 +192,8 @@ export const firstUnresolvedDiscussionId = (state, getters) => diffOrder => {
   return getters.unresolvedDiscussionsIdsByDate[0];
 };
 
+export const getDiscussion = state => discussionId =>
+  state.discussions.find(discussion => discussion.id === discussionId);
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

ee/app/assets/javascripts/batch_comments/components/draft_note.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import NoteableNote from '~/notes/components/noteable_note.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import resolvedStatusMixin from '../mixins/resolved_status';
 import PublishButton from './publish_button.vue';
 
 export default {
@@ -13,6 +13,7 @@ export default {
     Icon,
     LoadingButton,
   },
+  mixins: [resolvedStatusMixin],
   props: {
     draft: {
       type: Object,
@@ -26,38 +27,23 @@ export default {
   },
   computed: {
     ...mapState('batchComments', ['isPublishing']),
-    ...mapGetters(['isDiscussionResolved']),
     ...mapGetters('batchComments', ['isPublishingDraft']),
-    resolvedStatusMessage() {
-      let message;
-      const discussionResolved = this.isDiscussionResolved(this.draft.discussion_id);
-      const discussionToBeResolved = this.draft.resolve_discussion;
-
-      if (discussionToBeResolved) {
-        if (discussionResolved) {
-          message = s__('MergeRequests|Discussion stays resolved.');
-        } else {
-          message = s__('MergeRequests|Discussion will be resolved.');
-        }
-      } else if (discussionResolved) {
-        message = s__('MergeRequests|Discussion will be unresolved.');
-      } else {
-        message = s__('MergeRequests|Discussion stays unresolved.');
-      }
-
-      return message;
-    },
-    componentClasses() {
-      return this.draft.resolve_discussion
-        ? 'is-resolving-discussion'
-        : 'is-unresolving-discussion';
-    },
     draftCommands() {
       return this.draft.references.commands;
     },
   },
+  mounted() {
+    if (window.location.hash && window.location.hash === `#note_${this.draft.id}`) {
+      this.scrollToDraft(this.draft);
+    }
+  },
   methods: {
-    ...mapActions('batchComments', ['deleteDraft', 'updateDraft', 'publishSingleDraft']),
+    ...mapActions('batchComments', [
+      'deleteDraft',
+      'updateDraft',
+      'publishSingleDraft',
+      'scrollToDraft',
+    ]),
     update(data) {
       this.updateDraft(data);
     },
@@ -71,6 +57,7 @@ export default {
       this.isEditingDraft = false;
     },
   },
+  showStaysResolved: true,
 };
 </script>
 <template>
@@ -117,6 +104,8 @@ export default {
 
       <p class="draft-note-actions">
         <publish-button
+          :show-count="true"
+          :should-publish="false"
           class="btn btn-success btn-inverted"
         />
         <loading-button

ee/app/assets/javascripts/batch_comments/components/preview_dropdown.vue

+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { sprintf, n__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import DraftsCount from './drafts_count.vue';
+import PublishButton from './publish_button.vue';
+import PreviewItem from './preview_item.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    Icon,
+    DraftsCount,
+    PublishButton,
+    PreviewItem,
+  },
+  computed: {
+    ...mapGetters(['isNotesFetched']),
+    ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
+    ...mapState('batchComments', ['showPreviewDropdown']),
+    dropdownTitle() {
+      return sprintf(
+        n__('%{count} pending comment', '%{count} pending comments', this.draftsCount),
+        { count: this.draftsCount },
+      );
+    },
+  },
+  watch: {
+    showPreviewDropdown() {
+      if (this.showPreviewDropdown && this.$refs.dropdown) {
+        this.$nextTick(() => this.$refs.dropdown.focus());
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener('click', this.onClickDocument);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.onClickDocument);
+  },
+  methods: {
+    ...mapActions('batchComments', ['toggleReviewDropdown']),
+    isLast(index) {
+      return index === this.sortedDrafts.length - 1;
+    },
+    onClickDocument({ target }) {
+      if (
+        this.showPreviewDropdown &&
+        !target.closest('.review-preview-dropdown, .js-publish-draft-button')
+      ) {
+        this.toggleReviewDropdown();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="dropdown float-right review-preview-dropdown"
+    :class="{
+      show: showPreviewDropdown
+    }"
+  >
+    <button
+      ref="dropdown"
+      type="button"
+      class="btn btn-success review-preview-dropdown-toggle"
+      @click="toggleReviewDropdown"
+    >
+      {{ __('Finish review') }}
+      <drafts-count />
+      <icon
+        name="angle-up"
+      />
+    </button>
+    <div
+      class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top"
+      :class="{
+        show: showPreviewDropdown
+      }"
+    >
+      <div class="dropdown-title">
+        {{ dropdownTitle }}
+        <button
+          :aria-label="__('Close')"
+          type="button"
+          class="dropdown-title-button dropdown-menu-close"
+          @click="toggleReviewDropdown"
+        >
+          <icon
+            name="close"
+          />
+        </button>
+      </div>
+      <div class="dropdown-content">
+        <ul v-if="isNotesFetched">
+          <li
+            v-for="(draft, index) in sortedDrafts"
+            :key="draft.id"
+          >
+            <preview-item
+              :draft="draft"
+              :is-last="isLast(index)"
+            />
+          </li>
+        </ul>
+        <gl-loading-icon
+          v-else
+          :size="2"
+          class="prepend-top-default append-bottom-default"
+        />
+      </div>
+      <div class="dropdown-footer">
+        <publish-button
+          :show-count="false"
+          :should-publish="true"
+          :label="__('Submit review')"
+          class="float-right append-right-8"
+        />
+      </div>
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/batch_comments/components/preview_item.vue

+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { sprintf, __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import resolvedStatusMixin from '../mixins/resolved_status';
+
+export default {
+  components: {
+    Icon,
+  },
+  mixins: [resolvedStatusMixin],
+  props: {
+    draft: {
+      type: Object,
+      required: true,
+    },
+    isLast: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters('diffs', ['getDiffFileByHash']),
+    ...mapGetters(['getDiscussion']),
+    iconName() {
+      return this.isDiffDiscussion || this.draft.line_code ? 'doc-text' : 'comment';
+    },
+    discussion() {
+      return this.getDiscussion(this.draft.discussion_id);
+    },
+    isDiffDiscussion() {
+      return this.discussion && this.discussion.diff_discussion;
+    },
+    titleText() {
+      const file = this.discussion ? this.discussion.diff_file : this.draft;
+
+      if (file) {
+        return file.file_path;
+      }
+
+      return sprintf(__("%{authorsName}'s discussion"), {
+        authorsName: this.discussion.notes.find(note => !note.system).author.name,
+      });
+    },
+    linePosition() {
+      const position = this.discussion ? this.discussion.position : this.draft.position;
+
+      return position.new_line || position.old_line;
+    },
+    content() {
+      const el = document.createElement('div');
+      el.innerHTML = this.draft.note_html;
+
+      return el.textContent;
+    },
+    showLinePosition() {
+      return this.draft.file_hash || this.isDiffDiscussion;
+    },
+  },
+  methods: {
+    ...mapActions('batchComments', ['scrollToDraft']),
+  },
+  showStaysResolved: false,
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    class="review-preview-item menu-item"
+    :class="[componentClasses, {
+      'is-last': isLast
+    }]"
+    @click="scrollToDraft(draft)"
+  >
+    <span class="review-preview-item-header">
+      <icon
+        class="append-right-8 flex-shrink-0"
+        :name="iconName"
+      />
+      <span class="bold">
+        <span class="review-preview-item-header-text block-truncated">
+          {{ titleText }}
+        </span>
+        <template v-if="showLinePosition">
+          :{{ linePosition }}
+        </template>
+      </span>
+    </span>
+    <span class="review-preview-item-content">
+      <p>{{ content }}</p>
+    </span>
+    <span
+      v-if="draft.discussion_id && resolvedStatusMessage"
+      class="review-preview-item-footer draft-note-resolution p-0"
+    >
+      <icon
+        class="append-right-8"
+        name="status_success"
+      />
+      {{ resolvedStatusMessage }}
+    </span>
+  </button>
+</template>

ee/app/assets/javascripts/batch_comments/components/publish_button.vue

 <script>
 import { mapActions, mapState } from 'vuex';
+import { __ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import DraftsCount from './drafts_count.vue';
 
@@ -8,11 +9,34 @@ export default {
     LoadingButton,
     DraftsCount,
   },
+  props: {
+    showCount: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: __('Finish review'),
+    },
+    shouldPublish: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     ...mapState('batchComments', ['isPublishing']),
   },
   methods: {
-    ...mapActions('batchComments', ['publishReview']),
+    ...mapActions('batchComments', ['publishReview', 'toggleReviewDropdown']),
+    onClick() {
+      if (this.shouldPublish) {
+        this.publishReview();
+      } else {
+        this.toggleReviewDropdown();
+      }
+    },
   },
 };
 </script>
@@ -20,12 +44,14 @@ export default {
 <template>
   <loading-button
     :loading="isPublishing"
-    container-class="btn btn-success"
-    @click="publishReview"
+    container-class="btn btn-success js-publish-draft-button"
+    @click="onClick"
   >
     <span>
-      {{ __('Submit review') }}
-      <drafts-count />
+      {{ label }}
+      <drafts-count
+        v-if="showCount"
+      />
     </span>
   </loading-button>
 </template>

ee/app/assets/javascripts/batch_comments/components/review_bar.vue

@@ -3,23 +3,31 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { GlModal, GlModalDirective } from '@gitlab-org/gitlab-ui';
-import PublishButton from './publish_button.vue';
+import PreviewDropdown from './preview_dropdown.vue';
 
 export default {
   components: {
-    PublishButton,
     LoadingButton,
     GlModal,
+    PreviewDropdown,
   },
   directives: {
     'gl-modal': GlModalDirective,
   },
   computed: {
+    ...mapGetters(['isNotesFetched']),
     ...mapState('batchComments', ['isDiscarding']),
     ...mapGetters('batchComments', ['draftsCount']),
   },
+  watch: {
+    isNotesFetched() {
+      if (this.isNotesFetched) {
+        this.expandAllDiscussions();
+      }
+    },
+  },
   methods: {
-    ...mapActions('batchComments', ['discardReview']),
+    ...mapActions('batchComments', ['discardReview', 'expandAllDiscussions']),
   },
   modalId: 'discard-draft-review',
   text: sprintf(
@@ -38,14 +46,15 @@ export default {
 <template>
   <div v-show="draftsCount > 0">
     <nav class="review-bar-component">
-      <p class="review-bar-content">
-        <publish-button />
+      <div class="review-bar-content">
+        <preview-dropdown />
         <loading-button
           v-gl-modal="$options.modalId"
           :loading="isDiscarding"
           :label="__('Discard review')"
+          class="float-right"
         />
-      </p>
+      </div>
     </nav>
     <gl-modal
       :title="s__('BatchComments|Discard review?')"

ee/app/assets/javascripts/batch_comments/constants.js

+export const CHANGES_TAB = 'diffs';
+export const DISCUSSION_TAB = 'notes';
+export const SHOW_TAB = 'show';

ee/app/assets/javascripts/batch_comments/mixins/resolved_status.js

+import { mapGetters } from 'vuex';
+import { s__ } from '~/locale';
+
+export default {
+  computed: {
+    ...mapGetters(['isDiscussionResolved']),
+    resolvedStatusMessage() {
+      let message;
+      const discussionResolved = this.isDiscussionResolved(this.draft.discussion_id);
+      const discussionToBeResolved = this.draft.resolve_discussion;
+
+      if (discussionToBeResolved && discussionResolved && !this.$options.showStaysResolved) {
+        return undefined;
+      }
+
+      if (discussionToBeResolved) {
+        if (discussionResolved) {
+          message = s__('MergeRequests|Discussion stays resolved.');
+        } else {
+          message = s__('MergeRequests|Discussion will be resolved.');
+        }
+      } else if (discussionResolved) {
+        message = s__('MergeRequests|Discussion will be unresolved.');
+      } else if (this.$options.showStaysResolved) {
+        message = s__('MergeRequests|Discussion stays unresolved.');
+      }
+
+      return message;
+    },
+    componentClasses() {
+      return this.draft.resolve_discussion
+        ? 'is-resolving-discussion'
+        : 'is-unresolving-discussion';
+    },
+  },
+};

ee/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js

 import flash from '~/flash';
 import { __ } from '~/locale';
+import { scrollToElement } from '~/lib/utils/common_utils';
 import service from '../../../services/drafts_service';
 import * as types from './mutation_types';
+import { CHANGES_TAB, DISCUSSION_TAB, SHOW_TAB } from '../../../constants';
 
 export const enableBatchComments = ({ commit }) => {
   commit(types.ENABLE_BATCH_COMMENTS);
@@ -94,5 +96,46 @@ export const updateDraft = ({ commit, getters }, { note, noteText, callback }) =
     .then(callback)
     .catch(() => flash(__('An error occurred while updating the comment')));
 
+export const scrollToDraft = ({ dispatch, rootGetters }, draft) => {
+  const discussion = draft.discussion_id && rootGetters.getDiscussion(draft.discussion_id);
+  const tab =
+    draft.file_hash || (discussion && discussion.diff_discussion) ? CHANGES_TAB : SHOW_TAB;
+  const tabEl = tab === CHANGES_TAB ? CHANGES_TAB : DISCUSSION_TAB;
+  const draftID = `note_${draft.id}`;
+  const el = document.querySelector(`#${tabEl} #${draftID}`);
+
+  dispatch('closeReviewDropdown');
+
+  window.location.hash = draftID;
+
+  if (window.mrTabs.currentAction !== tab) {
+    window.mrTabs.tabShown(tab);
+  }
+
+  if (discussion) {
+    dispatch('expandDiscussion', { discussionId: discussion.id }, { root: true });
+  }
+
+  if (el) {
+    setTimeout(() => scrollToElement(el.closest('.draft-note-component')));
+  }
+};
+
+export const toggleReviewDropdown = ({ dispatch, state }) => {
+  if (state.showPreviewDropdown) {
+    dispatch('closeReviewDropdown');
+  } else {
+    dispatch('openReviewDropdown');
+  }
+};
+
+export const openReviewDropdown = ({ commit }) => commit(types.OPEN_REVIEW_DROPDOWN);
+export const closeReviewDropdown = ({ commit }) => commit(types.CLOSE_REVIEW_DROPDOWN);
+
+export const expandAllDiscussions = ({ dispatch, state }) =>
+  state.drafts.filter(draft => draft.discussion_id).forEach(draft => {
+    dispatch('expandDiscussion', { discussionId: draft.discussion_id }, { root: true });
+  });
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

ee/app/assets/javascripts/batch_comments/stores/modules/batch_comments/getters.js

@@ -64,5 +64,7 @@ export const draftForLine = (state, getters) => (diffFileSha, line, side = null)
 export const isPublishingDraft = state => draftId =>
   state.currentlyPublishingDrafts.indexOf(draftId) !== -1;
 
+export const sortedDrafts = state => [...state.drafts].sort((a, b) => a.id > b.id);
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

ee/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutation_types.js

@@ -16,3 +16,6 @@ export const RECEIVE_DISCARD_REVIEW_SUCCESS = 'RECEIVE_DISCARD_REVIEW_SUCCESS';
 export const RECEIVE_DISCARD_REVIEW_ERROR = 'RECEIVE_DISCARD_REVIEW_ERROR';
 
 export const RECEIVE_DRAFT_UPDATE_SUCCESS = 'RECEIVE_DRAFT_UPDATE_SUCCESS';
+
+export const OPEN_REVIEW_DROPDOWN = 'OPEN_REVIEW_DROPDOWN';
+export const CLOSE_REVIEW_DROPDOWN = 'CLOSE_REVIEW_DROPDOWN';

ee/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutations.js

@@ -64,4 +64,10 @@ export default {
       state.drafts.splice(index, 1, processDraft(data));
     }
   },
+  [types.OPEN_REVIEW_DROPDOWN](state) {
+    state.showPreviewDropdown = true;
+  },
+  [types.CLOSE_REVIEW_DROPDOWN](state) {
+    state.showPreviewDropdown = false;
+  },
 };

ee/app/assets/javascripts/batch_comments/stores/modules/batch_comments/state.js

@@ -5,4 +5,5 @@ export default () => ({
   isPublishing: false,
   currentlyPublishingDrafts: [],
   isDiscarding: false,
+  showPreviewDropdown: false,
 });

ee/app/assets/stylesheets/components/batch_comments/draft_note.scss

@@ -23,18 +23,6 @@
     }
   }
 
-  &.is-resolving-discussion {
-    .draft-note-resolution svg {
-      color: $green-600;
-    }
-  }
-
-  &.is-unresolving-discussion {
-    .draft-note-resolution svg {
-      color: $gray-darkest;
-    }
-  }
-
   .referenced-commands.draft-note-commands {
     background: $orange-100;
     font-size: $label-font-size;
@@ -63,8 +51,9 @@ button[disabled] {
   display: flex;
   justify-content: space-between;
   align-items: center;
+}
 
-  .draft-note-resolution {
+.draft-note-resolution {
   padding: $gl-padding-4 $gl-padding;
   line-height: 1;
   font-size: $label-font-size;
@@ -75,6 +64,17 @@ button[disabled] {
     vertical-align: text-bottom;
     display: inline-block;
   }
+
+  .is-resolving-discussion & {
+    svg {
+      color: $green-600;
+    }
+  }
+
+  .is-unresolving-discussion & {
+    svg {
+      color: $gray-darkest;
+    }
   }
 }
 

ee/app/assets/stylesheets/components/batch_comments/drafts_count.scss

@@ -8,6 +8,6 @@ $drafts-count-size: 1.6;
   line-height: $drafts-count-size;
   background: $black-transparent;
   border-radius: 50%;
-  margin-left: 0.5em;
+  margin-left: $gl-padding-4;
   padding: 0 $gl-padding-4;
 }

ee/app/assets/stylesheets/components/batch_comments/review_bar.scss

@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   background: $white-light;
-  z-index: 100;
+  z-index: 300;
   padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
   border-top: 1px solid $border-color;
   padding-left: $contextual-sidebar-width;
@@ -24,24 +24,99 @@
     padding-right: 0;
   }
 
-  p {
-    @include clearfix;
+  .dropdown {
+    margin-left: $grid-size;
+  }
+}
+
+.review-bar-content {
+  max-width: $limited-layout-width;
+  padding: 0 $gl-padding;
+  width: 100%;
   margin: 0 auto;
-    text-align: right;
+}
+
+.review-preview-dropdown {
+  .review-preview-item.menu-item {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 8px 16px;
+    cursor: pointer;
+
+    &:not(.is-last) {
+      border-bottom: 1px solid $list-border;
+    }
+  }
+
+  .dropdown-menu {
+    top: auto;
+    bottom: 36px;
+
+    &.show {
+      max-height: 400px;
+
+      @include media-breakpoint-down(xs) {
+        width: calc(100vw - 32px);
+      }
+    }
+  }
+
+  .dropdown-content {
+    max-height: 300px;
   }
 
-  .btn {
-    float: right;
+  .dropdown-title {
+    padding: $grid-size 25px $gl-padding;
+    margin-bottom: 0;
+  }
 
-    + .btn {
-      margin-right: $grid-size;
+  .dropdown-footer {
+    margin-top: 0;
   }
+
+  .dropdown-menu-close {
+    top: 6px;
   }
 }
 
-.review-bar-content {
-  max-width: $limited-layout-width;
-  padding: 0 $gl-padding;
+.review-preview-dropdown-toggle {
+  svg.s16 {
+    width: 15px;
+    height: 15px;
+    margin-top: -1px;
+    top: 3px;
+    margin-left: 4px;
+  }
+}
+
+.review-preview-item-header {
+  display: flex;
+  align-items: center;
   width: 100%;
-  margin: 0 auto;
+  margin-bottom: 4px;
+
+  > .bold {
+    display: flex;
+    min-width: 0;
+    line-height: 16px;
+  }
+}
+
+.review-preview-item-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.review-preview-item-content {
+  width: 100%;
+
+  p {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0;
+  }
 }

ee/app/models/draft_note.rb

@@ -80,6 +80,12 @@ class DraftNote < ActiveRecord::Base
     Digest::SHA1.hexdigest(diff_file.file_path)
   end
 
+  def file_path
+    return unless diff_file
+
+    diff_file.file_path
+  end
+
   def publish_params
     attrs = PUBLISH_ATTRS.dup
     attrs.concat(DIFF_ATTRS) if on_diff?

ee/app/serializers/draft_note_entity.rb

@@ -8,6 +8,7 @@ class DraftNoteEntity < Grape::Entity
   expose :position, if: -> (note, _) { note.on_diff? }
   expose :line_code
   expose :file_hash
+  expose :file_path
   expose :note
   expose :rendered_note, as: :note_html
   expose :references

ee/changelogs/unreleased/batch-comments-review-preview.yml

+---
+title: Enable previewing of draft review comments
+merge_request: 7936
+author:
+type: added

ee/spec/features/merge_request/batch_comments_spec.rb

@@ -53,6 +53,7 @@ describe 'Merge request > Batch comments', :js do
       write_comment
 
       page.within('.review-bar-content') do
+        click_button 'Finish review'
         click_button 'Submit review'
       end
 
@@ -155,6 +156,7 @@ describe 'Merge request > Batch comments', :js do
         write_reply_to_discussion(resolve: true)
 
         page.within('.review-bar-content') do
+          click_button 'Finish review'
           click_button 'Submit review'
         end
 
@@ -197,6 +199,7 @@ describe 'Merge request > Batch comments', :js do
         write_reply_to_discussion(button_text: 'Start a review', unresolve: true)
 
         page.within('.review-bar-content') do
+          click_button 'Finish review'
           click_button 'Submit review'
         end
 

ee/spec/javascripts/batch_comments/components/preview_item_spec.js

+import Vue from 'vue';
+import PreviewItem from 'ee/batch_comments/components/preview_item.vue';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createStore } from '~/mr_notes/stores';
+import '~/behaviors/markdown/render_gfm';
+import { createDraft } from '../mock_data';
+
+describe('Batch comments draft preview item component', () => {
+  let vm;
+  let Component;
+  let draft;
+
+  function createComponent(isLast = false, extra = {}, extendStore = () => {}) {
+    const store = createStore();
+
+    extendStore(store);
+
+    draft = {
+      ...createDraft(),
+      ...extra,
+    };
+
+    vm = mountComponentWithStore(Component, { store, props: { draft, isLast } });
+  }
+
+  beforeAll(() => {
+    Component = Vue.extend(PreviewItem);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders text content', () => {
+    createComponent(false, { note_html: '<img src="" /><p>Hello world</p>' });
+
+    expect(vm.$el.querySelector('.review-preview-item-content').innerHTML).toEqual(
+      '<p>Hello world</p>',
+    );
+  });
+
+  it('adds is last class', () => {
+    createComponent(true);
+
+    expect(vm.$el.classList).toContain('is-last');
+  });
+
+  it('scrolls to draft on click', () => {
+    createComponent();
+
+    spyOn(vm.$store, 'dispatch').and.stub();
+
+    vm.$el.click();
+
+    expect(vm.$store.dispatch).toHaveBeenCalledWith('batchComments/scrollToDraft', vm.draft);
+  });
+
+  describe('for file', () => {
+    it('renders file path', () => {
+      createComponent(false, { file_path: 'index.js', file_hash: 'abc', position: {} });
+
+      expect(vm.$el.querySelector('.review-preview-item-header-text').textContent).toContain(
+        'index.js',
+      );
+    });
+
+    it('renders new line position', () => {
+      createComponent(false, {
+        file_path: 'index.js',
+        file_hash: 'abc',
+        position: { new_line: 1 },
+      });
+
+      expect(vm.$el.querySelector('.bold').textContent).toContain(':1');
+    });
+
+    it('renders old line position', () => {
+      createComponent(false, {
+        file_path: 'index.js',
+        file_hash: 'abc',
+        position: { old_line: 2 },
+      });
+
+      expect(vm.$el.querySelector('.bold').textContent).toContain(':2');
+    });
+  });
+
+  describe('for discussion', () => {
+    beforeEach(() => {
+      createComponent(false, { discussion_id: '1', resolve_discussion: true }, store => {
+        store.state.notes.discussions.push({
+          id: '1',
+          notes: [
+            {
+              author: {
+                name: 'Author Name',
+              },
+            },
+          ],
+        });
+      });
+    });
+
+    it('renders title', () => {
+      expect(vm.$el.querySelector('.review-preview-item-header-text').textContent).toContain(
+        "Author Name's discussion",
+      );
+    });
+
+    it('it renders discussion resolved text', () => {
+      expect(vm.$el.querySelector('.draft-note-resolution').textContent).toContain(
+        'Discussion will be resolved',
+      );
+    });
+  });
+});

ee/spec/javascripts/batch_comments/components/publish_button_spec.js

@@ -3,7 +3,7 @@ import PublishButton from 'ee/batch_comments/components/publish_button.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { createStore } from 'ee/batch_comments/stores';
 
-describe('Batch comments drafts count component', () => {
+describe('Batch comments publish button component', () => {
   let vm;
   let Component;
 
@@ -14,7 +14,7 @@ describe('Batch comments drafts count component', () => {
   beforeEach(() => {
     const store = createStore();
 
-    vm = mountComponentWithStore(Component, { store });
+    vm = mountComponentWithStore(Component, { store, props: { shouldPublish: true } });
 
     spyOn(vm.$store, 'dispatch').and.stub();
   });
@@ -26,9 +26,17 @@ describe('Batch comments drafts count component', () => {
   it('dispatches publishReview on click', () => {
     vm.$el.click();
 
+    expect(vm.$store.dispatch).toHaveBeenCalledWith('batchComments/publishReview', undefined);
+  });
+
+  it('dispatches toggleReviewDropdown when shouldPublish is false on click', () => {
+    vm.shouldPublish = false;
+
+    vm.$el.click();
+
     expect(vm.$store.dispatch).toHaveBeenCalledWith(
-      'batchComments/publishReview',
-      jasmine.anything(),
+      'batchComments/toggleReviewDropdown',
+      undefined,
     );
   });
 

ee/spec/javascripts/batch_comments/components/publish_dropdown_spec.js

+import Vue from 'vue';
+import PreviewDropdown from 'ee/batch_comments/components/preview_dropdown.vue';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createStore } from '~/mr_notes/stores';
+import '~/behaviors/markdown/render_gfm';
+import { createDraft } from '../mock_data';
+
+describe('Batch comments draft preview item component', () => {
+  let vm;
+  let Component;
+
+  function createComponent(extendStore = () => {}) {
+    const store = createStore();
+    store.state.batchComments.drafts.push(createDraft(), { ...createDraft(), id: 2 });
+
+    extendStore(store);
+
+    vm = mountComponentWithStore(Component, { store });
+  }
+
+  beforeAll(() => {
+    Component = Vue.extend(PreviewDropdown);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('toggles dropdown when clicking button', done => {
+    createComponent();
+
+    spyOn(vm.$store, 'dispatch').and.callThrough();
+
+    vm.$el.querySelector('.review-preview-dropdown-toggle').click();
+
+    expect(vm.$store.dispatch).toHaveBeenCalledWith(
+      'batchComments/toggleReviewDropdown',
+      jasmine.anything(),
+    );
+
+    setTimeout(() => {
+      expect(vm.$el.classList).toContain('show');
+
+      done();
+    });
+  });
+
+  it('toggles dropdown when clicking body', () => {
+    createComponent();
+
+    vm.$store.state.batchComments.showPreviewDropdown = true;
+
+    spyOn(vm.$store, 'dispatch').and.stub();
+
+    document.body.click();
+
+    expect(vm.$store.dispatch).toHaveBeenCalledWith(
+      'batchComments/toggleReviewDropdown',
+      undefined,
+    );
+  });
+
+  it('renders list of drafts', () => {
+    createComponent(store => {
+      Object.assign(store.state.notes, {
+        isNotesFetched: true,
+      });
+    });
+
+    expect(vm.$el.querySelectorAll('.dropdown-content li').length).toBe(2);
+  });
+
+  it('adds is-last class to last item', () => {
+    createComponent(store => {
+      Object.assign(store.state.notes, {
+        isNotesFetched: true,
+      });
+    });
+
+    expect(vm.$el.querySelectorAll('.dropdown-content li')[1].querySelector('.is-last')).not.toBe(
+      null,
+    );
+  });
+
+  it('renders draft count in dropdown title', () => {
+    createComponent();
+
+    expect(vm.$el.querySelector('.dropdown-title').textContent).toContain('2 pending comments');
+  });
+
+  it('renders publish button in footer', () => {
+    createComponent();
+
+    expect(vm.$el.querySelector('.dropdown-footer .js-publish-draft-button')).not.toBe(null);
+  });
+});

ee/spec/javascripts/batch_comments/mock_data.js

@@ -10,6 +10,7 @@ export const createDraft = () => ({
   current_user: { can_edit: true, can_award_emoji: false, can_resolve: false },
   discussion_id: null,
   file_hash: null,
+  file_path: null,
   id: 1,
   line_code: null,
   merge_request_id: 1,
@@ -19,4 +20,5 @@ export const createDraft = () => ({
   references: { users: [], commands: '' },
   resolve_discussion: false,
   isDraft: true,
+  position: null,
 });

ee/spec/javascripts/batch_comments/stores/modules/batch_comments/actions_spec.js

@@ -309,4 +309,115 @@ describe('Batch comments store actions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('toggleReviewDropdown', () => {
+    it('dispatches openReviewDropdown', done => {
+      testAction(
+        actions.toggleReviewDropdown,
+        null,
+        { showPreviewDropdown: false },
+        [],
+        [{ type: 'openReviewDropdown' }],
+        done,
+      );
+    });
+
+    it('dispatches closeReviewDropdown when showPreviewDropdown is true', done => {
+      testAction(
+        actions.toggleReviewDropdown,
+        null,
+        { showPreviewDropdown: true },
+        [],
+        [{ type: 'closeReviewDropdown' }],
+        done,
+      );
+    });
+  });
+
+  describe('openReviewDropdown', () => {
+    it('commits OPEN_REVIEW_DROPDOWN', done => {
+      testAction(
+        actions.openReviewDropdown,
+        null,
+        null,
+        [{ type: 'OPEN_REVIEW_DROPDOWN' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('closeReviewDropdown', () => {
+    it('commits CLOSE_REVIEW_DROPDOWN', done => {
+      testAction(
+        actions.closeReviewDropdown,
+        null,
+        null,
+        [{ type: 'CLOSE_REVIEW_DROPDOWN' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('expandAllDiscussions', () => {
+    it('dispatches expandDiscussion for all drafts', done => {
+      const state = {
+        drafts: [
+          {
+            discussion_id: '1',
+          },
+        ],
+      };
+
+      testAction(
+        actions.expandAllDiscussions,
+        null,
+        state,
+        [],
+        [
+          {
+            type: 'expandDiscussion',
+            payload: { discussionId: '1' },
+          },
+        ],
+        done,
+      );
+    });
+  });
+
+  describe('scrollToDraft', () => {
+    beforeEach(() => {
+      window.mrTabs = {
+        currentAction: 'notes',
+        tabShown: jasmine.createSpy('tabShown'),
+      };
+    });
+
+    it('scrolls to draft item', () => {
+      const dispatch = jasmine.createSpy('dispatch');
+      const rootGetters = {
+        getDiscussion: () => ({
+          id: '1',
+          diff_discussion: true,
+        }),
+      };
+      const draft = {
+        discussion_id: '1',
+        id: '2',
+      };
+
+      actions.scrollToDraft({ dispatch, rootGetters }, draft);
+
+      expect(dispatch.calls.argsFor(0)).toEqual(['closeReviewDropdown']);
+
+      expect(dispatch.calls.argsFor(1)).toEqual([
+        'expandDiscussion',
+        { discussionId: '1' },
+        { root: true },
+      ]);
+
+      expect(window.mrTabs.tabShown).toHaveBeenCalledWith('diffs');
+    });
+  });
 });

ee/spec/javascripts/batch_comments/stores/modules/batch_comments/mutations_spec.js

@@ -148,4 +148,20 @@ describe('Batch comments mutations', () => {
       ]);
     });
   });
+
+  describe(types.OPEN_REVIEW_DROPDOWN, () => {
+    it('sets showPreviewDropdown to true', () => {
+      mutations[types.OPEN_REVIEW_DROPDOWN](state);
+
+      expect(state.showPreviewDropdown).toBe(true);
+    });
+  });
+
+  describe(types.CLOSE_REVIEW_DROPDOWN, () => {
+    it('sets showPreviewDropdown to false', () => {
+      mutations[types.CLOSE_REVIEW_DROPDOWN](state);
+
+      expect(state.showPreviewDropdown).toBe(false);
+    });
+  });
 });

locale/gitlab.pot

@@ -113,6 +113,9 @@ msgstr[1] ""
 msgid "%{actionText} & %{openOrClose} %{noteable}"
 msgstr ""
 
+msgid "%{authorsName}'s discussion"
+msgstr ""
+
 msgid "%{commit_author_link} authored %{commit_timeago}"
 msgstr ""
 
@@ -127,6 +130,11 @@ msgid_plural "%{count} participants"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{count} pending comment"
+msgid_plural "%{count} pending comments"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%{filePath} deleted"
 msgstr ""
 
@@ -3410,6 +3418,9 @@ msgstr ""
 msgid "Fingerprints"
 msgstr ""
 
+msgid "Finish review"
+msgstr ""
+
 msgid "Finished"
 msgstr ""
 

spec/javascripts/notes/stores/getters_spec.js

@@ -265,4 +265,12 @@ describe('Getters Notes Store', () => {
       expect(getters.firstUnresolvedDiscussionId(state, localGettersFalsy)(false)).toBeFalsy();
     });
   });
+
+  describe('getDiscussion', () => {
+    it('returns discussion by ID', () => {
+      state.discussions.push({ id: '1' });
+
+      expect(getters.getDiscussion(state)('1')).toEqual({ id: '1' });
+    });
+  });
 });