From 39a11f677483485e830cdf708c78284c3b705c67 Mon Sep 17 00:00:00 2001
From: wandji20 <wbertrand10@gmail.com>
Date: Mon, 1 Apr 2024 21:43:29 +0100
Subject: [PATCH] Add missing BETA tag on import with protocol parser
 [SCI-10559]

---
 app/assets/stylesheets/protocol_management.scss | 14 --------------
 app/javascript/vue/protocols/table.vue          |  5 ++++-
 app/javascript/vue/shared/menu_dropdown.vue     |  4 ++--
 config/locales/en.yml                           |  1 +
 4 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss
index 0c2b76fad..ac6d24cb4 100644
--- a/app/assets/stylesheets/protocol_management.scss
+++ b/app/assets/stylesheets/protocol_management.scss
@@ -22,20 +22,6 @@
   }
 }
 
-.btn-beta-icon {
-  &::after {
-    background-color: var(--sn-coral);
-    border-radius: 1px;
-    color: var(--sn-white);
-    content: "BETA";
-    font-size: .5rem;
-    left: 7rem;
-    padding: .125rem .25rem;
-    position: absolute;
-    top: .1rem;
-  }
-}
-
 .dropdown-menu {
   border: 0;
 }
diff --git a/app/javascript/vue/protocols/table.vue b/app/javascript/vue/protocols/table.vue
index 3f0bdad24..72ef552ad 100644
--- a/app/javascript/vue/protocols/table.vue
+++ b/app/javascript/vue/protocols/table.vue
@@ -211,7 +211,10 @@ export default {
         if (this.docxParserEnabled) {
           importMenu.menuItems.push({
             emit: 'import_docx',
-            text: this.i18n.t('protocols.index.import_docx')
+            text: `<span>${this.i18n.t('protocols.index.import_docx')}</span>
+                   <span class="bg-sn-coral text-sn-white text-[8px] absolute leading-none p-1 top-px rounded-[1px] right-px">
+                     ${this.i18n.t('protocols.index.beta')}
+                   </span>`
           });
         }
 
diff --git a/app/javascript/vue/shared/menu_dropdown.vue b/app/javascript/vue/shared/menu_dropdown.vue
index ec8229422..739b0f84a 100644
--- a/app/javascript/vue/shared/menu_dropdown.vue
+++ b/app/javascript/vue/shared/menu_dropdown.vue
@@ -18,6 +18,7 @@
           <span v-for="(item, i) in listItems" :key="i" class="contents">
             <div v-if="item.dividerBefore" class="border-0 border-t border-solid border-sn-light-grey"></div>
             <a :href="item.url" v-if="!item.submenu"
+              v-html="item.text"
               :target="item.url_target || '_self'"
               :class="{ 'bg-sn-super-light-blue': item.active, 'disabled': item.disabled }"
               :style="item.disabled === 'style-only' && 'pointer-events: all'"
@@ -25,10 +26,9 @@
               :data-toggle="item.modalTarget && 'modal'"
               :data-target="item.modalTarget"
               :data-e2e="item.data_e2e"
-              class="block whitespace-nowrap rounded px-3 py-2.5 hover:!text-sn-blue hover:no-underline cursor-pointer hover:bg-sn-super-light-grey leading-5"
+              class="block whitespace-nowrap rounded px-3 py-2.5 hover:!text-sn-blue hover:no-underline cursor-pointer hover:bg-sn-super-light-grey leading-5 relative"
               @click="handleClick($event, item)"
             >
-              {{ item.text }}
             </a>
             <div v-else class="-mx-2.5 px-2.5 group relative">
               <span
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 656c7554d..f60307158 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3224,6 +3224,7 @@ en:
       import: "Import"
       import_eln: "SciNote file (.eln)"
       import_docx: "MS Word (.docx)"
+      beta: "BETA"
       import_protocols_io: "From Protocols.io"
       modal_import_json_upload: "Upload"
       modal_import_json_title: "Import protocols.io file"