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

app/assets/javascripts/ide/components/ide_file_buttons.vue → app/assets/javascripts/ide/components/external_link.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,
@@ -18,12 +13,7 @@ export default {
   },
   computed: {
     showButtons() {
-      return (
-        this.file.rawPath || this.file.blamePath || this.file.commitsPath || this.file.permalink
-      );
-    },
-    rawDownloadButtonLabel() {
-      return this.file.binary ? __('Download') : __('Raw');
+      return this.file.permalink;
     },
   },
 };
@@ -32,51 +22,18 @@ export default {
 <template>
   <div
     v-if="showButtons"
-    class="float-right ide-btn-group"
+    class="pull-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"
+      :title="s__('IDE|Open in file view')"
       rel="noopener noreferrer"
-      :title="rawDownloadButtonLabel">
+    >
+      <span class="vertical-align-middle">Open in file view</span>
       <icon
-        name="download"
+        name="external-link"
+        css-classes="vertical-align-middle space-right"
         :size="16"
       />
     </a>

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/ide_file_buttons_spec.js → spec/javascripts/ide/components/external_link_spec.js

 import Vue from 'vue';
-import repoFileButtons from '~/ide/components/ide_file_buttons.vue';
+import externalLink from '~/ide/components/external_link.vue';
 import createVueComponent from '../../helpers/vue_mount_component_helper';
 import { file } from '../helpers';
 
-describe('RepoFileButtons', () => {
+describe('ExternalLink', () => {
   const activeFile = file();
   let vm;
 
   function createComponent() {
-    const RepoFileButtons = Vue.extend(repoFileButtons);
+    const ExternalLink = Vue.extend(externalLink);
 
-    activeFile.rawPath = 'test';
-    activeFile.blamePath = 'test';
-    activeFile.commitsPath = 'test';
+    activeFile.permalink = 'test';
 
-    return createVueComponent(RepoFileButtons, {
+    return createVueComponent(ExternalLink, {
       file: activeFile,
     });
   }
@@ -23,38 +21,14 @@ describe('RepoFileButtons', () => {
     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 => {
+  it('renders the external link with the correct href', 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');
+      const openLink = vm.$el.querySelector('a');
 
+      expect(openLink.href).toMatch(`/${activeFile.permalink}`);
       done();
     });
   });