From aa22f5041c97445bd5acf3df5942b449cc32ff76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Fri, 24 Jan 2025 16:48:45 +0100
Subject: [PATCH] feat(ui): multiple improvements of no code editor (#6923)

* chore(ui): make sure to check if property exists

* chore(ui): prevent auto-focus of editor fields

* chore(ui): re-order the list of visible fields in the no code editor

* chore(ui): make concurrency field work in the main form

* chore(ui): initial work on passing component panel to store
---
 ui/src/components/code/NoCode.vue             |  11 +-
 .../code/components/collapse/Collapse.vue     |   2 +-
 ui/src/components/code/segments/Editor.vue    |  56 ++++++--
 ui/src/components/code/segments/Task.vue      |   1 +
 ui/src/components/code/utils/types.ts         |  13 +-
 .../components/flows/tasks/OneOfContent.vue   |   2 +-
 ui/src/components/flows/tasks/TaskBasic.vue   | 120 +++++++++++-------
 ui/src/components/inputs/Editor.vue           |  13 +-
 ui/src/stores/code.ts                         |  10 +-
 9 files changed, 144 insertions(+), 84 deletions(-)

diff --git a/ui/src/components/code/NoCode.vue b/ui/src/components/code/NoCode.vue
index 4786b446dce..b46542ee8d3 100644
--- a/ui/src/components/code/NoCode.vue
+++ b/ui/src/components/code/NoCode.vue
@@ -11,7 +11,6 @@
             "
             :flow
             :metadata
-            :schemas
             @update-metadata="(k, v) => emits('updateMetadata', {[k]: v})"
             @update-task="(yaml) => emits('updateTask', yaml)"
         />
@@ -19,9 +18,7 @@
 </template>
 
 <script setup lang="ts">
-    import {onBeforeMount, computed, ref} from "vue";
-
-    import {Schemas} from "./utils/types";
+    import {onBeforeMount, computed} from "vue";
 
     import YamlUtils from "../../utils/yamlUtils";
 
@@ -35,20 +32,14 @@
 
     const metadata = computed(() => YamlUtils.getMetadata(props.flow));
 
-    import {useStore} from "vuex";
-    const store = useStore();
-
     import {useRouter, useRoute} from "vue-router";
     const router = useRouter();
     const route = useRoute();
 
-    const schemas = ref<Schemas>({});
     onBeforeMount(async () => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const {section, identifier, type, ...rest} = route.query;
         router.replace({query: {...rest}});
-
-        schemas.value = await store.dispatch("plugin/loadSchemaType");
     });
 </script>
 
diff --git a/ui/src/components/code/components/collapse/Collapse.vue b/ui/src/components/code/components/collapse/Collapse.vue
index 51cec9af467..e00cbae8deb 100644
--- a/ui/src/components/code/components/collapse/Collapse.vue
+++ b/ui/src/components/code/components/collapse/Collapse.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-collapse v-model="expanded" class="mt-3 collapse">
+    <el-collapse v-model="expanded" class="collapse">
         <el-collapse-item
             v-for="(item, index) in props.items"
             :key="index"
diff --git a/ui/src/components/code/segments/Editor.vue b/ui/src/components/code/segments/Editor.vue
index 537fe7a35f3..9558858bad0 100644
--- a/ui/src/components/code/segments/Editor.vue
+++ b/ui/src/components/code/segments/Editor.vue
@@ -2,7 +2,7 @@
     <div class="p-4">
         <template v-if="!route.query.section && !route.query.identifier">
             <component
-                v-for="([k, v], index) in Object.entries(fields)"
+                v-for="([k, v], index) in Object.entries(getFields())"
                 :key="index"
                 :is="v.component"
                 v-model="v.value"
@@ -10,7 +10,7 @@
                 @update:model-value="emits('updateMetadata', k, v.value)"
             />
 
-            <hr class="m-0 mt-3">
+            <hr class="my-4">
 
             <Collapse
                 :items="sections"
@@ -18,6 +18,17 @@
                 :flow
                 @remove="(yaml) => emits('updateTask', yaml)"
             />
+
+            <hr class="my-4">
+
+            <component
+                v-for="([k, v], index) in Object.entries(getFields(false))"
+                :key="index"
+                :is="v.component"
+                v-model="v.value"
+                v-bind="trimmed(v)"
+                @update:model-value="emits('updateMetadata', k, v.value)"
+            />
         </template>
 
         <Task
@@ -41,11 +52,10 @@
 
     import Editor from "../../inputs/Editor.vue";
     import MetadataInputs from "../../flows/MetadataInputs.vue";
+    import TaskBasic from "../../flows/tasks/TaskBasic.vue";
 
     import Task from "./Task.vue";
 
-    // const CONCURRENCY = "io.kestra.core.models.flows.Concurrency";
-
     import {useRoute} from "vue-router";
     const route = useRoute();
 
@@ -67,7 +77,6 @@
         creation: {type: Boolean, default: false},
         flow: {type: String, required: true},
         metadata: {type: Object, required: true},
-        schemas: {type: Object, required: true},
     });
 
     const trimmed = (field: Field) => {
@@ -104,6 +113,7 @@
             navbar: false,
             input: true,
             lang: "yaml",
+            shouldFocus: false,
             style: {height: "100px"},
         },
         labels: {
@@ -125,6 +135,7 @@
             navbar: false,
             input: true,
             lang: "yaml",
+            shouldFocus: false,
             style: {height: "100px"},
         },
         variables: {
@@ -133,13 +144,26 @@
             label: t("no_code.fields.general.variables"),
             property: t("no_code.labels.variable"),
         },
-        // concurrency: {
-        //     component: shallowRef(InputSwitch), // TODO: To improve slot content
-        //     value: props.metadata.concurrency,
-        //     label: t("no_code.fields.general.concurrency"),
-        //     schema: props.schemas?.definitions?.[CONCURRENCY] ?? {},
-        //     root: "concurrency",
-        // },
+        concurrency: {
+            component: shallowRef(TaskBasic),
+            value: props.metadata.concurrency,
+            label: t("no_code.fields.general.concurrency"),
+            // TODO: Pass schema for concurrency dynamically
+            schema: {
+                type: "object",
+                properties: {
+                    behavior: {
+                        type: "string",
+                        enum: ["QUEUE", "CANCEL", "FAIL"],
+                        default: "QUEUE",
+                        markdownDescription: "Default value is : `QUEUE`",
+                    },
+                    limit: {type: "integer", exclusiveMinimum: 0},
+                },
+                required: ["limit"],
+            },
+            root: "concurrency",
+        },
         pluginDefaults: {
             component: shallowRef(Editor),
             value: props.metadata.pluginDefaults,
@@ -147,6 +171,7 @@
             navbar: false,
             input: true,
             lang: "yaml",
+            shouldFocus: false,
             style: {height: "100px"},
         },
         disabled: {
@@ -156,6 +181,13 @@
         },
     });
 
+    const getFields = (main = true) => {
+        const {id, namespace, description, inputs, ...rest} = fields.value;
+
+        if (main) return {id, namespace, description, inputs};
+        else return rest;
+    };
+
     import YamlUtils from "../../../utils/yamlUtils";
     const getSectionTitle = (label: string, elements = []) => {
         const title = t(`no_code.sections.${label}`);
diff --git a/ui/src/components/code/segments/Task.vue b/ui/src/components/code/segments/Task.vue
index 8a465a291e7..336305831a7 100644
--- a/ui/src/components/code/segments/Task.vue
+++ b/ui/src/components/code/segments/Task.vue
@@ -5,6 +5,7 @@
         :section
         @update:model-value="validateTask"
     />
+    
     <component
         v-else
         :is="lastBreadcumb.component.type"
diff --git a/ui/src/components/code/utils/types.ts b/ui/src/components/code/utils/types.ts
index d0212763a1a..acddcbf3a25 100644
--- a/ui/src/components/code/utils/types.ts
+++ b/ui/src/components/code/utils/types.ts
@@ -35,6 +35,7 @@ type EditorField = Field & {
     navbar: boolean;
     input: boolean;
     lang: string;
+    shouldFocus: boolean;
     style: {
         height: string;
     };
@@ -49,11 +50,16 @@ export type Fields = {
     inputs: InputField;
     outputs: EditorField;
     variables: PairField;
-    concurrency?: ConcurrencyField; // TODO: Make it not optional
+    concurrency: ConcurrencyField;
     pluginDefaults: EditorField;
     disabled: Field;
 };
 
+export type CollapseItem = {
+    title: string;
+    elements?: Record<string, any>[];
+};
+
 export type Breadcrumb = {
     label: string;
     to: {
@@ -63,7 +69,4 @@ export type Breadcrumb = {
     component?: ReturnType<typeof defineComponent>;
 };
 
-export type CollapseItem = {
-    title: string;
-    elements?: Record<string, any>[];
-};
+export type Component = ReturnType<typeof defineComponent>;
diff --git a/ui/src/components/flows/tasks/OneOfContent.vue b/ui/src/components/flows/tasks/OneOfContent.vue
index 129f3190494..b5645cf5d4d 100644
--- a/ui/src/components/flows/tasks/OneOfContent.vue
+++ b/ui/src/components/flows/tasks/OneOfContent.vue
@@ -40,7 +40,7 @@
             const schema = this.schemaOptions.find((item) =>
                 typeof this.modelValue === "string"
                     ? item.id === "string"
-                    : item.id === this.modelValue.type,
+                    : item.id === this.modelValue?.type,
             );
 
             this.onSelect(schema?.value);
diff --git a/ui/src/components/flows/tasks/TaskBasic.vue b/ui/src/components/flows/tasks/TaskBasic.vue
index a31b1016bcc..d63dff25ef1 100644
--- a/ui/src/components/flows/tasks/TaskBasic.vue
+++ b/ui/src/components/flows/tasks/TaskBasic.vue
@@ -1,38 +1,54 @@
 <template>
-    <el-form-item
-        :key="index"
-        :required="isRequired(key)"
-        v-for="(schema, key, index) in properties"
-    >
-        <template #label>
-            <span class="d-flex flex-grow-1">
-                <span class="me-auto">
-                    <code>{{ getKey(key) }}</code>&nbsp;
-                    <el-tooltip v-if="hasTooltip(schema)" :persistent="false" transition="" :hide-after="0" effect="light">
-                        <template #content>
-                            <markdown class="markdown-tooltip" :source="helpText(schema)" />
-                        </template>
-                        <help />
-                    </el-tooltip>
-                </span>
-                <span>
-                    <el-tag disable-transitions type="info" size="small">
-                        {{ getType(schema, key) }}
-                    </el-tag>
-                </span>
-            </span>
-        </template>
-        <component
-            :is="`task-${getType(schema)}`"
-            :model-value="getPropertiesValue(key)"
-            @update:model-value="onObjectInput(key, $event)"
-            :root="getKey(key)"
-            :schema="schema"
+    <el-form label-position="top">
+        <el-form-item
+            :key="index"
             :required="isRequired(key)"
-            :definitions="definitions"
-            :min="getExclusiveMinimum(key)"
-        />
-    </el-form-item>
+            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)
+                            .split(".")
+                            .map(
+                                (word) =>
+                                    word.charAt(0).toUpperCase() +
+                                    word.slice(1),
+                            )
+                            .join(" ")
+                    }}
+                </span>
+                <el-tag disable-transitions size="small" class="ms-2 type-tag">
+                    {{ getType(schema, key) }}
+                </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)}`"
+                :model-value="getPropertiesValue(key)"
+                @update:model-value="onObjectInput(key, $event)"
+                :root="getKey(key)"
+                :schema="schema"
+                :required="isRequired(key)"
+                :definitions="definitions"
+                :min="getExclusiveMinimum(key)"
+            />
+        </el-form-item>
+    </el-form>
 </template>
 
 <script>
@@ -57,11 +73,11 @@
         computed: {
             properties() {
                 if (this.schema) {
-                    const properties = this.schema.properties
-                    return this.sortProperties(properties)
+                    const properties = this.schema.properties;
+                    return this.sortProperties(properties);
                 }
                 return undefined;
-            }
+            },
         },
         methods: {
             getPropertiesValue(properties) {
@@ -74,8 +90,7 @@
                     return properties;
                 }
 
-                return Object
-                    .entries(properties)
+                return Object.entries(properties)
                     .sort((a, b) => {
                         if (a[0] === "id") {
                             return -1;
@@ -83,8 +98,12 @@
                             return 1;
                         }
 
-                        const aRequired = (this.schema.required || []).includes(a[0]);
-                        const bRequired = (this.schema.required || []).includes(b[0]);
+                        const aRequired = (this.schema.required || []).includes(
+                            a[0],
+                        );
+                        const bRequired = (this.schema.required || []).includes(
+                            b[0],
+                        );
 
                         if (aRequired && !bRequired) {
                             return -1;
@@ -105,7 +124,7 @@
                     })
                     .reduce((result, entry) => {
                         result[entry[0]] = entry[1];
-                        return result
+                        return result;
                     }, {});
             },
             onObjectInput(properties, value) {
@@ -125,18 +144,21 @@
             },
             getExclusiveMinimum(key) {
                 const property = this.schema.properties[key];
-                const propertyHasExclusiveMinimum = property && property.exclusiveMinimum
-                return propertyHasExclusiveMinimum ? property.exclusiveMinimum : null;
-            }
+                const propertyHasExclusiveMinimum =
+                    property && property.exclusiveMinimum;
+                return propertyHasExclusiveMinimum
+                    ? property.exclusiveMinimum
+                    : null;
+            },
         },
     };
 </script>
 
 <style lang="scss" scoped>
-    .el-form-item.is-required:not(.is-no-asterisk).asterisk-left {
-        > :deep(.el-form-item__label) {
-            display: flex;
-        }
-    }
+@import "../../code/styles/code.scss";
 
+.type-tag {
+    background-color: var(--ks-tag-background);
+    color: var(--ks-tag-content);
+}
 </style>
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
index 1f8b74cbd71..c93452ba6c7 100644
--- a/ui/src/components/inputs/Editor.vue
+++ b/ui/src/components/inputs/Editor.vue
@@ -100,6 +100,7 @@
             minimap: {type: Boolean, default: false},
             creating: {type: Boolean, default: false},
             label: {type: String, default: undefined},
+            shouldFocus: {type: Boolean, default: true},
         },
         components: {
             MonacoEditor,
@@ -263,11 +264,13 @@
                         this.focus = false;
                     });
 
-                    this.editor.onDidFocusEditorText?.(() => {
-                        this.focus = true;
-                    });
-
-                    this.$refs.monacoEditor.focus();
+                    if(this.shouldFocus){                
+                        this.editor.onDidFocusEditorText?.(() => {
+                            this.focus = true;
+                        });
+                        
+                        this.$refs.monacoEditor.focus();
+                    }
                 }
 
                 if (!this.readOnly) {
diff --git a/ui/src/stores/code.ts b/ui/src/stores/code.ts
index dc55d97a579..ecbc0c8a489 100644
--- a/ui/src/stores/code.ts
+++ b/ui/src/stores/code.ts
@@ -1,13 +1,15 @@
-import {Breadcrumb} from "../components/code/utils/types";
+import {Breadcrumb, Component} from "../components/code/utils/types";
 
 interface State {
     breadcrumbs: Breadcrumb[];
+    panel: Component;
 }
 
 export default {
     namespaced: true,
     state: (): State => ({
         breadcrumbs: [],
+        panel: undefined,
     }),
     mutations: {
         addBreadcrumbs(
@@ -32,5 +34,11 @@ export default {
         clearBreadcrumbs(state: State) {
             state.breadcrumbs = [];
         },
+        setPanel(state: State, panel: Component) {
+            state.panel = panel;
+        },
+        unsetPanel(state: State) {
+            state.panel = undefined;
+        },
     },
 };