From b823d9c28badbe3a5df28bff3c54d07b8ec99b03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Wed, 22 Jan 2025 08:25:58 +0100
Subject: [PATCH] feat(ui): improvements of no code editor (#6876)

---
 ui/src/components/code/components/Add.vue     |  8 +-
 .../code/components/Breadcrumbs.vue           | 57 +++++++++-----
 .../code/components/inputs/InputPair.vue      |  4 +-
 .../code/components/inputs/InputText.vue      |  3 +-
 ui/src/components/code/segments/Editor.vue    | 28 +++++--
 ui/src/components/code/segments/Task.vue      | 67 +++++++++++++---
 ui/src/components/code/utils/types.ts         |  1 +
 ui/src/components/flows/tasks/TaskBoolean.vue |  5 +-
 ui/src/components/flows/tasks/TaskComplex.vue | 64 +++++++--------
 ui/src/components/flows/tasks/TaskObject.vue  | 77 ++++++++++++-------
 ui/src/components/flows/tasks/TaskString.vue  | 41 ++++++----
 ui/src/components/inputs/EditorView.vue       |  3 -
 ui/src/stores/code.ts                         | 36 +++++++++
 ui/src/stores/store.js                        |  4 +-
 ui/src/translations/en.json                   |  8 +-
 15 files changed, 271 insertions(+), 135 deletions(-)
 create mode 100644 ui/src/stores/code.ts

diff --git a/ui/src/components/code/components/Add.vue b/ui/src/components/code/components/Add.vue
index 4888ae3a1c1..e9a65886b68 100644
--- a/ui/src/components/code/components/Add.vue
+++ b/ui/src/components/code/components/Add.vue
@@ -1,6 +1,10 @@
 <template>
     <div @click="emits('add', props.what)" class="py-2 adding">
-        {{ t("no_code.adding", {what: props.what}) }}
+        {{
+            props.what
+                ? t("no_code.adding", {what: props.what})
+                : t("no_code.adding_default")
+        }}
     </div>
 </template>
 
@@ -9,7 +13,7 @@
     const {t} = useI18n({useScope: "global"});
 
     const emits = defineEmits(["add"]);
-    const props = defineProps({what: {type: String, required: true}});
+    const props = defineProps({what: {type: String, default: undefined}});
 </script>
 
 <style scoped lang="scss">
diff --git a/ui/src/components/code/components/Breadcrumbs.vue b/ui/src/components/code/components/Breadcrumbs.vue
index 51607ab3e8b..a10f670b7f5 100644
--- a/ui/src/components/code/components/Breadcrumbs.vue
+++ b/ui/src/components/code/components/Breadcrumbs.vue
@@ -4,6 +4,7 @@
             v-for="(breadcrumb, index) in breadcrumbs"
             :key="index"
             class="item"
+            @click="store.commit('code/removeBreadcrumb', {position: index})"
         >
             <router-link :to="breadcrumb.to">
                 {{ breadcrumb.label }}
@@ -13,43 +14,59 @@
 </template>
 
 <script setup lang="ts">
-    import {computed} from "vue";
-
-    import {Breadcrumb} from "../utils/types";
+    import {computed, onMounted, watch} from "vue";
 
     import {useRoute} from "vue-router";
     const route = useRoute();
 
+    import {useStore} from "vuex";
+    const store = useStore();
+
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
 
     const props = defineProps({flow: {type: Object, required: true}});
 
+    store.commit("code/clearBreadcrumbs");
+
+    const breadcrumbs = computed(() => store.state.code.breadcrumbs);
+
     const params = {
         namespace: route.params.namespace,
         id: props.flow.id ?? "new",
         tab: "edit",
     };
 
-    const breadcrumbs = computed<Breadcrumb[]>(() => {
-        return [
-            {
-                label: props.flow.id ?? t("create_flow"),
-                to: {name: route.name, params},
+    onMounted(() => {
+        store.commit("code/addBreadcrumbs", {
+            breadcrumb: {
+                label:
+                    route.name === "flows/create"
+                        ? t("create_flow")
+                        : props.flow.id,
+                to: {name: route.name, params, query: {}},
             },
-            ...(route.query.section
-                ? [
-                    {
-                        label:
-                            route.query.identifier === "new"
-                                ? t(`no_code.creation.${route.query.section}`)
-                                : route.query.identifier,
-                        to: {name: route.name, params},
-                    },
-                ]
-                : []),
-        ];
+            position: 0,
+        });
     });
+
+    watch(
+        () => route.query.identifier,
+        (value) => {
+            if (!value) return;
+
+            store.commit("code/addBreadcrumbs", {
+                breadcrumb: {
+                    label:
+                        route.query.identifier === "new"
+                            ? t(`no_code.creation.${route.query.section}`)
+                            : route.query.identifier,
+                    to: {name: route.name, params, query: route.query},
+                },
+                position: 1,
+            });
+        },
+    );
 </script>
 
 <style scoped lang="scss">
diff --git a/ui/src/components/code/components/inputs/InputPair.vue b/ui/src/components/code/components/inputs/InputPair.vue
index a22c5459d40..d9a1e01a022 100644
--- a/ui/src/components/code/components/inputs/InputPair.vue
+++ b/ui/src/components/code/components/inputs/InputPair.vue
@@ -1,7 +1,7 @@
 <template>
     <span v-if="required" class="me-1 text-danger">*</span>
     <span class="label">{{ label }}</span>
-    <div class="mt-1 mb-2 wrapper">
+    <div class="mt-1 mb-2 w-100 wrapper">
         <el-row
             v-for="(value, key, index) in props.modelValue"
             :key="index"
@@ -50,7 +50,7 @@
             default: undefined,
         },
         label: {type: String, required: true},
-        property: {type: String, required: true},
+        property: {type: String, default: undefined},
         required: {type: Boolean, default: false},
     });
 
diff --git a/ui/src/components/code/components/inputs/InputText.vue b/ui/src/components/code/components/inputs/InputText.vue
index ab5c1a556f2..9f78604fdc2 100644
--- a/ui/src/components/code/components/inputs/InputText.vue
+++ b/ui/src/components/code/components/inputs/InputText.vue
@@ -1,7 +1,7 @@
 <template>
     <span v-if="required" class="me-1 text-danger">*</span>
     <span v-if="label" class="label">{{ label }}</span>
-    <div class="mt-1 mb-2 wrapper">
+    <div class="mt-1 mb-2 wrapper" :class="props.class">
         <el-input v-model="input" @input="handleInput" :placeholder :disabled />
     </div>
 </template>
@@ -16,6 +16,7 @@
         placeholder: {type: String, default: ""},
         required: {type: Boolean, default: false},
         disabled: {type: Boolean, default: false},
+        class: {type: String, default: undefined},
     });
 
     const input = ref(props.modelValue);
diff --git a/ui/src/components/code/segments/Editor.vue b/ui/src/components/code/segments/Editor.vue
index df6e05316ec..004bf00e2bd 100644
--- a/ui/src/components/code/segments/Editor.vue
+++ b/ui/src/components/code/segments/Editor.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-    import {ref, shallowRef} from "vue";
+    import {ref, shallowRef, computed} from "vue";
 
     import {Field, Fields, CollapseItem} from "../utils/types";
 
@@ -47,7 +47,16 @@
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
 
-    const emits = defineEmits(["updateTask", "updateMetadata"]);
+    const emits = defineEmits(["save", "updateTask", "updateMetadata"]);
+
+    const saveEvent = (e: KeyboardEvent) => {
+        if (e.type === "keydown" && e.key === "s" && e.ctrlKey) {
+            e.preventDefault();
+            emits("save");
+        }
+    };
+
+    document.addEventListener("keydown", saveEvent);
 
     const props = defineProps({
         creation: {type: Boolean, default: false},
@@ -147,9 +156,14 @@
         const title = t(`no_code.sections.${label}`);
         return {title, elements};
     };
-    const sections = ref<CollapseItem[]>([
-        getSectionTitle("tasks", YamlUtils.parse(props.flow).tasks ?? []),
-        getSectionTitle("triggers", YamlUtils.parse(props.flow).triggers ?? []),
-        getSectionTitle("error_handlers", YamlUtils.parse(props.flow).errors ?? []),
-    ]);
+    const sections = computed((): CollapseItem[] => {
+        return [
+            getSectionTitle("tasks", YamlUtils.parse(props.flow).tasks ?? []),
+            getSectionTitle("triggers", YamlUtils.parse(props.flow).triggers ?? []),
+            getSectionTitle(
+                "error_handlers",
+                YamlUtils.parse(props.flow).errors ?? [],
+            ),
+        ];
+    });
 </script>
diff --git a/ui/src/components/code/segments/Task.vue b/ui/src/components/code/segments/Task.vue
index 54a29f4bc5c..40b5a326e12 100644
--- a/ui/src/components/code/segments/Task.vue
+++ b/ui/src/components/code/segments/Task.vue
@@ -1,12 +1,24 @@
 <template>
-    <TaskEditor v-model="yaml" :section @update:model-value="validateTask" />
+    <TaskEditor
+        v-if="!lastBreadcumb.shown"
+        v-model="yaml"
+        :section
+        @update:model-value="validateTask"
+    />
+    <component
+        v-else
+        :is="lastBreadcumb.component.type"
+        v-bind="lastBreadcumb.component.props"
+        v-on="lastBreadcumb.component.listeners"
+        @update:model-value="validateTask"
+    />
 
     <template v-if="yaml">
         <hr>
 
         <div class="d-flex justify-content-between">
             <div class="d-flex align-items-center">
-                <ValidationError :errors link />
+                <ValidationError v-if="!lastBreadcumb.shown" :errors link />
             </div>
 
             <Save @click="saveTask" :what="route.query.section?.toString()" />
@@ -23,7 +35,8 @@
         creation: {type: Boolean, default: false},
     });
 
-    import {useRoute} from "vue-router";
+    import {useRouter, useRoute} from "vue-router";
+    const router = useRouter();
     const route = useRoute();
 
     import {SECTIONS} from ".././../../utils/constants";
@@ -32,6 +45,20 @@
     import TaskEditor from "../../../components/flows/TaskEditor.vue";
     import YamlUtils from "../../../utils/yamlUtils";
 
+    import {useStore} from "vuex";
+    const store = useStore();
+
+    const breadcrumbs = computed(() => store.state.code.breadcrumbs);
+    const lastBreadcumb = computed(() => {
+        const index =
+            breadcrumbs.value.length === 3 ? 2 : breadcrumbs.value.length - 1;
+
+        return {
+            shown: index >= 2,
+            component: breadcrumbs.value?.[index]?.component,
+        };
+    });
+
     const yaml = ref(
         YamlUtils.extractTask(props.flow, route.query.identifier)?.toString() || "",
     );
@@ -61,20 +88,36 @@
 
     const CURRENT = ref(null);
     const validateTask = (task) => {
+        let temp = YamlUtils.parse(yaml.value);
+
+        if (lastBreadcumb.value.shown) {
+            temp = {
+                ...temp,
+                [breadcrumbs.value.at(-1).label]: {
+                    ...temp[breadcrumbs.value.at(-1).label],
+                    ...task,
+                },
+            };
+        }
+
+        temp = YamlUtils.stringify(temp);
+
         store
-            .dispatch("flow/validateTask", {task, section: section.value})
-            .then(() => (yaml.value = task));
+            .dispatch("flow/validateTask", {task: temp, section: section.value})
+            .then(() => (yaml.value = temp));
 
-        CURRENT.value = task;
+        CURRENT.value = temp;
     };
 
-    import {useStore} from "vuex";
-    const store = useStore();
-
     const errors = computed(() => store.getters["flow/taskError"]);
 
     import Save from "../components/Save.vue";
     const saveTask = () => {
+        if (lastBreadcumb.value.shown) {
+            store.commit("code/removeBreadcrumb", {last: true});
+            return;
+        }
+
         const source = props.flow;
 
         const task = YamlUtils.extractTask(
@@ -114,5 +157,11 @@
 
             emits("updateTask", action);
         }
+
+        store.commit("code/removeBreadcrumb", {last: true});
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {section, identifier, type, ...rest} = route.query;
+        router.replace({query: {...rest}});
     };
 </script>
diff --git a/ui/src/components/code/utils/types.ts b/ui/src/components/code/utils/types.ts
index 89434588d95..d0212763a1a 100644
--- a/ui/src/components/code/utils/types.ts
+++ b/ui/src/components/code/utils/types.ts
@@ -60,6 +60,7 @@ export type Breadcrumb = {
         name: RouteRecordName;
         params: RouteParams;
     };
+    component?: ReturnType<typeof defineComponent>;
 };
 
 export type CollapseItem = {
diff --git a/ui/src/components/flows/tasks/TaskBoolean.vue b/ui/src/components/flows/tasks/TaskBoolean.vue
index 88c0c9ba2b6..8a839c47ef7 100644
--- a/ui/src/components/flows/tasks/TaskBoolean.vue
+++ b/ui/src/components/flows/tasks/TaskBoolean.vue
@@ -1,8 +1,5 @@
 <template>
-    <el-checkbox
-        :model-value="modelValue"
-        @update:model-value="onInput"
-    />
+    <el-checkbox :model-value="modelValue" @update:model-value="onInput" />
 </template>
 
 <script>
diff --git a/ui/src/components/flows/tasks/TaskComplex.vue b/ui/src/components/flows/tasks/TaskComplex.vue
index 06bfad08165..d2f8af0434a 100644
--- a/ui/src/components/flows/tasks/TaskComplex.vue
+++ b/ui/src/components/flows/tasks/TaskComplex.vue
@@ -1,62 +1,50 @@
 <template>
-    <el-input
-        :model-value="JSON.stringify(values)"
-        :disabled="true"
-    >
+    <el-input :model-value="JSON.stringify(values)" :disabled="true">
         <template #append>
-            <el-button :icon="TextSearch" @click="isOpen = true" />
-        </template>
-    </el-input>
-
-    <drawer
-        v-if="isOpen"
-        v-model="isOpen"
-    >
-        <template #header>
-            <code>{{ root }}</code>
-        </template>
-        <el-form label-position="top">
-            <task-object
-                v-if="currentSchema"
-                :model-value="modelValue"
-                @update:model-value="onInput"
-                :schema="currentSchema"
-                :definitions="definitions"
+            <el-button
+                :icon="TextSearch"
+                @click="
+                    $store.commit('code/addBreadcrumbs', {
+                        breadcrumb: {
+                            label: root,
+                            to: {},
+                            component: h('task-object', {
+                                modelValue: modelValue,
+                                'onUpdate:modelValue': onInput,
+                                schema: currentSchema,
+                                definitions: definitions,
+                            }),
+                        },
+                        position:
+                            breadcrumbs.length === 2 ? 2 : breadcrumbs.length,
+                    })
+                "
             />
-        </el-form>
-        <template #footer>
-            <el-button :icon="ContentSave" @click="isOpen = false" type="primary">
-                {{ $t('save') }}
-            </el-button>
         </template>
-    </drawer>
+    </el-input>
 </template>
 
 <script setup>
     import TextSearch from "vue-material-design-icons/TextSearch.vue";
-    import ContentSave from "vue-material-design-icons/ContentSave.vue";
+    import {h} from "vue";
 </script>
 
 <script>
-    import Task from "./Task"
-    import Drawer from "../../Drawer.vue"
+    import Task from "./Task";
+    import {mapState} from "vuex";
 
     export default {
         mixins: [Task],
-        components: {Drawer},
-        data() {
-            return {
-                isOpen: false,
-            };
-        },
         computed: {
+            ...mapState("code", ["breadcrumbs"]),
+
             currentSchema() {
                 let ref = this.schema.$ref.substring(8);
                 if (this.definitions[ref]) {
                     return this.definitions[ref];
                 }
                 return undefined;
-            }
+            },
         },
     };
 </script>
diff --git a/ui/src/components/flows/tasks/TaskObject.vue b/ui/src/components/flows/tasks/TaskObject.vue
index 03288465c83..cd5cabb3e57 100644
--- a/ui/src/components/flows/tasks/TaskObject.vue
+++ b/ui/src/components/flows/tasks/TaskObject.vue
@@ -6,22 +6,25 @@
             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) }}
-                        </el-tag>
-                    </span>
-                </span>
+                <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)}`"
@@ -32,6 +35,7 @@
                 :schema="schema"
                 :required="isRequired(key)"
                 :definitions="definitions"
+                class="mt-1 mb-2 wrapper"
             />
         </el-form-item>
     </template>
@@ -39,7 +43,7 @@
         <task-dict
             :model-value="modelValue"
             :task="task"
-            @update:model-value="value => $emit('update:modelValue', value)"
+            @update:model-value="(value) => $emit('update:modelValue', value)"
             :root="root"
             :schema="schema"
             :required="required"
@@ -72,12 +76,12 @@
         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) {
@@ -90,8 +94,7 @@
                     return properties;
                 }
 
-                return Object
-                    .entries(properties)
+                return Object.entries(properties)
                     .sort((a, b) => {
                         if (a[0] === "id") {
                             return -1;
@@ -99,8 +102,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;
@@ -121,7 +128,7 @@
                     })
                     .reduce((result, entry) => {
                         result[entry[0]] = entry[1];
-                        return result
+                        return result;
                     }, {});
             },
             onObjectInput(properties, value) {
@@ -151,11 +158,23 @@
 </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);
+}
 
-        }
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left {
+    > :deep(.el-form-item__label) {
+        display: flex;
     }
+}
 
+.el-form-item {
+    > :deep(.el-form-item__label) {
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
 </style>
diff --git a/ui/src/components/flows/tasks/TaskString.vue b/ui/src/components/flows/tasks/TaskString.vue
index 6ed29b0ffe4..7ee7cdb421e 100644
--- a/ui/src/components/flows/tasks/TaskString.vue
+++ b/ui/src/components/flows/tasks/TaskString.vue
@@ -8,23 +8,20 @@
         />
     </template>
     <template v-else>
-        <editor
+        <InputText
             :model-value="editorValue"
-            :navbar="false"
-            :full-height="false"
-            :input="true"
-            lang="plaintext"
             @update:model-value="onInput"
+            class="w-100"
         />
     </template>
 </template>
 <script>
     import Task from "./Task";
-    import Editor from "../../../components/inputs/Editor.vue";
+    import InputText from "../../../components/code/components/inputs/InputText.vue";
 
     export default {
         mixins: [Task],
-        components: {Editor},
+        components: {InputText},
         emits: ["update:modelValue"],
         computed: {
             isValid() {
@@ -42,25 +39,37 @@
                 if (typeof this.values === "string") {
                     const duration = this.$moment.duration(this.values);
 
-                    return new Date(1981, 1, 1, duration.hours(), duration.minutes(), duration.seconds())
+                    return new Date(
+                        1981,
+                        1,
+                        1,
+                        duration.hours(),
+                        duration.minutes(),
+                        duration.seconds(),
+                    );
                 }
 
                 return undefined;
             },
             defaultDuration() {
                 return this.$moment().seconds(0).minutes(0).hours(0).toDate();
-            }
+            },
         },
         methods: {
             onInputDuration(value) {
-                const emitted = value === "" || value === null ? undefined : this.$moment.duration({
-                    seconds: value.getSeconds(),
-                    minutes: value.getMinutes(),
-                    hours: value.getHours(),
-                }).toString();
+                const emitted =
+                    value === "" || value === null
+                        ? undefined
+                        : this.$moment
+                            .duration({
+                                seconds: value.getSeconds(),
+                                minutes: value.getMinutes(),
+                                hours: value.getHours(),
+                            })
+                            .toString();
 
                 this.$emit("update:modelValue", emitted);
-            }
-        }
+            },
+        },
     };
 </script>
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index 02eb2d764a9..d89a3361bc8 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -114,9 +114,6 @@
                             params: {tenant: routeParams.tenant},
                         })
                 "
-                @open-new-error="isNewErrorOpen = true"
-                @open-new-trigger="isNewTriggerOpen = true"
-                @open-edit-metadata="isEditMetadataOpen = true"
                 @export="exportYaml"
                 :is-namespace="isNamespace"
             />
diff --git a/ui/src/stores/code.ts b/ui/src/stores/code.ts
new file mode 100644
index 00000000000..dc55d97a579
--- /dev/null
+++ b/ui/src/stores/code.ts
@@ -0,0 +1,36 @@
+import {Breadcrumb} from "../components/code/utils/types";
+
+interface State {
+    breadcrumbs: Breadcrumb[];
+}
+
+export default {
+    namespaced: true,
+    state: (): State => ({
+        breadcrumbs: [],
+    }),
+    mutations: {
+        addBreadcrumbs(
+            state: State,
+            {
+                breadcrumb,
+                position,
+            }: { breadcrumb: Breadcrumb; position: number },
+        ) {
+            state.breadcrumbs[position] = breadcrumb;
+        },
+        removeBreadcrumb(
+            state: State,
+            {position, last = false}: { position: number; last?: boolean },
+        ) {
+            if (last) {
+                state.breadcrumbs.pop();
+            } else {
+                state.breadcrumbs = state.breadcrumbs.slice(0, position + 1);
+            }
+        },
+        clearBreadcrumbs(state: State) {
+            state.breadcrumbs = [];
+        },
+    },
+};
diff --git a/ui/src/stores/store.js b/ui/src/stores/store.js
index 3064c024b88..3c9556967a6 100644
--- a/ui/src/stores/store.js
+++ b/ui/src/stores/store.js
@@ -17,6 +17,7 @@ import editor from "./editor";
 import doc from "./doc";
 import bookmarks from "./bookmarks";
 import dashboard from "./dashboard";
+import code from "./code";
 
 export default {
     modules: {
@@ -38,6 +39,7 @@ export default {
         editor,
         doc,
         bookmarks,
-        dashboard
+        dashboard,
+        code
     }
 }
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index a29ac3969fe..d3d3bb56c05 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -1062,6 +1062,7 @@
     "chart preview": "Chart preview",
     "no_code": {
       "adding": "+ Add a {what}",
+      "adding_default": "+ Add a new value",
       "labels": {
         "yaml": "YAML Editor",
         "no_code": "No Code Editor",
@@ -1093,14 +1094,15 @@
         }
       },
       "creation": {
+        "select": "Select a {section}",
         "tasks": "Add a task",
         "triggers": "Add a trigger",
-        "error handlers": "Add an error handler",
-        "select": "Select a {section}"
+        "error handlers": "Add an error handler"
       },
       "save": {
         "tasks": "Save task",
-        "triggers": "Save trigger"
+        "triggers": "Save trigger",
+        "error handlers": "Save error handler"
       }
     }
   }