Merge pull request #21710 from jianzuoyi/feature-dev-nls

Enhancement: multi-language support for international users

Author: guerler

client/src/components/ActivityBar/ActivityBar.vue

@@ -14,6 +14,7 @@ import type { Activity } from "@/stores/activityStoreTypes";
 import { useEventStore } from "@/stores/eventStore";
 import { useUnprivilegedToolStore } from "@/stores/unprivilegedToolStore";
 import { useUserStore } from "@/stores/userStore";
+import localize from "@/utils/localization";
 
 import InvocationsPanel from "../Panels/InvocationsPanel.vue";
 import ActivityItem from "./ActivityItem.vue";
@@ -363,8 +364,8 @@ defineExpose({
             <SettingsPanel
                 v-else-if="isActiveSideBar('settings')"
                 :activity-bar-id="props.activityBarId"
-                :heading="props.optionsHeading"
-                :search-placeholder="props.optionsSearchPlaceholder"
+                :heading="localize(props.optionsHeading)"
+                :search-placeholder="localize(props.optionsSearchPlaceholder)"
                 @activityClicked="(id) => emit('activityClicked', id)" />
             <AdminPanel v-else-if="isActiveSideBar('admin')" />
             <slot name="side-panel" :is-active-side-bar="isActiveSideBar"></slot>

client/src/components/ActivityBar/ActivityItem.vue

@@ -94,7 +94,7 @@ const meta = computed(() => store.metaForId(props.id));
                     </span>
                     <FontAwesomeIcon :icon="icon" />
                 </div>
-                <TextShort v-if="title" :text="title" class="nav-title" />
+                <TextShort v-if="title" :text="localize(title)" class="nav-title" />
             </b-nav-item>
         </template>
         <div class="text-center px-2 py-1">

client/src/components/Form/Elements/FormBoolean.vue

@@ -25,6 +25,6 @@ const label = computed(() => (currentValue.value ? "Yes" : "No"));
 
 <template>
     <b-form-checkbox v-model="currentValue" class="no-highlight" switch>
-        <span v-if="!props.noLabel">{{ label }}</span>
+        <span v-if="!props.noLabel" v-localize>{{ label }}</span>
     </b-form-checkbox>
 </template>

client/src/components/Form/Elements/FormData/FormDataContextButtons.vue

@@ -10,6 +10,7 @@ import {
     COLLECTION_TYPE_TO_LABEL,
     type CollectionBuilderType,
 } from "@/components/Collections/common/buildCollectionModal";
+import localize from "@/utils/localization";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
 import { buildersForCollectionTypes, unconstrainedCollectionTypeBuilders } from "./collections";
@@ -89,7 +90,7 @@ const defaultCollectionBuilderType = computed<CollectionBuilderType>(() => {
                 :key="index"
                 v-b-tooltip.hover.bottom
                 :pressed="props.currentField === index"
-                :title="v.tooltip"
+                :title="localize(v.tooltip)"
                 :style="v.icon === faFolder && v.multiple ? 'padding: 2px' : ''"
                 @click="emit('set-current-field', index)">
                 <span v-if="v.icon === faFolder && v.multiple" class="fa-stack" style="height: unset">
@@ -101,7 +102,7 @@ const defaultCollectionBuilderType = computed<CollectionBuilderType>(() => {
             <BButton
                 v-if="props.canBrowse && !props.workflowRun"
                 v-b-tooltip.hover.bottom
-                title="Browse or Upload Datasets"
+                :title="localize('Browse or Upload Datasets')"
                 @click="emit('on-browse')">
                 <FontAwesomeIcon v-if="props.loading" :icon="faSpinner" spin />
                 <span v-else class="font-weight-bold">...</span>

client/src/components/Form/FormInputs.vue

@@ -6,14 +6,14 @@
             :class="{ 'bordered-input': syncWithGraph && activeNodeId === index }">
             <div v-if="input.type == 'conditional'" class="ui-portlet-section mt-3">
                 <div class="portlet-header">
-                    <b>{{ input.test_param.label || input.test_param.name }}</b>
+                    <b v-localize>{{ input.test_param.label || input.test_param.name }}</b>
                 </div>
                 <div class="portlet-content">
                     <FormElement
                         :id="conditionalPrefix(input, input.test_param.name)"
                         v-model="input.test_param.value"
                         :type="input.test_param.type"
-                        :help="input.test_param.help"
+                        :help="localize(input.test_param.help)"
                         :help-format="input.test_param.help_format"
                         :refresh-on-change="false"
                         :disabled="sustainConditionals"
@@ -39,9 +39,14 @@
                     @swap="(a, b) => repeatSwap(input, a, b)" />
             </div>
             <div v-else-if="input.type == 'section'">
-                <FormCard :title="input.title || input.name" :expanded.sync="input.expanded" :collapsible="true">
+                <FormCard
+                    :title="localize(input.title || input.name)"
+                    :expanded.sync="input.expanded"
+                    :collapsible="true">
                     <template v-slot:body>
-                        <div v-if="input.help" class="my-2" data-description="section help">{{ input.help }}</div>
+                        <div v-if="input.help" class="my-2" data-description="section help">
+                            {{ localize(input.help) }}
+                        </div>
                         <FormNode v-bind="$props" :inputs="input.inputs" :prefix="getPrefix(input.name)" />
                     </template>
                 </FormCard>
@@ -50,11 +55,11 @@
                 v-else
                 :id="getPrefix(input.name)"
                 v-model="input.value"
-                :title="input.label || input.name"
+                :title="localize(input.label || input.name)"
                 :type="input.type"
                 :error="input.error"
                 :warning="input.warning"
-                :help="input.help"
+                :help="localize(input.help)"
                 :help-format="input.help_format"
                 :refresh-on-change="input.refresh_on_change"
                 :attributes="input.attributes || input"

client/src/components/Form/FormRepeat.vue

@@ -114,8 +114,10 @@ const { keyObject } = useKeyedObjects();
 <template>
     <div>
         <div v-if="!props.sustainRepeats || props.input.cache?.length > 0">
-            <div class="font-weight-bold mb-2">{{ props.input.title }}</div>
-            <div v-if="props.input.help" class="mb-2" data-description="repeat help">{{ props.input.help }}</div>
+            <div class="font-weight-bold mb-2">{{ localize(props.input.title) }}</div>
+            <div v-if="props.input.help" class="mb-2" data-description="repeat help">
+                {{ localize(props.input.help) }}
+            </div>
         </div>
 
         <FormCard

client/src/components/History/Content/ContentOptions.vue

@@ -18,6 +18,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
 import { useEntryPointStore } from "@/stores/entryPointStore";
+import localize from "@/utils/localization";
 import { prependPath } from "@/utils/redirect";
 
 const props = defineProps({
@@ -112,7 +113,7 @@ function onDisplay($event: MouseEvent) {
             v-if="isCollection && canShowCollectionDetails"
             v-b-tooltip.hover
             class="collection-job-details-btn px-1"
-            title="Show Details"
+            :title="localize('Show Details')"
             size="sm"
             variant="link"
             :href="showCollectionDetailsUrl"
@@ -123,7 +124,7 @@ function onDisplay($event: MouseEvent) {
         <BButton
             v-if="isDataset"
             v-b-tooltip.hover
-            title="View"
+            :title="localize('View')"
             tabindex="0"
             class="display-btn px-1"
             size="sm"
@@ -136,7 +137,7 @@ function onDisplay($event: MouseEvent) {
             v-if="writable && isHistoryItem"
             v-b-tooltip.hover
             :disabled="editDisabled"
-            :title="editButtonTitle"
+            :title="localize(editButtonTitle)"
             tabindex="0"
             class="edit-btn px-1"
             size="sm"
@@ -149,7 +150,7 @@ function onDisplay($event: MouseEvent) {
             v-if="isRunningInteractiveTool"
             v-b-tooltip.hover
             class="delete-btn px-1"
-            title="Stop this Interactive Tool"
+            :title="localize('Stop this Interactive Tool')"
             size="sm"
             variant="link"
             @click.stop="onDelete($event)">
@@ -160,7 +161,7 @@ function onDisplay($event: MouseEvent) {
             v-b-tooltip.hover
             :tabindex="isDataset ? '0' : '-1'"
             class="delete-btn px-1"
-            title="Delete"
+            :title="localize('Delete')"
             size="sm"
             variant="link"
             @click.stop="onDelete($event)">
@@ -184,7 +185,7 @@ function onDisplay($event: MouseEvent) {
             v-b-tooltip.hover
             tabindex="0"
             class="undelete-btn px-1"
-            title="Undelete"
+            :title="localize('Undelete')"
             size="sm"
             variant="link"
             @click.stop="emit('undelete')">
@@ -195,7 +196,7 @@ function onDisplay($event: MouseEvent) {
             v-b-tooltip.hover
             tabindex="0"
             class="unhide-btn px-1"
-            title="Unhide"
+            :title="localize('Unhide')"
             size="sm"
             variant="link"
             @click.stop="emit('unhide')">

client/src/components/History/CurrentHistory/HistoryCounter.vue

@@ -13,6 +13,7 @@ import { type HistorySummaryExtended, userOwnsHistory } from "@/api";
 import { HistoryFilters } from "@/components/History/HistoryFilters.js";
 import { useHistoryContentStats } from "@/composables/historyContentStats";
 import { useUserStore } from "@/stores/userStore";
+import localize from "@/utils/localization";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 
@@ -116,7 +117,7 @@ onMounted(() => {
     <div class="history-size my-1 d-flex justify-content-between">
         <GButton
             tooltip
-            title="History Size"
+            :title="localize('History Size')"
             transparent
             size="small"
             color="blue"
@@ -132,7 +133,7 @@ onMounted(() => {
             <BButtonGroup>
                 <BButton
                     v-b-tooltip.hover
-                    title="Show active"
+                    :title="localize('Show active')"
                     variant="link"
                     size="sm"
                     class="rounded-0 text-decoration-none"
@@ -145,7 +146,7 @@ onMounted(() => {
                 <BButton
                     v-if="numItemsDeleted"
                     v-b-tooltip.hover
-                    title="Include deleted"
+                    :title="localize('Include deleted')"
                     variant="link"
                     size="sm"
                     class="rounded-0 text-decoration-none"
@@ -159,7 +160,7 @@ onMounted(() => {
                 <BButton
                     v-if="numItemsHidden"
                     v-b-tooltip.hover
-                    title="Include hidden"
+                    :title="localize('Include hidden')"
                     variant="link"
                     size="sm"
                     class="rounded-0 text-decoration-none"

client/src/components/History/CurrentHistory/HistoryNavigation.vue

@@ -52,7 +52,7 @@ function userTitle(title: string) {
             aria-label="current history management">
             <GButton v-if="!props.minimal" size="small" transparent @click="emit('show', false)">
                 <FontAwesomeIcon fixed-width :icon="faChevronRight" />
-                <span>History</span>
+                <span v-localize>History</span>
             </GButton>
 
             <BButtonGroup>

client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue

@@ -3,6 +3,7 @@ import { faCheckSquare, faCompress } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import type { HistorySummaryExtended } from "@/api";
+import localize from "@/utils/localization";
 
 import DefaultOperations from "@/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue";
 
@@ -34,7 +35,7 @@ function onUpdateOperationStatus(updateTime: number) {
             <BButtonGroup>
                 <BButton
                     v-b-tooltip.hover
-                    title="Select Items"
+                    :title="localize('Select Items')"
                     class="show-history-content-selectors-btn rounded-0"
                     size="sm"
                     variant="link"
@@ -46,7 +47,7 @@ function onUpdateOperationStatus(updateTime: number) {
 
                 <BButton
                     v-b-tooltip.hover
-                    title="Collapse Items"
+                    :title="localize('Collapse Items')"
                     class="rounded-0"
                     size="sm"
                     variant="link"
@@ -69,7 +70,7 @@ function onUpdateOperationStatus(updateTime: number) {
         <nav v-else-if="isMultiViewItem" class="content-operations bg-secondary">
             <BButton
                 v-b-tooltip.hover
-                title="Collapse Items"
+                :title="localize('Collapse Items')"
                 class="rounded-0"
                 size="sm"
                 variant="link"