Add missing BETA tag on import with protocol parser [SCI-10559]

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;
 }

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>`
           });
         }
 

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

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"