Merge branch 'diff-suggestions-popover' into 'master'

Added diff suggestion popover

Closes #56523

See merge request gitlab-org/gitlab-ce!29473

7 files changed, 64 insertions, 6 deletions

diff --git a/spec/features/issues/markdown_toolbar_spec.rb b/spec/features/issues/markdown_toolbar_spec.rb
index 042ecdb172a..94bd7c53bb5 100644
--- a/spec/features/issues/markdown_toolbar_spec.rb
+++ b/spec/features/issues/markdown_toolbar_spec.rb
@@ -32,7 +32,7 @@ describe 'Issue markdown toolbar', :js do
     find('.js-main-target-form #note-body')
     page.evaluate_script('document.querySelectorAll(".js-main-target-form #note-body")[0].setSelectionRange(4, 50)')
 
-    find('.toolbar-btn:nth-child(2)').click
+    all('.toolbar-btn')[1].click
 
     expect(find('#note-body')[:value]).to eq("test\n*underline*\n")
   end
diff --git a/spec/features/merge_request/user_posts_notes_spec.rb b/spec/features/merge_request/user_posts_notes_spec.rb
index e5770905dbd..8ff24449b39 100644
--- a/spec/features/merge_request/user_posts_notes_spec.rb
+++ b/spec/features/merge_request/user_posts_notes_spec.rb
@@ -141,7 +141,7 @@ describe 'Merge request > User posts notes', :js do
 
         page.within('.current-note-edit-form') do
           expect(find('#note_note').value).to eq('This is the new content')
-          find('.js-md:first-child').click
+          first('.js-md').click
           expect(find('#note_note').value).to eq('This is the new content****')
         end
       end
diff --git a/spec/features/merge_request/user_suggests_changes_on_diff_spec.rb b/spec/features/merge_request/user_suggests_changes_on_diff_spec.rb
index 780de76d2c5..e8b4fc8f160 100644
--- a/spec/features/merge_request/user_suggests_changes_on_diff_spec.rb
+++ b/spec/features/merge_request/user_suggests_changes_on_diff_spec.rb
@@ -28,6 +28,18 @@ describe 'User comments on a diff', :js do
   end
 
   context 'single suggestion note' do
+    it 'hides suggestion popover' do
+      click_diff_line(find("[id='#{sample_compare.changes[1][:line_code]}']"))
+
+      expect(page).to have_selector('.diff-suggest-popover')
+
+      page.within('.diff-suggest-popover') do
+        click_button 'Got it'
+      end
+
+      expect(page).not_to have_selector('.diff-suggest-popover')
+    end
+
     it 'suggestion is presented' do
       click_diff_line(find("[id='#{sample_compare.changes[1][:line_code]}']"))
 
diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index 1aabf3c2132..fdf8bcee756 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -37,6 +37,8 @@ describe('diffs/components/app', () => {
         projectPath: 'namespace/project',
         currentUser: {},
         changesEmptyStateIllustration: '',
+        dismissEndpoint: '',
+        showSuggestPopover: true,
         ...props,
       },
       store,
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index f129fbb57a3..f973728cfe1 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -37,6 +37,7 @@ import actions, {
   toggleFullDiff,
   setFileCollapsed,
   setExpandedDiffLines,
+  setSuggestPopoverDismissed,
 } from '~/diffs/store/actions';
 import eventHub from '~/notes/event_hub';
 import * as types from '~/diffs/store/mutation_types';
@@ -68,12 +69,19 @@ describe('DiffsStoreActions', () => {
     it('should set given endpoint and project path', done => {
       const endpoint = '/diffs/set/endpoint';
       const projectPath = '/root/project';
+      const dismissEndpoint = '/-/user_callouts';
+      const showSuggestPopover = false;
 
       testAction(
         setBaseConfig,
-        { endpoint, projectPath },
-        { endpoint: '', projectPath: '' },
-        [{ type: types.SET_BASE_CONFIG, payload: { endpoint, projectPath } }],
+        { endpoint, projectPath, dismissEndpoint, showSuggestPopover },
+        { endpoint: '', projectPath: '', dismissEndpoint: '', showSuggestPopover: true },
+        [
+          {
+            type: types.SET_BASE_CONFIG,
+            payload: { endpoint, projectPath, dismissEndpoint, showSuggestPopover },
+          },
+        ],
         [],
         done,
       );
@@ -1080,4 +1088,30 @@ describe('DiffsStoreActions', () => {
       );
     });
   });
+
+  describe('setSuggestPopoverDismissed', () => {
+    it('commits SET_SHOW_SUGGEST_POPOVER', done => {
+      const state = { dismissEndpoint: `${gl.TEST_HOST}/-/user_callouts` };
+      const mock = new MockAdapter(axios);
+      mock.onPost(state.dismissEndpoint).reply(200, {});
+
+      spyOn(axios, 'post').and.callThrough();
+
+      testAction(
+        setSuggestPopoverDismissed,
+        null,
+        state,
+        [{ type: types.SET_SHOW_SUGGEST_POPOVER }],
+        [],
+        () => {
+          expect(axios.post).toHaveBeenCalledWith(state.dismissEndpoint, {
+            feature_name: 'suggest_popover_dismissed',
+          });
+
+          mock.restore();
+          done();
+        },
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index fa193e1d3b9..9c13c7ceb7a 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -850,4 +850,14 @@ describe('DiffsStoreMutations', () => {
       expect(file.renderingLines).toBe(false);
     });
   });
+
+  describe('SET_SHOW_SUGGEST_POPOVER', () => {
+    it('sets showSuggestPopover to false', () => {
+      const state = { showSuggestPopover: true };
+
+      mutations[types.SET_SHOW_SUGGEST_POPOVER](state);
+
+      expect(state.showSuggestPopover).toBe(false);
+    });
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js
index d4be2451f0b..af92e5f5ae2 100644
--- a/spec/javascripts/vue_shared/components/markdown/header_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js
@@ -22,13 +22,13 @@ describe('Markdown field header component', () => {
       'Add bold text',
       'Add italic text',
       'Insert a quote',
+      'Insert suggestion',
       'Insert code',
       'Add a link',
       'Add a bullet list',
       'Add a numbered list',
       'Add a task list',
       'Add a table',
-      'Insert suggestion',
       'Go full screen',
     ];
     const elements = vm.$el.querySelectorAll('.toolbar-btn');