Merge branch 'feature/add-translations' into 'master'

Add translations

Closes #8

See merge request pleroma/admin-fe!8

package.json

@@ -59,7 +59,7 @@
     "tui-editor": "1.2.7",
     "vue": "^2.6.8",
     "vue-count-to": "1.0.13",
-    "vue-i18n": "7.3.2",
+    "vue-i18n": "^8.9.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.2",
     "vuedraggable": "^2.16.0",

src/lang/en.js

@@ -157,5 +157,36 @@ export default {
     close: 'Close',
     closeOthers: 'Close Others',
     closeAll: 'Close All'
+  },
+  users: {
+    users: 'Users',
+    localUsersOnly: 'Local users only',
+    search: 'Search',
+    id: 'ID',
+    name: 'Name',
+    status: 'Status',
+    local: 'local',
+    external: 'external',
+    deactivated: 'deactivated',
+    active: 'active',
+    actions: 'Actions',
+    activate: 'Activate',
+    deactivate: 'Deactivate',
+    admin: 'admin',
+    moderator: 'moderator',
+    moderation: 'Moderation',
+    revokeAdmin: 'Revoke Admin',
+    grantAdmin: 'Grant Admin',
+    revokeModerator: 'Revoke Moderator',
+    grantModerator: 'Grant Moderator',
+    activateAccount: 'Activate Account',
+    deactivateAccount: 'Deactivate Account',
+    deleteAccount: 'Delete Account',
+    forceNsfw: 'Force posts to be NSFW',
+    stripMedia: 'Force posts not to have media',
+    forceUnlisted: 'Force posts to be unlisted',
+    sandbox: 'Force posts to be followers-only',
+    disableRemoteSubscription: 'Disallow following user from remote instances',
+    disableAnySubscription: 'Disallow following user at all'
   }
 }

src/views/users/index.vue

@@ -1,76 +1,76 @@
 <template>
   <div class="users-container">
-    <h1>Users</h1>
+    <h1>{{ $t('users.users') }}</h1>
     <div class="search-container">
-      <el-checkbox :value="showLocalUsersOnly" @change="handleLocalUsersCheckbox">Local users only</el-checkbox>
+      <el-checkbox :value="showLocalUsersOnly" @change="handleLocalUsersCheckbox">{{ $t('users.localUsersOnly') }}</el-checkbox>
-      <el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/>
+      <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
     <el-table v-loading="loading" :data="users" style="width: 100%">
-      <el-table-column :min-width="width" prop="id" label="ID"/>
+      <el-table-column :min-width="width" :label="$t('users.id')" prop="id" />
-      <el-table-column prop="nickname" label="Name">
+      <el-table-column :label="$t('users.name')" prop="nickname">
         <template slot-scope="scope">
           {{ scope.row.nickname }}
           <el-tag v-if="isDesktop" type="info" size="mini">
-            <span>{{ scope.row.local ? 'local' : 'external' }}</span>
+            <span>{{ scope.row.local ? $t('users.local') : $t('users.external') }}</span>
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column :min-width="width" label="Status">
+      <el-table-column :min-width="width" :label="$t('users.status')">
         <template slot-scope="scope">
           <el-tag :type="scope.row.deactivated ? 'danger' : 'success'">
-            <span v-if="isDesktop">{{ scope.row.deactivated ? 'deactivated' : 'active' }}</span>
+            <span v-if="isDesktop">{{ scope.row.deactivated ? $t('users.deactivated') : $t('users.active') }}</span>
             <i v-else :class="activationIcon(scope.row.deactivated)"/>
           </el-tag>
           <el-tag v-if="scope.row.roles.admin">
-            <span>{{ isDesktop ? 'admin' : 'A' }}</span>
+            <span>{{ isDesktop ? $t('users.admin') : getFirstLetter($t('users.admin')) }}</span>
           </el-tag>
           <el-tag v-if="scope.row.roles.moderator">
-            <span>{{ isDesktop ? 'moderator' : 'M' }}</span>
+            <span>{{ isDesktop ? $t('users.moderator') : getFirstLetter($t('users.moderator')) }}</span>
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column fixed="right" label="Actions">
+      <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
           <el-dropdown size="small">
             <span class="el-dropdown-link">
-              Moderation
+              {{ $t('users.moderation') }}
               <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item v-if="showAdminAction(scope.row)" @click.native="toggleUserRight(scope.row, 'admin')">
-                {{ scope.row.roles.admin ? 'Revoke Admin' : 'Grant Admin' }}
+                {{ scope.row.roles.admin ? $t('users.revokeAdmin') : $t('users.grantAdmin') }}
               </el-dropdown-item>
               <el-dropdown-item v-if="showAdminAction(scope.row)" @click.native="toggleUserRight(scope.row, 'moderator')">
-                {{ scope.row.roles.moderator ? 'Revoke Moderator' : 'Grant Moderator' }}
+                {{ scope.row.roles.moderator ? $t('users.revokeModerator') : $t('users.grantModerator') }}
               </el-dropdown-item>
               <el-dropdown-item v-if="showDeactivatedButton(scope.row.id)" :divided="showAdminAction(scope.row)" @click.native="handleDeactivation(scope.row)">
-                {{ scope.row.deactivated ? 'Activate account' : 'Deactivate account' }}
+                {{ scope.row.deactivated ? $t('users.activateAccount') : $t('users.deactivateAccount') }}
               </el-dropdown-item>
               <el-dropdown-item v-if="showDeactivatedButton(scope.row.id)" @click.native="handleDeletion(scope.row)">
-                Delete Account
+                {{ $t('users.deleteAccount') }}
               </el-dropdown-item>
               <el-dropdown-item :divided="showAdminAction(scope.row)" @click.native="toggleTag(scope.row, 'force_nsfw')">
-                Force posts to be NSFW
+                {{ $t('users.forceNsfw') }}
                 <i v-if="scope.row.tags.includes('force_nsfw')" class="el-icon-circle-check"/>
               </el-dropdown-item>
               <el-dropdown-item @click.native="toggleTag(scope.row, 'strip_media')">
-                Force posts not to have media
+                {{ $t('users.stripMedia') }}
                 <i v-if="scope.row.tags.includes('strip_media')" class="el-icon-circle-check"/>
               </el-dropdown-item>
               <el-dropdown-item @click.native="toggleTag(scope.row, 'force_unlisted')">
-                Force posts to be unlisted
+                {{ $t('users.forceUnlisted') }}
                 <i v-if="scope.row.tags.includes('force_unlisted')" class="el-icon-circle-check"/>
               </el-dropdown-item>
               <el-dropdown-item @click.native="toggleTag(scope.row, 'sandbox')">
-                Force posts to be followers-only
+                {{ $t('users.sandbox') }}
                 <i v-if="scope.row.tags.includes('sandbox')" class="el-icon-circle-check"/>
               </el-dropdown-item>
               <el-dropdown-item v-if="scope.row.local" @click.native="toggleTag(scope.row, 'disable_remote_subscription')">
-                Disallow following user from remote instances
+                {{ $t('users.disableRemoteSubscription') }}
                 <i v-if="scope.row.tags.includes('disable_remote_subscription')" class="el-icon-circle-check"/>
               </el-dropdown-item>
               <el-dropdown-item v-if="scope.row.local" @click.native="toggleTag(scope.row, 'disable_any_subscription')">
-                Disallow following user at all
+                {{ $t('users.disableAnySubscription') }}
                 <i v-if="scope.row.tags.includes('disable_any_subscription')" class="el-icon-circle-check"/>
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -165,6 +165,9 @@ export default {
     },
     toggleTag(user, tag) {
       this.$store.dispatch('ToggleTag', { user, tag })
+    },
+    getFirstLetter(str) {
+      return str.charAt(0).toUpperCase()
     }
   }
 }

test/views/users/index.test.js

@@ -1,10 +1,12 @@
 import Vuex from 'vuex'
-import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue, config } from '@vue/test-utils'
 import Element from 'element-ui'
 import Users from '@/views/users/index'
 import storeConfig from './store.conf'
 import { cloneDeep } from 'lodash'
 
+config.mocks["$t"] = () => {}
+
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Element)
@@ -155,8 +157,10 @@ describe('Users actions', () => {
     })
     await wrapper.vm.$nextTick()
 
-    const dropdownMenuItem = wrapper.find(htmlElement(2, 1))
+    const dropdownMenuItems = wrapper.findAll(
-    expect(dropdownMenuItem.text()).toBe('Deactivate account')
+      `.el-table__fixed-body-wrapper table tr:nth-child(2) ul.el-dropdown-menu li`
+    )
+    expect(dropdownMenuItems.length).toBe(6)
     done()
   })
 

yarn.lock

@@ -10147,10 +10147,22 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.2.tgz#1fcc1495effe08a790909b46bf7b5c4cfeb6f21b"
   integrity sha512-NpznMQoe/DzMG7nJjPkJKT7FdEn9xXfnntG7POfTmqnSaza97ylaBf1luZDh4IgV+vgUoR//id5pf8Ru+Ym+0g==
 
-vue-i18n@7.3.2:
+vue-i18n@^8.9.0:
-  version "7.3.2"
+  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-7.3.2.tgz#1205bb8811323fd5c44e57e4fd619beaf2f7a9a1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.9.0.tgz#5f084001fe5b4c7ad8c00ee5f11396a88ff2e55b"
-  integrity sha512-4NBhqrH4Pe1etecC2aafXEKH9gJY+TaO4EHYZ0EBYPwFakUp4FyDHHf+r2N1keSX60iEm1k25WcVMD+OxAH/yw==
+  integrity sha512-8wr/D9yU8CLC8ne9stdQn/N58E7GRSUSO75bCucj2AIFTDyjGfoze5RxFvh2w3e7yxgnz5x+ooOIcoX59PHguQ==
+
+vue-jest@4.0.0-beta.2:
+  version "4.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-4.0.0-beta.2.tgz#f2120ea9d24224aad3a100c2010b0760d47ee6fe"
+  integrity sha512-SywBIciuIfqsCb8Eb9UQ02s06+NV8Ry8KnbyhAfnvnyFFulIuh7ujtga9eJYq720nCS4Hz4TpVtS4pD1ZbUILQ==
+  dependencies:
+    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
+    "@vue/component-compiler-utils" "^2.4.0"
+    chalk "^2.1.0"
+    extract-from-css "^0.4.4"
+    source-map "^0.5.6"
+    ts-jest "^23.10.5"
 
 vue-jest@4.0.0-beta.2:
   version "4.0.0-beta.2"