Add web ide button 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_content_viewer.vue

@@ -126,7 +126,10 @@ export default {
         @viewer-changed="switchViewer"
       >
         <template #actions>
-          <blob-header-edit :edit-path="blobInfo.editBlobPath" />
+          <blob-header-edit
+            :edit-path="blobInfo.editBlobPath"
+            :web-ide-path="blobInfo.ideEditPath"
+          />
         </template>
       </blob-header>
       <blob-content

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

@@ -5,6 +5,7 @@ import { __ } from '~/locale';
 export default {
   i18n: {
     edit: __('Edit'),
+    webIde: __('Web IDE'),
   },
   components: {
     GlButton,
@@ -14,12 +15,22 @@ export default {
       type: String,
       required: true,
     },
+    webIdePath: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 
 <template>
-  <gl-button category="primary" variant="confirm" class="gl-mr-3" :href="editPath">
+  <div>
+    <gl-button class="gl-mr-2" category="primary" variant="confirm" :href="editPath">
       {{ $options.i18n.edit }}
     </gl-button>
+
+    <gl-button class="gl-mr-3" category="primary" variant="confirm" :href="webIdePath">
+      {{ $options.i18n.webIde }}
+    </gl-button>
+  </div>
 </template>

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

@@ -12,6 +12,7 @@ query getBlobInfo($projectPath: ID!, $filePath: String!) {
           fileType
           path
           editBlobPath
+          ideEditPath
           storedExternally
           rawPath
           replacePath

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -162,15 +162,22 @@ describe('Blob content viewer component', () => {
   });
 
   describe('BlobHeader action slot', () => {
-    it('renders BlobHeaderEdit button in simple viewer', async () => {
+    const { ideEditPath, editBlobPath } = simpleMockData;
+
+    it('renders BlobHeaderEdit buttons in simple viewer', async () => {
       fullFactory({
         mockData: { blobInfo: simpleMockData },
         stubs: {
           BlobContent: true,
         },
       });
+
       await nextTick();
-      expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
+
+      expect(findBlobHeaderEdit().props()).toMatchObject({
+        editPath: editBlobPath,
+        webIdePath: ideEditPath,
+      });
     });
 
     it('renders BlobHeaderEdit button in rich viewer', async () => {
@@ -180,8 +187,13 @@ describe('Blob content viewer component', () => {
           BlobContent: true,
         },
       });
+
       await nextTick();
-      expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
+
+      expect(findBlobHeaderEdit().props()).toMatchObject({
+        editPath: editBlobPath,
+        webIdePath: ideEditPath,
+      });
     });
   });
 });

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';
+
+const DEFAULT_PROPS = {
+  editPath: 'some_file.js/edit',
+  webIdePath: 'some_file.js/ide/edit',
+};
+
+describe('BlobHeaderEdit component', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(BlobHeaderEdit, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findButtons = () => wrapper.findAll(GlButton);
+  const findEditButton = () => findButtons().at(0);
+  const findWebIdeButton = () => findButtons().at(1);
+
+  it('renders component', () => {
+    createComponent();
+
+    const { editPath, webIdePath } = DEFAULT_PROPS;
+
+    expect(wrapper.props()).toMatchObject({
+      editPath,
+      webIdePath,
+    });
+  });
+
+  it('renders both buttons', () => {
+    createComponent();
+
+    expect(findButtons()).toHaveLength(2);
+  });
+
+  it('renders the Edit button', () => {
+    createComponent();
+
+    expect(findEditButton().attributes('href')).toBe(DEFAULT_PROPS.editPath);
+    expect(findEditButton().text()).toBe('Edit');
+    expect(findEditButton()).not.toBeDisabled();
+  });
+
+  it('renders the Web IDE button', () => {
+    createComponent();
+
+    expect(findWebIdeButton().attributes('href')).toBe(DEFAULT_PROPS.webIdePath);
+    expect(findWebIdeButton().text()).toBe('Web IDE');
+    expect(findWebIdeButton()).not.toBeDisabled();
+  });
+});