Add WebIdeLink buttons to repo blob header

Part of an issue that convert Repo Blob from HAML to Vue:

https://gitlab.com/gitlab-org/gitlab/-/issues/323210

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';
 
 export default {
   i18n: {
@@ -9,6 +10,7 @@ export default {
   },
   components: {
     GlButton,
+    WebIdeLink,
   },
   props: {
     editPath: {
@@ -20,11 +22,23 @@ export default {
       required: true,
     },
   },
+  computed: {
+    isFeatureEnabled() {
+      return Boolean(gon.features?.consolidatedEditButton);
+    },
+  },
 };
 </script>
 
 <template>
-  <div>
+  <web-ide-link
+    v-if="isFeatureEnabled"
+    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',
@@ -27,6 +28,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 +62,20 @@ describe('BlobHeaderEdit component', () => {
     expect(findWebIdeButton().text()).toBe('Web IDE');
     expect(findWebIdeButton()).not.toBeDisabled();
   });
+
+  it('renders WebIdeLink component', () => {
+    window.gon.features = {
+      consolidatedEditButton: true,
+    };
+
+    createComponent();
+
+    const { editPath: editUrl, webIdePath: webIdeUrl } = DEFAULT_PROPS;
+
+    expect(findWebIdeLink().props()).toMatchObject({
+      editUrl,
+      webIdeUrl,
+      isBlob: true,
+    });
+  });
 });