fix: i18n for Access settings page and Data source page and its modal

packages/nc-gui/components/dashboard/settings/DataSources.vue

@@ -18,6 +18,8 @@ const vReload = useVModel(props, 'reload', emits)
 
 const { $api, $e } = useNuxtApp()
 
+const { t } = useI18n()
+
 const { loadProject } = useProjects()
 
 const projectStore = useProject()
@@ -135,7 +137,7 @@ const moveBase = async (e: any) => {
           id: base.id,
           project_id: base.project_id,
         })
-        message.info('Bases are migrated. Please try again.')
+        message.info(t('info.basesMigrated'))
       } else {
         await $api.base.update(base.project_id as string, base.id as string, {
           id: base.id,
@@ -302,7 +304,7 @@ const isEditBaseModalOpen = computed({
         >
           <div class="flex flex-row items-center w-full gap-x-1">
             <component :is="iconMap.plus" />
-            <div class="flex">New Source</div>
+            <div class="flex">{{ $t('activity.newSource') }}</div>
           </div>
         </NcButton>
       </div>
@@ -314,10 +316,10 @@ const isEditBaseModalOpen = computed({
       >
         <div class="ds-table-head">
           <div class="ds-table-row">
-            <div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">Visibility</div>
+            <div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">{{ $t('general.visibility') }}</div>
-            <div class="ds-table-col ds-table-name">Name</div>
+            <div class="ds-table-col ds-table-name">{{ $t('general.name') }}</div>
-            <div class="ds-table-col ds-table-type">Type</div>
+            <div class="ds-table-col ds-table-type">{{ $t('general.type') }}</div>
-            <div class="ds-table-col ds-table-actions pl-2">Actions</div>
+            <div class="ds-table-col ds-table-actions pl-2">{{ $t('labels.actions') }}</div>
             <div class="ds-table-col ds-table-crud"></div>
           </div>
         </div>
@@ -329,8 +331,8 @@ const isEditBaseModalOpen = computed({
                   <div class="flex items-center gap-1 cursor-pointer">
                     <a-tooltip>
                       <template #title>
-                        <template v-if="sources[0].enabled">Hide in UI</template>
+                        <template v-if="sources[0].enabled">{{ $t('activity.hideInUI') }}</template>
-                        <template v-else>Show in UI</template>
+                        <template v-else>{{ $t('activity.showInUI') }}</template>
                       </template>
                       <a-switch
                         :checked="sources[0].enabled ? true : false"
@@ -343,7 +345,7 @@ const isEditBaseModalOpen = computed({
                 <div class="ds-table-col ds-table-name font-medium">
                   <div class="flex items-center gap-1">
                     <!-- <GeneralBaseLogo :base-type="sources[0].type" /> -->
-                    Default
+                    {{ $t('general.default') }}
                   </div>
                 </div>
 
@@ -361,11 +363,11 @@ const isEditBaseModalOpen = computed({
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <a-tooltip v-if="metadiffbases.includes(sources[0].id)">
-                          <template #title>Out of sync</template>
+                          <template #title>{{ $t('activity.outOfSync') }}</template>
                           <GeneralIcon icon="warning" class="group-hover:text-accent text-primary" />
                         </a-tooltip>
                         <GeneralIcon v-else icon="sync" class="group-hover:text-accent" />
-                        Sync Metadata
+                        {{ $t('activity.metaSync') }}
                       </div>
                     </a-button>
                     <a-button
@@ -375,7 +377,7 @@ const isEditBaseModalOpen = computed({
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        Relations
+                        {{ $t('title.relations') }}
                       </div>
                     </a-button>
                     <a-button
@@ -385,7 +387,7 @@ const isEditBaseModalOpen = computed({
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        UI ACL
+                        {{ $t('labels.uiAcl') }}
                       </div>
                     </a-button>
                     <a-button
@@ -395,7 +397,7 @@ const isEditBaseModalOpen = computed({
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="book" class="group-hover:text-accent" />
-                        Audit
+                        {{ $t('title.audit') }}
                       </div>
                     </a-button>
                   </div>
@@ -418,8 +420,8 @@ const isEditBaseModalOpen = computed({
                   <div class="flex items-center gap-1 cursor-pointer">
                     <a-tooltip>
                       <template #title>
-                        <template v-if="base.enabled">Hide in UI</template>
+                        <template v-if="base.enabled">{{ $t('activity.hideInUI') }}</template>
-                        <template v-else>Show in UI</template>
+                        <template v-else>{{ $t('activity.showInUI') }}</template>
                       </template>
                       <a-switch :checked="base.enabled ? true : false" @change="toggleBase(base, $event)" />
                     </a-tooltip>
@@ -429,7 +431,7 @@ const isEditBaseModalOpen = computed({
                   <GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" />
                   <div v-if="base.is_meta || base.is_local">-</div>
                   <div v-else class="flex items-center gap-1">
-                    {{ base.is_meta || base.is_local ? 'BASE' : base.alias }}
+                    {{ base.is_meta || base.is_local ? $t('general.base') : base.alias }}
                   </div>
                 </div>
 
@@ -450,7 +452,7 @@ const isEditBaseModalOpen = computed({
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        Relations
+                        {{ $t('title.relations') }}
                       </div>
                     </a-button>
                     <a-button
@@ -460,7 +462,7 @@ const isEditBaseModalOpen = computed({
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        UI ACL
+                        {{ $t('labels.uiAcl') }}
                       </div>
                     </a-button>
                     <a-button
@@ -471,11 +473,11 @@ const isEditBaseModalOpen = computed({
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <a-tooltip v-if="metadiffbases.includes(base.id)">
-                          <template #title>Out of sync</template>
+                          <template #title>{{ $t('activity.outOfSync') }}</template>
                           <GeneralIcon icon="warning" class="group-hover:text-accent text-primary" />
                         </a-tooltip>
                         <GeneralIcon v-else icon="sync" class="group-hover:text-accent" />
-                        Sync Metadata
+                        {{ $t('tooltip.metaSync') }}
                       </div>
                     </a-button>
                   </div>
@@ -541,7 +543,7 @@ const isEditBaseModalOpen = computed({
           <LazyDashboardSettingsBaseAudit :base-id="activeBaseId" @close="isBaseAuditModalOpen = false" />
         </div>
       </GeneralModal>
-      <GeneralDeleteModal v-model:visible="isDeleteBaseModalOpen" entity-name="base" :on-delete="deleteBase">
+      <GeneralDeleteModal v-model:visible="isDeleteBaseModalOpen" :entity-name="$t('general.base')" :on-delete="deleteBase">
         <template #entity-preview>
           <div v-if="toBeDeletedBase" class="flex flex-row items-center py-2 px-3.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
             <GeneralBaseLogo :base-type="toBeDeletedBase.type" />

packages/nc-gui/components/dashboard/settings/UIAcl.vue

@@ -95,25 +95,25 @@ const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gra
 
 const columns = [
   {
-    title: tableHeaderRenderer('Table name'),
+    title: tableHeaderRenderer(t('labels.tableName')),
     name: 'table_name',
   },
   {
-    title: tableHeaderRenderer('View name'),
+    title: tableHeaderRenderer(t('labels.viewName')),
     name: 'view_name',
   },
   {
-    title: tableHeaderRenderer('Editor'),
+    title: tableHeaderRenderer(t('objects.roleType.editor')),
     name: 'editor',
     width: 120,
   },
   {
-    title: tableHeaderRenderer('Commenter'),
+    title: tableHeaderRenderer(t('objects.roleType.commenter')),
     name: 'commenter',
     width: 120,
   },
   {
-    title: tableHeaderRenderer('Viewer'),
+    title: tableHeaderRenderer(t('objects.roleType.viewer')),
     name: 'viewer',
     width: 120,
   },
@@ -125,7 +125,7 @@ const columns = [
     <div class="flex flex-col w-[900px]">
       <span class="mb-4 first-letter:capital font-bold"> UI ACL : {{ project.title }} </span>
       <div class="flex flex-row items-center w-full mb-4 gap-2 justify-between">
-        <a-input v-model:value="searchInput" placeholder="Search models" class="nc-acl-search !w-[400px]">
+        <a-input v-model:value="searchInput" :placeholder="$t('placeholder.searchModels')" class="nc-acl-search !w-[400px]">
           <template #prefix>
             <component :is="iconMap.search" />
           </template>
@@ -134,14 +134,14 @@ const columns = [
           <a-button type="text" ghost class="self-start !rounded-md nc-acl-reload" @click="loadTableList">
             <div class="flex items-center gap-2 text-gray-600 font-light">
               <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
-              Reload
+              {{ $t('general.reload') }}
             </div>
           </a-button>
 
           <NcButton size="large" class="z-10 !rounded-lg !px-2 mr-2.5" type="primary" @click="saveUIAcl">
             <div class="flex flex-row items-center w-full gap-x-1">
               <component :is="iconMap.save" />
-              <div class="flex">Save</div>
+              <div class="flex">{{ $t('general.save') }}</div>
             </div>
           </NcButton>
         </div>
@@ -196,9 +196,13 @@ const columns = [
                 <a-tooltip>
                   <template #title>
                     <span v-if="record.disabled[role]">
-                      Click to make '{{ record.title }}' visible for role:{{ role }} in UI dashboard</span
+                      {{ $t('labels.clickToMake') }} '{{ record.title }}' {{ $t('labels.visibleForRole') }} {{ role }}
+                      {{ $t('labels.inUI') }} dashboard</span
+                    >
+                    <span v-else
+                      >{{ $t('labels.clickToHide') }}'{{ record.title }}' {{ $t('labels.forRole') }}:{{ role }}
+                      {{ $t('labels.inUI') }}</span
                     >
-                    <span v-else>Click to hide '{{ record.title }}' for role:{{ role }} in UI dashboard</span>
                   </template>
 
                   <a-checkbox

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -372,13 +372,13 @@ watch(
       <div class="text-lg font-semibold self-start mb-4">{{ t('msg.info.dbConnected') }}</div>
       <div class="flex gap-x-2 mt-5 ml-7 pt-2.5 justify-end">
         <NcButton key="back" type="secondary" @click="isConnSuccess = false">{{ $t('general.cancel') }}</NcButton>
-        <NcButton key="submit" type="primary" @click="createBase">Ok & Add Base</NcButton>
+        <NcButton key="submit" type="primary" @click="createBase"> {{ $t('activity.addBase') }}</NcButton>
       </div>
     </div>
   </GeneralModal>
   <div class="create-base bg-white relative flex flex-col justify-center gap-2 w-full">
     <h1 class="prose-2xl font-bold self-start mb-4 flex items-center gap-2">
-      New Base
+      {{ $t('title.newBase') }}
       <DashboardSettingsDataSourcesInfo />
       <span class="flex-grow"></span>
     </h1>
@@ -635,7 +635,7 @@ watch(
         <div class="text-lg font-semibold self-start mb-4">{{ t('msg.info.dbConnected') }}</div>
         <div class="flex gap-x-2 mt-5 ml-7 pt-2.5 justify-end">
           <NcButton key="back" type="secondary" @click="isConnSuccess = false">{{ $t('general.cancel') }}</NcButton>
-          <NcButton key="submit" type="primary" @click="createBase">Ok & Add Base</NcButton>
+          <NcButton key="submit" type="primary" @click="createBase">{{ $t('activity.addBase') }}</NcButton>
         </div>
       </div>
     </GeneralModal>

packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue

@@ -338,7 +338,7 @@ onMounted(async () => {
 
 <template>
   <div class="edit-base bg-white relative flex flex-col justify-start gap-2 w-full p-2">
-    <h1 class="prose-2xl font-bold self-start">Edit Base</h1>
+    <h1 class="prose-2xl font-bold self-start">{{ $t('activity.editBase') }}</h1>
 
     <a-form
       ref="form"
@@ -562,7 +562,7 @@ onMounted(async () => {
       </a-form-item>
       <div class="w-full flex items-center mt-2 text-[#e65100]">
         <component :is="iconMap.warning" class="mr-2 mb-5.9" />
-        <div>Please make sure database you are trying to connect is valid! This operation can cause schema loss!!</div>
+        <div>{{ $t('msg.warning.dbValid') }}</div>
       </div>
     </a-form>
 
@@ -596,7 +596,7 @@ onMounted(async () => {
       <div class="text-lg font-semibold self-start mb-4">{{ t('msg.info.dbConnected') }}</div>
       <div class="flex gap-x-2 mt-5 ml-7 pt-2.5 justify-end">
         <NcButton key="back" type="secondary" @click="isConnSuccess = false">{{ $t('general.cancel') }}</NcButton>
-        <NcButton key="submit" type="primary" @click="editBase">Ok & Edit Base</NcButton>
+        <NcButton key="submit" type="primary" @click="editBase">{{ $t('activity.okEditBase') }}</NcButton>
       </div>
     </div>
   </GeneralModal>

packages/nc-gui/components/project/AccessSettings.vue

@@ -160,7 +160,7 @@ onMounted(async () => {
     </div>
     <template v-else>
       <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
-        <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md" placeholder="Search members">
+        <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md" :placeholder="$t('title.searchMembers')">
           <template #prefix>
             <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
           </template>
@@ -174,13 +174,13 @@ onMounted(async () => {
         v-else-if="!collaborators?.length"
         class="nc-collaborators-list w-full h-full flex flex-col items-center justify-center mt-36"
       >
-        <Empty description="No members found" />
+        <Empty :description="$t('title.noMembersFound')" />
       </div>
       <div v-else class="nc-collaborators-list nc-scrollbar-md">
         <div class="nc-collaborators-list-header">
-          <div class="flex w-3/5">Users</div>
+          <div class="flex w-3/5">{{ $t('objects.users') }}</div>
-          <div class="flex w-2/5">Date Joined</div>
+          <div class="flex w-2/5">{{ $t('title.dateJoined') }}</div>
-          <div class="flex w-1/5">Access</div>
+          <div class="flex w-1/5">{{ $t('general.access') }}</div>
           <div class="flex w-1/5"></div>
           <div class="flex w-1/5"></div>
         </div>

packages/nc-gui/lang/en.json

@@ -78,6 +78,8 @@
     "reset": "Reset",
     "install": "Install",
     "show": "Show",
+    "access": "Access",
+    "visibility": "Visibility",
     "hide": "Hide",
     "showAll": "Show all",
     "hideAll": "Hide all",
@@ -100,6 +102,7 @@
     "upload": "Upload",
     "download": "Download",
     "default": "Default",
+    "base": "Base",
     "more": "More",
     "less": "Less",
     "event": "Event",
@@ -248,6 +251,9 @@
     "isNotNull": "is not null"
   },
   "title": {
+    "searchMembers": "Search Members",
+    "noMembersFound": "No members found",
+    "dateJoined": "Date Joined",
     "tokenName": "Token name",
     "creator": "Creator",
     "updateSelectedRows": "Update Selected Rows",
@@ -265,6 +271,7 @@
     "hideSidebar": "Hide Sidebar",
     "creatingTable": "Creating Table",
     "erdView": "ERD View",
+    "newBase": "New Base",
     "newProj": "New Project",
     "myProject": "My Projects",
     "formTitle": "Form Title",
@@ -325,6 +332,11 @@
     "switchLanguage": "Switch Language"
   },
   "labels": {
+    "clickToMake": "Click to make",
+    "visibleForRole": "visible for role:",
+    "inUI": "in UI Dashboard",
+    "clickToHide": "Click to hide",
+    "forRole": "for role",
     "searchUsers": "Search Users",
     "superAdmin": "Super Admin",
     "allTables": "All Tables",
@@ -390,7 +402,7 @@
     "microsoftExcel": "Microsoft Excel",
     "email": "E-mail",
     "storage": "Storage",
-    "uiAcl": "UI-ACL",
+    "uiAcl": "UI ACL",
     "models": "Models",
     "syncState": "Sync state",
     "created": "Created",
@@ -486,6 +498,13 @@
     "zoomInToViewColumns": "Zoom in to view columns"
   },
   "activity": {
+    "hideInUI": "Hide in UI",
+    "addBase": "Add Base",
+    "editBase": "Edit Base",
+    "okEditBase": "Ok & Edit Base",
+    "showInUI": "Show in UI",
+    "outOfSync": "Out of sync",
+    "newSource": "New Source",
     "newWebhook": "New Webhook",
     "enablePublicAccess": "Enable Public Access",
     "editingAccess": "Editing access",
@@ -679,7 +698,7 @@
     "generateNewApiToken": "Generate new API token",
     "addRole": "Add new role",
     "reloadList": "Reload list",
-    "metaSync": "Sync metadata",
+    "metaSync": "Sync Metadata",
     "sqlMigration": "Reload migrations",
     "updateRestart": "Update & Restart",
     "cancelReturn": "Cancel and Return",
@@ -723,6 +742,7 @@
     "areYouSureUWantTo": "Are you sure you want to delete the following",
     "idColumnRequired": "ID column is required, you can rename this later if required.",
     "warning": {
+      "dbValid": "Please make sure database you are trying to connect is valid! This operation can cause schema loss!!",
       "barcode": {
         "renderError": "Barcode error - please check compatibility between input and barcode type"
       },
@@ -734,6 +754,7 @@
       "duplicateTable": "Are you sure you want to duplicate the table?"
     },
     "info": {
+      "basesMigrated": "Bases are migrated. Please try again.",
       "pasteNotSupported": "Paste operation is not supported on the active cell",
       "roles": {
         "orgCreator": "Creator can create new projects and access any invited project.",