Merge branch '323210-vue-blob-header-consolidated-edit-button' into 'master'

Add consolidated edit buttons to repo blob header

See merge request gitlab-org/gitlab!62753

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

 <script>
 import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   i18n: {
@@ -9,7 +11,9 @@ export default {
   },
   components: {
     GlButton,
+    WebIdeLink,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     editPath: {
       type: String,
@@ -24,7 +28,14 @@ export default {
 </script>
 
 <template>
-  <div>
+  <web-ide-link
+    v-if="glFeatures.consolidatedEditButton"
+    class="gl-mr-3"
+    :edit-url="editPath"
+    :web-ide-url="webIdePath"
+    :is-blob="true"
+  />
+  <div v-else>
     <gl-button class="gl-mr-2" category="primary" variant="confirm" :href="editPath">
       {{ $options.i18n.edit }}
     </gl-button>

app/controllers/projects/blob_controller.rb

@@ -39,6 +39,7 @@ class Projects::BlobController < Projects::ApplicationController
 
   before_action do
     push_frontend_feature_flag(:refactor_blob_viewer, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:consolidated_edit_button, @project, default_enabled: :yaml)
   end
 
   def new

spec/frontend/repository/components/blob_header_edit_spec.js

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import BlobHeaderEdit from '~/repository/components/blob_header_edit.vue';
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 
 const DEFAULT_PROPS = {
   editPath: 'some_file.js/edit',
@@ -10,12 +11,17 @@ const DEFAULT_PROPS = {
 describe('BlobHeaderEdit component', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (consolidatedEditButton = false, props = {}) => {
     wrapper = shallowMount(BlobHeaderEdit, {
       propsData: {
         ...DEFAULT_PROPS,
         ...props,
       },
+      provide: {
+        glFeatures: {
+          consolidatedEditButton,
+        },
+      },
     });
   };
 
@@ -27,6 +33,7 @@ describe('BlobHeaderEdit component', () => {
   const findButtons = () => wrapper.findAll(GlButton);
   const findEditButton = () => findButtons().at(0);
   const findWebIdeButton = () => findButtons().at(1);
+  const findWebIdeLink = () => wrapper.find(WebIdeLink);
 
   it('renders component', () => {
     createComponent();
@@ -60,4 +67,16 @@ describe('BlobHeaderEdit component', () => {
     expect(findWebIdeButton().text()).toBe('Web IDE');
     expect(findWebIdeButton()).not.toBeDisabled();
   });
+
+  it('renders WebIdeLink component', () => {
+    createComponent(true);
+
+    const { editPath: editUrl, webIdePath: webIdeUrl } = DEFAULT_PROPS;
+
+    expect(findWebIdeLink().props()).toMatchObject({
+      editUrl,
+      webIdeUrl,
+      isBlob: true,
+    });
+  });
 });