Move all static texts to locale file (#989)

* Move all static texts to locale file

* Fix message

Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com>

Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com>

web/src/App.vue

@@ -18,6 +18,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import BuildFeedSidebar from '~/components/build-feed/BuildFeedSidebar.vue';
@@ -37,9 +38,11 @@ export default defineComponent({
     const route = useRoute();
     const apiClient = useApiClient();
     const notifications = useNotifications();
+    const i18n = useI18n();
+
     // eslint-disable-next-line promise/prefer-await-to-callbacks
     apiClient.setErrorHandler((err) => {
-      notifications.notify({ title: err.message || 'An unknown error occurred', type: 'error' });
+      notifications.notify({ title: err.message || i18n.t('unknown_error'), type: 'error' });
     });
 
     const blank = computed(() => route.meta.blank);

web/src/assets/locales/en.json

@@ -3,11 +3,13 @@
   "welcome": "Welcome to Woodpecker",
   "repos": "Repos",
   "repositories": "Repositories",
+  "docs": "Docs",
   "logout": "Logout",
   "search": "Search...",
   "username": "Username",
   "password": "Password",
   "url": "URL",
+  "unknown_error": "An unknown error occurred",
 
   "not_found": {
     "not_found": "Whoa 404, either we broke something or you had a typing mishap :-/",
@@ -41,6 +43,7 @@
 
     "settings": {
       "settings": "Settings",
+      "not_allowed": "Not allowed to access this repository's settings",
 
       "general": {
         "general": "General",
@@ -169,10 +172,12 @@
       "no_files": "No files have been changed.",
       "execution_error": "Execution error",
       "no_pipelines": "No pipelines have been started yet.",
+      "no_pipeline_steps": "No pipeline steps available!",
       "step_not_started": "This step hasn't started yet.",
       "pipelines_for": "Pipelines for branch \"{branch}\"",
       "exit_code": "exit code {exitCode}",
       "loading": "Loading ...",
+      "pipeline": "Pipeline #{buildId}",
 
       "actions": {
         "cancel": "Cancel",
@@ -185,7 +190,9 @@
         "awaits": "This pipeline is awaiting approval by some maintainer!",
         "approve": "Approve",
         "decline": "Decline",
-        "declined": "This pipeline has been declined!"
+        "declined": "This pipeline has been declined!",
+        "approve_success": "Pipeline approved",
+        "decline_success": "Pipeline declined"
       },
       "event": {
         "push": "Push",

web/src/components/layout/header/Navbar.vue

@@ -19,7 +19,7 @@
         :href="docsUrl"
         target="_blank"
         class="hover:bg-lime-700 dark:hover:bg-gray-600 px-4 py-1 rounded-md hidden md:flex"
-        >Docs</a
+        >{{ $t('docs') }}</a
       >
       <IconButton
         :icon="darkMode ? 'dark' : 'light'"

web/src/components/repo/build/BuildItem.vue

@@ -53,7 +53,9 @@
           <Icon name="since" />
           <Tooltip>
             <span>{{ since }}</span>
-            <template #popper><span class="font-bold">Created</span> {{ created }}</template>
+            <template #popper>
+              <span class="font-bold">{{ $t('repo.build.created') }}</span> {{ created }}
+            </template>
           </Tooltip>
         </div>
       </div>

web/src/components/repo/build/BuildProcList.vue

@@ -46,7 +46,7 @@
     </div>
 
     <div v-if="build.procs === undefined || build.procs.length === 0" class="m-auto mt-4">
-      <span>No pipeline steps available!</span>
+      <span>{{ $t('repo.build.no_pipeline_steps') }}</span>
     </div>
 
     <div class="flex flex-grow relative min-h-0 overflow-y-auto">

web/src/components/repo/settings/GeneralTab.vue

@@ -1,7 +1,7 @@
 <template>
   <Panel>
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-color">{{ $t('general') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.general.general') }}</h1>
     </div>
 
     <div v-if="repoSettings" class="flex flex-col">

web/src/views/repo/RepoSettings.vue

@@ -27,6 +27,7 @@
 
 <script lang="ts">
 import { defineComponent, inject, onMounted, Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import IconButton from '~/components/atomic/IconButton.vue';
@@ -60,6 +61,7 @@ export default defineComponent({
   setup() {
     const notifications = useNotifications();
     const router = useRouter();
+    const i18n = useI18n();
 
     const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
     if (!repoPermissions) {
@@ -68,7 +70,7 @@ export default defineComponent({
 
     onMounted(async () => {
       if (!repoPermissions.value.admin) {
-        notifications.notify({ type: 'error', title: 'Not allowed to access these repository settings' });
+        notifications.notify({ type: 'error', title: i18n.t('repo.settings.not_allowed') });
         await router.replace({ name: 'home' });
       }
     });

web/src/views/repo/build/Build.vue

@@ -46,6 +46,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, Ref, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
@@ -82,6 +83,7 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const notifications = useNotifications();
+    const i18n = useI18n();
 
     const build = inject<Ref<Build>>('build');
     const repo = inject<Ref<Repo>>('repo');
@@ -142,7 +144,7 @@ export default defineComponent({
       }
 
       await apiClient.approveBuild(repo.value.owner, repo.value.name, `${build.value.number}`);
-      notifications.notify({ title: 'Pipeline approved', type: 'success' });
+      notifications.notify({ title: i18n.t('repo.build.protected.approve_success'), type: 'success' });
     });
 
     const { doSubmit: declineBuild, isLoading: isDecliningBuild } = useAsyncAction(async () => {
@@ -151,7 +153,7 @@ export default defineComponent({
       }
 
       await apiClient.declineBuild(repo.value.owner, repo.value.name, `${build.value.number}`);
-      notifications.notify({ title: 'Pipeline declined', type: 'success' });
+      notifications.notify({ title: i18n.t('repo.build.protected.decline_success'), type: 'success' });
     });
 
     return {

web/src/views/repo/build/BuildWrapper.vue

@@ -16,7 +16,7 @@
             overflow-hidden overflow-ellipsis
           "
         >
-          <span class="w-full md:w-auto text-center">Pipeline #{{ buildId }}</span>
+          <span class="w-full md:w-auto text-center">{{ $t('repo.build.pipeline', { buildId }) }}</span>
           <span class="<md:hidden mx-2">-</span>
           <span class="w-full md:w-auto text-center truncate">{{ message }}</span>
         </h1>