Fix dashboard task creation [SCI-8865]

app/javascript/packs/vue/dashboard_new_task.js

@@ -3,7 +3,13 @@ import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import DashboardNewTask from '../../vue/dashboard/new_task.vue';
 import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
-const app = createApp();
+const app = createApp({
+  data() {
+    return {
+      modalKey: 0
+    };
+  }
+});
 app.component('DashboardNewTask', DashboardNewTask);
 app.config.globalProperties.i18n = window.I18n;
 app.use(PerfectScrollbar);

app/javascript/vue/dashboard/new_task.vue

@@ -5,7 +5,7 @@
       <div class="sci-input-container-v2" :class="{
         'error': !validTaskName && taskName.length > 0
       }" >
-        <input type="text" class="sci-input" v-model="taskName" />
+        <input type="text" ref="taskName" class="sci-input" v-model="taskName" :placeholder="i18n.t('dashboard.create_task_modal.task_name_placeholder')" />
       </div>
       <span v-if="!validTaskName && taskName.length > 0" class="sci-error-text">
         {{ i18n.t("dashboard.create_task_modal.task_name_error", { length: minLength }) }}
@@ -18,6 +18,7 @@
         :searchable="true"
         :value="selectedProject"
         :optionRenderer="newProjectRenderer"
+        :placeholder="i18n.t('dashboard.create_task_modal.project_placeholder')"
         @change="changeProject"
       />
     </div>
@@ -30,8 +31,13 @@
         <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
       </div>
       <div class="mt-4" :class="{'hidden': !publicProject}">
-        <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
+        <label class="sci-label">{{ i18n.t("dashboard.create_task_modal.user_role") }}</label>
-        <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
+        <SelectDropdown
+          :options="userRoles"
+          :value="defaultRole"
+          @change="changeRole"
+          :placeholder="i18n.t('dashboard.create_task_modal.user_role_placeholder')"
+        />
       </div>
     </div>
     <div class="mt-4">
@@ -45,6 +51,7 @@
         :disabled="!(selectedProject != null && selectedProject >= 0)"
         :searchable="true"
         :value="selectedExperiment"
+        :placeholder="i18n.t('dashboard.create_task_modal.experiment_placeholder')"
         :optionRenderer="newExperimentRenderer"
         @change="changeExperiment"
       />
@@ -88,6 +95,14 @@ export default {
   },
   created() {
     this.fetchUserRoles();
+    $('#create-task-modal').on('hidden.bs.modal', () => {
+      this.$emit('close');
+    });
+
+    $('#create-task-modal').on('shown.bs.modal', this.focusInput);
+  },
+  unmounted() {
+    $('#create-task-modal').off('shown.bs.modal', this.focusInput);
   },
   props: {
     projectsUrl: {
@@ -163,13 +178,23 @@ export default {
       if (option[0] > 0) {
         return option[1];
       }
-      return this.i18n.t('dashboard.create_task_modal.new_project', { name: option[1] });
+      return `
+        <div class="flex items-center gap-2 truncate">
+          <span class="sn-icon sn-icon-new-task"></span>
+          <span class="truncate">${this.i18n.t('dashboard.create_task_modal.new_project', { name: option[1] })}</span
+        </div>
+      `;
     },
     newExperimentRenderer(option) {
       if (option[0] > 0) {
         return option[1];
       }
-      return this.i18n.t('dashboard.create_task_modal.new_experiment', { name: option[1] });
+      return `
+        <div class="flex items-center gap-2 truncate">
+          <span class="sn-icon sn-icon-new-task"></span>
+          <span class="truncate">${this.i18n.t('dashboard.create_task_modal.new_experiment', { name: option[1] })}</span
+        </div>
+      `;
     },
     closeModal() {
       $('#create-task-modal').modal('hide');
@@ -184,6 +209,9 @@ export default {
         .then((response) => {
           this.userRoles = response.data.data;
         });
+    },
+    focusInput() {
+      this.$refs.taskName.focus();
     }
   }
 };

app/views/dashboards/_create_task_modal.html.erb

@@ -10,6 +10,8 @@
         <div class="modal-body !pb-0">
           <div id="DashboardNewTask">
             <dashboard-new-task
+              :key="modalKey"
+              @close="modalKey += 1"
               projects-url="<%= dashboard_quick_start_project_filter_path  %>"
               experiments-url="<%= dashboard_quick_start_experiment_filter_path %>"
               create-url="<%= dashboard_quick_start_create_task_path %>"

config/locales/dashboard/en.yml

@@ -62,23 +62,26 @@ en:
         title: "Cannot create."
         description: "As a guest in this team you cannot create anything."
     create_task_modal:
-      title: "Create a new Task"
+      title: "Create new task"
       description: "Simply type in the fields below to find or create space for your new task to live in"
       project: "Project"
       task_name: "Task name"
+      task_name_placeholder: "Enter task name"
       task_name_error: "Task name must be at least %{length} characters long."
       project_visibility_label: "Visible to"
       project_visibility_members: "Project members"
       project_visibility_all: "All team members"
       experiment: "Experiment"
-      project_placeholder: "Enter project name (New or Existing)"
+      user_role: "User role"
-      experiment_placeholder: "Enter experiment name (New or Existing)"
+      project_placeholder: "Select or create project"
+      experiment_placeholder: "Select or create experiment"
+      user_role_placeholder: "Select default user role"
       experiment_disabled_placeholder: "Select Project to enable Experiments"
       filter_create_new: "Create"
       cancel: "Cancel"
       create: "Create"
-      new_project: "New \"%{name}\" Project"
+      new_project: "Create \"%{name}\" Project"
-      new_experiment: "New \"%{name}\" Experiment"
+      new_experiment: "Create \"%{name}\" Experiment"
     recent_work:
       title: "Recent work"
       no_results: