Implement a new SHA partial for commit lists

app/assets/stylesheets/pages/commits.scss

@@ -107,7 +107,6 @@
   }
 }
 
-
 .commits-compare-switch {
   float: left;
   margin-right: 9px;
@@ -179,7 +178,7 @@
 .commit-detail {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   flex-grow: 1;
 
   .merge-request-branches & {
@@ -200,37 +199,63 @@
   }
 
   .ci-status-link {
-    display: inline-block;
-    position: relative;
-    top: 2px;
+    display: inline-flex;
   }
 
-  .btn-clipboard,
-  .btn-transparent {
-    padding-left: 0;
-    padding-right: 0;
+  > .ci-status-link,
+  > .btn,
+  > .commit-sha-group {
+    margin-left: $gl-padding-8;
   }
+}
 
+.commit-sha-group {
+  display: inline-flex;
+
+  .label,
   .btn {
-    &:not(:first-child) {
-      margin-left: $gl-padding;
-    }
+    padding: $gl-vert-padding $gl-btn-padding;
+    border: 1px $border-color solid;
+    font-size: $gl-font-size;
+    line-height: $line-height-base;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .label-monospace {
+    @extend .monospace;
+    user-select: text;
+    color: $gl-text-color;
+    background-color: $gray-light;
   }
 
-  .commit-sha {
-    font-size: 14px;
-    font-weight: $gl-font-weight-bold;
+  .btn svg {
+    top: auto;
+    fill: $gl-text-color-secondary;
   }
 
-  .ci-status-icon {
-    position: relative;
-    top: 2px;
+  .fa-clipboard {
+    color: $gl-text-color-secondary;
+  }
+
+  :first-child {
+    border-bottom-left-radius: $border-radius-default;
+    border-top-left-radius: $border-radius-default;
+  }
+
+  :not(:first-child) {
+    border-left: 0;
+  }
+
+  :last-child {
+    border-bottom-right-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
   }
 }
 
 .commit,
 .generic_commit_status {
-
   a,
   button {
     color: $gl-text-color;
@@ -303,10 +328,8 @@
   }
 }
 
-
 .gpg-status-box {
   padding: 2px 10px;
-  margin-right: $gl-padding;
 
   &:empty {
     display: none;

app/helpers/commits_helper.rb

@@ -93,25 +93,18 @@ module CommitsHelper
     return unless current_controller?(:commits)
 
     if @path.blank?
-      return link_to(
-        _("Browse Files"),
-        project_tree_path(project, commit),
-        class: "btn btn-default"
-      )
+      url = project_tree_path(project, commit)
+      tooltip = _("Browse Files")
     elsif @repo.blob_at(commit.id, @path)
-      return link_to(
-        _("Browse File"),
-        project_blob_path(project,
-                                    tree_join(commit.id, @path)),
-        class: "btn btn-default"
-      )
+      url = project_blob_path(project, tree_join(commit.id, @path))
+      tooltip = _("Browse File")
     elsif @path.present?
-      return link_to(
-        _("Browse Directory"),
-        project_tree_path(project,
-                                    tree_join(commit.id, @path)),
-        class: "btn btn-default"
-      )
+      url = project_tree_path(project, tree_join(commit.id, @path))
+      tooltip = _("Browse Directory")
+    end
+
+    link_to url, class: "btn btn-default has-tooltip", title: tooltip, data: { container: "body" } do
+      sprite_icon('folder-open')
     end
   end
 

app/views/projects/commits/_commit.html.haml

@@ -22,7 +22,10 @@
 
     .commit-detail.flex-list
       .commit-content
-        = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title")
+        - if view_details && merge_request
+          = link_to commit.title, project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "commit-row-message item-title"
+        - else
+          = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title")
         %span.commit-row-message.visible-xs-inline
           ·
           = commit.short_id
@@ -52,9 +55,9 @@
           = render_commit_status(commit, ref: ref)
 
         .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id) } }
-        = link_to commit.short_id, link, class: "commit-sha btn btn-transparent btn-link"
-        = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"))
-        = link_to_browse_code(project, commit)
 
-        - if view_details && merge_request
-          = link_to "View details", project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "btn btn-default"
+        .commit-sha-group
+          .label.label-monospace
+            = commit.short_id
+          = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"), class: "btn btn-default", container: "body")
+          = link_to_browse_code(project, commit)

changelogs/unreleased/42448-change-commit-row-actions-and-sha-design-for-project-commit-list.yml

+---
+title: Improved visual styles and consistency for commit hash and possible actions
+  across commit lists
+merge_request: 17406
+author:
+type: changed

spec/views/projects/merge_requests/_commits.html.haml_spec.rb

@@ -28,6 +28,6 @@ describe 'projects/merge_requests/_commits.html.haml' do
     commit = merge_request.commits.first # HEAD
     href = diffs_project_merge_request_path(target_project, merge_request, commit_id: commit)
 
-    expect(rendered).to have_link(Commit.truncate_sha(commit.sha), href: href)
+    expect(rendered).to have_link(href: href)
   end
 end