From bf8942a61c42b14c289fce11c6f858f8a25fb323 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 24 Feb 2022 16:28:42 +0530
Subject: [PATCH 1/2] refactor: i18n translations

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../nc-gui/components/ProjectTreeView.vue     |  8 ++---
 packages/nc-gui/components/auth/apiTokens.vue | 17 ++++++----
 packages/nc-gui/components/auth/roles.vue     |  5 +--
 .../nc-gui/components/import/excelImport.vue  | 33 ++++++++++++-------
 .../nc-gui/components/project/appStore.vue    |  2 +-
 .../nc-gui/components/project/auditTab.vue    | 14 ++++++--
 .../components/project/auditTab/audit.vue     | 15 ++++++---
 .../spreadsheet/components/editColumn.vue     | 16 +++++----
 .../components/editVirtualColumn.vue          |  2 +-
 .../nc-gui/components/templates/editor.vue    | 10 +++---
 packages/nc-gui/components/utils/language.vue |  5 ++-
 11 files changed, 83 insertions(+), 44 deletions(-)

diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index d207a8b22d..c4911cbbb5 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -943,7 +943,7 @@ export default {
         this.changeActiveTab(tabIndex);
       } else {
         console.log('add app store tab');
-        let item = {name: 'App Store', key: `appStore`};
+        let item = {name: `${this.$t('title.appStore')} `, key: `appStore`};
         item._nodes = {env: '_noco'};
         item._nodes.type = 'appStore';
         this.$store.dispatch('tabs/ActAddTab', item);
@@ -979,7 +979,7 @@ export default {
         this.changeActiveTab(tabIndex);
       } else {
         console.log('add roles tab');
-        let item = {name: 'Team & Auth ', key: `roles`};
+        let item = {name: `${this.$t('title.team&auth')} `, key: `roles`};
         item._nodes = {env: '_noco'};
         item._nodes.type = 'roles';
         this.$store.dispatch('tabs/ActAddTab', item);
@@ -991,7 +991,7 @@ export default {
         this.changeActiveTab(tabIndex);
       } else {
         console.log('add acl tab');
-        let item = {name: 'Meta Management', key: `disableOrEnableModel`};
+        let item = {name: `${this.$t('title.metaMgmt')}`, key: `disableOrEnableModel`};
         item._nodes = {env: '_noco'};
         item._nodes.type = 'disableOrEnableModel';
         this.$store.dispatch('tabs/ActAddTab', item);
@@ -1002,7 +1002,7 @@ export default {
         this.changeActiveTab(tabIndex);
       } else {
         console.log('add audit tab');
-        let item = {name: 'Audit', key: `migrationsDir`};
+        let item = {name: `${this.$t('title.audit')}`, key: `migrationsDir`};
         item._nodes = {
           env: '_noco',
           dbAlias: 'db'
diff --git a/packages/nc-gui/components/auth/apiTokens.vue b/packages/nc-gui/components/auth/apiTokens.vue
index 2dc1145fc6..acd04123da 100644
--- a/packages/nc-gui/components/auth/apiTokens.vue
+++ b/packages/nc-gui/components/auth/apiTokens.vue
@@ -32,7 +32,8 @@
         <v-icon small left>
           mdi-plus
         </v-icon>
-        New Token
+        <!--New Token-->
+        {{ $t('activity.newToken') }}
       </x-btn>
     </v-toolbar>
 
@@ -41,13 +42,16 @@
         <thead>
           <tr class="">
             <th class="caption text-center">
-              Description
+              <!--Description-->
+              {{ $t('labels.description') }}
             </th>
             <th class="caption text-center">
-              Token
+              <!--Token-->
+              {{ $t('labels.token') }}
             </th>
             <th class="caption text-center">
-              Actions
+              <!--Actions-->
+              {{ $t('labels.action') }}
             </th>
           </tr>
         </thead>
@@ -90,7 +94,8 @@
           <td colspan="3" class="text-center">
             <x-btn tooltip="Generate new api token" outlined x-small color="primary" @click="newTokenDialog = true">
               <v-icon>mdi-plus</v-icon>
-              Add New Token
+              <!--Add New Token-->
+              {{ $t('activity.newToken') }}
             </x-btn>
           </td>
         </tr>
@@ -110,7 +115,7 @@
                 v-model="tokenObj.description"
                 filled
                 dense
-                label="Description"
+                :label="$t('labels.description')"
               />
             </v-col>
           </v-row>
diff --git a/packages/nc-gui/components/auth/roles.vue b/packages/nc-gui/components/auth/roles.vue
index 21f49214b9..c2c7ed2394 100644
--- a/packages/nc-gui/components/auth/roles.vue
+++ b/packages/nc-gui/components/auth/roles.vue
@@ -36,7 +36,7 @@
         <v-icon small left>
           refresh
         </v-icon>
-        {{ $t('general.reload')}}
+        {{ $t('general.reload') }}
       </x-btn>
       <x-btn
         v-ge="['roles','add new']"
@@ -51,7 +51,8 @@
         <v-icon small left>
           mdi-plus
         </v-icon>
-        New Role
+        <!--New Role-->
+        {{ $t('activity.newRole') }}
       </x-btn>
       <x-btn
         v-ge="['rows','save']"
diff --git a/packages/nc-gui/components/import/excelImport.vue b/packages/nc-gui/components/import/excelImport.vue
index 114596f67c..1506cc3376 100644
--- a/packages/nc-gui/components/import/excelImport.vue
+++ b/packages/nc-gui/components/import/excelImport.vue
@@ -35,14 +35,17 @@
                   mdi-file-plus-outline
                 </x-icon>
                 <p class="title  mb-1 mt-2">
-                  Select File to Upload
+                  <!-- Select File to Upload-->
+                  {{ $t('msg.info.upload') }}
                 </p>
                 <p class="grey--text mb-1">
-                  or drag and drop file
+                  <!-- or drag and drop file-->
+                  {{ $t('msg.info.upload_sub') }}
                 </p>
 
                 <p class="caption grey--text">
-                  Supported: .xls, .xlsx, .xlsm, .ods, .ots
+                  <!-- Supported: .xls, .xlsx, .xlsm, .ods, .ots-->
+                  {{ $t('msg.info.excelSupport') }}
                 </p>
               </div>
             </div>
@@ -52,18 +55,20 @@
               <div class="pa-4 d-100 h-100">
                 <v-form ref="form" v-model="valid">
                   <div class="d-flex">
+                    <!--label="Enter excel file url"-->
                     <v-text-field
                       v-model="url"
                       hide-details="auto"
                       type="url"
-                      label="Enter excel file url"
+                      :label="$t('msg.info.excelURL')"
                       class="caption"
                       outlined
                       dense
-                      :rules="[v => !!v || 'Required']"
+                      :rules="[v => !!v || $t('general.required') ]"
                     />
                     <v-btn class="ml-3" color="primary" @click="loadUrl">
-                      Load
+                      <!--Load-->
+                      {{ $t('general.load') }}
                     </v-btn>
                   </div>
                 </v-form>
@@ -75,20 +80,21 @@
         <div class="px-4 pb-2">
           <div class="d-flex">
             <v-spacer />
-            <span class="caption pointer grey--text" @click="showMore = !showMore">{{ showMore ? 'Hide' : 'Show' }} more
+            <span class="caption pointer grey--text" @click="showMore = !showMore">
+              {{ showMore ? $t('general.hideAll') : $t('general.showMore') }}
               <v-icon small color="grey lighten-1">mdi-menu-{{ showMore ? 'up' : 'down' }}</v-icon>
             </span>
           </div>
           <div class="mb-2 pt-2 nc-excel-import-options" :style="{ maxHeight: showMore ? '100px' : '0'}">
             <p />
-
+            <!--hint="# of rows to parse to infer data type"-->
             <v-text-field
               v-model="parserConfig.maxRowsToParse"
               style="max-width: 250px"
               class="caption mx-auto"
               dense
               persistent-hint
-              hint="# of rows to parse to infer data type"
+              :hint="$t('msg.info.footMsg')"
               outlined
               type="number"
             />
@@ -118,7 +124,8 @@
           <v-icon small class="mr-1">
             mdi-file-excel-outline
           </v-icon>
-          Import
+          <!--Import-->
+          {{ $t('activity.import') }}
         </v-btn>
       </template>
       <span class="caption">Create template from Excel</span>
@@ -128,8 +135,9 @@
       <v-card class="pa-6" min-width="500">
         <template-editor :project-template.sync="templateData" excel-import>
           <template #toolbar="{valid}">
+            <!--Importing-->
             <h3 class="mt-2 grey--text">
-              Importing : {{ filename }}
+              {{ $t('activity.importExcel') }} : {{ filename }}
             </h3>
             <!--            <span class="grey&#45;&#45;text">Importing 2 sheets</span>-->
 
@@ -145,7 +153,8 @@
               create-rest-text="Import as REST Project"
               @success="$emit('success'),templateEditorModal = false"
             >
-              Import Excel
+              <!--Import Excel-->
+              {{ $t('activity.importExcel') }}
             </create-project-from-template-btn>
           </template>
         </template-editor>
diff --git a/packages/nc-gui/components/project/appStore.vue b/packages/nc-gui/components/project/appStore.vue
index e79d0a814f..ed9e70492e 100644
--- a/packages/nc-gui/components/project/appStore.vue
+++ b/packages/nc-gui/components/project/appStore.vue
@@ -133,7 +133,7 @@
         v-model="query"
         dense
         hide-details
-        placeholder="Search apps"
+        :placeholder="$t('placeholder.searchApps')"
         color="primary"
         class="search-field caption"
       >
diff --git a/packages/nc-gui/components/project/auditTab.vue b/packages/nc-gui/components/project/auditTab.vue
index 72c30cc72f..0f60d7b0ee 100644
--- a/packages/nc-gui/components/project/auditTab.vue
+++ b/packages/nc-gui/components/project/auditTab.vue
@@ -1,11 +1,21 @@
 <template>
   <v-tabs class="h-100" color="x-active">
-    <v-tab><span class="caption text-capitalize">Audit Logs</span></v-tab>
+    <v-tab>
+      <span class="caption text-capitalize">
+        <!--Audit Logs-->
+        {{ $t('title.auditLogs') }}
+      </span>
+    </v-tab>
     <v-tab-item class="h-100">
       <audit :nodes="nodes" />
     </v-tab-item>
 
-    <v-tab><span class="caption text-capitalize">SQL Migrations</span></v-tab>
+    <v-tab>
+      <span class="caption text-capitalize">
+        <!--SQL Migrations-->
+        {{ $t('title.sqlMigrations') }}
+      </span>
+    </v-tab>
     <v-tab-item>
       <sql-log-and-output>
         <db :nodes="nodes" />
diff --git a/packages/nc-gui/components/project/auditTab/audit.vue b/packages/nc-gui/components/project/auditTab/audit.vue
index b49b6f72b0..35a748d271 100644
--- a/packages/nc-gui/components/project/auditTab/audit.vue
+++ b/packages/nc-gui/components/project/auditTab/audit.vue
@@ -20,20 +20,25 @@
         <thead>
           <tr>
             <th class="caption">
-              Operation Type
+              <!--Operation Type-->
+              {{ $t('labels.operationType') }}
             </th>
             <th class="caption">
-              Operation Sub Type
+              <!---->
+              {{ $t('labels.operationSubType') }}
             </th>
             <th class="caption">
-              Description
+              <!--Description-->
+              {{ $t('labels.description') }}
             </th>
             <th class="caption">
-              User
+              <!--User-->
+              {{ $t('objects.user') }}
             </th>
             <!--          <th class="caption">Ip</th>-->
             <th class="caption">
-              Created
+              <!--Created-->
+              {{ $t('labels.created') }}
             </th>
           </tr>
         </thead>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
index 7cbc7253ae..2d01264cc4 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
@@ -10,6 +10,7 @@
       <v-container fluid @click.stop.prevent>
         <v-row>
           <v-col cols="12" class="mt-2">
+            <!--label: Column Name-->
             <v-text-field
               ref="column"
               v-model="newColumn.cn"
@@ -21,7 +22,7 @@
                 validateColumnName
               ]"
               class="caption nc-column-name-input"
-              label="Column name"
+              :label="$t('labels.columnName')"
               dense
               outlined
               @input="newColumn.altered = newColumn.altered || 8"
@@ -59,6 +60,7 @@
               </v-col>
               <template v-else>
                 <v-col cols="12">
+                  <!--label: Column Type-->
                   <v-autocomplete
                     v-model="newColumn.uidt"
                     hide-details
@@ -66,7 +68,7 @@
                     item-text="name"
                     class="caption ui-type nc-ui-dt-dropdown"
                     :class="{'primary lighten-5' : newColumn.uidt }"
-                    label="Column type"
+                    :label="$t('labels.columnType')"
                     dense
                     outlined
                     :items="uiTypes"
@@ -118,7 +120,7 @@
                     class="pointer grey--text text-right caption nc-more-options"
                     @click="advanceOptions = !advanceOptions"
                   >
-                    {{ advanceOptions ? 'Hide' : 'Show more' }} options
+                    {{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }}
                     <v-icon x-small color="grey">
                       mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline
                     </v-icon>
@@ -301,11 +303,12 @@
                                 </div>
                               </v-col>
                               <v-col cols="12">
+                                <!--label="Type in Database"-->
                                 <v-autocomplete
                                   v-model="newColumn.dt"
                                   hide-details
                                   class="caption data-type"
-                                  label="Type in Database"
+                                  :label="$t('labels.databaseType')"
                                   dense
                                   outlined
                                   :items="dataTypes"
@@ -314,13 +317,14 @@
                               </v-col>
 
                               <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
+                                <!--label="Length / Values"-->
                                 <v-text-field
                                   v-if="!isSelect"
                                   v-model="newColumn.dtxp"
                                   dense
                                   :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
                                   class="caption"
-                                  label="Length / Values"
+                                  :label="$t('labels.lengthValue')"
                                   outlined
                                   hide-details
                                   @input="newColumn.altered = newColumn.altered || 2"
@@ -342,7 +346,7 @@
                               <v-col cols="12">
                                 <v-textarea
                                   v-model="newColumn.cdf"
-                                  label="Default value"
+                                  :label="$t('placeholder.defaultValue')"
                                   :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
                                   persistent-hint
                                   rows="3"
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
index c45626c4bc..bd3e98815e 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
@@ -16,7 +16,7 @@
               hide-details="auto"
               color="primary"
               class="caption nc-column-name-input"
-              label="Column name"
+              :label="$t('labels.columnName')"
               :rules="[
                 v => !!v || 'Required',
                 v => !meta || !meta.columns || !column ||meta.columns.every(c => v !== c.cn ) && meta.v.every(c => column && c._cn === column._cn || v !== c._cn ) || 'Duplicate column name',
diff --git a/packages/nc-gui/components/templates/editor.vue b/packages/nc-gui/components/templates/editor.vue
index 91754118e1..8f23ef451e 100644
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/editor.vue
@@ -112,7 +112,7 @@
                 </div>
 
                 <p v-if="project.tables" class="caption grey--text mt-4">
-                  {{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' :'' }} are available for import
+                  {{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' :'' }} available for import
                 </p>
 
                 <v-expansion-panels
@@ -168,10 +168,12 @@
                           <thead>
                             <tr>
                               <th class="caption text-left pa-1">
-                                Column Name
+                                <!--Column Name-->
+                                {{ $t('labels.columnName') }}
                               </th>
                               <th class="caption text-left pa-1" colspan="4">
-                                Column Type
+                                <!--Column Type-->
+                                {{ $t('labels.columnType') }}
                               </th>
                               <th />
                             <!--                    <th class='text-center'>Related Table</th>-->
@@ -193,7 +195,7 @@
                                   outlined
                                   dense
                                   class="caption"
-                                  placeholder="Column name"
+                                  :placeholder="$t('labels.columnName')"
                                   hide-details="auto"
                                   :rules="[
                                     v => !!v || 'Column name required',
diff --git a/packages/nc-gui/components/utils/language.vue b/packages/nc-gui/components/utils/language.vue
index 6592af64a9..e8b3eb35f2 100644
--- a/packages/nc-gui/components/utils/language.vue
+++ b/packages/nc-gui/components/utils/language.vue
@@ -25,7 +25,10 @@
         </v-list-item-group>
         <v-divider />
         <v-list-item>
-          <a href="https://github.com/nocodb/nocodb/tree/master/packages/nc-gui/lang" target="_blank" class="caption">Help translate</a>
+          <a href="https://github.com/nocodb/nocodb/tree/master/packages/nc-gui/lang" target="_blank" class="caption">
+            <!--Help translate-->
+            {{ $t('activity.translate') }}
+          </a>
         </v-list-item>
       </v-list>
     </v-menu>

From 40ed4c36974df3d7d108303bc5031df54ae7e15c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 24 Feb 2022 17:10:47 +0530
Subject: [PATCH 2/2] test: cypress corrections for i18n changes

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../integration/common/7a_create_project_from_excel.js        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/cypress/integration/common/7a_create_project_from_excel.js b/scripts/cypress/integration/common/7a_create_project_from_excel.js
index a3e9dbfa05..9e08ab5358 100644
--- a/scripts/cypress/integration/common/7a_create_project_from_excel.js
+++ b/scripts/cypress/integration/common/7a_create_project_from_excel.js
@@ -138,7 +138,7 @@ export const genTest = (apiType, dbType) => {
                                 for (let j = 1; j < row.length; j++) {
                                     // column name to match input in excel
                                     cy.wrap(row[j])
-                                        .find('[placeholder="Column name"]')
+                                        .find('[placeholder="Column Name"]')
                                         .then((obj) => {
                                             cy.log(obj[0].value);
                                             expect(obj[0].value).to.equal(
@@ -269,7 +269,7 @@ export const genTest = (apiType, dbType) => {
                                     ) {
                                         // column name to match input in excel
                                         cy.wrap(row[j])
-                                            .find('[placeholder="Column name"]')
+                                            .find('[placeholder="Column Name"]')
                                             .then((obj) => {
                                                 cy.log(obj[0].value);
                                                 expect(obj[0].value).to.equal(