feat: add info message in Single Select Mode (#515)

* feat: add info message in Single Select Mode

* test: refine checking that no annotations list is displayed

* test: rename the data-cy value of Message box

* test: add the function checkNoAnnotationsAvailable()

* chore: change text in i18n files

---------

Co-authored-by: orlinmalkja <[email protected]>

src/components/MessageBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div data-cy="message-box">
     <div class="t-flex t-items-center t-justify-center">
       <BaseIcon
         :class="`t-text-${color}`"

src/components/annotations/variants/VariantsList.vue

@@ -18,8 +18,8 @@
   </div>
   <MessageBox
     v-else
-    :message="$t('no_annotations_in_view')"
-    :title="$t('no_annotations_available')"
+    :message="getVariantsListInfoMessage()"
+    :title="getVariantsListInfoTitle()"
     type="info"
   />
 </template>
@@ -28,13 +28,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import VariantItem from "@/components/annotations/variants/VariantItem.vue";
-import {useAnnotationsStore} from "@/stores/annotations";
+import { useAnnotationsStore } from "@/stores/annotations";
 import MessageBox from "@/components/MessageBox.vue";
 import * as Utils from '@/utils/annotations'
+import i18n from '@/i18n'
+import { useConfigStore } from '@/stores/config';
 
 const annotationStore = useAnnotationsStore();
+const configStore = useConfigStore()
 
-
+const lang = computed<string>(() => configStore.config.lang)
 const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 const visibleAnnotations = computed<Annotation[]>(() => annotationStore.visibleAnnotations);
 
@@ -63,6 +66,24 @@ function getWitnessColor(witness: string) {
   return annotationStore.variantItemsColors[witness];
 }
 
+function getVariantsListInfoMessage(): string {
+  if (annotationStore.filteredAnnotations.length === 0) {
+    return i18n[lang.value]['no_annotations_in_view']
+  }
+  if (annotationStore.isSingleSelectMode) {
+    return i18n[lang.value]['single_select_mode_info_message']
+  }
+}
+
+function getVariantsListInfoTitle(): string {
+  if (annotationStore.filteredAnnotations.length === 0) {
+    return i18n[lang.value]['no_annotations_available']
+  }
+  if (annotationStore.isSingleSelectMode) {
+    return i18n[lang.value]['single_select_mode']
+  }
+}
+
 
 function showLineSeparator(visibleAnnotations, i) {
   if (visibleAnnotations[i+1]) {

src/i18n/de/index.js

@@ -117,5 +117,6 @@ export default {
   witnesses_details: 'Infos zu Textzeugen',
   variants_details: 'Infos zu Varianten',
   witnesses_selected: 'Textzeugen ausgewählt',
-  single_select_mode: 'Single Select Mode'
+  single_select_mode: 'Single Select Mode',
+  single_select_mode_info_message: 'Bitte wählen Sie Varianten aus dem Text.'
 };

src/i18n/en/index.js

@@ -123,5 +123,6 @@ export default {
   witnesses_details: 'Witnesses Details',
   variants_details: 'Variants Details',
   witnesses_selected: 'Witnesses selected',
-  single_select_mode: 'Single Select Mode'
+  single_select_mode: 'Single Select Mode',
+  single_select_mode_info_message: 'Please select variant items from the text.'
 };

tests/cypress/e2e/variants.cy.js

@@ -57,10 +57,7 @@ const selectors = {
     cy
       .get('.panels-wrapper .panel:nth-child(4) .panel-body')
       .find('div[id="pv_id_6_2_content"]')
-      .children().eq(0)
-      .children().eq(1)   // annotation content
-      .children().eq(0).should('not.have.class', 'annotations-list')
-      .find('span').contains('No Annotations available')
+      .find('div[data-cy="message-box"]')
   })
 
   describe('VariantsAnnotation', () => {
@@ -562,4 +559,4 @@ const selectors = {
             })
           })
       })
-  });
+  });