Add latest changes from gitlab-org/gitlab@master

2 files changed, 80 insertions, 50 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 33819c78c0f..717ebcbe993 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlIcon, GlButton, GlButtonGroup } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlButtonGroup } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
 import { __ } from '~/locale';
 import discussionNavigation from '../mixins/discussion_navigation';
@@ -9,46 +9,41 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    GlIcon,
     GlButton,
     GlButtonGroup,
   },
   mixins: [discussionNavigation],
+  props: {
+    blocksMerge: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     ...mapGetters([
-      'getUserData',
       'getNoteableData',
       'resolvableDiscussionsCount',
       'unresolvedDiscussionsCount',
-      'discussions',
+      'allResolvableDiscussions',
     ]),
-    isLoggedIn() {
-      return this.getUserData.id;
-    },
     allResolved() {
       return this.unresolvedDiscussionsCount === 0;
     },
-    resolveAllDiscussionsIssuePath() {
-      return this.getNoteableData.create_issue_to_resolve_discussions_path;
-    },
-    toggeableDiscussions() {
-      return this.discussions.filter((discussion) => !discussion.individual_note);
-    },
     allExpanded() {
-      return this.toggeableDiscussions.every((discussion) => discussion.expanded);
-    },
-    lineResolveClass() {
-      return this.allResolved ? 'line-resolve-btn is-active' : 'line-resolve-text';
+      return this.allResolvableDiscussions.every((discussion) => discussion.expanded);
     },
     toggleThreadsLabel() {
       return this.allExpanded ? __('Collapse all threads') : __('Expand all threads');
     },
+    resolveAllDiscussionsIssuePath() {
+      return this.getNoteableData.create_issue_to_resolve_discussions_path;
+    },
   },
   methods: {
     ...mapActions(['setExpandDiscussions']),
     handleExpandDiscussions() {
       this.setExpandDiscussions({
-        discussionIds: this.toggeableDiscussions.map((discussion) => discussion.id),
+        discussionIds: this.allResolvableDiscussions.map((discussion) => discussion.id),
         expanded: !this.allExpanded,
       });
     },
@@ -60,21 +55,61 @@ export default {
   <div
     v-if="resolvableDiscussionsCount > 0"
     ref="discussionCounter"
-    class="line-resolve-all-container full-width-mobile gl-display-flex d-sm-flex"
+    class="gl-display-flex discussions-counter"
   >
-    <div class="line-resolve-all">
-      <span :class="lineResolveClass">
-        <template v-if="allResolved">
-          <gl-icon name="check-circle-filled" />
-          {{ __('All threads resolved') }}
-        </template>
-        <template v-else>
-          {{ n__('%d unresolved thread', '%d unresolved threads', unresolvedDiscussionsCount) }}
-        </template>
-      </span>
+    <div
+      class="gl-display-flex gl-align-items-center gl-pl-4 gl-rounded-base gl-mr-3"
+      :class="{
+        'gl-bg-orange-50': blocksMerge,
+        'gl-bg-gray-50': !blocksMerge,
+        'gl-pr-4': allResolved,
+        'gl-pr-2': !allResolved,
+      }"
+      data-testid="discussions-counter-text"
+    >
+      <template v-if="allResolved">
+        {{ __('All threads resolved') }}
+      </template>
+      <template v-else>
+        {{ n__('%d unresolved thread', '%d unresolved threads', unresolvedDiscussionsCount) }}
+        <gl-button-group class="gl-ml-3">
+          <gl-button
+            v-gl-tooltip.hover
+            :title="__('Jump to previous unresolved thread')"
+            :aria-label="__('Jump to previous unresolved thread')"
+            class="discussion-previous-btn gl-rounded-base! gl-px-2!"
+            data-track-action="click_button"
+            data-track-label="mr_previous_unresolved_thread"
+            data-track-property="click_previous_unresolved_thread_top"
+            icon="angle-up"
+            category="tertiary"
+            @click="jumpToPreviousDiscussion"
+          />
+          <gl-button
+            v-gl-tooltip.hover
+            :title="__('Jump to next unresolved thread')"
+            :aria-label="__('Jump to next unresolved thread')"
+            class="discussion-next-btn gl-rounded-base! gl-px-2!"
+            data-track-action="click_button"
+            data-track-label="mr_next_unresolved_thread"
+            data-track-property="click_next_unresolved_thread_top"
+            icon="angle-down"
+            category="tertiary"
+            @click="jumpToNextDiscussion"
+          />
+        </gl-button-group>
+      </template>
     </div>
     <gl-button-group>
       <gl-button
+        v-gl-tooltip
+        :title="toggleThreadsLabel"
+        :aria-label="toggleThreadsLabel"
+        class="toggle-all-discussions-btn"
+        :icon="allExpanded ? 'collapse' : 'expand'"
+        @click="handleExpandDiscussions"
+      />
+      <gl-button
         v-if="resolveAllDiscussionsIssuePath && !allResolved"
         v-gl-tooltip
         :href="resolveAllDiscussionsIssuePath"
@@ -83,26 +118,6 @@ export default {
         class="new-issue-for-discussion discussion-create-issue-btn"
         icon="issue-new"
       />
-      <gl-button
-        v-if="isLoggedIn && !allResolved"
-        v-gl-tooltip
-        :title="__('Jump to next unresolved thread')"
-        :aria-label="__('Jump to next unresolved thread')"
-        class="discussion-next-btn"
-        data-track-action="click_button"
-        data-track-label="mr_next_unresolved_thread"
-        data-track-property="click_next_unresolved_thread_top"
-        icon="comment-next"
-        @click="jumpToNextDiscussion"
-      />
-      <gl-button
-        v-gl-tooltip
-        :title="toggleThreadsLabel"
-        :aria-label="toggleThreadsLabel"
-        class="toggle-all-discussions-btn"
-        :icon="allExpanded ? 'angle-up' : 'angle-down'"
-        @click="handleExpandDiscussions"
-      />
     </gl-button-group>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 204e704e504..0cfc17a6ae9 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -17,6 +17,7 @@ import { mergeUrlParams } from '~/lib/utils/url_utility';
 import sidebarTimeTrackingEventHub from '~/sidebar/event_hub';
 import TaskList from '~/task_list';
 import mrWidgetEventHub from '~/vue_merge_request_widget/event_hub';
+import SidebarStore from '~/sidebar/stores/sidebar_store';
 import * as constants from '../constants';
 import eventHub from '../event_hub';
 import * as types from './mutation_types';
@@ -369,7 +370,14 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
   }
 
   const processQuickActions = (res) => {
-    const { errors: { commands_only: message } = { commands_only: null } } = res;
+    const {
+      errors: { commands_only: commandsOnly, command_names: commandNames } = {
+        commands_only: null,
+        command_names: [],
+      },
+    } = res;
+    let message = commandsOnly;
+
     /*
      The following reply means that quick actions have been successfully applied:
 
@@ -387,6 +395,13 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
         confidentialWidget.setConfidentiality();
       }
 
+      const commands = ['approve', 'merge', 'assign_reviewer', 'assign'];
+      const commandUpdatesAttentionRequest = commandNames[0].some((c) => commands.includes(c));
+
+      if (commandUpdatesAttentionRequest && SidebarStore.singleton.currentUserHasAttention) {
+        message = sprintf(__('%{message}. Your attention request was removed.'), { message });
+      }
+
       $('.js-gfm-input').trigger('clear-commands-cache.atwho');
 
       createFlash({