[full-ci] Vue 3: Use vue3-gettext

changelog/unreleased/change-update-vue

@@ -16,4 +16,5 @@ https://github.com/owncloud/web/pull/8213
 https://github.com/owncloud/web/pull/8214
 https://github.com/owncloud/web/pull/8221
 https://github.com/owncloud/web/pull/8256
+https://github.com/owncloud/web/pull/8257
 https://github.com/owncloud/web/pull/8258

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/leonardo-contrast-colors@1.0.0-alpha.16": "patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch",
       "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch",
-      "vue-gettext@2.1.12": "patches/vue-gettext@2.1.12.patch",
       "keycode@2.2.1": "patches/keycode@2.2.1.patch",
       "vue-inline-svg@3.1.0": "patches/vue-inline-svg@3.1.0.patch"
     }

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

@@ -136,10 +136,10 @@ import {
 } from 'web-pkg/src/helpers'
 import { computed, defineComponent, nextTick, onMounted, PropType, ref, unref, watch } from 'vue'
 import { extractDomSelector, SpaceResource } from 'web-client/src/helpers'
-import { useTranslations } from 'web-pkg/src/composables'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -159,7 +159,7 @@ export default defineComponent({
   },
   emits: ['toggleSelectSpace', 'toggleSelectAllSpaces', 'toggleUnSelectAllSpaces'],
   setup: function (props, { emit }) {
-    const { $gettext, $gettextInterpolate, $language } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate, current: currentLanguage } = useGettext()
     const contextMenuButton = ref(undefined)
     const sortBy = ref('name')
     const sortDir = ref('asc')
@@ -321,25 +321,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-admin-settings/src/views/Spaces.vue

@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useAccessToken, useGraphClient, useStore, useTranslations } from 'web-pkg/src/composables'
+import { useAccessToken, useGraphClient, useStore } from 'web-pkg/src/composables'
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg/src/services/eventBus'
@@ -78,6 +78,7 @@ import ContextActions from '../components/Spaces/ContextActions.vue'
 import MembersPanel from '../components/Spaces/SideBar/MembersPanel.vue'
 import SpaceInfo from 'web-pkg/src/components/sideBar/Spaces/SpaceInfo.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -93,7 +94,7 @@ export default defineComponent({
     const accessToken = useAccessToken({ store })
     const spaces = ref([])
     const { graphClient } = useGraphClient()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const loadResourcesEventToken = ref(null)
     const template = ref(null)

packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts

@@ -136,7 +136,6 @@ function getWrapper({ propsData = {} } = {}) {
         },
         mocks: {
           ...defaultComponentMocks({
-            gettext: false,
             currentRoute: mock<RouteLocation>({ query: { app: 'admin-settings' } })
           })
         }

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/tests/unit/app.spec.ts

@@ -145,7 +145,6 @@ function createShallowMountWrapper(makeRequest = jest.fn().mockResolvedValue({ s
         stubs: componentStubs,
         mocks: {
           ...defaultComponentMocks({
-            gettext: false,
             currentRoute: mock<RouteLocation>({ query: { app: 'exampleApp' } })
           })
         }

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/FilesList/ResourceTiles.vue

@@ -25,10 +25,11 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import { useGettext } from 'vue3-gettext'
 import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import { useStore, useTranslations } from 'web-pkg/src/composables'
+import { useStore } from 'web-pkg/src/composables'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
@@ -48,7 +49,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const getRoute = (resource) => {
       if (resource.type === 'space') {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -171,7 +171,6 @@ import {
   useClientService,
   usePublicLinkContext,
   useStore,
-  useTranslations,
   useUserContext
 } from 'web-pkg/src/composables'
 import { getIndicators } from '../../../helpers/statusIndicators'
@@ -185,12 +184,13 @@ import { buildShareSpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { useTask } from 'vue-concurrency'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'FileDetails',
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const copiedDirect = ref(false)
     const copiedEos = ref(false)

packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue

@@ -23,12 +23,13 @@
 import { computed, defineComponent, inject, unref } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { Resource } from 'web-client'
-import { useStore, useTranslations } from 'web-pkg/src'
+import { useStore } from 'web-pkg/src'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'PrivateLinkItem',
   setup() {
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const store = useStore<any>()
     const displayedItem = inject<Resource>('displayedItem')
     const privateLink = computed(() => unref(displayedItem))

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 {