Merge branch 'ph/25973/mergeRequestSidebarLongPathTruncating' into 'master'

Fixed paths in MR sidebar truncating incorrectly

See merge request gitlab-org/gitlab!45994

app/assets/javascripts/diffs/components/diff_file_row.vue

@@ -62,6 +62,7 @@ export default {
     v-bind="$attrs"
     :class="{ 'is-active': isActive }"
     class="diff-file-row"
+    truncate-middle
     :file-classes="fileClasses"
     v-on="$listeners"
   >

app/assets/javascripts/vue_shared/components/file_row.vue

 <script>
+import { GlTruncate } from '@gitlab/ui';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
@@ -8,6 +9,7 @@ export default {
   components: {
     FileHeader,
     FileIcon,
+    GlTruncate,
   },
   props: {
     file: {
@@ -28,6 +30,11 @@ export default {
       required: false,
       default: '',
     },
+    truncateMiddle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isTree() {
@@ -134,9 +141,9 @@ export default {
       <span
         ref="textOutput"
         :style="levelIndentation"
-        class="file-row-name str-truncated"
+        class="file-row-name"
         data-qa-selector="file_name_content"
-        :class="fileClasses"
+        :class="[fileClasses, { 'str-truncated': !truncateMiddle, 'gl-min-w-0': truncateMiddle }]"
       >
         <file-icon
           class="file-row-icon"
@@ -147,7 +154,8 @@ export default {
           :opened="file.opened"
           :size="16"
         />
-        {{ file.name }}
+        <gl-truncate v-if="truncateMiddle" :text="file.name" position="middle" class="gl-pr-7" />
+        <template v-else>{{ file.name }}</template>
       </span>
       <slot></slot>
     </div>

app/assets/javascripts/vue_shared/components/file_row_header.vue

 <script>
-import { truncatePathMiddleToLength } from '~/lib/utils/text_utility';
-
-const MAX_PATH_LENGTH = 40;
+import { GlTruncate } from '@gitlab/ui';
 
 export default {
+  components: {
+    GlTruncate,
+  },
   props: {
     path: {
       type: String,
       required: true,
     },
   },
-  computed: {
-    truncatedPath() {
-      return truncatePathMiddleToLength(this.path, MAX_PATH_LENGTH);
-    },
-  },
 };
 </script>
 
 <template>
   <div class="file-row-header bg-white sticky-top p-2 js-file-row-header" :title="path">
-    <span class="bold">{{ truncatedPath }}</span>
+    <gl-truncate :text="path" position="middle" class="bold" />
   </div>
 </template>

changelogs/unreleased/ph-25973-mergeRequestSidebarLongPathTruncating.yml

+---
+title: Fixed long paths truncating in merge request sidebar incorrectly
+merge_request: 45994
+author:
+type: fixed

spec/frontend/diffs/components/tree_list_spec.js

@@ -91,12 +91,12 @@ describe('Diffs tree list component', () => {
       expect(
         getFileRows()
           .at(0)
-          .text(),
+          .html(),
       ).toContain('index.js');
       expect(
         getFileRows()
           .at(1)
-          .text(),
+          .html(),
       ).toContain('app');
     });
 
@@ -138,7 +138,7 @@ describe('Diffs tree list component', () => {
       wrapper.vm.$store.state.diffs.renderTreeList = false;
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.file-row').text()).toContain('index.js');
+        expect(wrapper.find('.file-row').html()).toContain('index.js');
       });
     });
   });

spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap

@@ -5,11 +5,11 @@ exports[`File row header component adds multiple ellipsises after 40 characters
   class="file-row-header bg-white sticky-top p-2 js-file-row-header"
   title="app/assets/javascripts/merge_requests/widget/diffs/notes"
 >
-  <span
+  <gl-truncate-stub
     class="bold"
-  >
-    app/assets/javascripts/…/…/diffs/notes
-  </span>
+    position="middle"
+    text="app/assets/javascripts/merge_requests/widget/diffs/notes"
+  />
 </div>
 `;
 
@@ -18,11 +18,11 @@ exports[`File row header component renders file path 1`] = `
   class="file-row-header bg-white sticky-top p-2 js-file-row-header"
   title="app/assets"
 >
-  <span
+  <gl-truncate-stub
     class="bold"
-  >
-    app/assets
-  </span>
+    position="middle"
+    text="app/assets"
+  />
 </div>
 `;
 
@@ -31,10 +31,10 @@ exports[`File row header component trucates path after 40 characters 1`] = `
   class="file-row-header bg-white sticky-top p-2 js-file-row-header"
   title="app/assets/javascripts/merge_requests"
 >
-  <span
+  <gl-truncate-stub
     class="bold"
-  >
-    app/assets/javascripts/merge_requests
-  </span>
+    position="middle"
+    text="app/assets/javascripts/merge_requests"
+  />
 </div>
 `;