Display pipeline editor button

Display a pipeline edito button when vewing ci file

app/assets/javascripts/repository/components/blob_content_viewer.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
@@ -17,12 +17,16 @@ import ForkSuggestion from './fork_suggestion.vue';
 import { loadViewer, viewerProps } from './blob_viewers';
 
 export default {
+  i18n: {
+    pipelineEditor: __('Pipeline Editor'),
+  },
   components: {
     BlobHeader,
     BlobEdit,
     BlobButtonGroup,
     BlobContent,
     GlLoadingIcon,
+    GlButton,
     ForkSuggestion,
   },
   mixins: [getRefMixin],
@@ -105,6 +109,7 @@ export default {
                 rawPath: '',
                 externalStorageUrl: '',
                 replacePath: '',
+                pipelineEditorPath: '',
                 deletePath: '',
                 simpleViewer: {},
                 richViewer: null,
@@ -242,6 +247,18 @@ export default {
             :needs-to-fork="showForkSuggestion"
             @edit="editBlob"
           />
+
+          <gl-button
+            v-if="blobInfo.pipelineEditorPath"
+            class="gl-mr-3"
+            category="secondary"
+            variant="confirm"
+            data-testid="pipeline-editor"
+            :href="blobInfo.pipelineEditorPath"
+          >
+            {{ $options.i18n.pipelineEditor }}
+          </gl-button>
+
           <blob-button-group
             v-if="isLoggedIn"
             :path="path"

app/assets/javascripts/repository/queries/blob_info.query.graphql

@@ -31,6 +31,7 @@ query getBlobInfo($projectPath: ID!, $filePath: String!, $ref: String!) {
           storedExternally
           rawPath
           replacePath
+          pipelineEditorPath
           simpleViewer {
             fileType
             tooLarge

app/graphql/types/repository/blob_type.rb

@@ -68,6 +68,9 @@ module Types
       field :replace_path, GraphQL::Types::String, null: true,
             description: 'Web path to replace the blob content.'
 
+      field :pipeline_editor_path, GraphQL::Types::String, null: true,
+            description: 'Web path to edit .gitlab-ci.yml file.'
+
       field :file_type, GraphQL::Types::String, null: true,
             description: 'Expected format of the blob based on the extension.'
 

app/presenters/blob_presenter.rb

@@ -62,6 +62,10 @@ class BlobPresenter < Gitlab::View::Presenter::Delegated
     url_helpers.project_create_blob_path(project, ref_qualified_path)
   end
 
+  def pipeline_editor_path
+    project_ci_pipeline_editor_path(project, branch_name: blob.commit_id) if can_collaborate_with_project?(project) && blob.path == project.ci_config_path_or_default
+  end
+
   def fork_and_edit_path
     fork_path_for_current_user(project, edit_blob_path)
   end

doc/api/graphql/reference/index.md

@@ -14085,6 +14085,7 @@ Returns [`Tree`](#tree).
 | <a id="repositoryblobname"></a>`name` | [`String`](#string) | Blob name. |
 | <a id="repositorybloboid"></a>`oid` | [`String!`](#string) | OID of the blob. |
 | <a id="repositoryblobpath"></a>`path` | [`String!`](#string) | Path of the blob. |
+| <a id="repositoryblobpipelineeditorpath"></a>`pipelineEditorPath` | [`String`](#string) | Web path to edit .gitlab-ci.yml file. |
 | <a id="repositoryblobplaindata"></a>`plainData` | [`String`](#string) | Blob plain highlighted data. |
 | <a id="repositoryblobrawblob"></a>`rawBlob` | [`String`](#string) | Raw content of the blob. |
 | <a id="repositoryblobrawpath"></a>`rawPath` | [`String`](#string) | Web path to download the raw blob. |

locale/gitlab.pot

@@ -25149,6 +25149,9 @@ msgstr ""
 msgid "Pipeline %{label} for \"%{dataTitle}\""
 msgstr ""
 
+msgid "Pipeline Editor"
+msgstr ""
+
 msgid "Pipeline ID"
 msgstr ""
 

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -19,6 +19,7 @@ import TextViewer from '~/repository/components/blob_viewers/text_viewer.vue';
 import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { isLoggedIn } from '~/lib/utils/common_utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import {
   simpleViewerMock,
   richViewerMock,
@@ -72,13 +73,15 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
 
   const fakeApollo = createMockApollo([[blobInfoQuery, mockResolver]]);
 
-  wrapper = mountFn(BlobContentViewer, {
-    localVue,
-    apolloProvider: fakeApollo,
-    propsData: propsMock,
-    mixins: [{ data: () => ({ ref: refMock }) }],
-    provide: { ...inject },
-  });
+  wrapper = extendedWrapper(
+    mountFn(BlobContentViewer, {
+      localVue,
+      apolloProvider: fakeApollo,
+      propsData: propsMock,
+      mixins: [{ data: () => ({ ref: refMock }) }],
+      provide: { ...inject },
+    }),
+  );
 
   wrapper.setData({ project, isBinary });
 
@@ -89,6 +92,7 @@ describe('Blob content viewer component', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findBlobHeader = () => wrapper.findComponent(BlobHeader);
   const findBlobEdit = () => wrapper.findComponent(BlobEdit);
+  const findPipelineEditor = () => wrapper.findByTestId('pipeline-editor');
   const findBlobContent = () => wrapper.findComponent(BlobContent);
   const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
   const findForkSuggestion = () => wrapper.findComponent(ForkSuggestion);
@@ -270,6 +274,15 @@ describe('Blob content viewer component', () => {
       });
     });
 
+    it('renders Pipeline Editor button for .gitlab-ci files', async () => {
+      const pipelineEditorPath = 'some/path/.gitlab-ce';
+      const blob = { ...simpleViewerMock, pipelineEditorPath };
+      await createComponent({ blob, inject: { BlobContent: true, BlobReplace: true } }, mount);
+
+      expect(findPipelineEditor().exists()).toBe(true);
+      expect(findPipelineEditor().attributes('href')).toBe(pipelineEditorPath);
+    });
+
     describe('blob header binary file', () => {
       it('passes the correct isBinary value when viewing a binary file', async () => {
         await createComponent({ blob: richViewerMock, isBinary: true });

spec/frontend/repository/mock_data.js

@@ -14,6 +14,7 @@ export const simpleViewerMock = {
   storedExternally: false,
   rawPath: 'some_file.js',
   replacePath: 'some_file.js/replace',
+  pipelineEditorPath: '',
   simpleViewer: {
     fileType: 'text',
     tooLarge: false,

spec/graphql/types/repository/blob_type_spec.rb

@@ -23,6 +23,7 @@ RSpec.describe Types::Repository::BlobType do
       :stored_externally,
       :raw_path,
       :replace_path,
+      :pipeline_editor_path,
       :simple_viewer,
       :rich_viewer,
       :plain_data,

spec/presenters/blob_presenter_spec.rb

@@ -31,6 +31,20 @@ RSpec.describe BlobPresenter do
     it { expect(presenter.replace_path).to eq("/#{project.full_path}/-/create/#{blob.commit_id}/#{blob.path}") }
   end
 
+  describe '#pipeline_editor_path' do
+    context 'when blob is .gitlab-ci.yml' do
+      before do
+        project.repository.create_file(user, '.gitlab-ci.yml', '',
+        message: 'Add a ci file',
+        branch_name: 'main')
+      end
+
+      let(:blob) { repository.blob_at('main', '.gitlab-ci.yml') }
+
+      it { expect(presenter.pipeline_editor_path).to eq("/#{project.full_path}/-/ci/editor?branch_name=#{blob.commit_id}") }
+    end
+  end
+
   describe '#ide_edit_path' do
     it { expect(presenter.ide_edit_path).to eq("/-/ide/project/#{project.full_path}/edit/HEAD/-/files/ruby/regex.rb") }
   end