Use vue3-gettext

package.json

@@ -116,7 +116,7 @@
     "url-search-params-polyfill": "8.1.1",
     "vite": "4.0.4",
     "vite-plugin-environment": "^1.1.3",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-tsc": "1.0.20",
     "wait-for-expect": "3.0.2"
   },
@@ -146,7 +146,6 @@
     "patchedDependencies": {
       "@adobe/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]"
     }

packages/design-system/package.json

@@ -107,7 +107,7 @@
     "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
     "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
-    "vue-gettext": "^2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-inline-svg": "^3.1.0",
     "vue-jest": "^3.0.4",
     "vue-loader": "^15.9.0",

packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts

@@ -228,5 +228,10 @@ function getWrapper(props = {}) {
   })
 }
 function getMountedWrapper() {
-  return mount(OcSearchBar, { props: { label: 'abc' } })
+  return mount(OcSearchBar, {
+    props: { label: 'abc' },
+    global: {
+      plugins: [...defaultPlugins()]
+    }
+  })
 }

packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.spec.ts

@@ -1,5 +1,5 @@
 import StatusIndicators from './OcStatusIndicators.vue'
-import { mount } from 'web-test-helpers'
+import { defaultPlugins, mount } from 'web-test-helpers'
 
 const fileResource = {
   name: 'forest.jpg',
@@ -24,6 +24,9 @@ describe('OcStatusIndicators', () => {
         resource: fileResource,
         indicators: [indicator],
         target: 'test'
+      },
+      global: {
+        plugins: [...defaultPlugins()]
       }
     })
     wrapper.find('.oc-status-indicators-indicator').trigger('click')
@@ -35,6 +38,9 @@ describe('OcStatusIndicators', () => {
         resource: fileResource,
         indicators: [indicator],
         target: 'test'
+      },
+      global: {
+        plugins: [...defaultPlugins()]
       }
     })
     expect(wrapper.find(`#${indicator.id}`).exists()).toBeTruthy()

packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue

@@ -5,9 +5,9 @@
         v-if="hasHandler(indicator)"
         :id="indicator.id"
         :key="indicator.id"
-        v-oc-tooltip="indicator.label"
+        v-oc-tooltip="$gettext(indicator.label)"
         class="oc-status-indicators-indicator oc-background-primary-gradient oc-p-xs oc-ml-xs"
-        :aria-label="indicator.label"
+        :aria-label="$gettext(indicator.label)"
         :aria-describedby="getIndicatorDescriptionId(indicator)"
         appearance="raw"
         variation="inverse"
@@ -21,13 +21,13 @@
         v-else
         :id="indicator.id"
         :key="indicator.id"
-        v-oc-tooltip="indicator.label"
+        v-oc-tooltip="$gettext(indicator.label)"
         tabindex="-1"
         size="small"
         class="oc-status-indicators-indicator"
         :name="indicator.icon"
         :fill-type="indicator.fillType"
-        :accessible-label="indicator.label"
+        :accessible-label="$gettext(indicator.label)"
         :aria-describedby="getIndicatorDescriptionId(indicator)"
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
@@ -37,7 +37,7 @@
         :id="getIndicatorDescriptionId(indicator)"
         :key="getIndicatorDescriptionId(indicator)"
         class="oc-invisible-sr"
-        v-text="indicator.accessibleDescription"
+        v-text="$gettext(indicator.accessibleDescription)"
       />
     </template>
   </div>

packages/design-system/src/components/OcTable/OcTable.sort.spec.ts

@@ -128,6 +128,7 @@ describe('OcTable.sort', () => {
           data
         },
         global: {
+          plugins: [...defaultPlugins()],
           stubs: {
             'oc-icon': true
           }
@@ -175,6 +176,7 @@ describe('OcTable.sort', () => {
             sortDir: sortDirOld
           },
           global: {
+            plugins: [...defaultPlugins()],
             stubs: {
               'oc-icon': true
             }

packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts

@@ -17,7 +17,12 @@ describe('OcTextInput', () => {
   }
 
   function getMountedWrapper(options = {}) {
-    return mount(OcTextInput, options)
+    return mount(OcTextInput, {
+      ...options,
+      global: {
+        plugins: [...defaultPlugins()]
+      }
+    })
   }
 
   const selectors = {

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -159,7 +159,11 @@ export default defineComponent({
   },
   emits: ['toggleSelectSpace', 'toggleSelectAllSpaces', 'toggleUnSelectAllSpaces'],
   setup: function (props, { emit }) {
-    const { $gettext, $gettextInterpolate, $language } = useTranslations()
+    const {
+      $gettext,
+      interpolate: $gettextInterpolate,
+      current: currentLanguage
+    } = useTranslations()
     const contextMenuButton = ref(undefined)
     const sortBy = ref('name')
     const sortDir = ref('asc')
@@ -321,25 +325,25 @@ export default defineComponent({
       return managerStr
     }
     const formatDate = (date) => {
-      return formatDateFromJSDate(new Date(date), $language.current)
+      return formatDateFromJSDate(new Date(date), currentLanguage)
     }
     const formatDateRelative = (date) => {
-      return formatRelativeDateFromJSDate(new Date(date), $language.current)
+      return formatRelativeDateFromJSDate(new Date(date), currentLanguage)
     }
     const getTotalQuota = (space: SpaceResource) => {
-      return formatFileSize(space.spaceQuota.total, $language.current)
+      return formatFileSize(space.spaceQuota.total, currentLanguage)
     }
     const getUsedQuota = (space: SpaceResource) => {
       if (space.spaceQuota.used === undefined) {
         return '-'
       }
-      return formatFileSize(space.spaceQuota.used, $language.current)
+      return formatFileSize(space.spaceQuota.used, currentLanguage)
     }
     const getRemainingQuota = (space: SpaceResource) => {
       if (space.spaceQuota.remaining === undefined) {
         return '-'
       }
-      return formatFileSize(space.spaceQuota.remaining, $language.current)
+      return formatFileSize(space.spaceQuota.remaining, currentLanguage)
     }
     const getMemberCount = (space: SpaceResource) => {
       return (

packages/web-app-external/package.json

@@ -6,7 +6,7 @@
   "license": "AGPL-3.0",
   "peerDependencies": {
     "uuid": "^9.0.0",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg"

packages/web-app-external/src/App.vue

@@ -75,7 +75,7 @@ export default defineComponent({
     ...mapGetters(['capabilities']),
 
     pageTitle() {
-      const translated = this.$gettext('"%{appName}" app page')
+      const translated = this.$gettext('"%{appName}" app page') || ''
       return this.$gettextInterpolate(translated, {
         appName: this.applicationName
       })

packages/web-app-files/package.json

@@ -24,7 +24,7 @@
     "semver": "^7.3.8",
     "uuid": "^9.0.0",
     "vue-concurrency": "4.0.0",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-app-files": "workspace:*",

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -114,7 +114,7 @@ export default defineComponent({
     ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
 
     pageTitle() {
-      const title = this.$route.meta.title
+      const title = this.$route.meta.title || ''
       return this.$gettext(title)
     },
     showContextActions() {

packages/web-app-files/src/components/FilesList/KeyboardActions.vue

@@ -135,13 +135,21 @@ export default defineComponent({
       }
 
       if (key === keycode('c') && ctrl) {
-        return this.copySelectedFiles({ space: this.space, resources: this.selectedFiles })
+        return this.copySelectedFiles({
+          ...this.$language,
+          space: this.space,
+          resources: this.selectedFiles
+        })
       }
       if (key === keycode('v') && ctrl) {
         return this.handlePasteAction()
       }
       if (key === keycode('x') && ctrl) {
-        return this.cutSelectedFiles({ space: this.space, resources: this.selectedFiles })
+        return this.cutSelectedFiles({
+          ...this.$language,
+          space: this.space,
+          resources: this.selectedFiles
+        })
       }
       if (key === keycode('down') && !shift) {
         return this.handleNavigateAction(event)

packages/web-app-files/src/components/FilesList/QuickActions.vue

@@ -8,7 +8,7 @@
       appearance="raw"
       class="oc-mr-xs quick-action-button oc-p-xs"
       :class="`files-quick-action-${action.id}`"
-      @click="action.handler({ item, client: $client, store: $store, $gettext })"
+      @click="action.handler({ ...$language, item, client: $client, store: $store })"
     >
       <oc-icon :name="action.icon" fill-type="line" />
     </oc-button>

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -322,10 +322,10 @@ export default defineComponent({
 
             const addMethod = this.resourceIsSpace ? this.addSpaceMember : this.addShare
             addMethod({
+              ...this.$language,
               client: this.$client,
               graphClient: this.graphClient,
               path,
-              $gettext: this.$gettext,
               shareWith: collaborator.value.shareWith,
               displayName: collaborator.label,
               shareType: collaborator.value.shareType,

packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue

@@ -360,6 +360,7 @@ export default defineComponent({
         : SharePermissions.permissionsToBitmask(role.permissions(this.hasResharing || this.isSpace))
       const changeMethod = this.isSpace ? this.changeSpaceMember : this.changeShare
       changeMethod({
+        ...this.$language,
         client: this.$client,
         graphClient: this.graphClient,
         share: this.share,

packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -403,7 +403,7 @@ export default defineComponent({
       const paramsToCreate = this.getParamsForLink(link)
 
       if (this.isPasswordEnforcedFor(link)) {
-        showQuickLinkPasswordModal({ store: this.$store }, (newPassword) => {
+        showQuickLinkPasswordModal({ ...this.$language, store: this.$store }, (newPassword) => {
           this.createLink({ params: { ...paramsToCreate, password: newPassword }, onError })
         })
       } else {
@@ -415,7 +415,7 @@ export default defineComponent({
       const params = this.getParamsForLink(link)
 
       if (!link.password && this.isPasswordEnforcedFor(link)) {
-        showQuickLinkPasswordModal({ store: this.$store }, (newPassword) => {
+        showQuickLinkPasswordModal({ ...this.$language, store: this.$store }, (newPassword) => {
           this.updatePublicLink({ params: { ...params, password: newPassword }, onSuccess })
         })
       } else {

packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue

@@ -41,7 +41,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $gettext, $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useTranslations()
     const store = useStore<any>()
 
     const {

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -110,7 +110,7 @@ export default defineComponent({
     sideBarOpen: { type: Boolean, default: false }
   },
   setup(props) {
-    const { $gettext, $ngettext, $gettextInterpolate } = useTranslations()
+    const { $gettext, $ngettext, interpolate: $gettextInterpolate } = useTranslations()
     const { getFileContents, getFileInfo } = useClientService().webdav
     const store = useStore()
     const userId = computed(() => store.getters.user?.id)

packages/web-app-files/src/helpers/resources.ts

@@ -39,10 +39,6 @@ export function buildWebDavFilesTrashPath(userId, path = '') {
   return '/' + `trash-bin/${userId}/${path}`.split('/').filter(Boolean).join('/')
 }
 
-export function attachIndicators(resource, sharesTree) {
-  return (resource.indicators = getIndicators(resource, sharesTree))
-}
-
 export function isResourceTxtFileAlmostEmpty(resource: Resource): boolean {
   const mimeType = resource.mimeType || ''
   return mimeType.startsWith('text/') && (resource.size as number) < 30

packages/web-app-files/src/helpers/statusIndicators.js → packages/web-app-files/src/helpers/statusIndicators.ts

@@ -1,9 +1,13 @@
 import { getParentPaths } from './path'
-import { $gettext } from '../gettext'
 import { ShareTypes } from 'web-client/src/helpers/share'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
+// dummy to trick gettext string extraction into recognizing strings
+const $gettext = (str) => {
+  return str
+}
+
 const $shareTypes = (resource) => {
   if (typeof resource.shareTypes !== 'undefined') {
     return resource.shareTypes
@@ -91,7 +95,7 @@ export const getIndicators = (resource, sharesTree, hasShareJail = false) => {
   const indicators = [
     {
       id: `files-sharing-${resource.getDomSelector()}`,
-      accessibleDescription: shareUserIconDescribedBy(resource, sharesTree),
+      accessibleDescription: shareUserIconDescribedBy(resource),
       label: $gettext('Show invited people'),
       visible: isUserShare(resource, sharesTree, hasShareJail),
       icon: 'group',
@@ -103,7 +107,7 @@ export const getIndicators = (resource, sharesTree, hasShareJail = false) => {
     },
     {
       id: `file-link-${resource.getDomSelector()}`,
-      accessibleDescription: shareLinkDescribedBy(resource, sharesTree),
+      accessibleDescription: shareLinkDescribedBy(resource),
       label: $gettext('Show links'),
       visible: isLinkShare(resource, sharesTree),
       icon: 'link',

packages/web-app-files/src/mixins/actions/copy.js

@@ -54,7 +54,7 @@ export default {
   methods: {
     ...mapActions('Files', ['copySelectedFiles']),
     $_copy_trigger({ resources }) {
-      this.copySelectedFiles({ space: this.space, resources })
+      this.copySelectedFiles({ space: this.space, resources, ...this.$language })
     }
   }
 }

packages/web-app-files/src/mixins/actions/move.js

@@ -56,7 +56,7 @@ export default {
   methods: {
     ...mapActions('Files', ['cutSelectedFiles']),
     $_move_trigger({ resources }) {
-      this.cutSelectedFiles({ space: this.space, resources })
+      this.cutSelectedFiles({ space: this.space, resources, ...this.$language })
     }
   }
 }

packages/web-app-files/src/mixins/deleteResources.ts

@@ -152,11 +152,10 @@ export default {
 
     $_deleteResources_filesList_delete() {
       this.deleteFiles({
+        ...this.$language,
         space: this.space,
         files: this.$_deleteResources_resources,
-        clientService: this.$clientService,
-        $gettext: this.$gettext,
-        $gettextInterpolate: this.$gettextInterpolate
+        clientService: this.$clientService
       }).then(async () => {
         this.hideModal()
         this.toggleModalConfirmButton()