From 24d121fcd8858e7c6863db7e4629e2ed396d6a97 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 2 Sep 2022 11:42:36 +0530
Subject: [PATCH] refactor: i18n for audit, metadata

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../dashboard/settings/AuditTab.vue           | 20 ++++++++++++------
 .../dashboard/settings/Metadata.vue           | 21 ++++++++++++-------
 packages/nc-gui-v2/components/tabs/Auth.vue   |  2 +-
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 91e5cd56af..29936119c6 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { Tooltip as ATooltip } from 'ant-design-vue'
 import type { AuditType } from 'nocodb-sdk'
 import { timeAgo } from '~/utils/dateTimeUtils'
@@ -7,6 +8,7 @@ import MdiReload from '~icons/mdi/reload'
 
 const { $api } = useNuxtApp()
 const { project } = useProject()
+const { t } = useI18n()
 
 let isLoading = $ref(false)
 
@@ -47,28 +49,33 @@ const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gra
 
 const columns = [
   {
-    title: tableHeaderRenderer('Operation Type'),
+    // Operation Type
+    title: tableHeaderRenderer(t('labels.operationType')),
     dataIndex: 'op_type',
     key: 'op_type',
   },
   {
-    title: tableHeaderRenderer('Operation sub-type'),
+    // Operation sub-type
+    title: tableHeaderRenderer(t('labels.operationSubType')),
     dataIndex: 'op_sub_type',
     key: 'op_sub_type',
   },
   {
-    title: tableHeaderRenderer('Description'),
+    // Description
+    title: tableHeaderRenderer(t('labels.description')),
     dataIndex: 'description',
     key: 'description',
   },
   {
-    title: tableHeaderRenderer('User'),
+    // User
+    title: tableHeaderRenderer(t('objects.user')),
     dataIndex: 'user',
     key: 'user',
     customRender: (value: { text: string }) => h('div', {}, value.text || 'Shared base'),
   },
   {
-    title: tableHeaderRenderer('Created'),
+    // Created
+    title: tableHeaderRenderer(t('labels.created')),
     dataIndex: 'created_at',
     key: 'created_at',
     sort: 'desc',
@@ -82,9 +89,10 @@ const columns = [
   <div class="flex flex-col gap-4 w-full">
     <div class="flex flex-row justify-between items-center">
       <a-button class="self-start" @click="loadAudits">
+        <!--        Reload -->
         <div class="flex items-center gap-2 text-gray-600 font-light">
           <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
-          Reload
+          {{ $t('general.reload') }}
         </div>
       </a-button>
       <a-pagination
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
index a046b9eae2..3239089cb8 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { message } from 'ant-design-vue'
 import { h, useNuxtApp, useProject } from '#imports'
 import MdiReload from '~icons/mdi/reload'
@@ -55,20 +56,23 @@ onMounted(async () => {
 })
 
 const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gray-500' }, label)
-
+const { t } = useI18n()
 const columns = [
   {
-    title: tableHeaderRenderer('Models'),
+    // Models
+    title: tableHeaderRenderer(t('labels.models')),
     key: 'table_name',
     customRender: ({ record }: { record: { table_name: string; title?: string } }) =>
       h('div', {}, record.title || record.table_name),
   },
   {
-    title: tableHeaderRenderer('Sync State'),
+    // Sync state
+    title: tableHeaderRenderer(t('labels.syncState')),
     dataIndex: 'syncState',
     key: 'syncState',
+    // No change identified
     customRender: (value: { text: string }) =>
-      h('div', { style: { color: value.text ? 'red' : 'gray' } }, value.text || 'No change identified'),
+      h('div', { style: { color: value.text ? 'red' : 'gray' } }, value.text || t('msg.info.metaNoChange')),
   },
 ]
 </script>
@@ -77,10 +81,11 @@ const columns = [
   <div class="flex flex-row w-full">
     <div class="flex flex-col w-3/5">
       <div class="flex flex-row justify-end items-center w-full mb-4">
+        <!--        Reload -->
         <a-button class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
           <div class="flex items-center gap-2 text-gray-600 font-light">
             <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
-            Reload
+            {{ $t('general.reload') }}
           </div>
         </a-button>
       </div>
@@ -102,16 +107,18 @@ const columns = [
       </div>
     </div>
     <div class="flex place-content-center w-2/5">
+      <!--      Sync Now -->
       <div v-if="isDifferent">
         <a-button v-t="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff">
           <div class="flex items-center gap-2">
             <MdiDatabaseSync />
-            Sync Now
+            {{ $t('activity.metaSync') }}
           </div>
         </a-button>
       </div>
       <div v-else>
-        <span><a-alert message="Tables metadata is in sync" type="success" show-icon /></span>
+        <!--        Tables metadata is in sync -->
+        <span><a-alert :message="$t('msg.info.tablesMetadataInSync')" type="success" show-icon /></span>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui-v2/components/tabs/Auth.vue b/packages/nc-gui-v2/components/tabs/Auth.vue
index 864c6caad3..21af03e881 100644
--- a/packages/nc-gui-v2/components/tabs/Auth.vue
+++ b/packages/nc-gui-v2/components/tabs/Auth.vue
@@ -16,7 +16,7 @@ const tabsInfo: Tab[] = [
   },
   {
     title: 'API Token Management',
-    label: t('title.userMgmt'),
+    label: t('title.apiTokenMgmt'),
     body: () => ApiTokenManagement,
   },
 ]