Merge branch '8762-dynamic-tag-name' into 'master'

Dynamically switch issue weight root tagName

Closes #8762

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

ee/app/assets/javascripts/boards/components/issue_card_weight.vue

@@ -13,12 +13,18 @@ export default {
       type: Number,
       required: true,
     },
+    tagName: {
+      type: String,
+      required: false,
+      default: 'a',
+    },
   },
 };
 </script>
 
 <template>
-  <a
+  <component
+    :is="tagName"
     ref="itemWeight"
     class="board-card-info card-number board-card-weight"
     tabindex="1"
@@ -33,5 +39,5 @@ export default {
       class="js-item-weight"
       >{{ __('Weight') }}<br /><span class="text-tertiary">{{ weight }}</span>
     </gl-tooltip>
-  </a>
+  </component>
 </template>

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

@@ -103,6 +103,7 @@ export default {
             v-if="weight"
             :weight="weight"
             class="item-weight d-flex align-items-center"
+            tag-name="span"
           />
         </div>
         <issue-assignees

ee/app/assets/stylesheets/components/related_items_list.scss

@@ -81,10 +81,10 @@ $item-weight-max-width: 48px;
       .item-milestone,
       .item-weight {
         cursor: help;
-        text-decoration: none;
       }
 
       .item-milestone {
+        text-decoration: none;
         max-width: $item-milestone-max-width;
       }
 

ee/spec/javascripts/boards/components/issue_card_weight_spec.js

+import Vue from 'vue';
+import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('IssueCardWeight component', () => {
+  let vm;
+  let Component;
+
+  beforeAll(() => {
+    Component = Vue.extend(IssueCardWeight);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders weight', () => {
+    vm = mountComponent(Component, {
+      weight: 5,
+    });
+
+    expect(vm.$el.querySelector('.board-card-info-text')).toContainText('5');
+  });
+
+  it('renders a link when no tag is specified', () => {
+    vm = mountComponent(Component, {
+      weight: 2,
+    });
+
+    expect(vm.$el.querySelector('a.board-card-info')).toBeDefined();
+  });
+
+  it('renders the tag when it is explicitly specified', () => {
+    vm = mountComponent(Component, {
+      weight: 2,
+      tagName: 'span',
+    });
+
+    expect(vm.$el.querySelector('span.board-card-info')).toBeDefined();
+    expect(vm.$el.querySelector('a.board-card-info')).toBeNull();
+  });
+});