Show weight of an issue even when zero

- On some pages, the weight icon and value are hidden when the issue's weight is 0

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -104,6 +104,13 @@ export default {
     helpLink() {
       return boardsStore.scopedLabels.helpLink;
     },
+    validIssueWeight() {
+      if (_.isNumber(this.issue.weight)) {
+        return this.issue.weight >= 0;
+      }
+
+      return false;
+    },
   },
   methods: {
     isIndexLessThanlimit(index) {
@@ -212,7 +219,7 @@ export default {
           <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" />
           <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
           <issue-card-weight
-            v-if="issue.weight"
+            v-if="validIssueWeight"
             :weight="issue.weight"
             @click="filterByWeight(issue.weight)"
           />

changelogs/unreleased/13321-show-issue-weight-when-zero.yml

+---
+title: Show issue weight when weight is 0
+merge_request: 17329
+author: briankabiro
+type: fixed

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

@@ -111,6 +111,13 @@ export default {
     qaClass() {
       return issuableQaClassMap[this.issuableType];
     },
+    validIssueWeight() {
+      if (this.issue) {
+        return this.issue.weight >= 0;
+      }
+
+      return false;
+    },
   },
   mounted() {
     if (this.canReorder) {
@@ -259,7 +266,7 @@ export default {
               class="qa-related-issuable-item"
               @relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)"
             >
-              <span v-if="issue.weight" slot="weight" class="order-md-1">
+              <span v-if="validIssueWeight" slot="weight" class="order-md-1">
                 <issue-weight
                   :weight="issue.weight"
                   class="item-weight d-flex align-items-center"

spec/javascripts/boards/issue_card_spec.js

@@ -42,6 +42,7 @@ describe('Issue card component', () => {
       assignees: [],
       reference_path: '#1',
       real_path: '/test/1',
+      weight: 1,
     });
 
     component = new Vue({
@@ -287,8 +288,17 @@ describe('Issue card component', () => {
   });
 
   describe('weights', () => {
-    it('not shows weight component', () => {
-      expect(component.$el.querySelector('.board-card-weight')).toBeNull();
+    it('shows weight component is greater than 0', () => {
+      expect(component.$el.querySelector('.board-card-weight')).not.toBeNull();
+    });
+
+    it('shows weight component when weight is 0', done => {
+      component.issue.weight = 0;
+
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-card-weight')).not.toBeNull();
+        done();
+      });
     });
   });
 });