Merge pull request #7957 from KlemenSciNote/kb_SCI-11055_data-e2e-protocol-templates

Add data-e2e in reorder and manage access dialogs [SCI-11055]

app/javascript/vue/protocol/container.vue

@@ -225,6 +225,7 @@
       :title="i18n.t('protocols.reorder_steps.modal.title')"
       :items="steps"
       :includeNumbers="true"
+      dataE2e="protocol-templateSteps-reorder"
       @reorder="updateStepOrder"
       @close="closeStepReorderModal"
     />

app/javascript/vue/protocol/step.vue

@@ -162,7 +162,7 @@
     <ReorderableItemsModal v-if="reordering"
       :title="i18n.t('protocols.steps.modals.reorder_elements.title', { step_position: step.attributes.position + 1 })"
       :items="reorderableElements"
-      :dataE2e="`e2e-BT-protocol-step${step.id}-reorder`"
+      :dataE2e="`protocol-step${step.id}-reorder`"
       @reorder="updateElementOrder"
       @close="closeReorderModal"
     />

app/javascript/vue/protocols/modals/new.vue

@@ -31,7 +31,12 @@
             </div>
             <div class="mt-6" :class="{'hidden': !visible}">
               <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
-              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
+              <SelectDropdown
+                :options="userRoles"
+                :value="defaultRole"
+                :data-e2e="`e2e-DD-newProtocolModal-defaultUserRole`"
+                @change="changeRole"
+              />
             </div>
           </div>
           <div class="modal-footer">

app/javascript/vue/results/result.vue

@@ -97,6 +97,7 @@
       <ReorderableItemsModal v-if="reordering"
         :title="i18n.t('my_modules.modals.reorder_results.title')"
         :items="reorderableElements"
+        :dataE2e="`task-result${result.id}-reorder`"
         @reorder="updateElementOrder"
         @close="closeReorderModal"
       />

app/javascript/vue/shared/access_modal/assign_flyout.vue

@@ -1,22 +1,27 @@
 <template>
   <div class="mb-6">
-    <div class="sci-label mb-2">
+    <div class="sci-label mb-2" :data-e2e="`e2e-TX-${dataE2e}-grantAccessLabel`">
       {{ i18n.t('access_permissions.partials.new_assignments_form.grant_access') }}
     </div>
     <GeneralDropdown ref="dropdown" @open="$emit('assigningNewUsers', true)" @close="$emit('assigningNewUsers', false)" :fieldOnlyOpen="true" :fixed-width="true">
       <template v-slot:field>
         <div class="sci-input-container-v2 left-icon">
-          <input type="text" v-model="query" class="sci-input-field"
-                  :placeholder="i18n.t('access_permissions.partials.new_assignments_form.find_people_html')" />
-          <i class="sn-icon sn-icon-search"></i>
+          <input
+            type="text"
+            v-model="query"
+            class="sci-input-field"
+            :placeholder="i18n.t('access_permissions.partials.new_assignments_form.find_people_html')"
+            :data-e2e="`e2e-IF-${dataE2e}-searchUsers`"
+          />
+          <i class="sn-icon sn-icon-search" :data-e2e="`e2e-IC-${dataE2e}-searchUsers`"></i>
         </div>
       </template>
       <template v-slot:flyout>
         <div v-if="!visible && roles.length > 0" class="py-2 flex border-solid border-0 border-b border-b-sn-sleepy-grey items-center gap-2">
           <div>
-            <img src="/images/icon/team.png" class="rounded-full w-8 h-8">
+            <img src="/images/icon/team.png" class="rounded-full w-8 h-8" :data-e2e="`e2e-IC-${dataE2e}-grantAccessTeam`">
           </div>
-          <div>
+          <div :data-e2e="`e2e-TX-${dataE2e}-grantAccessTeam`">
             {{ i18n.t('user_assignment.assign_all_team_members') }}
           </div>
           <MenuDropdown
@@ -25,16 +30,23 @@
             btnText="Assign"
             :position="'right'"
             :caret="true"
+            :data-e2e="`e2e-DD-${dataE2e}-grantAccessTeam`"
             @setRole="(...args) => this.assignRole('all', ...args)"
           ></MenuDropdown>
         </div>
         <perfect-scrollbar class="max-h-80 relative">
           <div v-for="user in filteredUsers" :key="user.id" class="py-2 flex items-center w-full">
             <div>
-              <img :src="user.attributes.avatar_url" class="rounded-full w-8 h-8">
+              <img :src="user.attributes.avatar_url" class="rounded-full w-8 h-8" :data-e2e="`e2e-IC-${dataE2e}-${user.attributes.name.replace(/\W/g, '')}-grantAccess`">
             </div>
-            <div class="truncate ml-2" :title="user.attributes.name">{{ user.attributes.name }}</div>
-            <div v-if="user.attributes.current_user" class="text-nowrap ml-1">
+            <div
+              class="truncate ml-2"
+              :title="user.attributes.name"
+              :data-e2e="`e2e-TX-${dataE2e}-${user.attributes.name.replace(/\W/g, '')}-grantAccess-name`"
+            >
+              {{ user.attributes.name }}
+            </div>
+            <div v-if="user.attributes.current_user" class="text-nowrap ml-1" :data-e2e="`e2e-TX-${dataE2e}-${user.attributes.name.replace(/\W/g, '')}-grantAccess-permission`">
               {{ `(${i18n.t('access_permissions.you')})` }}
             </div>
             <MenuDropdown
@@ -43,10 +55,11 @@
               btnText="Assign"
               :position="'right'"
               :caret="true"
+              :data-e2e="`e2e-DD-${dataE2e}-${user.attributes.name.replace(/\W/g, '')}-grantAccess`"
               @setRole="(...args) => this.assignRole(user.id, ...args)"
             ></MenuDropdown>
           </div>
-          <div v-if="filteredUsers.length === 0" class="p-2 flex items-center w-full">
+          <div v-if="filteredUsers.length === 0" class="p-2 flex items-center w-full" :data-e2e="`e2e-TX-${dataE2e.replace(/\W/g, '')}-grantAccess-noResults`">
             {{ i18n.t('access_permissions.no_results') }}
           </div>
         </perfect-scrollbar>
@@ -76,6 +89,10 @@ export default {
     },
     reloadUsers: {
       type: Boolean
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   mounted() {

app/javascript/vue/shared/access_modal/edit.vue

@@ -3,14 +3,14 @@
     <perfect-scrollbar class="h-[50vh] relative">
       <div v-if="roles.length > 0 && visible && default_role" class="p-2 flex items-center gap-2 border-solid border-0 border-b border-b-sn-sleepy-grey">
         <div>
-          <img src="/images/icon/team.png" class="rounded-full w-8 h-8">
+          <img src="/images/icon/team.png" class="rounded-full w-8 h-8" :data-e2e="`e2e-IC-${dataE2e}-everyoneElse-team`">
         </div>
-        <div>
+        <div :data-e2e="`e2e-TX-${dataE2e}-everyoneElse`">
           {{ i18n.t('access_permissions.everyone_else', { team_name: params.object.team }) }}
         </div>
         <GeneralDropdown @open="loadUsers" @close="closeFlyout">
           <template v-slot:field>
-            <i class="sn-icon sn-icon-info"></i>
+            <i class="sn-icon sn-icon-info" :data-e2e="`e2e-IC-${dataE2e}-everyoneElse-info`"></i>
           </template>
           <template v-slot:flyout>
             <perfect-scrollbar class="flex flex-col max-h-96 max-w-[280px] relative pr-4 gap-y-px">
@@ -18,8 +18,12 @@
                   :key="user.attributes.user.id"
                   :title="user.attributes.user.name"
                   class="rounded px-3 py-2.5 flex items-center hover:no-underline leading-5 gap-2">
-                <img :src="user.attributes.user.avatar_url" class="w-6 h-6 rounded-full">
-                <span class="truncate">{{ user.attributes.user.name }}</span>
+                <img
+                  :src="user.attributes.user.avatar_url"
+                  class="w-6 h-6 rounded-full"
+                  :data-e2e="`e2e-IC-${dataE2e}-everyoneElse-${user.attributes.user.name.replace(/\W/g, '')}`"
+                >
+                <span class="truncate" :data-e2e="`e2e-TX-${dataE2e}-everyoneElse-${user.attributes.user.name.replace(/\W/g, '')}`">{{ user.attributes.user.name }}</span>
               </div>
             </perfect-scrollbar>
           </template>
@@ -31,6 +35,7 @@
           :btnText="this.roles.find((role) => role[0] == default_role)[1]"
           :position="'right'"
           :caret="true"
+          :data-e2e="`e2e-DD-${dataE2e}-everyoneElse-roles`"
           @setRole="(...args) => this.changeDefaultRole(...args)"
           @removeRole="() => this.changeDefaultRole()"
         ></MenuDropdown>
@@ -43,18 +48,29 @@
             :key="userAssignment.id"
             class="p-2 flex items-center gap-2">
         <div>
-          <img :src="userAssignment.attributes.user.avatar_url" class="rounded-full w-8 h-8">
+          <img
+            class="rounded-full w-8 h-8"
+            :src="userAssignment.attributes.user.avatar_url"
+            :data-e2e="`e2e-IC-${dataE2e}-${userAssignment.attributes.user.name.replace(/\W/g, '')}`"
+          >
         </div>
         <div class="truncate">
           <div class="flex flex-row gap-2">
             <div class="truncate"
                 :title="userAssignment.attributes.user.name"
+                :data-e2e="`e2e-TX-${dataE2e}-${userAssignment.attributes.user.name.replace(/\W/g, '')}-name`"
             >{{ userAssignment.attributes.user.name }}</div>
-            <div v-if="userAssignment.attributes.current_user" class="text-nowrap">
+            <div
+              v-if="userAssignment.attributes.current_user"
+              class="text-nowrap"
+              :data-e2e="`e2e-TX-${dataE2e}-${userAssignment.attributes.user.name.replace(/\W/g, '')}-currentUserLabel`"
+            >
               {{ `(${i18n.t('access_permissions.you')})` }}
             </div>
           </div>
-          <div class="text-xs text-sn-grey text-nowrap">{{ userAssignment.attributes.inherit_message }}</div>
+          <div class="text-xs text-sn-grey text-nowrap" :data-e2e="`e2e-TX-${dataE2e}-${userAssignment.attributes.user.name.replace(/\W/g, '')}-inheritLabel`">
+            {{ userAssignment.attributes.inherit_message }}
+          </div>
         </div>
         <MenuDropdown
           v-if="!userAssignment.attributes.last_owner && params.object.urls.update_access && !(userAssignment.attributes.current_user && userAssignment.attributes.inherit_message)"
@@ -63,10 +79,11 @@
           :btnText="userAssignment.attributes.user_role.name"
           :position="'right'"
           :caret="true"
+          :data-e2e="`e2e-DD-${dataE2e}-${userAssignment.attributes.user.name.replace(/\W/g, '')}-role`"
           @setRole="(...args) => this.changeRole(userAssignment.attributes.user.id, ...args)"
           @removeRole="() => this.removeRole(userAssignment.attributes.user.id)"
         ></MenuDropdown>
-        <div class="ml-auto btn btn-light pointer-events-none" v-else>
+        <div v-else class="ml-auto btn btn-light pointer-events-none" :data-e2e="`e2e-TX-${dataE2e}-${userAssignment.attributes.user.name.replace(/\W/g, '')}-role`">
           {{ userAssignment.attributes.user_role.name }}
           <div class="h-6 w-6"></div>
         </div>
@@ -78,7 +95,7 @@
 <script>
 /* global HelperModule */
 import MenuDropdown from '../menu_dropdown.vue';
-import GeneralDropdown from '../../shared/general_dropdown.vue';
+import GeneralDropdown from '../general_dropdown.vue';
 import axios from '../../../packs/custom_axios.js';
 
 export default {
@@ -96,6 +113,10 @@ export default {
     },
     reloadUsers: {
       type: Boolean
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   mounted() {

app/javascript/vue/shared/access_modal/modal.vue

@@ -1,13 +1,14 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
+      <div class="modal-content" data-e2e="e2e-MD-manageAccess">
         <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 truncate !block">
+                  aria-label="Close"
+                  data-e2e="e2e-BT-manageAccess-close"><i class="sn-icon sn-icon-close"></i></button>
+          <h4 class="modal-title truncate !block" data-e2e="e2e-TX-manageAccessModal-title">
             {{ i18n.t(`access_permissions.${params.object.type}.modals.edit_modal.title`, {
               resource_name: params.object.name
             }) }}
@@ -20,12 +21,13 @@
             :visible="visible"
             :default_role="default_role"
             :reloadUsers="reloadUnAssignedUsers"
+            :dataE2e="`manageAccessModal-flyout`"
             @modified="modified = true; reloadUsers = true"
             @assigningNewUsers="(v) => { assigningNewUsers = v }"
             @usersReloaded="reloadUnAssignedUsers = false"
             @changeVisibility="changeVisibility"
           />
-          <h5 class="py-2.5">
+          <h5 class="py-2.5" data-e2e="e2e-TX-manageAccessModal-peopleWithAccess">
             {{ i18n.t('access_permissions.partials.new_assignments_form.people_with_access') }}
           </h5>
           <editView
@@ -34,6 +36,7 @@
             :visible="visible"
             :default_role="default_role"
             :reloadUsers="reloadUsers"
+            :dataE2e="`manageAccessModal-usersWithAccess`"
             @modified="modified = true; reloadUnAssignedUsers = true"
             @usersReloaded="reloadUsers = false"
             @changeVisibility="changeVisibility"

app/javascript/vue/shared/reorderable_items_modal.vue

@@ -1,10 +1,12 @@
 <template>
-  <div ref="modal" @keydown.esc="close" class="modal sci-reorderable-items" tabindex="-1" role="dialog">
+  <div ref="modal" @keydown.esc="close" class="modal sci-reorderable-items" tabindex="-1" role="dialog" :data-e2e="`e2e-MD-${dataE2e}`">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button @click="close" type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
-          <h4 class="modal-title">
+          <button @click="close" type="button" class="close" data-dismiss="modal" aria-label="Close" :data-e2e="`e2e-BT-${dataE2e}-close`">
+            <i class="sn-icon sn-icon-close"></i>
+          </button>
+          <h4 class="modal-title" :data-e2e="`e2e-TX-${dataE2e}-title`">
             {{ title }}
           </h4>
         </div>
@@ -20,13 +22,23 @@
             <template #item="{element, index}">
               <div class="step-element-header flex items-center">
                 <div class="step-element-grip step-element-grip--draggable">
-                  <i class="sn-icon sn-icon-drag"></i>
+                  <i class="sn-icon sn-icon-drag" :data-e2e="`e2e-BT-${dataE2e}-element${index + 1}-drag`"></i>
                 </div>
                 <div class="step-element-name text-center flex items-center gap-2">
-                  <strong v-if="includeNumbers" class="step-element-number">{{ index + 1 }}</strong>
-                  <i v-if="element.attributes.icon" class="fas" :class="element.attributes.icon"></i>
-                  <span :title="nameWithFallbacks(element)" v-if="nameWithFallbacks(element)">{{ nameWithFallbacks(element) }}</span>
-                  <span :title="element.attributes.placeholder" v-else class="step-element-name-placeholder">{{ element.attributes.placeholder }}</span>
+                  <strong v-if="includeNumbers" class="step-element-number" :data-e2e="`e2e-TX-${dataE2e}-element${index + 1}-position`">
+                    {{ index + 1 }}
+                  </strong>
+                  <i v-if="element.attributes.icon" class="fas" :class="element.attributes.icon" :data-e2e="`e2e-IC-${dataE2e}-element${index + 1}`"></i>
+                  <span
+                    :title="nameWithFallbacks(element)"
+                    v-if="nameWithFallbacks(element)"
+                    :data-e2e="`e2e-TX-${dataE2e}-element${index + 1}-name`"
+                  >
+                    {{ nameWithFallbacks(element) }}
+                  </span>
+                  <span :title="element.attributes.placeholder" v-else class="step-element-name-placeholder" :data-e2e="`e2e-TX-${dataE2e}-element${index + 1}-name`">
+                    {{ element.attributes.placeholder }}
+                  </span>
                 </div>
               </div>
             </template>
@@ -56,6 +68,10 @@ export default {
     includeNumbers: {
       type: Boolean,
       default: false
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {