Merge branch 'dz-issue-css-classes' into 'master'

Rename some css classes that are shared between issues and mrs

Closes gitlab-ce#21968

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

app/assets/javascripts/issuable_bulk_update_actions.js

@@ -36,7 +36,7 @@ export default {
   },
 
   getSelectedIssues() {
-    return this.issues.has('.selected_issue:checked');
+    return this.issues.has('.selected-issuable:checked');
   },
 
   getLabelsFromSelection() {
@@ -110,7 +110,7 @@ export default {
   getOriginalCommonIds() {
     const labelIds = [];
 
-    this.getElement('.selected_issue:checked').each((i, el) => {
+    this.getElement('.selected-issuable:checked').each((i, el) => {
       labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
     });
     return _.intersection.apply(this, labelIds);
@@ -119,7 +119,7 @@ export default {
   // From issuable's initial bulk selection
   getOriginalMarkedIds() {
     const labelIds = [];
-    this.getElement('.selected_issue:checked').each((i, el) => {
+    this.getElement('.selected-issuable:checked').each((i, el) => {
       labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
     });
     return _.intersection.apply(this, labelIds);
@@ -132,7 +132,7 @@ export default {
     let issuableLabels = [];
 
     // Collect unique label IDs for all checked issues
-    this.getElement('.selected_issue:checked').each((i, el) => {
+    this.getElement('.selected-issuable:checked').each((i, el) => {
       issuableLabels = this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels');
       issuableLabels.forEach((labelId) => {
         // Store unique IDs

app/assets/javascripts/issuable_bulk_update_sidebar.js

@@ -30,7 +30,7 @@ export default class IssuableBulkUpdateSidebar {
     this.$otherFilters = $('.issues-other-filters');
     this.$checkAllContainer = $('.check-all-holder');
     this.$issueChecks = $('.issue-check');
-    this.$issuesList = $('.selected_issue');
+    this.$issuesList = $('.selected-issuable');
     this.$issuableIdsInput = $('#update_issuable_ids');
   }
 
@@ -55,7 +55,7 @@ export default class IssuableBulkUpdateSidebar {
   }
 
   updateFormState() {
-    const noCheckedIssues = !$('.selected_issue:checked').length;
+    const noCheckedIssues = !$('.selected-issuable:checked').length;
 
     this.toggleSubmitButtonDisabled(noCheckedIssues);
     this.updateSelectedIssuableIds();
@@ -123,7 +123,7 @@ export default class IssuableBulkUpdateSidebar {
   }
 
   static getCheckedIssueIds() {
-    const $checkedIssues = $('.selected_issue:checked');
+    const $checkedIssues = $('.selected-issuable:checked');
 
     if ($checkedIssues.length > 0) {
       return $.map($checkedIssues, value => $(value).data('id'));

app/assets/javascripts/labels_select.js

@@ -449,11 +449,11 @@ export default class LabelsSelect {
   }
 
   bindEvents() {
-    return $('body').on('change', '.selected_issue', this.onSelectCheckboxIssue);
+    return $('body').on('change', '.selected-issuable', this.onSelectCheckboxIssue);
   }
   // eslint-disable-next-line class-methods-use-this
   onSelectCheckboxIssue() {
-    if ($('.selected_issue:checked').length) {
+    if ($('.selected-issuable:checked').length) {
       return;
     }
     return $('.issues-bulk-update .labels-filter .dropdown-toggle-text').text('Label');

app/assets/stylesheets/pages/issuable.scss

@@ -738,13 +738,13 @@
       display: flex;
     }
 
-    .issue-info-container {
+    .issuable-info-container {
       -webkit-flex: 1;
       flex: 1;
       display: flex;
       padding-right: $gl-padding;
 
-      .issue-main-info {
+      .issuable-main-info {
         flex: 1 auto;
         margin-right: 10px;
         min-width: 0;
@@ -781,7 +781,7 @@
       margin-bottom: 10px;
       min-width: 15px;
 
-      .selected_issue {
+      .selected-issuable {
         vertical-align: text-top;
       }
     }
@@ -814,7 +814,7 @@
 }
 
 .issuable-list li,
-.issue-info-container .controls {
+.issuable-info-container .controls {
   .avatar-counter {
     display: inline-block;
     vertical-align: middle;

app/assets/stylesheets/pages/merge_requests.scss

@@ -460,7 +460,7 @@
     display: -webkit-flex;
     display: flex;
 
-    .issue-info-container {
+    .issuable-info-container {
       -webkit-flex: 1;
       flex: 1;
     }

app/views/projects/issues/_issue.html.haml

@@ -2,9 +2,9 @@
   .issue-box
     - if @can_bulk_update
       .issue-check.hidden
-        = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
-    .issue-info-container
-      .issue-main-info
+        = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected-issuable"
+    .issuable-info-container
+      .issuable-main-info
         .issue-title.title
           %span.issue-title-text
             - if issue.confidential?

app/views/projects/merge_requests/_merge_request.html.haml

 %li{ id: dom_id(merge_request), class: mr_css_classes(merge_request), data: { labels: merge_request.label_ids, id: merge_request.id } }
   - if @can_bulk_update
     .issue-check.hidden
-      = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue"
+      = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected-issuable"
 
-  .issue-info-container
-    .issue-main-info
+  .issuable-info-container
+    .issuable-main-info
       .merge-request-title.title
         %span.merge-request-title-text
           = link_to merge_request.title, merge_request_path(merge_request)

ee/app/assets/javascripts/related_issues/components/issue_item.vue

@@ -23,7 +23,7 @@ export default {
 <template>
   <div
     :class="{
-      'issue-info-container': !canReorder,
+      'issuable-info-container': !canReorder,
       'card-body': canReorder,
     }"
     class="flex"

ee/app/assets/javascripts/related_issues/components/issue_token.vue

@@ -35,7 +35,7 @@ export default {
   <div
     :class="{
       'issue-token': isCondensed,
-      'flex-row issue-info-container': !isCondensed,
+      'flex-row issuable-info-container': !isCondensed,
     }"
   >
     <component
@@ -44,7 +44,7 @@ export default {
       :is="computedLinkElementType"
       :class="{
         'issue-token-link': isCondensed,
-        'issue-main-info': !isCondensed,
+        'issuable-main-info': !isCondensed,
       }"
       :href="computedPath"
       :title="issueTitle"

ee/app/assets/stylesheets/framework/sortable.scss

@@ -11,7 +11,7 @@
   .flex-row {
     display: flex;
 
-    &.issue-info-container {
+    &.issuable-info-container {
       padding-right: 0;
     }
   }

ee/app/assets/stylesheets/pages/issues/related_issues.scss

@@ -31,11 +31,11 @@ $token-spacing-bottom: 0.5em;
     opacity: 0;
   }
 
-  li .issue-info-container {
+  li .issuable-info-container {
     padding-left: $gl-padding;
   }
 
-  a.issue-main-info:hover {
+  a.issuable-main-info:hover {
     text-decoration: none;
 
     .issue-token-title-text {

ee/app/views/groups/epics/_epic.html.haml

 %li
   .issue-box
-    .issue-info-container
-      .issue-main-info
+    .issuable-info-container
+      .issuable-main-info
         .issue-title.title
           %span.issue-title-text
             = link_to epic.title, epic_path(epic)

ee/spec/javascripts/issuable/related_issues/components/issue_item_spec.js

@@ -17,9 +17,9 @@ describe('issueItem', () => {
     vm = mountComponent(IssueItem, props);
   });
 
-  it('contains issue-info-container class when canReorder is false', () => {
+  it('contains issuable-info-container class when canReorder is false', () => {
     expect(vm.canReorder).toEqual(false);
-    expect(vm.$el.querySelector('.issue-info-container')).toBeNull();
+    expect(vm.$el.querySelector('.issuable-info-container')).toBeNull();
   });
 
   it('renders displayReference', () => {

spec/features/issues/filtered_search/filter_issues_spec.rb

@@ -265,7 +265,7 @@ describe 'Filter issues', :js do
 
     context 'issue label clicked' do
       it 'filters and displays in search bar' do
-        find('.issues-list .issue .issue-main-info .issuable-info a .badge', text: multiple_words_label.title).click
+        find('.issues-list .issue .issuable-main-info .issuable-info a .badge', text: multiple_words_label.title).click
 
         expect_issues_list_count(1)
         expect_tokens([label_token("\"#{multiple_words_label.title}\"")])