Merge branch 'replace-snake-case-css-classes' into 'master'

Replace snake case css classes

See merge request gitlab-org/gitlab-ee!6651

app/assets/javascripts/issue_show/components/edited.vue

@@ -46,7 +46,7 @@
       by
       <a
         :href="updatedByPath"
-        class="author_link"
+        class="author-link"
       >
         <span>{{ updatedByName }}</span>
       </a>

app/assets/javascripts/notes/components/note_edited_text.vue

@@ -42,7 +42,7 @@ export default {
       by
       <a
         :href="editedBy.path"
-        class="js-vue-author author_link">
+        class="js-vue-author author-link">
         {{ editedBy.name }}
       </a>
     </template>

app/assets/javascripts/sidebar/components/assignees/assignees.vue

@@ -187,7 +187,7 @@ export default {
       <template v-else-if="hasOneUser">
         <a
           :href="assigneeUrl(firstUser)"
-          class="author_link bold"
+          class="author-link bold"
         >
           <img
             :alt="assigneeAlt(firstUser)"

app/assets/javascripts/sidebar/components/participants/participants.vue

@@ -120,7 +120,7 @@
       >
         <a
           :href="participant.web_url"
-          class="author_link"
+          class="author-link"
         >
           <user-avatar-image
             :lazy="true"

app/assets/javascripts/users_select.js

@@ -206,8 +206,8 @@ function UsersSelect(currentUser, els, options = {}) {
             return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
           });
       };
-      collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
-      assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
+      collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author-link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
+      assigneeTemplate = _.template('<% if (username) { %> <a class="author-link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
       return $dropdown.glDropdown({
         showMenuAbove: showMenuAbove,
         data: function(term, callback) {

app/assets/stylesheets/framework/common.scss

@@ -113,8 +113,6 @@ hr {
 
 .item-title { font-weight: $gl-font-weight-bold; }
 
-/** FLASH message **/
-.author_link,
 .author-link {
   color: $gl-link-color;
 }

app/assets/stylesheets/framework/lists.scss

@@ -265,7 +265,7 @@ ul.controls {
       margin-right: 0;
     }
 
-    .author_link {
+    .author-link {
       .avatar-inline {
         margin-left: 0;
         margin-right: 0;
@@ -276,7 +276,7 @@ ul.controls {
 
   .issuable-pipeline-broken a,
   .issuable-pipeline-status a,
-  .author_link {
+  .author-link {
     display: flex;
   }
 }

app/assets/stylesheets/pages/detail_page.scss

@@ -10,7 +10,7 @@
   }
 
   .issue_created_ago,
-  .author_link {
+  .author-link {
     white-space: nowrap;
   }
 

app/assets/stylesheets/pages/issuable.scss

@@ -197,7 +197,7 @@
     }
 
     &.assignee {
-      .author_link {
+      .author-link {
         display: block;
         padding-left: 42px;
         position: relative;
@@ -499,7 +499,7 @@
       padding-bottom: 0;
       margin-bottom: 10px;
 
-      .author_link {
+      .author-link {
         padding-left: 0;
 
         .avatar {
@@ -608,7 +608,7 @@
   margin: 16px 0 0;
   font-size: 85%;
 
-  .author_link {
+  .author-link {
     color: $gray-darkest;
   }
 }
@@ -632,7 +632,7 @@
     padding-right: 0;
   }
 
-  .author_link {
+  .author-link {
     display: block;
   }
 

app/assets/stylesheets/pages/issues.scss

@@ -12,7 +12,7 @@
     }
 
     .issuable-meta {
-      .author_link {
+      .author-link {
         display: inline-block;
       }
 

app/assets/stylesheets/pages/notes.scss

@@ -403,7 +403,7 @@ ul.notes {
     }
   }
 
-  .author_link {
+  .author-link {
     color: $gl-text-color;
   }
 }

app/helpers/projects_helper.rb

@@ -65,10 +65,10 @@ module ProjectsHelper
     author_html = author_html.html_safe
 
     if opts[:name]
-      link_to(author_html, user_path(author), class: "author_link #{"#{opts[:extra_class]}" if opts[:extra_class]} #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe
+      link_to(author_html, user_path(author), class: "author-link #{"#{opts[:extra_class]}" if opts[:extra_class]} #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe
     else
       title = opts[:title].sub(":name", sanitize(author.name))
-      link_to(author_html, user_path(author), class: "author_link has-tooltip", title: title, data: { container: 'body' }).html_safe
+      link_to(author_html, user_path(author), class: "author-link has-tooltip", title: title, data: { container: 'body' }).html_safe
     end
   end
 

app/views/shared/notes/_notes_with_form.html.haml

@@ -13,7 +13,7 @@
         .flash-container.timeline-content
 
         .timeline-icon.d-none.d-sm-none.d-md-block
-          %a.author_link{ href: user_path(current_user) }
+          %a.author-link{ href: user_path(current_user) }
             = image_tag avatar_icon_for_user(current_user), alt: current_user.to_reference, class: 'avatar s40'
         .timeline-content.timeline-content-form
           = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete

changelogs/unreleased/replace-snake-case-css-classes.yml

+---
+title: Replace author_link snake case in stylesheets, specs, and helpers
+merge_request: 20797
+author: George Tsiolis
+type: other

ee/app/assets/javascripts/vue_shared/components/link_to_member_avatar.vue

@@ -73,7 +73,7 @@ export default {
       return !this.clickable ? 'disabled' : '';
     },
     linkClass() {
-      return `author_link ${this.tooltipClass} ${this.extraLinkClass} ${this.disabledClass}`;
+      return `author-link ${this.tooltipClass} ${this.extraLinkClass} ${this.disabledClass}`;
     },
   },
 };

spec/features/issues/update_issues_spec.rb

@@ -49,7 +49,7 @@ describe 'Multiple issue updating from issues#index', :js do
       click_update_issues_button
 
       page.within('.issue .controls') do
-        expect(find('.author_link')["title"]).to have_content(user.name)
+        expect(find('.author-link')["title"]).to have_content(user.name)
       end
     end
 
@@ -63,7 +63,7 @@ describe 'Multiple issue updating from issues#index', :js do
 
       click_link 'Unassigned'
       click_update_issues_button
-      expect(find('.issue:first-child .controls')).not_to have_css('.author_link')
+      expect(find('.issue:first-child .controls')).not_to have_css('.author-link')
     end
   end
 

spec/features/merge_requests/user_mass_updates_spec.rb

@@ -47,7 +47,7 @@ describe 'Merge requests > User mass updates', :js do
         change_assignee(user.name)
 
         page.within('.merge-request .controls') do
-          expect(find('.author_link')["title"]).to have_content(user.name)
+          expect(find('.author-link')["title"]).to have_content(user.name)
         end
       end
     end
@@ -62,7 +62,7 @@ describe 'Merge requests > User mass updates', :js do
       it 'removes assignee from the merge request' do
         change_assignee('Unassigned')
 
-        expect(find('.merge-request .controls')).not_to have_css('.author_link')
+        expect(find('.merge-request .controls')).not_to have_css('.author-link')
       end
     end
   end

spec/javascripts/issue_show/components/app_spec.js

@@ -76,7 +76,7 @@ describe('Issuable output', () => {
       expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
       expect(vm.$el.querySelector('.js-task-list-field').value).toContain('this is a description');
       expect(formatText(editedText.innerText)).toMatch(/Edited[\s\S]+?by Some User/);
-      expect(editedText.querySelector('.author_link').href).toMatch(/\/some_user$/);
+      expect(editedText.querySelector('.author-link').href).toMatch(/\/some_user$/);
       expect(editedText.querySelector('time')).toBeTruthy();
     })
     .then(() => {
@@ -90,7 +90,7 @@ describe('Issuable output', () => {
       expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
       expect(vm.$el.querySelector('.edited-text')).toBeTruthy();
       expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch(/Edited[\s\S]+?by Other User/);
-      expect(editedText.querySelector('.author_link').href).toMatch(/\/other_user$/);
+      expect(editedText.querySelector('.author-link').href).toMatch(/\/other_user$/);
       expect(editedText.querySelector('time')).toBeTruthy();
     })
     .then(done)

spec/javascripts/issue_show/components/edited_spec.js

@@ -18,7 +18,7 @@ describe('edited', () => {
     }).$mount();
 
     expect(formatText(editedComponent.$el.innerText)).toMatch(/Edited[\s\S]+?by Some User/);
-    expect(editedComponent.$el.querySelector('.author_link').href).toMatch(/\/some_user$/);
+    expect(editedComponent.$el.querySelector('.author-link').href).toMatch(/\/some_user$/);
     expect(editedComponent.$el.querySelector('time')).toBeTruthy();
   });
 
@@ -31,7 +31,7 @@ describe('edited', () => {
     }).$mount();
 
     expect(formatText(editedComponent.$el.innerText)).toMatch(/Edited by Some User/);
-    expect(editedComponent.$el.querySelector('.author_link').href).toMatch(/\/some_user$/);
+    expect(editedComponent.$el.querySelector('.author-link').href).toMatch(/\/some_user$/);
     expect(editedComponent.$el.querySelector('time')).toBeFalsy();
   });
 
@@ -43,7 +43,7 @@ describe('edited', () => {
     }).$mount();
 
     expect(formatText(editedComponent.$el.innerText)).not.toMatch(/by Some User/);
-    expect(editedComponent.$el.querySelector('.author_link')).toBeFalsy();
+    expect(editedComponent.$el.querySelector('.author-link')).toBeFalsy();
     expect(editedComponent.$el.querySelector('time')).toBeTruthy();
   });
 

spec/javascripts/sidebar/assignees_spec.js

@@ -102,13 +102,13 @@ describe('Assignee component', () => {
         },
       }).$mount();
 
-      expect(component.$el.querySelector('.author_link')).not.toBeNull();
+      expect(component.$el.querySelector('.author-link')).not.toBeNull();
       // The image
-      expect(component.$el.querySelector('.author_link img').getAttribute('src')).toEqual(UsersMock.user.avatar);
+      expect(component.$el.querySelector('.author-link img').getAttribute('src')).toEqual(UsersMock.user.avatar);
       // Author name
-      expect(component.$el.querySelector('.author_link .author').innerText.trim()).toEqual(UsersMock.user.name);
+      expect(component.$el.querySelector('.author-link .author').innerText.trim()).toEqual(UsersMock.user.name);
       // Username
-      expect(component.$el.querySelector('.author_link .username').innerText.trim()).toEqual(`@${UsersMock.user.username}`);
+      expect(component.$el.querySelector('.author-link .username').innerText.trim()).toEqual(`@${UsersMock.user.username}`);
     });
 
     it('has the root url present in the assigneeUrl method', () => {

spec/javascripts/vue_shared/components/link_to_member_avatar_spec.js

@@ -69,7 +69,7 @@ describe('Link To Members Components', () => {
       avatarHtmlClass: 's32 avatar avatar-inline avatar-placeholder',
       avatarClass: 'avatar avatar-inline s32 myextraavatarclass',
       tooltipClass: 'has-tooltip',
-      linkClass: 'author_link has-tooltip myextralinkclass ',
+      linkClass: 'author-link has-tooltip myextralinkclass ',
     };
 
     Object.keys(correctVals).forEach(computedKey => {