fix(ui): amend namespace editor problem (#6883)

* chore(ui): make input number be full width * chore(ui): wrap task object inside a form element * fix(ui): amend namespace editor problem
kestra-io · Jan 22, 2025 · 027cde4 · 027cde4
1 parent 1926ad5
commit 027cde4
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 51 deletions.
diff --git a/ui/src/components/flows/tasks/TaskNumber.vue b/ui/src/components/flows/tasks/TaskNumber.vue
@@ -7,6 +7,7 @@
         :max="schema.maximum"
         :step="schema.step"
         type="number"
+        class="w-100"
     />
 </template>
 

diff --git a/ui/src/components/flows/tasks/TaskObject.vue b/ui/src/components/flows/tasks/TaskObject.vue
@@ -1,55 +1,65 @@
 <template>
-    <template v-if="properties">
-        <el-form-item
-            :key="index"
-            :required="isRequired(key)"
-            v-for="(schema, key, index) in properties"
-        >
-            <template #label>
-                <span v-if="required" class="me-1 text-danger">*</span>
-                <span v-if="getKey(key)" class="label">{{ getKey(key) }}</span>
-                <el-tag disable-transitions size="small" class="ms-2 type-tag">
-                    {{ getType(schema) }}
-                </el-tag>
-                <el-tooltip
-                    v-if="hasTooltip(schema)"
-                    :persistent="false"
-                    :hide-after="0"
-                    effect="light"
-                >
-                    <template #content>
-                        <markdown
-                            class="markdown-tooltip"
-                            :source="helpText(schema)"
-                        />
-                    </template>
-                    <help class="ms-2" />
-                </el-tooltip>
-            </template>
-            <component
-                :is="`task-${getType(schema, key)}`"
-                :model-value="getPropertiesValue(key)"
-                :task="modelValue"
-                @update:model-value="onObjectInput(key, $event)"
-                :root="getKey(key)"
-                :schema="schema"
+    <el-form label-position="top">
+        <template v-if="properties">
+            <el-form-item
+                :key="index"
                 :required="isRequired(key)"
+                v-for="(schema, key, index) in properties"
+            >
+                <template #label>
+                    <span v-if="required" class="me-1 text-danger">*</span>
+                    <span v-if="getKey(key)" class="label">{{
+                        getKey(key)
+                    }}</span>
+                    <el-tag
+                        disable-transitions
+                        size="small"
+                        class="ms-2 type-tag"
+                    >
+                        {{ getType(schema) }}
+                    </el-tag>
+                    <el-tooltip
+                        v-if="hasTooltip(schema)"
+                        :persistent="false"
+                        :hide-after="0"
+                        effect="light"
+                    >
+                        <template #content>
+                            <markdown
+                                class="markdown-tooltip"
+                                :source="helpText(schema)"
+                            />
+                        </template>
+                        <help class="ms-2" />
+                    </el-tooltip>
+                </template>
+                <component
+                    :is="`task-${getType(schema, key)}`"
+                    :model-value="getPropertiesValue(key)"
+                    :task="modelValue"
+                    @update:model-value="onObjectInput(key, $event)"
+                    :root="getKey(key)"
+                    :schema="schema"
+                    :required="isRequired(key)"
+                    :definitions="definitions"
+                    class="mt-1 mb-2 wrapper"
+                />
+            </el-form-item>
+        </template>
+        <template v-else>
+            <task-dict
+                :model-value="modelValue"
+                :task="task"
+                @update:model-value="
+                    (value) => $emit('update:modelValue', value)
+                "
+                :root="root"
+                :schema="schema"
+                :required="required"
                 :definitions="definitions"
-                class="mt-1 mb-2 wrapper"
             />
-        </el-form-item>
-    </template>
-    <template v-else>
-        <task-dict
-            :model-value="modelValue"
-            :task="task"
-            @update:model-value="(value) => $emit('update:modelValue', value)"
-            :root="root"
-            :schema="schema"
-            :required="required"
-            :definitions="definitions"
-        />
-    </template>
+        </template>
+    </el-form>
 </template>
 
 <script>

diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
@@ -69,6 +69,7 @@
 
         <div class="d-inline-flex align-items-center">
             <el-switch
+                v-if="!isNamespace"
                 v-model="editorViewType"
                 active-value="NO_CODE"
                 inactive-value="YAML"
@@ -659,7 +660,7 @@
     };
 
     onMounted(async () => {
-        editorViewType.value = localStorage.getItem(storageKeys.EDITOR_VIEW_TYPE) || "YAML";
+        editorViewType.value = props.isNamespace ? "YAML" : (localStorage.getItem(storageKeys.EDITOR_VIEW_TYPE) || "YAML");
 
         if(!props.isNamespace) {
             initViewType()

diff --git a/ui/src/components/namespace/Namespace.vue b/ui/src/components/namespace/Namespace.vue
@@ -121,9 +121,9 @@
                         }
                     },
                     {
-                        name: "editor",
+                        name: "edit",
                         component: EditorView,
-                        title: this.$t("editor"),
+                        title: this.$t("edit"),
                         props: {
                             tab: "edit",
                             isNamespace: true,