Add data-e2e to task protocol and linked modals [SCI-12154]

app/javascript/vue/protocol/container.vue

@@ -12,7 +12,7 @@
           <a class="task-section-caret" tabindex="0" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
             <i class="sn-icon sn-icon-right"></i>
             <div class="task-section-title truncate">
-              <h2>{{ i18n.t('Protocol') }}</h2>
+              <h2 data-e2e="e2e-TX-task-protocol-sectionTitle">{{ i18n.t('Protocol') }}</h2>
             </div>
           </a>
         </template>
@@ -29,16 +29,30 @@
              :title="i18n.t('protocols.steps.new_step_title')"
              @keyup.enter="addStep(steps.length)"
              @click="addStep(steps.length)"
-             tabindex="0">
+             tabindex="0"
+             data-e2e="e2e-BT-task-protocol-newStep">
               <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
               <span class="tw-hidden xl:inline">{{ i18n.t("protocols.steps.new_step") }}</span>
           </a>
           <template v-if="steps.length > 0">
-            <button :title="i18n.t('protocols.steps.collapse_label')" v-if="!stepCollapsed" class="btn btn-secondary icon-btn xl:!px-4" @click="collapseSteps" tabindex="0">
+            <button
+              :title="i18n.t('protocols.steps.collapse_label')"
+              v-if="!stepCollapsed"
+              class="btn btn-secondary icon-btn xl:!px-4"
+              @click="collapseSteps"
+              tabindex="0"
+              data-e2e="e2e-BT-task-protocol-collapseAll"
+            >
               <i class="sn-icon sn-icon-collapse-all"></i>
               <span class="tw-hidden xl:inline">{{ i18n.t("protocols.steps.collapse_label") }}</span>
             </button>
-            <button v-else  :title="i18n.t('protocols.steps.expand_label')" class="btn btn-secondary icon-btn xl:!px-4" @click="expandSteps" tabindex="0">
+            <button v-else
+              :title="i18n.t('protocols.steps.expand_label')"
+              class="btn btn-secondary icon-btn xl:!px-4"
+              @click="expandSteps"
+              tabindex="0"
+              data-e2e="e2e-BT-task-protocol-expandAll"
+            >
               <i class="sn-icon sn-icon-expand-all"></i>
               <span class="tw-hidden xl:inline">{{ i18n.t("protocols.steps.expand_label") }}</span>
             </button>
@@ -51,7 +65,13 @@
             @protocol:add_protocol_steps="addSteps"
             :canDeleteSteps="steps.length > 0 && urls.delete_steps_url !== null"
           />
-          <button class="btn btn-light icon-btn" data-toggle="modal" data-target="#print-protocol-modal" tabindex="0">
+          <button
+            class="btn btn-light icon-btn"
+            data-toggle="modal"
+            data-target="#print-protocol-modal"
+            tabindex="0"
+            data-e2e="e2e-BT-task-protocol-print"
+          >
             <span class="sn-icon sn-icon-printer" aria-hidden="true"></span>
           </button>
           <a v-if="steps.length > 0 && urls.reorder_steps_url"
@@ -60,13 +80,20 @@
             @click="startStepReorder"
             @keyup.enter="startStepReorder"
             :class="{'disabled': steps.length == 1}"
-            tabindex="0" >
+            tabindex="0"
+            data-e2e="e2e-BT-task-protocol-reorderSteps"
+          >
               <i class="sn-icon sn-icon-sort" aria-hidden="true"></i>
           </a>
         </div>
       </div>
     </div>
-    <div id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
+    <div
+      id="protocol-content"
+      class="protocol-content collapse in"
+      aria-expanded="true"
+      data-e2e="e2e-CO-task-protocol-content"
+    >
       <div class="sci-divider" v-if="!inRepository"></div>
       <div class="mb-4">
         <div class="protocol-name mt-4" v-if="!inRepository">
@@ -78,6 +105,7 @@
             :allowBlank="!inRepository"
             :attributeName="`${i18n.t('Protocol')} ${i18n.t('name')}`"
             @update="updateName"
+            :dataE2e="'task-protocol-title'"
           />
           <span v-else>
             {{ protocol.attributes.name }}

app/javascript/vue/protocol/modals/add_protocol_steps.vue

@@ -1,18 +1,26 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog" role="document" data-e2e="e2e-MD-protocol-addProtocolSteps">
       <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+              data-e2e="e2e-BT-protocol-addProtocolStepsModal-close"
+            >
               <i class="sn-icon sn-icon-close"></i>
             </button>
-            <h4 class="modal-title truncate !block" >
+            <h4 class="modal-title truncate !block" data-e2e="e2e-TX-protocol-addProtocolStepsModal-title">
               {{ i18n.t('protocols.steps.modals.add_protocol_steps.title') }}
             </h4>
           </div>
           <div class="modal-body">
-            <p class="mb-6">{{ i18n.t('protocols.steps.modals.add_protocol_steps.description')}}</p>
+            <p class="mb-6" data-e2e="e2e-TX-protocol-addProtocolStepsModal-description">
+              {{ i18n.t('protocols.steps.modals.add_protocol_steps.description')}}
+            </p>
             <div class="mb-6">
               <label class="sci-label">{{ i18n.t('protocols.steps.modals.add_protocol_steps.protocol_label') }}</label>
               <SelectDropdown
@@ -21,6 +29,7 @@
                 :searchable="true"
                 :value="selectedProtocol"
                 @change="selectedProtocol = $event"
+                :e2eValue="'e2e-DD-protocol-addProtocolStepsModal-selectProtocol'"
               ></SelectDropdown>
             </div>
             <div class="relative">
@@ -36,12 +45,25 @@
                 :searchable="true"
                 :value="selectedSteps"
                 @change="selectedSteps= $event"
+                :e2eValue="'e2e-DD-protocol-addProtocolStepsModal-selectSteps'"
               ></SelectDropdown>
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" :disabled="submitting || !validObject" type="submit">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+              data-e2e="e2e-BT-protocol-addProtocolStepsModal-cancel"
+            >
+              {{ i18n.t('general.cancel') }}
+            </button>
+            <button
+              class="btn btn-primary"
+              :disabled="submitting || !validObject"
+              type="submit"
+              data-e2e="e2e-BT-protocol-addProtocolStepsModal-addSteps"
+            >
               {{ i18n.t('protocols.steps.modals.add_protocol_steps.confirm') }}
             </button>
           </div>

app/javascript/vue/protocol/modals/delete_steps.vue

@@ -1,20 +1,44 @@
 <template>
   <div ref="modal" @keydown.esc="cancel" class="modal delete-steps-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
+      <div class="modal-content" data-e2e="e2e-MD-task-protocol-deleteAllSteps">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
-          <h4 class="modal-title">
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+            data-e2e="e2e-BT-task-protocol-deleteAllStepsModal-close"
+          >
+            <i class="sn-icon sn-icon-close"></i>
+          </button>
+          <h4 class="modal-title" data-e2e="e2e-TX-task-protocol-deleteAllStepsModal-title">
             {{ i18n.t('protocols.steps.modals.delete_steps.title')}}
           </h4>
         </div>
         <div class="modal-body">
-          <p>{{ i18n.t('protocols.steps.modals.delete_steps.description_1')}}</p>
-          <p class="warning">{{ i18n.t('protocols.steps.modals.delete_steps.description_2')}}</p>
+          <p data-e2e="e2e-TX-task-protocol-deleteAllStepsModal-description">
+            {{ i18n.t('protocols.steps.modals.delete_steps.description_1')}}
+          </p>
+          <p class="warning" data-e2e="e2e-TX-task-protocol-deleteAllStepsModal-warning">
+            {{ i18n.t('protocols.steps.modals.delete_steps.description_2')}}
+          </p>
         </div>
         <div class="modal-footer">
-          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-danger" @click="confirm">{{ i18n.t('protocols.steps.modals.delete_steps.confirm')}}</button>
+          <button
+            class="btn btn-secondary"
+            @click="cancel"
+            data-e2e="e2e-BT-task-protocol-deleteAllStepsModal-cancel"
+          >
+            {{ i18n.t('general.cancel') }}
+          </button>
+          <button
+            class="btn btn-danger"
+            @click="confirm"
+            data-e2e="e2e-BT-task-protocol-deleteAllStepsModal-delete"
+          >
+            {{ i18n.t('protocols.steps.modals.delete_steps.confirm')}}
+          </button>
         </div>
       </div>
     </div>

app/javascript/vue/protocol/protocolOptions.vue

@@ -9,6 +9,7 @@
         aria-haspopup="true"
         aria-expanded="true"
         tabindex="0"
+        data-e2e="e2e-DD-task-protocol-actions"
       >
         <span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>
         <span class="sn-icon sn-icon-down"></span>
@@ -22,6 +23,7 @@
             ref="loadProtocol"
             data-action="load-from-repository"
             @click="loadProtocol"
+            data-e2e="e2e-DO-task-protocol-actions-loadFromRepository"
           >
             <span>{{ i18n.t("my_modules.protocol.options_dropdown.load_from_repo") }}</span>
           </a>
@@ -30,6 +32,7 @@
           <a class="!px-3 !py-2.5 hover:!bg-sn-super-light-blue !text-sn-blue"
             data-turbolinks="false"
             @click.prevent="openAddStepsModal()"
+            data-e2e="e2e-DO-task-protocol-actions-addProtocolSteps"
           >
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.add_protocol_steps")
@@ -42,6 +45,7 @@
             data-target="#newProtocolModal"
             v-bind:data-protocol-name="protocol.attributes.name"
             :class="{ disabled: !protocol.attributes.urls.save_to_repo_url }"
+            data-e2e="e2e-DO-task-protocol-actions-saveAsNewTemplate"
           >
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.save_to_repo")
@@ -53,6 +57,7 @@
             data-turbolinks="false"
             :href="protocol.attributes.urls.export_url"
             :class="{ disabled: !protocol.attributes.urls.export_url }"
+            data-e2e="e2e-DO-task-protocol-actions-exportProtocol"
           >
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.export")
@@ -64,6 +69,7 @@
             ref="updateProtocol"
             data-action="update-self"
             @click="updateProtocol"
+            data-e2e="e2e-DO-task-protocol-actions-updateProtocol"
           >
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.update_protocol")
@@ -75,6 +81,7 @@
             ref="unlinkProtocol"
             data-action="unlink"
             @click="unlinkProtocol"
+            data-e2e="e2e-DO-task-protocol-actions-unlinkProtocol"
           >
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.unlink")
@@ -86,6 +93,7 @@
             ref="revertProtocol"
             data-action="revert"
             @click="revertProtocol"
+            data-e2e="e2e-DO-task-protocol-actions-revertProtocol"
           >
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.revert_protocol")
@@ -96,6 +104,7 @@
           <a class="!px-3 !py-2.5 hover:!bg-sn-super-light-blue !text-sn-blue"
             data-turbolinks="false"
             @click.prevent="openStepsDeletingModal()"
+            data-e2e="e2e-DO-task-protocol-actions-deleteAllSteps"
           >
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.delete_steps")

app/views/my_modules/protocols/_confirm_link_update_modal.html.erb

@@ -1,17 +1,42 @@
 <div class="modal" id="confirm-link-update-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-link-update-modal-label">
   <div class="modal-dialog" role="document">
-    <div class="modal-content">
+    <div class="modal-content" data-e2e="e2e-MD-task-protocol-updateRevertFromTemplates">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
-        <h4 class="modal-title" id="confirm-link-update-modal-label"></h4>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+          data-e2e="e2e-BT-task-protocol-updateRevertFromTemplatesModal-close"
+        >
+          <i class="sn-icon sn-icon-close"></i>
+        </button>
+        <h4
+          class="modal-title"
+          id="confirm-link-update-modal-label"
+          data-e2e="e2e-TX-task-protocol-updateRevertFromTemplatesModal-title"
+        ></h4>
       </div>
       <div class="modal-body">
-        <p class="message"></p>
-        <p class="warning"><%= t('my_modules.protocols.confirm_link_update_modal.warning') %></p>
+        <p class="message" data-e2e="e2e-TX-task-protocol-updateRevertFromTemplates-description"></p>
+        <p class="warning" data-e2e="e2e-TX-task-protocol-updateRevertFromTemplates-warning">
+          <%= t('my_modules.protocols.confirm_link_update_modal.warning') %>
+        </p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t("general.cancel") %></button>
-        <button type="button" class="btn btn-success" data-action="submit"></button>
+        <button
+          type="button"
+          class="btn btn-secondary"
+          data-dismiss="modal"
+          data-e2e="e2e-BT-task-protocol-updateRevertFromTemplatesModal-cancel">
+            <%= t("general.cancel") %>
+        </button>
+        <button
+          type="button"
+          class="btn btn-success"
+          data-action="submit"
+          data-e2e="e2e-BT-task-protocol-updateRevertFromTemplatesModal-confirm"
+        ></button>
       </div>
     </div>
   </div>

app/views/my_modules/protocols/_load_from_repository_modal.html.erb

@@ -1,16 +1,42 @@
 <div class="modal" id="load-from-repository-modal" tabindex="-1" role="dialog" aria-labelledby="load-from-repository-modal-label" data-url="<%= load_from_repository_protocol_path(@protocol) %>">
   <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
+    <div class="modal-content" data-e2e="e2e-MD-task-protocol-loadTemplate">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
-        <h2 class="modal-title" id="load-from-repository-modal-label">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+          data-e2e="e2e-BT-task-protocol-loadTemplateModal-close"
+        >
+          <i class="sn-icon sn-icon-close"></i>
+        </button>
+        <h2
+          class="modal-title"
+          id="load-from-repository-modal-label"
+          data-e2e="e2e-TX-task-protocol-loadTemplateModal-title"
+        >
           <%= t("my_modules.protocols.load_from_repository_modal.title") %>
         </h2>
       </div>
       <div class="modal-body"></div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t("general.cancel") %></button>
-        <button type="button" class="btn btn-primary" data-action="submit"><%= t("my_modules.protocols.load_from_repository_modal.load") %></button>
+        <button
+          type="button"
+          class="btn btn-secondary"
+          data-dismiss="modal"
+          data-e2e="e2e-BT-task-protocol-loadTemplateModal-cancel"
+        >
+          <%= t("general.cancel") %>
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          data-action="submit"
+          data-e2e="e2e-BT-task-protocol-loadTemplateModal-load"
+        >
+          <%= t("my_modules.protocols.load_from_repository_modal.load") %>
+        </button>
       </div>
     </div>
   </div>

app/views/my_modules/protocols/_load_from_repository_modal_body.html.erb

@@ -9,7 +9,7 @@
            data-role="datatable"
            data-source="<%= load_from_repository_datatable_protocol_path(@protocol) %>">
       <thead>
-          <tr>
+        <tr>
             <th class="all" id="protocol-name"><%= t("my_modules.protocols.load_from_repository_modal.thead_name") %></th>
             <th class="min-tablet-p" id="protocol-versions"><%= t("my_modules.protocols.load_from_repository_modal.thead_version") %></th>
             <th class="min-tablet-l" id="protocol-id"><%= t("my_modules.protocols.load_from_repository_modal.thead_id") %></th>
@@ -18,7 +18,7 @@
             <th class="min-desktop" id="protocol-published-on"><%= t("my_modules.protocols.load_from_repository_modal.thead_published_on") %></th>
           </tr>
         </thead>
-      <tbody></tbody>
+      <tbody data-e2e="e2e-CO-task-protocol-loadTemplateModal-table"></tbody>
     </table>
   </div>
 </div>

app/views/my_modules/protocols/_protocol_status_bar.html.erb

@@ -1,10 +1,10 @@
 <div class="flex items-center dropdown my-module-protocol-status whitespace-nowrap">
   <% if @protocol.linked? %>
-    <span class="status-label linked">
+    <span class="status-label linked" data-e2e="e2e-TX-task-protocol-statusLinked">
       [<%= t("my_modules.protocols.protocol_status_bar.linked") %>]
     </span>
   <% else %>
-    <span class="status-label">
+    <span class="status-label" data-e2e="e2e-TX-task-protocol-statusUnlinked">
       [<%= t("my_modules.protocols.protocol_status_bar.unlinked") %>]
     </span>
   <% end %>