feat(ui): multiple improvements of no code editor (#6991)

* chore(ui): limit the width of no code editor to a third of the full width * feat(ui): show only required task properties on top level, else under collapse
kestra-io · Jan 28, 2025 · 3c478c7 · 3c478c7
1 parent 41e4abb
commit 3c478c7
Show file tree

Hide file tree

Showing 16 changed files with 128 additions and 50 deletions.
diff --git a/ui/src/components/code/components/collapse/Collapse.vue b/ui/src/components/code/components/collapse/Collapse.vue
@@ -20,8 +20,6 @@
                     @remove-element="removeElement(item.title, elementIndex)"
                 />
             </template>
-
-            <slot name="content" />
         </el-collapse-item>
     </el-collapse>
 </template>
@@ -73,29 +71,4 @@
 
 <style scoped lang="scss">
 @import "../../styles/code.scss";
-
-.collapse {
-    & * {
-        font-size: $code-font-sm;
-    }
-
-    :deep(*) {
-        --el-collapse-header-bg-color: initial;
-        --el-collapse-header-text-color: #{$code-gray-700};
-        --el-collapse-content-bg-color: initial;
-
-        .el-collapse-item__header,
-        .el-collapse-item__content {
-            padding: 0.5rem 0;
-        }
-
-        .el-collapse-item__header {
-            justify-content: space-between;
-
-            &.is-active {
-                color: $code-primary;
-            }
-        }
-    }
-}
 </style>
diff --git a/ui/src/components/code/styles/code.scss b/ui/src/components/code/styles/code.scss
@@ -23,6 +23,31 @@ $code-font-sm: var(--el-font-size-small);
     }
 }
 
+.collapse {
+    & * {
+        font-size: $code-font-sm;
+    }
+
+    :deep(*) {
+        --el-collapse-header-bg-color: initial;
+        --el-collapse-header-text-color: #{$code-gray-700};
+        --el-collapse-content-bg-color: initial;
+
+        .el-collapse-item__header,
+        .el-collapse-item__content {
+            padding: 0.5rem 0;
+        }
+
+        .el-collapse-item__header {
+            justify-content: space-between;
+
+            &.is-active {
+                color: $code-primary;
+            }
+        }
+    }
+}
+
 .label {
     color: $code-gray-700;
     font-size: $code-font-sm;

diff --git a/ui/src/components/flows/tasks/TaskObject.vue b/ui/src/components/flows/tasks/TaskObject.vue
@@ -1,13 +1,13 @@
 <template>
     <el-form label-position="top">
-        <template v-if="properties">
+        <template v-if="properties(true)">
+            <!-- Required properties -->
             <el-form-item
                 :key="index"
                 :required="isRequired(key)"
-                v-for="(schema, key, index) in properties"
+                v-for="(schema, key, index) in properties(true)"
             >
                 <template #label>
-                    <span v-if="required" class="me-1 text-danger">*</span>
                     <span v-if="getKey(key)" class="label">
                         {{ getKey(key) }}
                     </span>
@@ -45,7 +45,57 @@
                     class="mt-1 mb-2 wrapper"
                 />
             </el-form-item>
+
+            <!-- Non required properties shown collapsed-->
+            <el-collapse class="collapse">
+                <el-collapse-item :title="$t('no_code.sections.advanced')">
+                    <el-form-item
+                        :key="index"
+                        :required="isRequired(key)"
+                        v-for="(schema, key, index) in properties(false)"
+                    >
+                        <template #label>
+                            <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>
+                </el-collapse-item>
+            </el-collapse>
         </template>
+
         <template v-else>
             <task-dict
                 :model-value="modelValue"
@@ -83,17 +133,27 @@
             Markdown,
         },
         emits: ["update:modelValue"],
-        computed: {
-            properties() {
+        methods: {
+            properties(requiredFields) {
                 if (this.schema) {
-                    const properties = this.schema.properties;
+                    const properties = Object.entries(
+                        this.schema.properties,
+                    ).reduce((acc, [key, value]) => {
+                        if (
+                            requiredFields
+                                ? this.isRequired(key)
+                                : !this.isRequired(key)
+                        ) {
+                            acc[key] = value;
+                        }
+                        return acc;
+                    }, {});
+
                     return this.sortProperties(properties);
                 }
 
                 return undefined;
             },
-        },
-        methods: {
             getPropertiesValue(properties) {
                 return this.modelValue && this.modelValue[properties]
                     ? this.modelValue[properties]

diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
@@ -497,6 +497,10 @@
     const editorViewType = ref("YAML");
     const changeEditorViewType = (value) => {
         localStorage.setItem(storageKeys.EDITOR_VIEW_TYPE, value);
+
+        if(value === "NO_CODE") {
+            editorWidth.value = editorWidth.value > 33.3 ? 33.3 : editorWidth.value;
+        }
     }
 
     const handleTopologyEditClick = (params) => {
@@ -1202,10 +1206,13 @@
         const {offsetWidth, parentNode} = document.getElementById("editorWrapper");
         let blockWidthPercent = (offsetWidth / parentNode.offsetWidth) * 100;
 
+        const isNoCode = localStorage.getItem(storageKeys.EDITOR_VIEW_TYPE) === "NO_CODE";
+        const maxWidth = isNoCode ? 33.3 : 75;
+
         document.onmousemove = function onMouseMove(e) {
             let percent = blockWidthPercent + ((e.clientX - dragX) / parentNode.offsetWidth) * 100;
 
-            editorWidth.value = percent > 75 ? 75 : percent < 25 ? 25 : percent;
+            editorWidth.value = percent > maxWidth ? maxWidth : percent < 25 ? 25 : percent;
             validationDomElement.value.onResize((percent * parentNode.offsetWidth) / 100);
         };
 

diff --git a/ui/src/translations/de.json b/ui/src/translations/de.json
@@ -1066,7 +1066,8 @@
         "triggers": "Trigger",
         "main": "Haupteigenschaften",
         "error_handlers": "Fehlerbehandler",
-        "tasks": "Aufgaben"
+        "tasks": "Aufgaben",
+        "advanced": "Erweiterte Konfiguration"
       },
       "creation": {
         "select": "Wählen Sie einen {section} aus",

diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -719,7 +719,8 @@
       },
       "tutorial": {
         "title": "Tutorial",
-        "text": " * <a href=\"https://kestra.io/tutorial-videos/all\" target=\"_blank\">Video Tutorials</a> \n* <a href=\"https://kestra.io/docs\" target=\"_blank\">Documentation</a> \n* <a href=\"https://kestra.io/blueprints\" target=\"_blank\">Blueprints</a>"      },
+        "text": " * <a href=\"https://kestra.io/tutorial-videos/all\" target=\"_blank\">Video Tutorials</a> \n* <a href=\"https://kestra.io/docs\" target=\"_blank\">Documentation</a> \n* <a href=\"https://kestra.io/blueprints\" target=\"_blank\">Blueprints</a>"
+      },
       "help": {
         "title": "Need help?",
         "text": "Ask any question in our Slack community. If you are stuck, we are help to help you. ✋"
@@ -961,8 +962,8 @@
       }
     },
     "concurrency-view": {
-      "title_no_executions":"No ongoing Executions for this Flow.",
-      "desc_no_executions":"Read more about <strong><a href=\"https://kestra.io/docs/workflow-components/execution\" target=\"_blank\">Executions</a></strong> in our documentation.",
+      "title_no_executions": "No ongoing Executions for this Flow.",
+      "desc_no_executions": "Read more about <strong><a href=\"https://kestra.io/docs/workflow-components/execution\" target=\"_blank\">Executions</a></strong> in our documentation.",
       "title_no_limit": "No limits are set for this Flow.",
       "desc_no_limit": "Read more about <strong><a href=\"https://kestra.io/docs/workflow-components/concurrency\" target=\"_blank\">Concurrency Limits</a></strong> in our documentation."
     },
@@ -1072,6 +1073,7 @@
       "sections": {
         "main": "Main properties",
         "general": "General properties",
+        "advanced": "Advanced configuration",
         "tasks": "Tasks",
         "triggers": "Triggers",
         "error_handlers": "Error Handlers"

diff --git a/ui/src/translations/es.json b/ui/src/translations/es.json
@@ -1066,7 +1066,8 @@
         "triggers": "Disparadores",
         "main": "Propiedades principales",
         "error_handlers": "Manejadores de Errores",
-        "tasks": "Tareas"
+        "tasks": "Tareas",
+        "advanced": "Configuración avanzada"
       },
       "creation": {
         "select": "Seleccione una {section}",

diff --git a/ui/src/translations/fr.json b/ui/src/translations/fr.json
@@ -1066,7 +1066,8 @@
         "triggers": "Déclencheurs",
         "main": "Principales propriétés",
         "error_handlers": "Gestionnaires d'erreurs",
-        "tasks": "Tâches"
+        "tasks": "Tâches",
+        "advanced": "Configuration avancée"
       },
       "creation": {
         "select": "Sélectionnez une {section}",

diff --git a/ui/src/translations/hi.json b/ui/src/translations/hi.json
@@ -1066,7 +1066,8 @@
         "triggers": "ट्रिगर्स",
         "main": "मुख्य गुणधर्म",
         "error_handlers": "त्रुटि हैंडलर",
-        "tasks": "कार्य"
+        "tasks": "कार्य",
+        "advanced": "उन्नत कॉन्फ़िगरेशन"
       },
       "creation": {
         "select": "किसी {section} का चयन करें",

diff --git a/ui/src/translations/it.json b/ui/src/translations/it.json
@@ -1066,7 +1066,8 @@
         "triggers": "Trigger",
         "main": "Proprietà principali",
         "error_handlers": "Gestori degli Errori",
-        "tasks": "Attività"
+        "tasks": "Attività",
+        "advanced": "Configurazione avanzata"
       },
       "creation": {
         "select": "Seleziona una {section}",

diff --git a/ui/src/translations/ja.json b/ui/src/translations/ja.json
@@ -1066,7 +1066,8 @@
         "triggers": "トリガー",
         "main": "メインプロパティ",
         "error_handlers": "エラーハンドラー",
-        "tasks": "タスク"
+        "tasks": "タスク",
+        "advanced": "高度な設定"
       },
       "creation": {
         "select": "{section}を選択してください",

diff --git a/ui/src/translations/ko.json b/ui/src/translations/ko.json
@@ -1066,7 +1066,8 @@
         "triggers": "트리거",
         "main": "주요 속성",
         "error_handlers": "오류 처리기",
-        "tasks": "작업"
+        "tasks": "작업",
+        "advanced": "고급 구성"
       },
       "creation": {
         "select": "{section}을 선택하십시오",

diff --git a/ui/src/translations/pl.json b/ui/src/translations/pl.json
@@ -1066,7 +1066,8 @@
         "triggers": "Triggery",
         "main": "Główne właściwości",
         "error_handlers": "Obsługa błędów",
-        "tasks": "Zadania"
+        "tasks": "Zadania",
+        "advanced": "Zaawansowana konfiguracja"
       },
       "creation": {
         "select": "Wybierz {section}",

diff --git a/ui/src/translations/pt.json b/ui/src/translations/pt.json
@@ -1066,7 +1066,8 @@
         "triggers": "Triggers",
         "main": "Propriedades principais",
         "error_handlers": "Manipuladores de Erros",
-        "tasks": "Tarefas"
+        "tasks": "Tarefas",
+        "advanced": "Configuração avançada"
       },
       "creation": {
         "select": "Selecione uma {section}",

diff --git a/ui/src/translations/ru.json b/ui/src/translations/ru.json
@@ -1066,7 +1066,8 @@
         "triggers": "Триггеры",
         "main": "Основные свойства",
         "error_handlers": "Обработчики ошибок",
-        "tasks": "Задачи"
+        "tasks": "Задачи",
+        "advanced": "Расширенная конфигурация"
       },
       "creation": {
         "select": "Выберите {section}",

diff --git a/ui/src/translations/zh_CN.json b/ui/src/translations/zh_CN.json
@@ -1066,7 +1066,8 @@
         "triggers": "触发器",
         "main": "主要属性",
         "error_handlers": "错误处理程序",
-        "tasks": "任务"
+        "tasks": "任务",
+        "advanced": "高级配置"
       },
       "creation": {
         "select": "选择一个{section}",