Add latest changes from gitlab-org/gitlab@13-1-stable-ee

4 files changed, 182 insertions, 22 deletions

diff --git a/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap b/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap
index 29ac754de49..cdd7a3ccaf0 100644
--- a/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap
+++ b/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap
@@ -5,8 +5,11 @@ exports[`Suggestion Diff component matches snapshot 1`] = `
   class="md-suggestion"
 >
   <suggestion-diff-header-stub
+    batchsuggestionscount="1"
     class="qa-suggestion-diff-header js-suggestion-diff-header"
     helppagepath="path_to_docs"
+    isapplyingbatch="true"
+    isbatched="true"
   />
    
   <table
diff --git a/spec/frontend/vue_shared/components/markdown/field_spec.js b/spec/frontend/vue_shared/components/markdown/field_spec.js
index 54ce1f47e28..74be5f8230e 100644
--- a/spec/frontend/vue_shared/components/markdown/field_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/field_spec.js
@@ -185,7 +185,7 @@ describe('Markdown field component', () => {
         markdownButton.trigger('click');
 
         return wrapper.vm.$nextTick(() => {
-          expect(textarea.value).toContain('* testing');
+          expect(textarea.value).toContain('- testing');
         });
       });
 
@@ -197,7 +197,7 @@ describe('Markdown field component', () => {
         markdownButton.trigger('click');
 
         return wrapper.vm.$nextTick(() => {
-          expect(textarea.value).toContain('* testing\n* 123');
+          expect(textarea.value).toContain('- testing\n- 123');
         });
       });
     });
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
index 9b9c3d559e3..9a5b95b555f 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -3,20 +3,29 @@ import { shallowMount } from '@vue/test-utils';
 import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
 
 const DEFAULT_PROPS = {
+  batchSuggestionsCount: 2,
   canApply: true,
   isApplied: false,
+  isBatched: false,
+  isApplyingBatch: false,
   helpPagePath: 'path_to_docs',
 };
 
 describe('Suggestion Diff component', () => {
   let wrapper;
 
-  const createComponent = props => {
+  const createComponent = (props, glFeatures = {}) => {
     wrapper = shallowMount(SuggestionDiffHeader, {
       propsData: {
         ...DEFAULT_PROPS,
         ...props,
       },
+      provide: {
+        glFeatures: {
+          batchSuggestions: true,
+          ...glFeatures,
+        },
+      },
     });
   };
 
@@ -25,6 +34,9 @@ describe('Suggestion Diff component', () => {
   });
 
   const findApplyButton = () => wrapper.find('.js-apply-btn');
+  const findApplyBatchButton = () => wrapper.find('.js-apply-batch-btn');
+  const findAddToBatchButton = () => wrapper.find('.js-add-to-batch-btn');
+  const findRemoveFromBatchButton = () => wrapper.find('.js-remove-from-batch-btn');
   const findHeader = () => wrapper.find('.js-suggestion-diff-header');
   const findHelpButton = () => wrapper.find('.js-help-btn');
   const findLoading = () => wrapper.find(GlLoadingIcon);
@@ -44,19 +56,22 @@ describe('Suggestion Diff component', () => {
     expect(findHelpButton().exists()).toBe(true);
   });
 
-  it('renders an apply button', () => {
+  it('renders apply suggestion and add to batch buttons', () => {
     createComponent();
 
     const applyBtn = findApplyButton();
+    const addToBatchBtn = findAddToBatchButton();
 
     expect(applyBtn.exists()).toBe(true);
     expect(applyBtn.html().includes('Apply suggestion')).toBe(true);
-  });
 
-  it('does not render an apply button if `canApply` is set to false', () => {
-    createComponent({ canApply: false });
+    expect(addToBatchBtn.exists()).toBe(true);
+    expect(addToBatchBtn.html().includes('Add suggestion to batch')).toBe(true);
+  });
 
-    expect(findApplyButton().exists()).toBe(false);
+  it('renders correct tooltip message for apply button', () => {
+    createComponent();
+    expect(wrapper.vm.tooltipMessage).toBe('This also resolves the discussion');
   });
 
   describe('when apply suggestion is clicked', () => {
@@ -73,13 +88,14 @@ describe('Suggestion Diff component', () => {
       });
     });
 
-    it('hides apply button', () => {
+    it('does not render apply suggestion and add to batch buttons', () => {
       expect(findApplyButton().exists()).toBe(false);
+      expect(findAddToBatchButton().exists()).toBe(false);
     });
 
     it('shows loading', () => {
       expect(findLoading().exists()).toBe(true);
-      expect(wrapper.text()).toContain('Applying suggestion');
+      expect(wrapper.text()).toContain('Applying suggestion...');
     });
 
     it('when callback of apply is called, hides loading', () => {
@@ -93,4 +109,135 @@ describe('Suggestion Diff component', () => {
       });
     });
   });
+
+  describe('when add to batch is clicked', () => {
+    it('emits addToBatch', () => {
+      createComponent();
+
+      findAddToBatchButton().vm.$emit('click');
+
+      expect(wrapper.emittedByOrder()).toContainEqual({
+        name: 'addToBatch',
+        args: [],
+      });
+    });
+  });
+
+  describe('when remove from batch is clicked', () => {
+    it('emits removeFromBatch', () => {
+      createComponent({ isBatched: true });
+
+      findRemoveFromBatchButton().vm.$emit('click');
+
+      expect(wrapper.emittedByOrder()).toContainEqual({
+        name: 'removeFromBatch',
+        args: [],
+      });
+    });
+  });
+
+  describe('apply suggestions is clicked', () => {
+    it('emits applyBatch', () => {
+      createComponent({ isBatched: true });
+
+      findApplyBatchButton().vm.$emit('click');
+
+      expect(wrapper.emittedByOrder()).toContainEqual({
+        name: 'applyBatch',
+        args: [],
+      });
+    });
+  });
+
+  describe('when isBatched is true', () => {
+    it('shows remove from batch and apply batch buttons and displays the batch count', () => {
+      createComponent({
+        batchSuggestionsCount: 9,
+        isBatched: true,
+      });
+
+      const applyBatchBtn = findApplyBatchButton();
+      const removeFromBatchBtn = findRemoveFromBatchButton();
+
+      expect(removeFromBatchBtn.exists()).toBe(true);
+      expect(removeFromBatchBtn.html().includes('Remove from batch')).toBe(true);
+
+      expect(applyBatchBtn.exists()).toBe(true);
+      expect(applyBatchBtn.html().includes('Apply suggestions')).toBe(true);
+      expect(applyBatchBtn.html().includes(String('9'))).toBe(true);
+    });
+
+    it('hides add to batch and apply buttons', () => {
+      createComponent({
+        isBatched: true,
+      });
+
+      expect(findApplyButton().exists()).toBe(false);
+      expect(findAddToBatchButton().exists()).toBe(false);
+    });
+
+    describe('when isBatched and isApplyingBatch are true', () => {
+      it('shows loading', () => {
+        createComponent({
+          isBatched: true,
+          isApplyingBatch: true,
+        });
+
+        expect(findLoading().exists()).toBe(true);
+        expect(wrapper.text()).toContain('Applying suggestions...');
+      });
+
+      it('adjusts message for batch with single suggestion', () => {
+        createComponent({
+          batchSuggestionsCount: 1,
+          isBatched: true,
+          isApplyingBatch: true,
+        });
+
+        expect(findLoading().exists()).toBe(true);
+        expect(wrapper.text()).toContain('Applying suggestion...');
+      });
+
+      it('hides remove from batch and apply suggestions buttons', () => {
+        createComponent({
+          isBatched: true,
+          isApplyingBatch: true,
+        });
+
+        expect(findRemoveFromBatchButton().exists()).toBe(false);
+        expect(findApplyBatchButton().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('batchSuggestions feature flag is set to false', () => {
+    beforeEach(() => {
+      createComponent({}, { batchSuggestions: false });
+    });
+
+    it('disables add to batch buttons but keeps apply suggestion enabled', () => {
+      expect(findApplyButton().exists()).toBe(true);
+      expect(findAddToBatchButton().exists()).toBe(false);
+      expect(findApplyButton().attributes('disabled')).not.toBe('true');
+    });
+  });
+
+  describe('canApply is set to false', () => {
+    beforeEach(() => {
+      createComponent({ canApply: false });
+    });
+
+    it('disables apply suggestion and add to batch buttons', () => {
+      expect(findApplyButton().exists()).toBe(true);
+      expect(findAddToBatchButton().exists()).toBe(true);
+      expect(findApplyButton().attributes('disabled')).toBe('true');
+      expect(findAddToBatchButton().attributes('disabled')).toBe('true');
+    });
+
+    it('renders correct tooltip message for apply button', () => {
+      expect(wrapper.vm.tooltipMessage).toBe(
+        "Can't apply as this line has changed or the suggestion already matches its content.",
+      );
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
index 162ac495385..232feb126dc 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
@@ -3,9 +3,10 @@ import SuggestionDiffComponent from '~/vue_shared/components/markdown/suggestion
 import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
 import SuggestionDiffRow from '~/vue_shared/components/markdown/suggestion_diff_row.vue';
 
+const suggestionId = 1;
 const MOCK_DATA = {
   suggestion: {
-    id: 1,
+    id: suggestionId,
     diff_lines: [
       {
         can_receive_suggestion: false,
@@ -38,8 +39,10 @@ const MOCK_DATA = {
         type: 'new',
       },
     ],
+    is_applying_batch: true,
   },
   helpPagePath: 'path_to_docs',
+  batchSuggestionsInfo: [{ suggestionId }],
 };
 
 describe('Suggestion Diff component', () => {
@@ -70,17 +73,24 @@ describe('Suggestion Diff component', () => {
     expect(wrapper.findAll(SuggestionDiffRow)).toHaveLength(3);
   });
 
-  it('emits apply event on sugestion diff header apply', () => {
-    wrapper.find(SuggestionDiffHeader).vm.$emit('apply', 'test-event');
+  it.each`
+    event                | childArgs         | args
+    ${'apply'}           | ${['test-event']} | ${[{ callback: 'test-event', suggestionId }]}
+    ${'applyBatch'}      | ${[]}             | ${[]}
+    ${'addToBatch'}      | ${[]}             | ${[suggestionId]}
+    ${'removeFromBatch'} | ${[]}             | ${[suggestionId]}
+  `('emits $event event on sugestion diff header $event', ({ event, childArgs, args }) => {
+    wrapper.find(SuggestionDiffHeader).vm.$emit(event, ...childArgs);
 
-    expect(wrapper.emitted('apply')).toBeDefined();
-    expect(wrapper.emitted('apply')).toEqual([
-      [
-        {
-          callback: 'test-event',
-          suggestionId: 1,
-        },
-      ],
-    ]);
+    expect(wrapper.emitted(event)).toBeDefined();
+    expect(wrapper.emitted(event)).toEqual([args]);
+  });
+
+  it('passes suggestion batch props to suggestion diff header', () => {
+    expect(wrapper.find(SuggestionDiffHeader).props()).toMatchObject({
+      batchSuggestionsCount: 1,
+      isBatched: true,
+      isApplyingBatch: MOCK_DATA.suggestion.is_applying_batch,
+    });
   });
 });