Merge branch 'develop' into kb_SCI-10920_data-e2e-protocol-templates

app/assets/javascripts/repository_columns/index.js

@@ -185,7 +185,7 @@ var RepositoryColumns = (function() {
             disableSearch: true,
             labelHTML: true,
             optionLabel: function(option) {
-              return `<div class="column-type-option" data-disabled="${option.params.disabled}">
+              return `<div class="column-type-option" data-e2e="${option.params.data_e2e || ''}" data-disabled="${option.params.disabled}">
                         <span>${option.label}</span>
                         <span class="text-description">${option.params.text_description || ''}</span>
                       </div>`

app/assets/stylesheets/tailwind/buttons.css

@@ -114,7 +114,7 @@
   }
 
   .btn.btn-light {
-    @apply bg-transparent text-sn-blue border-transparent;
+    @apply bg-transparent text-sn-blue border-transparent bg-sn-white;
   }
 
   .btn.btn-light.btn-black {

app/javascript/vue/protocol/container.vue

@@ -177,6 +177,7 @@
             <div v-for="(step, index) in steps" :key="step.id" class="step-block">
               <div v-if="index > 0 && urls.add_step_url" class="insert-step" @click="addStep(index)" data-e2e="e2e-BT-protocol-templateSteps-insertStep">
                 <i class="sn-icon sn-icon-new-task"></i>
+                <span>{{ i18n.t("protocols.steps.add_step") }}</span>
               </div>
               <Step
                 ref="steps"
@@ -201,6 +202,7 @@
               />
               <div v-if="(index === steps.length - 1) && urls.add_step_url" class="insert-step" @click="addStep(index + 1)" data-e2e="e2e-BT-protocol-templateSteps-insertStep">
                 <i class="sn-icon sn-icon-new-task"></i>
+                <span>{{ i18n.t("protocols.steps.add_step") }}</span>
               </div>
             </div>
             <div v-if="steps.length > 0 && urls.add_step_url && inRepository" class="py-5">

app/javascript/vue/protocol/step.vue

@@ -145,7 +145,19 @@
                     @attachments:viewMode="changeAttachmentsViewMode"
                     @attachment:viewMode="updateAttachmentViewMode"/>
       </div>
+      <ContentToolbar
+        v-if="orderedElements.length > 3"
+        :insertMenu="insertMenu"
+        @create:table="(...args) => this.createElement('table', ...args)"
+        @create:checklist="createElement('checklist')"
+        @create:text="createElement('text')"
+        @create:file="openLoadFromComputer"
+        @create:wopi_file="openWopiFileModal"
+        @create:ove_file="openOVEditor"
+        @create:marvinjs_file="openMarvinJsModal($refs.marvinJsButton)"
+      ></ContentToolbar>
     </div>
+
     <deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
     <ReorderableItemsModal v-if="reordering"
       :title="i18n.t('protocols.steps.modals.reorder_elements.title', { step_position: step.attributes.position + 1 })"
@@ -172,6 +184,7 @@
   import Attachments from '../shared/content/attachments.vue'
   import ReorderableItemsModal from '../shared/reorderable_items_modal.vue'
   import MenuDropdown from '../shared/menu_dropdown.vue'
+  import ContentToolbar from '../shared/content/content_toolbar.vue'
 
   import UtilsMixin from '../mixins/utils.js'
   import AttachmentsMixin from '../shared/content/mixins/attachments.js'
@@ -265,7 +278,8 @@
       Attachments,
       StorageUsage,
       ReorderableItemsModal,
-      MenuDropdown
+      MenuDropdown,
+      ContentToolbar
     },
     created() {
       this.loadAttachments();
@@ -359,25 +373,30 @@
         if (this.urls.update_url) {
           menu = menu.concat([{
                     text: this.i18n.t('protocols.steps.insert.text'),
+                    icon: 'sn-icon sn-icon-result-text',
                     emit: 'create:text',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertText`
                   },{
                     text: this.i18n.t('protocols.steps.insert.attachment'),
                     submenu: this.filesMenu,
                     position: 'left',
+                    icon: 'sn-icon sn-icon-file',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertAttachment`
                   },{
                     text: this.i18n.t('protocols.steps.insert.table'),
+                    icon: 'sn-icon sn-icon-tables',
                     emit: 'create:table',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertTable`
                   },{
                     text: this.i18n.t('protocols.steps.insert.well_plate'),
                     submenu: this.wellPlateOptions,
+                    icon: 'sn-icon sn-icon-tables',
                     position: 'left',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellplate`
                   },{
                     text: this.i18n.t('protocols.steps.insert.checklist'),
                     emit: 'create:checklist',
+                    icon: 'sn-icon sn-icon-checkllist',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertChecklist`
                   }]);
         }

app/javascript/vue/results/result.vue

@@ -131,6 +131,16 @@
                       @attachments:viewMode="changeAttachmentsViewMode"
                       @attachment:viewMode="updateAttachmentViewMode"/>
       </div>
+      <ContentToolbar
+        v-if="orderedElements.length > 3"
+        :insertMenu="insertMenu"
+        @create:table="(...args) => this.createElement('table', ...args)"
+        @create:text="createElement('text')"
+        @create:file="openLoadFromComputer"
+        @create:wopi_file="openWopiFileModal"
+        @create:ove_file="openOVEditor"
+        @create:marvinjs_file="openMarvinJsModal($refs.marvinJsButton)"
+      ></ContentToolbar>
     </div>
   </div>
 </template>
@@ -144,6 +154,7 @@ import Attachments from '../shared/content/attachments.vue';
 import InlineEdit from '../shared/inline_edit.vue';
 import MenuDropdown from '../shared/menu_dropdown.vue';
 import deleteResultModal from './delete_result.vue';
+import ContentToolbar from '../shared/content/content_toolbar';
 
 import AttachmentsMixin from '../shared/content/mixins/attachments.js';
 import WopiFileModal from '../shared/content/attachments/mixins/wopi_file_modal.js';
@@ -192,7 +203,8 @@ export default {
     InlineEdit,
     MenuDropdown,
     deleteResultModal,
-    StorageUsage
+    StorageUsage,
+    ContentToolbar
   },
   watch: {
     resultToReload() {
@@ -261,16 +273,20 @@ export default {
       if (this.urls.update_url) {
         menu = menu.concat([{
           text: this.i18n.t('my_modules.results.insert.text'),
+          icon: 'sn-icon sn-icon-result-text',
           emit: 'create:text'
         }, {
           text: this.i18n.t('my_modules.results.insert.attachment'),
           submenu: this.filesMenu,
+          icon: 'sn-icon sn-icon-file',
           position: 'left'
         }, {
           text: this.i18n.t('my_modules.results.insert.table'),
+          icon: 'sn-icon sn-icon-tables',
           emit: 'create:table'
         }, {
           text: this.i18n.t('my_modules.results.insert.well_plate'),
+          icon: 'sn-icon sn-icon-tables',
           submenu: this.wellPlateOptions,
           position: 'left'
         }]);

app/javascript/vue/shareable_links/container.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
-    <button class="ml-2 btn"
-            id="share-button"
-            type="button"
-            data-e2e="e2e-BT-tasks-shareTask"
-            :class="shareClass"
-            :title="shareValue"
-            @click="openModal">
-      <span class="sn-icon sn-icon-shared"></span>
-      <span class="text-sm">
-        {{ shareValue }}
-      </span>
-    </button>
+    <div :title="shareTitle">
+      <button class="btn"
+              id="share-button"
+              type="button"
+              data-e2e="e2e-BT-tasks-shareTask"
+              :class="[shareClass, {'disabled': !enabled}]"
+              @click="openModal">
+        <span class="sn-icon sn-icon-shared"></span>
+        <span class="text-sm">
+          {{ shareValue }}
+        </span>
+      </button>
+    </div>
     <div ref="modal">
       <shareModalContainer :shared="share"
                            :open="visibleShareModal"
@@ -43,6 +44,10 @@ export default {
     canShare: {
       type: Boolean,
       default: false
+    },
+    enabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -60,6 +65,9 @@ export default {
     },
     shareValue() {
       return this.i18n.t(this.share ? 'my_modules.shareable_links.shared' : 'my_modules.shareable_links.share');
+    },
+    shareTitle() {
+      return this.enabled ? this.shareValue : this.i18n.t('my_modules.shareable_links.disabled');
     }
   },
   mounted() {

app/javascript/vue/shared/content/content_toolbar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="px-4 py-2 bg-sn-super-light-blue flex gap-4 mt-10 mb-4">
+    <span class="font-bold shrink-0 leading-10">
+      {{ i18n.t('protocols.steps.insert.button') }}:
+    </span>
+    <div class="flex items-center gap-2 flex-wrap">
+      <template v-for="item in insertMenu">
+        <button v-if="!item.submenu" @click="$emit(item.emit)" class="btn btn-light">
+          <i :class="item.icon"></i>
+          {{ item.text }}
+        </button>
+        <MenuDropdown
+          :listItems="item.submenu"
+          :btnText="item.text"
+          :btnClasses="'btn btn-light'"
+          :position="'right'"
+          :caret="true"
+          :btnIcon="item.icon"
+          @dtEvent="handleEvents"
+        ></MenuDropdown>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import MenuDropdown from '../menu_dropdown.vue';
+
+export default {
+  components: {
+    MenuDropdown
+  },
+  name: 'stepToolbar',
+  props: {
+    insertMenu: Array
+  },
+  methods: {
+    handleEvents(event, option) {
+      this.$emit(event, option.params);
+    }
+  }
+
+};
+</script>

app/javascript/vue/shared/scinote_edit_download.vue

@@ -2,11 +2,13 @@
   <div class="buttons">
     <template v-if="isWindows">
       <a :href="getWindowsHref"
-         class="btn btn-primary new-project-btn"
+         class="w-full btn btn-primary new-project-btn"
          :title="i18n.t('users.settings.account.addons.desktop_app.windows_button')"
          role="button"
          target="_blank">
-        <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
+        <span :class="{'hidden-xs' : !isCompact }">
+          {{ this.isCompact ? i18n.t('general.download') : i18n.t('users.settings.account.addons.desktop_app.windows_button') }}
+        </span>
       </a>
       <div v-if="showButtonLabel" class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
         {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[0]['version']}) }}
@@ -15,18 +17,20 @@
 
     <template v-else-if="isMac">
       <a :href="getMacHref"
-         class="btn btn-primary new-project-btn"
+         class="w-full btn btn-primary new-project-btn"
          :title="i18n.t('users.settings.account.addons.desktop_app.macos_button')"
          role="button"
          target="_blank">
-        <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
+        <span :class="{'hidden-xs' : !isCompact }">
+          {{ this.isCompact ? i18n.t('general.download') : i18n.t('users.settings.account.addons.desktop_app.macos_button') }}
+        </span>
       </a>
       <div v-if="showButtonLabel" class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
         {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[1]['version']}) }}
       </div>
     </template>
 
-    <template v-else>
+    <template v-else-if="!isCompact">
       <div class="flex">
         <div>
           <a :href="getWindowsHref"
@@ -60,7 +64,7 @@
       </div>
     </template>
 
-    <a v-if="!isUpdateVersionModal" :href="'https://knowledgebase.scinote.net/en/knowledge/how-to-use-scinote-edit'"
+    <a v-if="!isUpdateVersionModal && !isCompact" :href="'https://knowledgebase.scinote.net/en/knowledge/how-to-use-scinote-edit'"
         :title="i18n.t('users.settings.account.addons.more_info')"
         class="text-sn-blue"
         target="_blank">
@@ -75,7 +79,8 @@ export default {
   name: 'ScinoteEditDownload',
   props: {
     data: { type: String, required: true },
-    isUpdateVersionModal: { type: Boolean, required: false }
+    isUpdateVersionModal: { type: Boolean, required: false },
+    isCompact: { type: Boolean, required: false, default: false }
   },
   data() {
     return {
@@ -91,7 +96,7 @@ export default {
       return /Mac OS/.test(this.userAgent);
     },
     showButtonLabel() {
-      return this.responseData && this.responseData.length > 0 && !this.isUpdateVersionModal;
+      return this.responseData && this.responseData.length > 0 && !this.isUpdateVersionModal && !this.isCompact;
     },
     getWindowsHref() {
       return this.responseData && this.responseData.length > 0 ? this.responseData[0].url : '#';

app/views/my_modules/_task_flow_and_sharing.html.erb

@@ -1,14 +1,13 @@
  <div class="task-sharing-and-flows flex items-center gap-2 pl-3">
     <%= render partial: 'my_modules/status_flow/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
     <%= javascript_include_tag("my_modules/status_flow") %>
-    <% if current_team.shareable_links_enabled? %>
       <div id="share-task-container" data-behaviour="vue">
         <share-task-container
           shareable-link-url="<%= my_module_shareable_link_path(@my_module) %>"
+          :enabled="<%= current_team.shareable_links_enabled? %>"
           :shared="<%= @my_module.shared? %>"
           :can-share="<%= can_share_my_module?(@my_module) %>" />
       </div>
 
       <%= javascript_include_tag 'vue_share_task_container' %>
-    <% end %>
   </div>

app/views/repository_columns/_manage_column_modal_content.html.erb

@@ -98,6 +98,14 @@
                     selected>
               <%= t('libraries.manange_modal_column.select.repository_stock_value') %>
             </option>
+          <% elsif !RepositoryBase.stock_management_enabled? %>
+            <option value="RepositoryStockValue" class="disabled-option"
+                    data-params="<%= {
+                      optionClass: 'disabled-option',
+                      data_e2e: 'e2e-LB-invItems-manageColumnsModal-stock-dec_clm-disabled'
+                    }.to_json %>">
+              <%= t('libraries.manange_modal_column.select.repository_stock_value') %>
+            </option>
           <% end %>
           <option data-delimiter=true></option>
 

app/views/shared/navigation/_left.html.erb

@@ -5,9 +5,9 @@
     </a>
   </div>
   <% left_menu_elements.each_with_index do |item, index| %>
-    <%= link_to item[:url], title: item[:name], class:"sci--layout--menu-item", data: { e2e: "e2e-BT-leftMenu-#{item[:name].downcase}", active: item[:submenu].blank? && item[:active], disabled: current_user.teams.blank?, submenu: item[:submenu].any? } do %>
+    <%= link_to item[:url], title: item[:title] || item[:name], class:"sci--layout--menu-item", data: { e2e: "e2e-BT-leftMenu-#{item[:name].downcase}", active: item[:submenu].blank? && item[:active], disabled: current_user.teams.blank?, submenu: item[:submenu].any? } do %>
       <i class="sn-icon <%= item[:icon] %>"></i>
-      <%= item[:name] %>
+      <%= item[:name].html_safe %>
       <i class="sn-icon <%= item[:active] ? 'sn-icon-down' : 'sn-icon-right' %> show-submenu"></i>
     <% end %>
     <% if item[:submenu].any? %>
@@ -15,7 +15,7 @@
       <% item[:submenu].each do |subitem| %>
         <%= link_to subitem[:url], title: subitem[:name], class:"sci--layout--menu-item", data: { e2e: "e2e-BT-leftMenu-#{item[:name].downcase}-#{subitem[:name].downcase}", active: subitem[:active], disabled: current_user.teams.blank? } do %>
           <i class="sn-icon sn-icon-dot-small"></i>
-          <%= subitem[:name] %>
+          <%= subitem[:name].html_safe %>
         <% end %>
       <% end %>
     </div>

config/locales/en.yml

@@ -1192,6 +1192,7 @@ en:
     shareable_links:
       share: "Share"
       shared: "Shared"
+      disabled: "Sharing is disabled for your team.\nAsk your team admin to enable sharing in the team settings."
     notes:
       title: "Notes"
       no_description: "No task description"
@@ -3570,6 +3571,7 @@ en:
       expand_label: "Expand All"
       collapse_label: "Collapse All"
       new_step: "New step"
+      add_step: "Add step"
       new_step_title: "Create new step"
       subtitle: "Protocol Steps"
       no_steps: "Protocol has no steps."

vendor/assets/stylesheets/fonts/SN-icon-font.svg

@@ -195,4 +195,8 @@
 <glyph unicode="&#xe9a6;" glyph-name="task-mini" data-tags="task-mini" d="M339.2 140.8c-23.894 0-43.725 7.885-59.494 23.654-15.804 15.805-23.706 35.651-23.706 59.546v448c0 23.894 7.902 43.742 23.706 59.546 15.77 15.77 35.601 23.654 59.494 23.654h249.6l179.2-179.2v-352c0-23.895-7.885-43.74-23.654-59.546-15.805-15.77-35.651-23.654-59.546-23.654h-345.6zM563.2 550.4v153.6h-224c-8.534 0-15.991-3.209-22.374-9.626-6.417-6.383-9.626-13.841-9.626-22.374v-448c0-8.535 3.209-15.99 9.626-22.374 6.383-6.415 13.841-9.626 22.374-9.626h345.6c8.535 0 15.99 3.21 22.374 9.626 6.415 6.385 9.626 13.839 9.626 22.374v326.4h-153.6zM652.984 468.48l-171.313-228.413-123.272 123.269 36.204 36.209 81.528-81.531 135.892 181.187 40.96-30.72z" />
 <glyph unicode="&#xe9a7;" glyph-name="flag" data-tags="flag" d="M256 128v661.333h306.871l17.067-85.333h230.729v-341.333h-221.538l-17.067 85.333h-273.395v-320h-42.667zM625.067 405.333h142.933v256h-224l-17.067 85.333h-228.267v-256h309.333l17.067-85.333z" />
 <glyph unicode="&#xe9a8;" glyph-name="undo" data-tags="undo" d="M315.893 192v42.667h309.506c44.25 0 81.954 15.181 113.109 45.538 31.142 30.357 46.72 67.413 46.72 111.177s-15.578 80.687-46.72 110.775c-31.155 30.084-68.86 45.129-113.109 45.129h-330.338l126.517-126.528-30.197-30.199-178.048 178.061 178.048 178.048 30.197-30.197-126.517-126.517h330.338c55.851 0 103.561-19.257 143.134-57.771 39.573-38.507 59.362-85.44 59.362-140.8 0-55.351-19.789-102.421-59.362-141.205s-87.283-58.176-143.134-58.176h-309.506z" />
+<glyph unicode="&#xe9a9;" glyph-name="upgrade" data-tags="upgrade" d="M418.808 393.519l33.233 110.114-87.468 64.162h109.292l33.476 111.261 33.476-111.261h109.295l-87.714-64.162 33.229-110.114-88.286 68.348-88.533-68.348zM294.008 44.309v281.186c-27.023 26.586-48 57.711-62.933 93.376s-22.4 73.818-22.4 114.462c0 83.255 28.964 153.847 86.892 211.775s128.521 86.892 211.775 86.892c83.255 0 153.847-28.964 211.776-86.892s86.891-128.521 86.891-211.775c0-40.644-7.467-78.797-22.4-114.462s-35.913-66.79-62.933-93.376v-281.186l-213.333 63.996-213.333-63.996zM507.341 277.333c71.113 0 131.554 24.887 181.333 74.667s74.667 110.221 74.667 181.333c0 71.111-24.887 131.555-74.667 181.333s-110.221 74.667-181.333 74.667c-71.113 0-131.555-24.889-181.333-74.667s-74.667-110.222-74.667-181.333c0-71.113 24.889-131.554 74.667-181.333s110.22-74.667 181.333-74.667zM336.675 104.781l170.666 47.834 170.667-47.834v184.777c-23.795-17.502-50.227-31.027-79.3-40.572-29.077-9.545-59.529-14.319-91.366-14.319-31.834 0-62.289 4.774-91.364 14.319-29.073 9.545-55.507 23.070-79.302 40.572v-184.777z" />
+<glyph unicode="&#xe9aa;" glyph-name="test-tube" data-tags="test-tube" d="M610.718 768l241.361-241.361-30.17-30.17-30.17 30.17-362.039-362.035c-49.988-49.988-131.033-49.988-181.020 0-49.987 49.984-49.987 131.029 0 181.018l362.038 362.039-30.17 30.17 30.17 30.17zM640.887 677.49l-235.11-235.11h241.36l114.432 114.43-120.683 120.68z" />
+<glyph unicode="&#xe9ab;" glyph-name="storage" data-tags="storage" d="M239.59 106.667c-19.637 0-36.034 6.579-49.19 19.733s-19.733 29.551-19.733 49.19v544.82c0 19.637 6.578 36.034 19.733 49.189s29.552 19.733 49.19 19.733h544.82c19.639 0 36.036-6.578 49.19-19.733s19.733-29.552 19.733-49.189v-544.82c0-19.639-6.579-36.036-19.733-49.19s-29.551-19.733-49.19-19.733h-544.82zM213.333 576.082h597.333v144.329c0 6.563-2.735 12.58-8.205 18.051s-11.486 8.205-18.052 8.205h-544.82c-6.564 0-12.581-2.735-18.051-8.205s-8.205-11.488-8.205-18.051v-144.329zM213.333 362.586h597.333v170.83h-597.333v-170.83zM239.59 149.333h544.82c6.566 0 12.582 2.735 18.052 8.205s8.205 11.486 8.205 18.052v144.329h-597.333v-144.329c0-6.566 2.735-12.582 8.205-18.052s11.488-8.205 18.051-8.205zM426.667 640v55.959h170.667v-55.959h-170.667zM426.667 426.667v55.795h170.667v-55.795h-170.667zM426.667 213.333v55.629h170.667v-55.629h-170.667z" />
+<glyph unicode="&#xe9ac;" glyph-name="outbound" data-tags="outbound" d="M264.043 222.357l-29.376 29.376 430.11 430.933h-396.467v42.667h469.333v-469.333h-42.667v396.469l-430.933-430.112z" />
 </font></defs></svg>

vendor/assets/stylesheets/sn-icon-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'SN-icon-font';
-  src:  url('fonts/SN-icon-font.eot?m1g5fz');
-  src:  url('fonts/SN-icon-font.eot?m1g5fz#iefix') format('embedded-opentype'),
-    url('fonts/SN-icon-font.woff2?m1g5fz') format('woff2'),
-    url('fonts/SN-icon-font.ttf?m1g5fz') format('truetype'),
-    url('fonts/SN-icon-font.woff?m1g5fz') format('woff'),
-    url('fonts/SN-icon-font.svg?m1g5fz#SN-icon-font') format('svg');
+  src:  url('fonts/SN-icon-font.eot?9ywu8k');
+  src:  url('fonts/SN-icon-font.eot?9ywu8k#iefix') format('embedded-opentype'),
+    url('fonts/SN-icon-font.woff2?9ywu8k') format('woff2'),
+    url('fonts/SN-icon-font.ttf?9ywu8k') format('truetype'),
+    url('fonts/SN-icon-font.woff?9ywu8k') format('woff'),
+    url('fonts/SN-icon-font.svg?9ywu8k#SN-icon-font') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -533,3 +533,15 @@
 .sn-icon-undo:before {
   content: "\e9a8";
 }
+.sn-icon-upgrade:before {
+  content: "\e9a9";
+}
+.sn-icon-test-tube:before {
+  content: "\e9aa";
+}
+.sn-icon-storage:before {
+  content: "\e9ab";
+}
+.sn-icon-outbound:before {
+  content: "\e9ac";
+}