Merge branch '225640-move-link-to-file-view-to-bottom-bar-in-web-ide' into 'master'

Move link to file view to bottom bar in Web IDE

Closes #225640

See merge request gitlab-org/gitlab!35847

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

 <script>
 import { mapGetters } from 'vuex';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import TerminalSyncStatusSafe from './terminal_sync/terminal_sync_status_safe.vue';
 import { getFileEOL } from '../utils';
 
 export default {
   components: {
+    GlLink,
     TerminalSyncStatusSafe,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   computed: {
     ...mapGetters(['activeFile']),
     activeFileEOL() {
@@ -19,12 +24,14 @@ export default {
 <template>
   <div class="ide-status-list d-flex">
     <template v-if="activeFile">
-      <div class="ide-status-file">{{ activeFile.name }}</div>
-      <div class="ide-status-file">{{ activeFileEOL }}</div>
-      <div v-if="!activeFile.binary" class="ide-status-file">
-        {{ activeFile.editorRow }}:{{ activeFile.editorColumn }}
+      <div>
+        <gl-link v-gl-tooltip.hover :href="activeFile.permalink" :title="__('Open in file view')">
+          {{ activeFile.name }}
+        </gl-link>
       </div>
-      <div class="ide-status-file">{{ activeFile.fileLanguage }}</div>
+      <div>{{ activeFileEOL }}</div>
+      <div v-if="!activeFile.binary">{{ activeFile.editorRow }}:{{ activeFile.editorColumn }}</div>
+      <div>{{ activeFile.fileLanguage }}</div>
     </template>
     <terminal-sync-status-safe />
   </div>

app/assets/stylesheets/page_bundles/ide.scss

@@ -251,10 +251,6 @@ $ide-commit-header-height: 48px;
     padding-left: $gl-padding;
   }
 }
-
-.ide-status-file {
-  text-align: right;
-}
 // Not great, but this is to deal with our current output
 .multi-file-preview-holder {
   height: 100%;

changelogs/unreleased/225640-move-link-to-file-view-to-bottom-bar-in-web-ide.yml

+---
+title: Move file link to bottom in Web IDE
+merge_request: 35847
+author:
+type: changed

locale/gitlab.pot

@@ -15931,6 +15931,9 @@ msgstr ""
 msgid "Open in Xcode"
 msgstr ""
 
+msgid "Open in file view"
+msgstr ""
+
 msgid "Open issues"
 msgstr ""
 

spec/frontend/ide/components/ide_status_list_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
 import IdeStatusList from '~/ide/components/ide_status_list.vue';
 import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync_status_safe.vue';
 
@@ -9,6 +10,7 @@ const TEST_FILE = {
   editorColumn: 23,
   fileLanguage: 'markdown',
   content: 'abc\nndef',
+  permalink: '/lorem.md',
 };
 
 const localVue = createLocalVue();
@@ -19,6 +21,7 @@ describe('ide/components/ide_status_list', () => {
   let store;
   let wrapper;
 
+  const findLink = () => wrapper.find(GlLink);
   const createComponent = (options = {}) => {
     store = new Vuex.Store({
       getters: {
@@ -51,8 +54,9 @@ describe('ide/components/ide_status_list', () => {
       createComponent();
     });
 
-    it('shows file name', () => {
-      expect(wrapper.text()).toContain(TEST_FILE.name);
+    it('shows a link to the file that contains the file name', () => {
+      expect(findLink().attributes('href')).toBe(TEST_FILE.permalink);
+      expect(findLink().text()).toBe(TEST_FILE.name);
     });
 
     it('shows file eol', () => {