Merge pull request #7650 from aignatov-bio/ai-sci-8865-small-fix-for-task-creation

Fix select dropdown changes [SCI-8865]

app/javascript/vue/dashboard/new_task.vue

@@ -17,6 +17,7 @@
         :optionsUrl="projectsUrl"
         :searchable="true"
         :value="selectedProject"
+        :optionRenderer="newProjectRenderer"
         @change="changeProject"
       />
     </div>
@@ -44,6 +45,7 @@
         :disabled="!(selectedProject != null && selectedProject >= 0)"
         :searchable="true"
         :value="selectedExperiment"
+        :optionRenderer="newExperimentRenderer"
         @change="changeExperiment"
       />
     </div>
@@ -157,6 +159,18 @@ export default {
       this.selectedExperiment = value;
       this.newExperimentName = label;
     },
+    newProjectRenderer(option) {
+      if (option[0] > 0) {
+        return option[1];
+      }
+      return this.i18n.t('dashboard.create_task_modal.new_project', { name: option[1] });
+    },
+    newExperimentRenderer(option) {
+      if (option[0] > 0) {
+        return option[1];
+      }
+      return this.i18n.t('dashboard.create_task_modal.new_experiment', { name: option[1] });
+    },
     closeModal() {
       $('#create-task-modal').modal('hide');
       this.taskName = '';

app/javascript/vue/shared/select_dropdown.vue

@@ -273,10 +273,15 @@ export default {
         });
       }
     },
-    urlParams() {
+    urlParams: {
+      handler(oldVal, newVal) {
+        if (!this.compareObjects(oldVal, newVal)) {
           this.fetchOptions();
         }
       },
+      deep: true
+    }
+  },
   methods: {
     renderLabel(option) {
       if (!option) return false;
@@ -384,6 +389,11 @@ export default {
       if (this.$refs.options) {
         this.$refs.options[this.focusedOption]?.scrollIntoView({ block: 'nearest' });
       }
+    },
+    compareObjects(o1, o2) {
+      const normalizedObj1 = Object.fromEntries(Object.entries(o1).sort(([k1], [k2]) => k1.localeCompare(k2)));
+      const normalizedObj2 = Object.fromEntries(Object.entries(o2).sort(([k1], [k2]) => k1.localeCompare(k2)));
+      return JSON.stringify(normalizedObj1) === JSON.stringify(normalizedObj2);
     }
   }
 };

config/locales/dashboard/en.yml

@@ -77,6 +77,8 @@ en:
       filter_create_new: "Create"
       cancel: "Cancel"
       create: "Create"
+      new_project: "New \"%{name}\" Project"
+      new_experiment: "New \"%{name}\" Experiment"
     recent_work:
       title: "Recent work"
       no_results: