refactor: introduce trString for frontend (#38741)

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>

web_src/js/components/ActionRunSummaryView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import WorkflowGraph from './WorkflowGraph.vue';
-import type {ActionRunViewStore} from "./ActionRunView.ts";
-import {computed, onBeforeUnmount, onMounted, toRefs} from "vue";
+import type {ActionRunViewStore} from './ActionRunView.ts';
+import {computed, onBeforeUnmount, onMounted, toRefs} from 'vue';
+import {trString} from '../modules/i18n.ts';
 
 defineOptions({
   name: 'ActionRunSummaryView',
@@ -41,7 +42,7 @@ const triggerUser = computed(() => {
 
 const triggerLabel = computed(() => {
   if (isRerun.value) return locale.rerunTriggered;
-  return locale.triggeredVia.replace('%s', run.value.triggerEvent);
+  return trString(locale.triggeredVia, run.value.triggerEvent);
 });
 
 const artifactsDisplay = computed(() => props.artifactCount > 0 ? String(props.artifactCount) : '–');

web_src/js/components/RepoActionView.vue

@@ -9,6 +9,7 @@ import ActionRunJobView from './ActionRunJobView.vue';
 import type {ActionsJob, ActionsRunAttempt} from '../modules/gitea-actions.ts';
 import {buildJobsByParentJobID, createActionRunViewStore} from './ActionRunView.ts';
 import {buildArtifactTooltipHtml} from './ActionRunArtifacts.ts';
+import {trString} from '../modules/i18n.ts';
 
 defineOptions({
   name: 'RepoActionView',
@@ -115,7 +116,7 @@ function approveRun() {
 }
 
 async function deleteArtifact(name: string) {
-  if (!window.confirm(locale.confirmDeleteArtifact.replace('%s', name))) return;
+  if (!window.confirm(trString(locale.confirmDeleteArtifact, name))) return;
   await DELETE(buildArtifactLink(name));
   await store.forceReloadCurrentRun();
 }

web_src/js/components/RepoBranchTagSelector.vue

@@ -5,6 +5,7 @@ import {showErrorToast} from '../modules/toast.ts';
 import {GET} from '../modules/fetch.ts';
 import {pathEscapeSegments} from '../utils/url.ts';
 import type {GitRefType} from '../types.ts';
+import {trString} from '../modules/i18n.ts';
 
 type ListItem = {
   selected: boolean;
@@ -121,6 +122,7 @@ export default defineComponent({
   },
 
   methods: {
+    trString,
     selectItem(item: ListItem) {
       this.menuVisible = false;
       if (this.refFormActionTemplate) {
@@ -261,11 +263,11 @@ export default defineComponent({
         <div class="item" v-if="showCreateNewRef" :class="{active: activeItemIndex === filteredItems.length}" :ref="'listItem' + filteredItems.length" @click="createNewRef()">
           <div v-if="selectedTab === 'tags'">
             <svg-icon name="octicon-tag" class="tw-mr-1"/>
-            <span v-text="textCreateTag.replace('%s', searchTerm)"/>
+            <span v-text="trString(textCreateTag, searchTerm)"/>
           </div>
           <div v-else>
             <svg-icon name="octicon-git-branch" class="tw-mr-1"/>
-            <span v-text="textCreateBranch.replace('%s', searchTerm)"/>
+            <span v-text="trString(textCreateBranch, searchTerm)"/>
           </div>
           <div class="tw-text-xs">
             {{ textCreateRefFrom.replace('%s', currentRefShortName) }}

web_src/js/components/WorkflowGraph.vue

@@ -4,7 +4,7 @@ import {SvgIcon} from '../svg.ts';
 import ActionStatusIcon from './ActionStatusIcon.vue';
 import {localUserSettings} from '../modules/user-settings.ts';
 import {isPlainClick} from '../utils/dom.ts';
-import {trN} from '../modules/i18n.ts';
+import {trN, trString} from '../modules/i18n.ts';
 import {debounce} from '../utils/func.ts';
 import type {ActionsJob} from '../modules/gitea-actions.ts';
 import type {ActionRunViewStore} from './ActionRunView.ts';
@@ -113,7 +113,7 @@ const successRateLabel = computed(() => {
 const graphStats = computed(() => [
   trN(props.jobs.length, props.locale.graphJobsCount1, props.locale.graphJobsCountN),
   trN(edges.value.length, props.locale.graphDependenciesCount1, props.locale.graphDependenciesCountN),
-  props.locale.graphSuccessRate.replace('%s', successRateLabel.value),
+  trString(props.locale.graphSuccessRate, successRateLabel.value),
 ].join(' • '));
 
 const minScale = 0.3;