Add defaultAwards props to awards_list

**Why?**
This is helpful at defaulting thumbsup and thumbsdown
to show up, even no awards have been given to it.

app/assets/javascripts/vue_shared/components/awards_list.vue

@@ -34,10 +34,21 @@ export default {
       required: false,
       default: '',
     },
+    defaultAwards: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
+    groupedDefaultAwards() {
+      return this.defaultAwards.reduce((obj, key) => Object.assign(obj, { [key]: [] }), {});
+    },
     groupedAwards() {
-      const { thumbsup, thumbsdown, ...rest } = groupBy(this.awards, x => x.name);
+      const { thumbsup, thumbsdown, ...rest } = {
+        ...this.groupedDefaultAwards,
+        ...groupBy(this.awards, x => x.name),
+      };
 
       return [
         ...(thumbsup ? [this.createAwardList('thumbsup', thumbsup)] : []),
@@ -73,6 +84,10 @@ export default {
       };
     },
     getAwardListTitle(awardsList) {
+      if (!awardsList.length) {
+        return '';
+      }
+
       const hasReactionByCurrentUser = this.hasReactionByCurrentUser(awardsList);
       const TOOLTIP_NAME_COUNT = hasReactionByCurrentUser ? 9 : 10;
       let awardList = awardsList;

spec/frontend/vue_shared/components/awards_list_spec.js

@@ -210,4 +210,46 @@ describe('vue_shared/components/awards_list', () => {
       expect(buttons.wrappers.every(x => x.classes('disabled'))).toBe(true);
     });
   });
+
+  describe('with default awards', () => {
+    beforeEach(() => {
+      createComponent({
+        awards: [createAward(EMOJI_SMILE, USERS.marie), createAward(EMOJI_100, USERS.marie)],
+        canAwardEmoji: true,
+        currentUserId: USERS.root.id,
+        // Let's assert that it puts thumbsup and thumbsdown in the right order still
+        defaultAwards: [EMOJI_THUMBSDOWN, EMOJI_100, EMOJI_THUMBSUP],
+      });
+    });
+
+    it('shows awards in correct order', () => {
+      expect(findAwardsData()).toEqual([
+        {
+          classes: ['btn', 'award-control'],
+          count: 0,
+          html: matchingEmojiTag(EMOJI_THUMBSUP),
+          title: '',
+        },
+        {
+          classes: ['btn', 'award-control'],
+          count: 0,
+          html: matchingEmojiTag(EMOJI_THUMBSDOWN),
+          title: '',
+        },
+        // We expect the EMOJI_100 before the EMOJI_SMILE because it was given as a defaultAward
+        {
+          classes: ['btn', 'award-control'],
+          count: 1,
+          html: matchingEmojiTag(EMOJI_100),
+          title: 'Marie',
+        },
+        {
+          classes: ['btn', 'award-control'],
+          count: 1,
+          html: matchingEmojiTag(EMOJI_SMILE),
+          title: 'Marie',
+        },
+      ]);
+    });
+  });
 });