Merge branch '233965-suggest-pipeline-flow-second-step-should-open-on-page-load' into 'master'

Resolve Suggest Pipeline flow second step not loading

See merge request gitlab-org/gitlab!47419

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -8,11 +8,40 @@ import initPopover from '~/blob/suggest_gitlab_ci_yml';
 import { disableButtonIfEmptyField, setCookie } from '~/lib/utils/common_utils';
 import Tracking from '~/tracking';
 
+const initPopovers = () => {
+  const suggestEl = document.querySelector('.js-suggest-gitlab-ci-yml');
+
+  if (suggestEl) {
+    const commitButton = document.querySelector('#commit-changes');
+
+    initPopover(suggestEl);
+
+    if (commitButton) {
+      const { dismissKey, humanAccess } = suggestEl.dataset;
+      const urlParams = new URLSearchParams(window.location.search);
+      const mergeRequestPath = urlParams.get('mr_path') || true;
+
+      const commitCookieName = `suggest_gitlab_ci_yml_commit_${dismissKey}`;
+      const commitTrackLabel = 'suggest_gitlab_ci_yml_commit_changes';
+      const commitTrackValue = '20';
+
+      commitButton.addEventListener('click', () => {
+        setCookie(commitCookieName, mergeRequestPath);
+
+        Tracking.event(undefined, 'click_button', {
+          label: commitTrackLabel,
+          property: humanAccess,
+          value: commitTrackValue,
+        });
+      });
+    }
+  }
+};
+
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
   const uploadBlobForm = $('.js-upload-blob-form');
   const deleteBlobForm = $('.js-delete-blob-form');
-  const suggestEl = document.querySelector('.js-suggest-gitlab-ci-yml');
 
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
@@ -33,6 +62,7 @@ export default () => {
           projectId,
           isMarkdown,
         });
+        initPopovers();
       })
       .catch(e => createFlash(e));
 
@@ -62,30 +92,4 @@ export default () => {
   if (deleteBlobForm.length) {
     new NewCommitForm(deleteBlobForm);
   }
-
-  if (suggestEl) {
-    const commitButton = document.querySelector('#commit-changes');
-
-    initPopover(suggestEl);
-
-    if (commitButton) {
-      const { dismissKey, humanAccess } = suggestEl.dataset;
-      const urlParams = new URLSearchParams(window.location.search);
-      const mergeRequestPath = urlParams.get('mr_path') || true;
-
-      const commitCookieName = `suggest_gitlab_ci_yml_commit_${dismissKey}`;
-      const commitTrackLabel = 'suggest_gitlab_ci_yml_commit_changes';
-      const commitTrackValue = '20';
-
-      commitButton.addEventListener('click', () => {
-        setCookie(commitCookieName, mergeRequestPath);
-
-        Tracking.event(undefined, 'click_button', {
-          label: commitTrackLabel,
-          property: humanAccess,
-          value: commitTrackValue,
-        });
-      });
-    }
-  }
 };

changelogs/unreleased/233965-suggest-pipeline-flow-second-step-should-open-on-page-load.yml

+---
+title: Resolve Suggest Pipeline flow second step not loading
+merge_request: 47419
+author:
+type: fixed

spec/features/merge_request/user_sees_suggest_pipeline_spec.rb

@@ -30,4 +30,40 @@ RSpec.describe 'Merge request > User sees suggest pipeline', :js do
 
     expect(page).not_to have_content('Are you adding technical debt or code vulnerabilities?')
   end
+
+  it 'runs tour from start to finish ensuring all nudges are executed' do
+    # nudge 1
+    expect(page).to have_content('Are you adding technical debt or code vulnerabilities?')
+
+    page.within '.mr-pipeline-suggest' do
+      find('[data-testid="ok"]').click
+    end
+
+    wait_for_requests
+
+    # nudge 2
+    expect(page).to have_content('Choose Code Quality to add a pipeline that tests the quality of your code.')
+
+    find('.js-gitlab-ci-yml-selector').click
+
+    wait_for_requests
+
+    within '.gitlab-ci-yml-selector' do
+      find('.dropdown-input-field').set('Jekyll')
+      find('.dropdown-content li', text: 'Jekyll').click
+    end
+
+    wait_for_requests
+
+    expect(page).not_to have_content('Choose Code Quality to add a pipeline that tests the quality of your code.')
+    # nudge 3
+    expect(page).to have_content('The template is ready!')
+
+    find('#commit-changes').click
+
+    wait_for_requests
+
+    # nudge 4
+    expect(page).to have_content("That's it, well done!")
+  end
 end