fix: Avoid keys getting translated in availability (#1418)

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -6,7 +6,7 @@
       />
 
       <div class="status-view--title">
-        {{ currentUserAvailabilityStatus }}
+        {{ availabilityDisplayLabel }}
       </div>
     </div>
 
@@ -47,6 +47,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
 
 export default {
   mixins: [clickaway],
@@ -62,14 +63,25 @@ export default {
     ...mapGetters({
       currentUser: 'getCurrentUser',
     }),
+    availabilityDisplayLabel() {
+      const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
+        key => key === this.currentUserAvailabilityStatus
+      );
+      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST')[
+        availabilityIndex
+      ];
+    },
     currentUserAvailabilityStatus() {
       return this.currentUser.availability_status;
     },
     availabilityStatuses() {
       return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
-        status => ({
-          ...status,
-          disabled: this.currentUserAvailabilityStatus === status.value,
+        (statusLabel, index) => ({
+          label: statusLabel,
+          value: AVAILABILITY_STATUS_KEYS[index],
+          disabled:
+            this.currentUserAvailabilityStatus ===
+            AVAILABILITY_STATUS_KEYS[index],
         })
       );
     },

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -46,7 +46,7 @@ describe('AvailabilityStatus', () => {
   it('shows current user status', () => {
     const statusViewTitle = availabilityStatus.find('.status-view--title');
 
-    expect(statusViewTitle.text()).toBe(currentUser.availability_status);
+    expect(statusViewTitle.text()).toBe('Online');
   });
 
   it('opens the menu when user clicks "change"', async () => {