Split btn default to pipeline editor for CI configs

In the blob view, if the user is seeing a CI configuration,
we want to make the pipeline editor the default option. This is
only true is the user has not selected a different preference.

Changelod: changed

app/assets/javascripts/vue_shared/components/web_ide_link.vue

@@ -8,6 +8,7 @@ import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
 const KEY_EDIT = 'edit';
 const KEY_WEB_IDE = 'webide';
 const KEY_GITPOD = 'gitpod';
+const KEY_PIPELINE_EDITOR = 'pipeline_editor';
 
 export default {
   components: {
@@ -64,6 +65,11 @@ export default {
       required: false,
       default: false,
     },
+    showPipelineEditorButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     userPreferencesGitpodPath: {
       type: String,
       required: false,
@@ -79,6 +85,11 @@ export default {
       required: false,
       default: '',
     },
+    pipelineEditorUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     webIdeUrl: {
       type: String,
       required: false,
@@ -117,14 +128,19 @@ export default {
   },
   data() {
     return {
-      selection: KEY_WEB_IDE,
+      selection: this.showPipelineEditorButton ? KEY_PIPELINE_EDITOR : KEY_WEB_IDE,
       showEnableGitpodModal: false,
       showForkModal: false,
     };
   },
   computed: {
     actions() {
-      return [this.webIdeAction, this.editAction, this.gitpodAction].filter((action) => action);
+      return [
+        this.pipelineEditorAction,
+        this.webIdeAction,
+        this.editAction,
+        this.gitpodAction,
+      ].filter((action) => action);
     },
     editAction() {
       if (!this.showEditButton) {
@@ -209,6 +225,24 @@ export default {
         this.showGitpodButton && this.userPreferencesGitpodPath && this.userProfileEnableGitpodPath
       );
     },
+    pipelineEditorAction() {
+      if (!this.showPipelineEditorButton) {
+        return null;
+      }
+
+      const secondaryText = __('Edit, lint, and visualize your pipeline.');
+
+      return {
+        key: KEY_PIPELINE_EDITOR,
+        text: __('Edit in pipeline editor'),
+        secondaryText,
+        tooltip: secondaryText,
+        attrs: {
+          'data-qa-selector': 'pipeline_editor_button',
+        },
+        href: this.pipelineEditorUrl,
+      };
+    },
     gitpodAction() {
       if (!this.computedShowGitpodButton) {
         return null;

app/helpers/tree_helper.rb

@@ -203,9 +203,11 @@ module TreeHelper
       show_edit_button: show_edit_button?(options),
       show_web_ide_button: show_web_ide_button?,
       show_gitpod_button: show_gitpod_button?,
+      show_pipeline_editor_button: show_pipeline_editor_button?(@project, @path),
 
       web_ide_url: web_ide_url,
       edit_url: edit_url(options),
+      pipeline_editor_url: project_ci_pipeline_editor_path(@project, branch_name: @ref),
 
       gitpod_url: gitpod_url,
       user_preferences_gitpod_path: profile_preferences_path(anchor: 'user_gitpod_enabled'),

app/helpers/web_ide_button_helper.rb

@@ -29,6 +29,10 @@ module WebIdeButtonHelper
     show_web_ide_button? && Gitlab::CurrentSettings.gitpod_enabled
   end
 
+  def show_pipeline_editor_button?(project, path)
+    can_view_pipeline_editor?(project) && path == project.ci_config_path_or_default
+  end
+
   def can_push_code?
     current_user&.can?(:push_code, @project)
   end

app/views/projects/blob/_header.html.haml

@@ -6,7 +6,7 @@
   .file-actions.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-md-justify-content-end<
     = render 'projects/blob/viewer_switcher', blob: blob unless blame
     = render 'shared/web_ide_button', blob: blob
-    - if can_view_pipeline_editor?(@project) && @path == @project.ci_config_path_or_default
+    - if show_pipeline_editor_button?(@project, @path)
       = link_to "Pipeline Editor", project_ci_pipeline_editor_path(@project, branch_name: @ref), class: "btn gl-button btn-confirm-secondary gl-ml-3"
     .btn-group{ role: "group", class: ("gl-ml-3" if current_user) }>
       = render_if_exists 'projects/blob/header_file_locks_link'

locale/gitlab.pot

@@ -13214,6 +13214,9 @@ msgstr ""
 msgid "Edit in Web IDE"
 msgstr ""
 
+msgid "Edit in pipeline editor"
+msgstr ""
+
 msgid "Edit in single-file editor"
 msgstr ""
 
@@ -13256,6 +13259,9 @@ msgstr ""
 msgid "Edit your most recent comment in a thread (from an empty textarea)"
 msgstr ""
 
+msgid "Edit, lint, and visualize your pipeline."
+msgstr ""
+
 msgid "Edited"
 msgstr ""
 

spec/frontend/vue_shared/components/web_ide_link_spec.js

@@ -12,6 +12,7 @@ import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_help
 const TEST_EDIT_URL = '/gitlab-test/test/-/edit/main/';
 const TEST_WEB_IDE_URL = '/-/ide/project/gitlab-test/test/edit/main/-/';
 const TEST_GITPOD_URL = 'https://gitpod.test/';
+const TEST_PIPELINE_EDITOR_URL = '/-/ci/editor?branch_name="main"';
 const TEST_USER_PREFERENCES_GITPOD_PATH = '/-/profile/preferences#user_gitpod_enabled';
 const TEST_USER_PROFILE_ENABLE_GITPOD_PATH = '/-/profile?user%5Bgitpod_enabled%5D=true';
 const forkPath = '/some/fork/path';
@@ -66,6 +67,16 @@ const ACTION_GITPOD_ENABLE = {
   href: undefined,
   handle: expect.any(Function),
 };
+const ACTION_PIPELINE_EDITOR = {
+  href: TEST_PIPELINE_EDITOR_URL,
+  key: 'pipeline_editor',
+  secondaryText: 'Edit, lint, and visualize your pipeline.',
+  tooltip: 'Edit, lint, and visualize your pipeline.',
+  text: 'Edit in pipeline editor',
+  attrs: {
+    'data-qa-selector': 'pipeline_editor_button',
+  },
+};
 
 describe('Web IDE link component', () => {
   let wrapper;
@@ -76,6 +87,7 @@ describe('Web IDE link component', () => {
         editUrl: TEST_EDIT_URL,
         webIdeUrl: TEST_WEB_IDE_URL,
         gitpodUrl: TEST_GITPOD_URL,
+        pipelineEditorUrl: TEST_PIPELINE_EDITOR_URL,
         forkPath,
         ...props,
       },
@@ -106,6 +118,10 @@ describe('Web IDE link component', () => {
       props: {},
       expectedActions: [ACTION_WEB_IDE, ACTION_EDIT],
     },
+    {
+      props: { showPipelineEditorButton: true },
+      expectedActions: [ACTION_PIPELINE_EDITOR, ACTION_WEB_IDE, ACTION_EDIT],
+    },
     {
       props: { webIdeText: 'Test Web IDE' },
       expectedActions: [{ ...ACTION_WEB_IDE_EDIT_FORK, text: 'Test Web IDE' }, ACTION_EDIT],
@@ -193,12 +209,34 @@ describe('Web IDE link component', () => {
     expect(findActionsButton().props('actions')).toEqual(expectedActions);
   });
 
+  describe('when pipeline editor action is available', () => {
+    beforeEach(() => {
+      createComponent({
+        showEditButton: false,
+        showWebIdeButton: true,
+        showGitpodButton: true,
+        showPipelineEditorButton: true,
+        userPreferencesGitpodPath: TEST_USER_PREFERENCES_GITPOD_PATH,
+        userProfileEnableGitpodPath: TEST_USER_PROFILE_ENABLE_GITPOD_PATH,
+        gitpodEnabled: true,
+      });
+    });
+
+    it('selected Pipeline Editor by default', () => {
+      expect(findActionsButton().props()).toMatchObject({
+        actions: [ACTION_PIPELINE_EDITOR, ACTION_WEB_IDE, ACTION_GITPOD],
+        selectedKey: ACTION_PIPELINE_EDITOR.key,
+      });
+    });
+  });
+
   describe('with multiple actions', () => {
     beforeEach(() => {
       createComponent({
         showEditButton: false,
         showWebIdeButton: true,
         showGitpodButton: true,
+        showPipelineEditorButton: false,
         userPreferencesGitpodPath: TEST_USER_PREFERENCES_GITPOD_PATH,
         userProfileEnableGitpodPath: TEST_USER_PROFILE_ENABLE_GITPOD_PATH,
         gitpodEnabled: true,
@@ -240,6 +278,7 @@ describe('Web IDE link component', () => {
         props: {
           showWebIdeButton: true,
           showEditButton: false,
+          showPipelineEditorButton: false,
           forkPath,
           forkModalId: 'edit-modal',
         },
@@ -249,6 +288,7 @@ describe('Web IDE link component', () => {
         props: {
           showWebIdeButton: false,
           showEditButton: true,
+          showPipelineEditorButton: false,
           forkPath,
           forkModalId: 'webide-modal',
         },

spec/helpers/tree_helper_spec.rb

@@ -116,9 +116,11 @@ RSpec.describe TreeHelper do
         show_edit_button: false,
         show_web_ide_button: true,
         show_gitpod_button: false,
+        show_pipeline_editor_button: false,
 
         edit_url: '',
         web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}",
+        pipeline_editor_url: "/#{project.full_path}/-/ci/editor?branch_name=#{@ref}",
 
         gitpod_url: '',
         user_preferences_gitpod_path: user_preferences_gitpod_path,

spec/helpers/web_ide_button_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe WebIdeButtonHelper do
+  describe '#show_pipeline_editor_button?' do
+    subject(:result) { helper.show_pipeline_editor_button?(project, path) }
+
+    let_it_be(:project) { build(:project) }
+
+    context 'when can view pipeline editor' do
+      before do
+        allow(helper).to receive(:can_view_pipeline_editor?).and_return(true)
+      end
+
+      context 'when path is ci config path' do
+        let(:path) { project.ci_config_path_or_default }
+
+        it 'returns true' do
+          expect(result).to eq(true)
+        end
+      end
+
+      context 'when path is not config path' do
+        let(:path) { '/' }
+
+        it 'returns false' do
+          expect(result).to eq(false)
+        end
+      end
+    end
+
+    context 'when can not view pipeline editor' do
+      before do
+        allow(helper).to receive(:can_view_pipeline_editor?).and_return(false)
+      end
+
+      let(:path) { project.ci_config_path_or_default }
+
+      it 'returns false' do
+        expect(result).to eq(false)
+      end
+    end
+  end
+end