Merge branch '34527-make-edit-comment-button-always-available-outside-of-dropdown' into 'master'

Resolve "Make edit comment button always available outside of dropdown"

Closes #34527

See merge request !12931

app/assets/stylesheets/pages/notes.scss

@@ -453,7 +453,10 @@ ul.notes {
 }
 
 .note-actions {
+  align-self: flex-start;
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
   // For PhantomJS that does not support flex
   float: right;
   margin-left: 10px;
@@ -463,18 +466,12 @@ ul.notes {
     float: none;
     margin-left: 0;
   }
-
-  .note-action-button {
-    margin-left: 8px;
-  }
-
-  .more-actions-toggle {
-    margin-left: 2px;
-  }
 }
 
 .more-actions {
-  display: inline-block;
+  float: right; // phantomjs fallback
+  display: flex;
+  align-items: flex-end;
 
   .tooltip {
     white-space: nowrap;
@@ -482,16 +479,10 @@ ul.notes {
 }
 
 .more-actions-toggle {
-  padding: 0;
-
   &:hover .icon,
   &:focus .icon {
     color: $blue-600;
   }
-
-  .icon {
-    padding: 0 6px;
-  }
 }
 
 .more-actions-dropdown {
@@ -519,28 +510,42 @@ ul.notes {
   @include notes-media('max', $screen-md-max) {
     float: none;
     margin-left: 0;
+  }
+}
 
-    .note-action-button {
-      margin-left: 0;
-    }
+.note-actions-item {
+  margin-left: 15px;
+  display: flex;
+  align-items: center;
+
+  &.more-actions {
+    // compensate for narrow icon
+    margin-left: 10px;
   }
 }
 
 .note-action-button {
-  display: inline;
-  line-height: 20px;
+  line-height: 1;
+  padding: 0;
+  min-width: 16px;
+  color: $gray-darkest;
 
   .fa {
-    color: $gray-darkest;
     position: relative;
-    font-size: 17px;
+    font-size: 16px;
   }
 
+
+
   svg {
     height: 16px;
     width: 16px;
-    fill: $gray-darkest;
+    top: 0;
     vertical-align: text-top;
+
+    path {
+      fill: currentColor;
+    }
   }
 
   .award-control-icon-positive,
@@ -613,10 +618,7 @@ ul.notes {
 
 .note-role {
   position: relative;
-  top: -2px;
-  display: inline-block;
-  padding-left: 7px;
-  padding-right: 7px;
+  padding: 0 7px;
   color: $notes-role-color;
   font-size: 12px;
   line-height: 20px;

app/views/projects/notes/_actions.html.haml

@@ -17,24 +17,32 @@
       "inline-template" => true,
       "ref" => "note_#{note.id}" }
 
-    %button.note-action-button.line-resolve-btn{ type: "button",
-        class: ("is-disabled" unless can_resolve),
-        ":class" => "{ 'is-active': isResolved }",
-        ":aria-label" => "buttonText",
-        "@click" => "resolve",
-        ":title" => "buttonText",
-        ":ref" => "'button'" }
+    .note-actions-item
+      %button.note-action-button.line-resolve-btn{ type: "button",
+          class: ("is-disabled" unless can_resolve),
+          ":class" => "{ 'is-active': isResolved }",
+          ":aria-label" => "buttonText",
+          "@click" => "resolve",
+          ":title" => "buttonText",
+          ":ref" => "'button'" }
 
-      = icon('spin spinner', 'v-show' => 'loading', class: 'loading', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
-      %div{ 'v-show' => '!loading' }= render 'shared/icons/icon_status_success.svg'
+        = icon('spin spinner', 'v-show' => 'loading', class: 'loading', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
+        %div{ 'v-show' => '!loading' }= render 'shared/icons/icon_status_success.svg'
 
 - if current_user
   - if note.emoji_awardable?
     - user_authored = note.user_authored?(current_user)
-    = link_to '#', title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
-      = icon('spinner spin')
-      %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
-      %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
-      %span{ class: 'link-highlight award-control-icon-super-positive' }= custom_icon('emoji_smile')
+    .note-actions-item
+      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip btn btn-transparent", data: { position: 'right', container: 'body' } do
+        = icon('spinner spin')
+        %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
+        %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
+        %span{ class: 'link-highlight award-control-icon-super-positive' }= custom_icon('emoji_smile')
 
-    = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable
+  - if note_editable
+    .note-actions-item
+      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn btn-transparent', data: { container: 'body' } do
+        %span.link-highlight
+          = custom_icon('icon_pencil')
+
+  = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable

app/views/projects/notes/_more_actions_dropdown.html.haml

 - is_current_user = current_user == note.author
 
 - if note_editable || !is_current_user
-  .dropdown.more-actions
+  .dropdown.more-actions.note-actions-item
     = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn btn-transparent', data: { toggle: 'dropdown', container: 'body' } do
-      = icon('ellipsis-v', class: 'icon')
+      %span.icon
+        = custom_icon('ellipsis_v')
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
-      - if note_editable
-        %li
-          = button_tag 'Edit comment', class: 'js-note-edit btn btn-transparent'
-        %li.divider
       - unless is_current_user
         %li
           = link_to new_abuse_report_path(user_id: note.author.id, ref_url: noteable_note_url(note)) do

app/views/shared/icons/_ellipsis_v.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1600"><path d="M1088 1248v192q0 40-28 68t-68 28H800q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68zm0-512v192q0 40-28 68t-68 28H800q-40 0-68-28t-28-68V736q0-40 28-68t68-28h192q40 0 68 28t28 68zm0-512v192q0 40-28 68t-68 28H800q-40 0-68-28t-28-68V224q0-40 28-68t68-28h192q40 0 68 28t28 68z"/></svg>

app/views/snippets/notes/_actions.html.haml

 - if current_user
   - if note.emoji_awardable?
     - user_authored = note.user_authored?(current_user)
-    = link_to '#', title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
-      = icon('spinner spin')
-      %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
-      %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
-      %span{ class: 'link-highlight award-control-icon-super-positive' }= custom_icon('emoji_smile')
+    .note-actions-item
+      = link_to '#', title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
+        = icon('spinner spin')
+        %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
+        %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
+        %span{ class: 'link-highlight award-control-icon-super-positive' }= custom_icon('emoji_smile')
+
+  - if note_editable
+    .note-actions-item
+      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn btn-transparent', data: { container: 'body' } do
+        %span.link-highlight
+          = custom_icon('icon_pencil')
 
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable

changelogs/unreleased/34527-make-edit-comment-button-always-available-outside-of-dropdown.yml

+---
+title: move edit comment button outside of dropdown
+merge_request:
+author:

features/steps/project/merge_requests.rb

@@ -299,9 +299,6 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
 
   step 'I change the comment "Line is wrong" to "Typo, please fix" on diff' do
     page.within('.diff-file:nth-of-type(5) .note') do
-      find('.more-actions').click
-      find('.more-actions .dropdown-menu li', match: :first)
-
       find('.js-note-edit').click
 
       page.within('.current-note-edit-form', visible: true) do

features/steps/shared/note.rb

@@ -11,8 +11,8 @@ module SharedNote
       note = find('.note')
       note.hover
 
-      note.find('.more-actions').click
-      note.find('.more-actions .dropdown-menu li', match: :first)
+      find('.more-actions').click
+      find('.more-actions .dropdown-menu li', match: :first)
 
       find(".js-note-delete").click
     end
@@ -147,9 +147,6 @@ module SharedNote
       note = find('.note')
       note.hover
 
-      note.find('.more-actions').click
-      note.find('.more-actions .dropdown-menu li', match: :first)
-
       note.find('.js-note-edit').click
     end
 

spec/features/issues/note_polling_spec.rb

@@ -133,8 +133,6 @@ feature 'Issue notes polling', :js do
   def click_edit_action(note)
     note_element = find("#note_#{note.id}")
 
-    open_more_actions_dropdown(note)
-
     note_element.find('.js-note-edit').click
   end
 end

spec/features/merge_requests/diff_notes_avatars_spec.rb

@@ -157,7 +157,7 @@ feature 'Diff note avatars', js: true do
         end
 
         page.within find("[id='#{position.line_code(project.repository)}']") do
-          find('.diff-notes-collapse').click
+          find('.diff-notes-collapse').trigger('click')
 
           expect(page).to have_selector('img.js-diff-comment-avatar', count: 3)
           expect(find('.diff-comments-more-count')).to have_content '+1'

spec/features/merge_requests/user_posts_notes_spec.rb

@@ -75,7 +75,6 @@ describe 'Merge requests > User posts notes', :js do
     describe 'editing the note' do
       before do
         find('.note').hover
-        open_more_actions_dropdown(note)
 
         find('.js-note-edit').click
       end
@@ -104,7 +103,6 @@ describe 'Merge requests > User posts notes', :js do
 
         wait_for_requests
         find('.note').hover
-        open_more_actions_dropdown(note)
 
         find('.js-note-edit').click
 
@@ -132,7 +130,6 @@ describe 'Merge requests > User posts notes', :js do
     describe 'deleting an attachment' do
       before do
         find('.note').hover
-        open_more_actions_dropdown(note)
 
         find('.js-note-edit').click
       end

spec/features/snippets/notes_on_personal_snippets_spec.rb

@@ -91,11 +91,7 @@ describe 'Comments on personal snippets', :js do
 
   context 'when editing a note' do
     it 'changes the text' do
-      open_more_actions_dropdown(snippet_notes[0])
-
-      page.within("#notes-list li#note_#{snippet_notes[0].id}") do
-        click_on 'Edit comment'
-      end
+      find('.js-note-edit').click
 
       page.within('.current-note-edit-form') do
         fill_in 'note[note]', with: 'new content'

spec/support/features/reportable_note_shared_examples.rb

@@ -7,15 +7,18 @@ shared_examples 'reportable note' do
   let(:more_actions_selector) { '.more-actions.dropdown' }
   let(:abuse_report_path) { new_abuse_report_path(user_id: note.author.id, ref_url: noteable_note_url(note)) }
 
+  it 'has an edit button' do
+    expect(comment).to have_selector('.js-note-edit')
+  end
+
   it 'has a `More actions` dropdown' do
     expect(comment).to have_selector(more_actions_selector)
   end
 
-  it 'dropdown has Edit, Report and Delete links' do
+  it 'dropdown has Report and Delete links' do
     dropdown = comment.find(more_actions_selector)
     open_dropdown(dropdown)
 
-    expect(dropdown).to have_button('Edit comment')
     expect(dropdown).to have_link('Report as abuse', href: abuse_report_path)
     expect(dropdown).to have_link('Delete comment', href: note_url(note, project))
   end

spec/views/projects/notes/_more_actions_dropdown.html.haml_spec.rb

@@ -24,18 +24,16 @@ describe 'projects/notes/_more_actions_dropdown' do
     expect(rendered).not_to have_selector('.dropdown.more-actions')
   end
 
-  it 'shows Report as abuse, Edit and Delete buttons if editable and not current users comment' do
+  it 'shows Report as abuse and Delete buttons if editable and not current users comment' do
     render 'projects/notes/more_actions_dropdown', current_user: not_author_user, note_editable: true, note: note
 
     expect(rendered).to have_link('Report as abuse')
-    expect(rendered).to have_button('Edit comment')
     expect(rendered).to have_link('Delete comment')
   end
 
-  it 'shows Edit and Delete buttons if editable and current users comment' do
+  it 'shows Delete button if editable and current users comment' do
     render 'projects/notes/more_actions_dropdown', current_user: author_user, note_editable: true, note: note
 
-    expect(rendered).to have_button('Edit comment')
     expect(rendered).to have_link('Delete comment')
   end
 end