Add micro-interactions on the revamped modals [SCI-10265]

app/assets/stylesheets/tailwind/buttons.css

@@ -59,7 +59,9 @@
   }
 
   .btn.btn-primary:hover,
-  .btn.btn-success:hover{
+  .btn.btn-success:hover,
+  .btn.btn-primary:focus,
+  .btn.btn-success:focus{
     @apply bg-sn-blue-hover text-sn-white;
   }
 
@@ -80,7 +82,8 @@
   }
 
   .btn.btn-secondary:hover,
-  .btn.btn-default:hover {
+  .btn.btn-default:hover,
+  .btn.btn-secondary:focus {
     @apply  border-sn-blue-hover;
   }
 
@@ -129,7 +132,8 @@
     @apply bg-sn-delete-red text-sn-white;
   }
 
-  .btn.btn-danger:hover {
+  .btn.btn-danger:hover,
+  .btn.btn-danger:focus {
     @apply bg-sn-delete-red-hover;
   }
 

app/javascript/vue/experiments/modals/duplicate.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -17,11 +18,12 @@
           </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="!targetProject" @click="submit" type="submit">
+            <button class="btn btn-primary" :disabled="!targetProject" type="submit">
               {{ i18n.t('experiments.clone.modal_submit') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/experiments/modals/edit.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -16,6 +17,7 @@
               <input type="text" class="sci-input-field"
                      v-model="name"
                      autofocus
+                     ref="input"
                     :placeholder="i18n.t('experiments.new.name_placeholder')">
             </div>
             <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
@@ -28,11 +30,12 @@
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
+            <button type="button" :disabled="!validName" class="btn btn-primary">
               {{ i18n.t('experiments.edit.modal_create') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/experiments/modals/move.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -18,11 +19,12 @@
           </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="!targetProject" @click="submit" type="submit">
+            <button class="btn btn-primary" :disabled="!targetProject" type="submit">
               {{ i18n.t('experiments.move.modal_submit') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/experiments/modals/new.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,7 +16,7 @@
             <div  class="sci-input-container-v2 mb-4">
               <input type="text" class="sci-input-field"
                      v-model="name"
-                   autofocus
+                     autofocus ref="input"
                     :placeholder="i18n.t('experiments.new.name_placeholder')">
             </div>
             <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
@@ -28,11 +29,12 @@
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
+            <button type="submit" :disabled="!validName" class="btn btn-primary">
               {{ i18n.t('experiments.new.modal_create') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/my_modules/modals/edit.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -14,17 +15,18 @@
             <label class="sci-label">{{ i18n.t('experiments.canvas.edit.modal_edit_module.name') }}</label>
             <div  class="sci-input-container-v2 mb-4">
               <input type="text" class="sci-input-field"
-                   v-model="name"
+                     v-model="name" ref="input"
                      autofocus>
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!nameIsValid" class="btn btn-primary" @click="submit">
+            <button type="submit" :disabled="!nameIsValid" class="btn btn-primary">
               {{ i18n.t('experiments.canvas.edit.modal_edit_module.confirm') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/my_modules/modals/move.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -17,11 +18,12 @@
           </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="!targetExperiment" @click="submit" type="submit">
+            <button class="btn btn-primary" :disabled="!targetExperiment" type="submit">
               {{ i18n.t('experiments.table.modal_move_modules.confirm') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/my_modules/modals/new.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,7 +16,7 @@
             <div class="sci-input-container-v2 mb-4">
               <input type="text" class="sci-input-field"
                      v-model="name"
-                   autofocus
+                     autofocus ref="input"
                     :placeholder="i18n.t('experiments.canvas.new_my_module_modal.name_placeholder')">
             </div>
 
@@ -59,11 +60,12 @@
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
+            <button type="submit" :disabled="!validName" class="btn btn-primary" @click="submit">
               {{ i18n.t('experiments.canvas.new_my_module_modal.create') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/projects/modals/edit.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,7 +16,7 @@
               <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name" class="sci-input-field"
-                     autofocus="true"
+                       autofocus="true" ref="input"
                        :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
               </div>
             </div>
@@ -33,11 +34,12 @@
           </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('projects.index.modal_edit_project.submit') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/projects/modals/edit_folder.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,18 +16,19 @@
               <label class="sci-label">{{ i18n.t("projects.index.modal_edit_folder.folder_name_field") }}</label>
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name"
-                     class="sci-input-field" autofocus="true"
+                       class="sci-input-field" autofocus="true" ref="input"
                        :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
               </div>
             </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('projects.index.modal_edit_folder.submit') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/projects/modals/move.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -17,6 +18,7 @@
                 <input type="text"
                        v-model="query"
                        class="sci-input-field"
+                       ref="input"
                        autofocus="true"
                        :placeholder="i18n.t('projects.index.modal_move_folder.find_folder')" />
                 <i class="sn-icon sn-icon-search"></i>
@@ -34,11 +36,12 @@
           </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('projects.index.modal_move_folder.submit') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/projects/modals/move_tree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pl-6" v-for="object in objects" :key="object.folder.id">
+  <div class="pl-6" v-if="objects.length" v-for="object in objects" :key="object.folder.id">
     <div class="flex items-center">
       <i v-if="object.children.length > 0"
          :class="{'sn-icon-up': opendedFolders[object.folder.id], 'sn-icon-down': !opendedFolders[object.folder.id]}"

app/javascript/vue/projects/modals/new.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -16,6 +17,7 @@
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name"
                        class="sci-input-field"
+                       ref="input"
                        autofocus="true"
                        :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
               </div>
@@ -34,11 +36,12 @@
           </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('projects.index.modal_new_project.create') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>
@@ -66,10 +69,12 @@ export default {
       visible: false,
       defaultRole: null,
       error: null,
+      disableSubmit: false
     };
   },
   methods: {
     submit() {
+      this.disableSubmit = true;
       axios.post(this.createUrl, {
         project: {
           name: this.name,
@@ -83,6 +88,7 @@ export default {
       }).catch((error) => {
         this.error = error.response.data.name;
       });
+      this.disableSubmit = false;
     },
     changeRole(role) {
       this.defaultRole = role;

app/javascript/vue/projects/modals/new_folder.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,18 +16,19 @@
               <label class="sci-label">{{ i18n.t('projects.index.modal_new_project_folder.name') }}</label>
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name"
-                     class="sci-input-field" autofocus="true"
+                       class="sci-input-field" autofocus="true" ref="input"
                        :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
               </div>
             </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('projects.index.modal_new_project.create') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

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

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -16,7 +17,7 @@
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name"
                        class="sci-input-field"
-                     autofocus="true"
+                       autofocus="true" ref="input"
                        :placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
               </div>
             </div>
@@ -34,11 +35,12 @@
           </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('protocols.new_protocol_modal.create_new') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/repositories/modals/duplicate.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,18 +16,19 @@
               <label class="sci-label">{{ i18n.t("repositories.index.modal_copy.name") }}</label>
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name" class="sci-input-field"
-                     autofocus="true"
+                       autofocus="true" ref="input"
                        :placeholder="i18n.t('repositories.index.modal_copy.name_placeholder')" />
               </div>
             </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('repositories.index.modal_copy.copy') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/repositories/modals/edit.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,18 +16,19 @@
               <label class="sci-label">{{ i18n.t("repositories.index.modal_rename.name") }}</label>
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name" class="sci-input-field"
-                     autofocus="true"
+                       autofocus="true" ref="input"
                        :placeholder="i18n.t('repositories.index.modal_rename.name_placeholder')" />
               </div>
             </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('repositories.index.modal_rename.rename') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

app/javascript/vue/repositories/modals/new.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -16,18 +17,19 @@
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name"
                        class="sci-input-field"
-                     autofocus="true"
+                       autofocus="true" ref="input"
                        :placeholder="i18n.t('repositories.index.modal_create.name_placeholder')" />
               </div>
             </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" @click="submit" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ i18n.t('repositories.index.modal_create.submit') }}
             </button>
           </div>
         </div>
+      </form>
     </div>
   </div>
 </template>

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

@@ -8,6 +8,7 @@
         <div class="sci-input-container-v2 left-icon">
           <input type="text" v-model="query" class="sci-input-field"
                   autofocus="true"
+                  ref="input"
                   :placeholder="i18n.t('access_permissions.partials.new_assignments_form.find_people_html')" />
           <i class="sn-icon sn-icon-search"></i>
         </div>
@@ -80,6 +81,9 @@ export default {
   mounted() {
     this.getUnAssignedUsers();
     this.getRoles();
+    this.$nextTick(() => {
+      this.$refs.input?.focus();
+    });
   },
   components: {
     MenuDropdown,

app/javascript/vue/shared/modal_mixin.js

@@ -1,6 +1,7 @@
 export default {
   mounted() {
     $(this.$refs.modal).modal('show');
+    this.$refs.input?.focus();
     $(this.$refs.modal).on('hidden.bs.modal', () => {
       this.$emit('close');
     });