fix: show append link even if there are existing links

src/frontend/src/views/CreateJob.vue

@@ -2,7 +2,7 @@
   <PageTitle 
     title="Create Job"
   />
-  <div :class="`row ${isMobile ? '' : 'q-mx-xl'} q-my-lg`">
+  <div :class="`row q-my-lg`">
     <div :class="`${isMobile ? 'col-12' : 'col-5'} q-mr-xl`">
       <fieldset>
         <legend>Basic Info</legend>
@@ -19,7 +19,7 @@
               @filter="getExperiments"
               :rules="[requiredRule]"
               :disable="Object.hasOwn(route.params, 'id') || (!Object.hasOwn(route.params, 'id') && experiments.length === 0)"
-              class="q-mb-sm"
+              class="q-mb-lg"
               :class="{'error': experimentError}"
               @update:model-value="job.entrypoint = ''; job.queue = ''; basicInfoForm.reset()"
             >
@@ -49,8 +49,8 @@
               :options="entrypoints"
               @filter="getEntrypoints"
               :rules="[requiredRule]"
-              class="q-mb-sm"
               :class="{ 'error': entrypointError }"
+              :style="{ 'margin-bottom': entrypointField?.hasError ? '' : '25px' }"
               :disable="!job.experiment || allowableEntrypointIds.length === 0"
               @update:model-value="job.queue = ''; basicInfoForm.reset()"
               ref="entrypointField"
@@ -78,8 +78,23 @@
                     here
                   </a>
                 </span>
+                <span v-else>
+                  If you don't see your desired Entrypoint, 
+                  <a href="#" @click="showAppendEntrypointDialog = true">
+                    register it with the {{ job.experiment.name }} first
+                  </a>
+                </span>
               </template>
             </q-select>
+            <div
+              v-if="entrypointField?.hasError"
+              style="margin: 3px 0 10px 118px; font-size: 11px; color: #818181;"
+            >
+              If you don't see your desired Entrypoint, 
+              <a href="#" @click="showAppendEntrypointDialog = true">
+                register it with the {{ job?.experiment?.name }} first
+              </a>
+            </div>
             <q-select
               outlined
               dense
@@ -90,9 +105,10 @@
               :options="queues"
               @filter="getQueues"
               :rules="[requiredRule]"
-              class="q-mb-sm"
               :class="{ 'error': queueError }"
+              :style="{ 'margin-bottom': queueField?.hasError ? '' : '25px' }"
               :disable="!job.entrypoint || allowableQueueIds.length === 0"
+              ref="queueField"
             >
               <template v-slot:before>
                 <div class="field-label">Queue:</div>
@@ -115,14 +131,29 @@
                     here
                   </a>
                 </span>
+                <span v-else>
+                  If you don't see your desired Queue, 
+                  <a href="#" @click="showAppendQueueDialog = true">
+                    register it with the {{ job.entrypoint.name }} first
+                  </a>
+                </span>
               </template>
             </q-select>
+            <div
+              v-if="queueField?.hasError"
+              style="margin: 3px 0 10px 118px; font-size: 11px; color: #818181;"
+            >
+              If you don't see your desired Queue,
+              <a href="#" @click="showAppendQueueDialog = true">
+                register it with the {{ job?.entrypoint?.name }} first
+              </a>
+            </div>
             <q-input
               outlined 
               v-model="job.timeout" 
               dense
               aria-required="true"
-              class="q-mb-sm"
+              class="q-mb-lg"
               :rules="[timeUnitRule]"
             >
               <template v-slot:before>
@@ -441,11 +472,13 @@
   }) 
 
   watch(() => allowableEntrypointIds.value, (newVal) => {
-    if(newVal.length > 0) entrypointError.value = false
+    if(newVal.length === 0) job.value.entrypoint = ''
+    else entrypointError.value = false
   })
 
   watch(() => allowableQueueIds.value, (newVal) => {
-    if(newVal.length > 0) queueError.value = false
+    if(newVal.length === 0) job.value.queue = ''
+    else queueError.value = false
   })
 
   async function getEntrypoints(val = '', update) {
@@ -592,6 +625,7 @@
   const showAppendQueueDialog = ref(false)
 
   const entrypointField = ref()
+  const queueField = ref()
 
 </script>