Merge branch 'changes-dropdown-ellipsis' into 'master'

Fix changes dropdown ellipsis working across browsers

Closes #41561 and #41684

See merge request gitlab-org/gitlab-ce!16281

app/assets/stylesheets/pages/diff.scss

@@ -651,15 +651,13 @@
     min-width: 0;
   }
 
-  .diff-changed-file-name,
-  .diff-changed-file-path {
+  .diff-changed-file-name {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .diff-changed-file-path {
-    direction: rtl;
     color: $gl-text-color-tertiary;
   }
 

app/helpers/diff_helper.rb

@@ -226,4 +226,12 @@ module DiffHelper
 
     diffs.overflow?
   end
+
+  def diff_file_path_text(diff_file, max: 60)
+    path = diff_file.new_path
+
+    return path unless path.size > max && max > 3
+
+    "...#{path[-(max - 3)..-1]}"
+  end
 end

app/views/projects/diffs/_stats.html.haml

@@ -25,7 +25,7 @@
               = sprite_icon(diff_file_changed_icon(diff_file), size: 16, css_class: "#{diff_file_changed_icon_color(diff_file)} diff-file-changed-icon append-right-8")
               %span.diff-changed-file-content.append-right-8
                 %strong.diff-changed-file-name= diff_file.blob.name
-                %span.diff-changed-file-path.prepend-top-5= diff_file.new_path
+                %span.diff-changed-file-path.prepend-top-5= diff_file_path_text(diff_file)
               %span.diff-changed-stats
                 %span.cgreen<
                   +#{diff_file.added_lines}

changelogs/unreleased/changes-dropdown-ellipsis.yml

+---
+title: Fixed chanages dropdown ellipsis positioning
+merge_request:
+author:
+type: fixed

spec/helpers/diff_helper_spec.rb

@@ -266,4 +266,14 @@ describe DiffHelper do
       end
     end
   end
+
+  context '#diff_file_path_text' do
+    it 'returns full path by default' do
+      expect(diff_file_path_text(diff_file)).to eq(diff_file.new_path)
+    end
+
+    it 'returns truncated path' do
+      expect(diff_file_path_text(diff_file, max: 10)).to eq("...open.rb")
+    end
+  end
 end