Resolve "Remove links from Web IDE unexpectedly navigate you to a different page"

app/assets/javascripts/ide/components/external_link.vue

+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    showButtons() {
+      return this.file.permalink;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="showButtons"
+    class="pull-right ide-btn-group"
+  >
+    <a
+      :href="file.permalink"
+      target="_blank"
+      :title="s__('IDE|Open in file view')"
+      rel="noopener noreferrer"
+    >
+      <span class="vertical-align-middle">Open in file view</span>
+      <icon
+        name="external-link"
+        css-classes="vertical-align-middle space-right"
+        :size="16"
+      />
+    </a>
+  </div>
+</template>

app/assets/javascripts/ide/components/ide_file_buttons.vue

-<script>
-import { __ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  directives: {
-    tooltip,
-  },
-  props: {
-    file: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    showButtons() {
-      return (
-        this.file.rawPath || this.file.blamePath || this.file.commitsPath || this.file.permalink
-      );
-    },
-    rawDownloadButtonLabel() {
-      return this.file.binary ? __('Download') : __('Raw');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    v-if="showButtons"
-    class="float-right ide-btn-group"
-  >
-    <a
-      v-tooltip
-      v-if="!file.binary"
-      :href="file.blamePath"
-      :title="__('Blame')"
-      class="btn btn-sm btn-transparent blame"
-    >
-      <icon
-        name="blame"
-        :size="16"
-      />
-    </a>
-    <a
-      v-tooltip
-      :href="file.commitsPath"
-      :title="__('History')"
-      class="btn btn-sm btn-transparent history"
-    >
-      <icon
-        name="history"
-        :size="16"
-      />
-    </a>
-    <a
-      v-tooltip
-      :href="file.permalink"
-      :title="__('Permalink')"
-      class="btn btn-sm btn-transparent permalink"
-    >
-      <icon
-        name="link"
-        :size="16"
-      />
-    </a>
-    <a
-      v-tooltip
-      :href="file.rawPath"
-      target="_blank"
-      class="btn btn-sm btn-transparent prepend-left-10 raw"
-      rel="noopener noreferrer"
-      :title="rawDownloadButtonLabel">
-      <icon
-        name="download"
-        :size="16"
-      />
-    </a>
-  </div>
-</template>

app/assets/javascripts/ide/components/repo_editor.vue

@@ -6,12 +6,12 @@ import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer
 import { activityBarViews, viewerTypes } from '../constants';
 import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
-import IdeFileButtons from './ide_file_buttons.vue';
+import ExternalLink from './external_link.vue';
 
 export default {
   components: {
     ContentViewer,
-    IdeFileButtons,
+    ExternalLink,
   },
   props: {
     file: {
@@ -224,7 +224,7 @@ export default {
           </a>
         </li>
       </ul>
-      <ide-file-buttons
+      <external-link
         :file="file"
       />
     </div>

changelogs/unreleased/45520-remove-links-from-web-ide.yml

+---
+title: Change the IDE file buttons for an "Open in file view" button
+merge_request: 19129
+author: Sam Beckham
+type: changed

spec/javascripts/ide/components/external_link_spec.js

+import Vue from 'vue';
+import externalLink from '~/ide/components/external_link.vue';
+import createVueComponent from '../../helpers/vue_mount_component_helper';
+import { file } from '../helpers';
+
+describe('ExternalLink', () => {
+  const activeFile = file();
+  let vm;
+
+  function createComponent() {
+    const ExternalLink = Vue.extend(externalLink);
+
+    activeFile.permalink = 'test';
+
+    return createVueComponent(ExternalLink, {
+      file: activeFile,
+    });
+  }
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders the external link with the correct href', done => {
+    activeFile.binary = true;
+    vm = createComponent();
+
+    vm.$nextTick(() => {
+      const openLink = vm.$el.querySelector('a');
+
+      expect(openLink.href).toMatch(`/${activeFile.permalink}`);
+      done();
+    });
+  });
+});

spec/javascripts/ide/components/ide_file_buttons_spec.js

-import Vue from 'vue';
-import repoFileButtons from '~/ide/components/ide_file_buttons.vue';
-import createVueComponent from '../../helpers/vue_mount_component_helper';
-import { file } from '../helpers';
-
-describe('RepoFileButtons', () => {
-  const activeFile = file();
-  let vm;
-
-  function createComponent() {
-    const RepoFileButtons = Vue.extend(repoFileButtons);
-
-    activeFile.rawPath = 'test';
-    activeFile.blamePath = 'test';
-    activeFile.commitsPath = 'test';
-
-    return createVueComponent(RepoFileButtons, {
-      file: activeFile,
-    });
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders Raw, Blame, History and Permalink', done => {
-    vm = createComponent();
-
-    vm.$nextTick(() => {
-      const raw = vm.$el.querySelector('.raw');
-      const blame = vm.$el.querySelector('.blame');
-      const history = vm.$el.querySelector('.history');
-
-      expect(raw.href).toMatch(`/${activeFile.rawPath}`);
-      expect(raw.getAttribute('data-original-title')).toEqual('Raw');
-      expect(blame.href).toMatch(`/${activeFile.blamePath}`);
-      expect(blame.getAttribute('data-original-title')).toEqual('Blame');
-      expect(history.href).toMatch(`/${activeFile.commitsPath}`);
-      expect(history.getAttribute('data-original-title')).toEqual('History');
-      expect(vm.$el.querySelector('.permalink').getAttribute('data-original-title')).toEqual(
-        'Permalink',
-      );
-
-      done();
-    });
-  });
-
-  it('renders Download', done => {
-    activeFile.binary = true;
-    vm = createComponent();
-
-    vm.$nextTick(() => {
-      const raw = vm.$el.querySelector('.raw');
-
-      expect(raw.href).toMatch(`/${activeFile.rawPath}`);
-      expect(raw.getAttribute('data-original-title')).toEqual('Download');
-
-      done();
-    });
-  });
-});