From 589df276c0790fb3b790187adc0ef3883cbebe2d Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Tue, 24 Jan 2023 16:28:41 +0100
Subject: [PATCH] Add legend to all contribution tab, and add tests for this
 case.

---
 .../RightSide/ContributionInfo.spec.js         | 12 +++++++++---
 .../Template/RightSide/ContributionInfo.vue    | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.spec.js b/frontend/src/components/Template/RightSide/ContributionInfo.spec.js
index f4c88b9f5..f4547e42d 100644
--- a/frontend/src/components/Template/RightSide/ContributionInfo.spec.js
+++ b/frontend/src/components/Template/RightSide/ContributionInfo.spec.js
@@ -72,14 +72,20 @@ describe('ContributionInfo', () => {
         expect(wrapper.find('p').text()).toBe('contribution.alert.communityNoteList')
       })
 
-      it.skip('has a legend to explain the icons', () => {
+      it('has a legend to explain the icons', () => {
         const listItems = wrapper.findAll('li')
 
         expect(listItems.at(0).find('svg').attributes('aria-label')).toEqual('bell fill')
         expect(listItems.at(0).text()).toBe('contribution.alert.pending')
 
-        expect(listItems.at(1).find('svg').attributes('aria-label')).toEqual('check')
-        expect(listItems.at(1).text()).toBe('contribution.alert.confirm')
+        expect(listItems.at(1).find('svg').attributes('aria-label')).toEqual('question square')
+        expect(listItems.at(1).text()).toBe('contribution.alert.in_progress')
+
+        expect(listItems.at(2).find('svg').attributes('aria-label')).toEqual('check')
+        expect(listItems.at(2).text()).toBe('contribution.alert.confirm')
+
+        expect(listItems.at(3).find('svg').attributes('aria-label')).toEqual('x circle')
+        expect(listItems.at(3).text()).toBe('contribution.alert.denied')
       })
     })
 
diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.vue b/frontend/src/components/Template/RightSide/ContributionInfo.vue
index f9952fd83..2227df1c3 100644
--- a/frontend/src/components/Template/RightSide/ContributionInfo.vue
+++ b/frontend/src/components/Template/RightSide/ContributionInfo.vue
@@ -33,6 +33,24 @@
       <p>
         {{ $t('contribution.alert.communityNoteList') }}
       </p>
+      <ul>
+        <li>
+          <b-icon icon="bell-fill" variant="primary"></b-icon>
+          {{ $t('contribution.alert.pending') }}
+        </li>
+        <li>
+          <b-icon icon="question-square" variant="warning"></b-icon>
+          {{ $t('contribution.alert.in_progress') }}
+        </li>
+        <li>
+          <b-icon icon="check" variant="success"></b-icon>
+          {{ $t('contribution.alert.confirm') }}
+        </li>
+        <li>
+          <b-icon icon="x-circle" variant="warning"></b-icon>
+          {{ $t('contribution.alert.denied') }}
+        </li>
+      </ul>
     </div>
     <div v-if="hash === '#edit'" show fade variant="secondary" class="text-dark">
       <div>