fix/issue #4613 Improve Scope of Translations

ui/src/components/admin/stats/BasicAuthPrompt.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="d-flex" v-if="!configs.isBasicAuthEnabled">
-        <el-text>Your data is not protected. Don't loose it. <b>Enable our free security features or try our paid offering.</b></el-text>
+        <el-text>
+            <span v-html="$t('data_not_protected')" />
+        </el-text>
         <el-button class="ms-auto" @click="promptForCredentials">
-            <b>Activate Basic Authentication</b>
+            <b>{{ $t('activate_basic_auth') }}</b>
         </el-button>
 
         <el-dialog v-if="promptOAuthCredentials" v-model="promptOAuthCredentials" destroy-on-close :append-to-body="true">

ui/src/components/content/CardLogos.vue

@@ -10,10 +10,10 @@
                 alt="Dark version logo"
             >
             <p class="title">
-                Dark version
+                {{ $t('dark_version') }}
             </p>
             <p class="description">
-                Use this version when working on a dark background to ensure our name remains readable.
+                {{ $t('use_dark_background') }}
             </p>
         </div>
 
@@ -27,10 +27,10 @@
                 alt="Light version logo"
             >
             <p class="title">
-                Light version
+                {{ $t('light_version') }}
             </p>
             <p class="description">
-                This is the preferred option when working with a light background.
+                {{ $t('light_background') }}
             </p>
         </div>
 
@@ -44,10 +44,10 @@
                 alt="Monogram version logo"
             >
             <p class="title">
-                Monogram
+                {{ $t('monogram') }}
             </p>
             <p class="description">
-                The wordmark colors adapt based on the background, while the icon remains without a background when placed on a dark background.
+                {{ $t('wordmark_colors') }}
             </p>
         </div>
     </div>

ui/src/components/content/DownloadLogoPack.vue

@@ -3,7 +3,7 @@
         download
         :href="$store.getters['doc/resourceUrl']('kestra-logo-kit.zip')"
     >
-        <LinkVariant />   Download Logo Pack
+        <LinkVariant />   {{ $t('download_logos') }}
     </a>
 </template>
 

ui/src/components/executions/ChangeExecutionStatus.vue

@@ -28,7 +28,7 @@
             <p v-html="$t('change execution state confirm', {id: execution.id})" />
 
             <p>
-                Current status is : <status size="small" class="me-1" :status="execution.state.current" />
+                {{ $t("change state current state") }} <status size="small" class="me-1" :status="execution.state.current" />
             </p>
 
             <el-select

ui/src/components/executions/FilePreview.vue

@@ -1,6 +1,6 @@
 <template>
     <el-button size="small" type="primary" :icon="EyeOutline" @click="getFilePreview">
-        Preview
+        {{ $t("preview") }}
     </el-button>
     <drawer
         v-if="selectedPreview === value && preview"

ui/src/components/executions/Gantt.vue

@@ -42,7 +42,7 @@
                                 <div>
                                     <el-tooltip placement="right" :persistent="false" :hide-after="0" effect="light">
                                         <template #content>
-                                            <span>This task has {{ item.attempts }} attempts.</span>
+                                            <span>{{ $t("this_task_has") }} {{ item.attempts }} {{ $t("attempts").toLowerCase() }}.</span>
                                         </template>
                                         <Warning
                                             v-if="item.attempts > 1"

ui/src/components/flows/FlowRootTopBar.vue

@@ -2,7 +2,7 @@
     <top-nav-bar :breadcrumb="routeInfo.breadcrumb" :title="routeInfo.title">
         <template #title>
             <template v-if="deleted">
-                <Alert class="text-warning me-2" />Deleted:&nbsp;
+                <Alert class="text-warning me-2" />{{ $t('deleted_label') }}:&nbsp;
             </template>
             <Lock v-else-if="!isAllowedEdit" class="me-2 gray-700" />
             <span :class="{'body-color': deleted}">{{ routeInfo.title }}</span>

ui/src/components/flows/MetadataEditor.vue

@@ -2,13 +2,13 @@
     <el-form label-position="top">
         <el-form-item :required="true">
             <template #label>
-                <code>id</code>
+                <code>{{ $t("id") }}</code>
             </template>
             <el-input :disabled="editing" v-model="newMetadata.id" />
         </el-form-item>
         <el-form-item :required="true">
             <template #label>
-                <code>namespace</code>
+                <code>{{ $t("namespace") }}</code>
             </template>
             <el-input :disabled="editing" v-model="newMetadata.namespace" />
         </el-form-item>
@@ -52,7 +52,7 @@
         </el-form-item>
         <el-form-item>
             <template #label>
-                <code>labels</code>
+                <code>{{ $t("labels") }}</code>
             </template>
             <div class="d-flex w-100" v-for="(item, index) in newMetadata.labels" :key="index">
                 <div class="flex-fill flex-grow-1 w-100 me-2">
@@ -81,13 +81,13 @@
         </el-form-item>
         <el-form-item>
             <template #label>
-                <code>inputs</code>
+                <code>{{ $t("inputs") }}</code>
             </template>
             <metadata-inputs v-model="newMetadata.inputs" :inputs="newMetadata.inputs" />
         </el-form-item>
         <el-form-item>
             <template #label>
-                <code>outputs</code>
+                <code>{{ $t("outputs") }}</code>
             </template>
             <editor
                 :model-value="newMetadata.outputs"
@@ -100,7 +100,7 @@
         </el-form-item>
         <el-form-item>
             <template #label>
-                <code>variables</code>
+                <code>{{ $t("variables") }}</code>
             </template>
             <metadata-variables v-model="newMetadata.variables" :variables="newMetadata.variables" />
         </el-form-item>
@@ -111,7 +111,7 @@
         />
         <el-form-item v-if="concurrencySchema">
             <template #label>
-                <code>concurrency</code>
+                <code>{{ $t("concurrency") }}</code>
                 <br>
                 <task-basic
                     :schema="concurrencySchema"
@@ -123,7 +123,7 @@
         </el-form-item>
         <el-form-item>
             <template #label>
-                <code>pluginDefaults</code>
+                <code>{{ $t("plugin defaults") }}</code>
             </template>
             <editor
                 :model-value="newMetadata.pluginDefaults"
@@ -136,7 +136,7 @@
         </el-form-item>
         <el-form-item>
             <template #label>
-                <code>disabled</code>
+                <code>{{ $t("disabled") }}</code>
             </template>
             <div>
                 <el-switch active-color="green" v-model="newMetadata.disabled" @update:model-value="(value) => newMetadata.disabled = value" />

ui/src/components/flows/MetadataVariables.vue

@@ -4,7 +4,7 @@
     <div class="mt-1 mb-2 wrapper">
         <drawer v-if="isEditOpen" v-model="isEditOpen">
             <template #header>
-                <code>variables</code>
+                <code>{{ $t("variables") }}</code>
             </template>
 
             <template #footer>
@@ -22,7 +22,7 @@
             <el-form label-position="top">
                 <el-form-item>
                     <template #label>
-                        <code>name</code>
+                        <code>{{ $t("name") }}</code>
                     </template>
                     <el-input
                         :model-value="newVariables[selectedIndex][0]"
@@ -33,7 +33,7 @@
                 </el-form-item>
                 <el-form-item>
                     <template #label>
-                        <code>value</code>
+                        <code>{{ $t("value") }}</code>
                     </template>
                     <editor
                         :model-value="newVariables[selectedIndex][1]"
@@ -79,7 +79,7 @@
                 class="w-25"
                 @click="addVariable"
             >
-                Add
+                {{ $t("add") }}
             </el-button>
         </div>
     </div>

ui/src/components/flows/TaskEditor.vue

@@ -3,7 +3,7 @@
         <el-form-item>
             <template #label>
                 <div class="type-div">
-                    <code>type</code>
+                    <code>{{ $t("type") }}</code>
                 </div>
             </template>
             <plugin-select

ui/src/components/flows/blueprints/BlueprintDetail.vue

@@ -56,7 +56,7 @@
                     </editor>
                 </el-card>
                 <template v-if="blueprint.description">
-                    <h4>About this blueprint</h4>
+                    <h4>{{ $t('about_this_blueprint') }}</h4>
                     <div v-if="!system" class="tags text-uppercase">
                         <div v-for="(tag, index) in blueprint.tags" :key="index" class="tag-box">
                             <el-tag type="info" size="small">
@@ -68,7 +68,7 @@
                 </template>
             </el-col>
             <el-col :md="24" :lg="embed ? 24 : 6" v-if="blueprint?.includedTasks?.length > 0">
-                <h4>Plugins</h4>
+                <h4>{{ $t('plugins.names') }}</h4>
                 <div class="plugins-container">
                     <div v-for="task in [...new Set(blueprint.includedTasks)]" :key="task">
                         <task-icon :cls="task" :icons="icons" />

ui/src/components/inputs/DurationPicker.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="input-group">
-        <label for="years">Years</label>
+        <label for="years">{{ $t('years') }}</label>
         <el-input-number
             size="small"
             controls-position="right"
@@ -10,7 +10,7 @@
         />
     </div>
     <div class="input-group">
-        <label for="months">Months</label>
+        <label for="months">{{ $t('months') }}</label>
         <el-input-number
             size="small"
             controls-position="right"
@@ -20,7 +20,7 @@
         />
     </div>
     <div class="input-group">
-        <label for="weeks">Weeks</label>
+        <label for="weeks">{{ $t('weeks') }}</label>
         <el-input-number
             size="small"
             controls-position="right"
@@ -30,7 +30,7 @@
         />
     </div>
     <div class="input-group">
-        <label for="days">Days</label>
+        <label for="days">{{ $t('days') }}</label>
         <el-input-number
             size="small"
             controls-position="right"
@@ -40,7 +40,7 @@
         />
     </div>
     <div class="input-group">
-        <label for="hours">Hours</label>
+        <label for="hours">{{ $t('hours') }}</label>
         <el-input-number
             size="small"
             controls-position="right"
@@ -50,7 +50,7 @@
         />
     </div>
     <div class="input-group">
-        <label for="minutes">Minutes</label>
+        <label for="minutes">{{ $t('minutes') }}</label>
         <el-input-number
             size="small"
             controls-position="right"
@@ -60,7 +60,7 @@
         />
     </div>
     <div class="input-group">
-        <label for="seconds">Seconds</label>
+        <label for="seconds">{{ $t('seconds') }}</label>
         <el-input-number
             size="small"
             controls-position="right"
@@ -71,9 +71,9 @@
     </div>
     <div>
         <el-text size="small" :type="durationIssue ? 'danger': ''">
-            {{ durationIssue ?? "or input custom duration:" }}
+            {{ durationIssue ?? $t('input_custom_duration') }}
         </el-text>
-        <el-input type="text" id="customDuration" v-model="customDuration" @input="parseDuration" placeholder="Custom duration" />
+        <el-input type="text" id="customDuration" v-model="customDuration" @input="parseDuration" :placeholder="$t('datepicker.custom duration')" />
     </div>
 </template>
 

ui/src/components/inputs/Editor.vue

@@ -273,7 +273,7 @@
                 if (!this.readOnly) {
                     this.editor.addAction({
                         id: "kestra-save",
-                        label: "Save",
+                        label: this.$t("save"),
                         keybindings: [KeyMod.CtrlCmd | KeyCode.KeyS],
                         contextMenuGroupId: "navigation",
                         contextMenuOrder: 1.5,
@@ -289,7 +289,7 @@
 
                 this.editor.addAction({
                     id: "kestra-execute",
-                    label: "Execute the flow",
+                    label: this.$t("execute flow behaviour"),
                     keybindings: [KeyMod.CtrlCmd | KeyCode.KeyE],
                     contextMenuGroupId: "navigation",
                     contextMenuOrder: 1.5,
@@ -300,7 +300,7 @@
 
                 this.editor.addAction({
                     id: "confirm",
-                    label: "Confirm",
+                    label: this.$t("confirm"),
                     keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
                     contextMenuGroupId: "navigation",
                     contextMenuOrder: 1.5,
@@ -329,7 +329,7 @@
                 if (this.original === undefined && this.navbar && this.fullHeight) {
                     this.editor.addAction({
                         id: "fold-multiline",
-                        label: "Fold All Multi Lines",
+                        label: this.$t("fold_all_multi_lines"),
                         keybindings: [KeyCode.F10],
                         contextMenuGroupId: "fold",
                         contextMenuOrder: 1.5,