From 926bc0b1e6f5186a26a94a6469303dcc6a46b1e9 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 20 Dec 2021 20:39:30 +0100
Subject: [PATCH] differentiate collaborator test-id for user and group support
 enforced and max expiration share dates

---
 .../enhancement-respect-share-expiration-date |   7 +
 .../SideBar/Shares/Collaborators/ListItem.vue |   2 +-
 .../ExpirationDatepicker.vue                  | 201 +++++++++---------
 .../InviteCollaboratorForm.vue                |   5 +-
 .../web-app-files/src/composables/index.ts    |   6 -
 .../specs/peopleExpirationDate.spec.js        |   2 +-
 .../SideBar/Shares/FileShares.spec.js         |   2 +-
 .../ExpirationDatepicker.spec.js              |  11 -
 .../ExpirationDatepicker.spec.ts              | 166 +++++++++++++++
 packages/web-runtime/package.json             |   3 +
 tests/smoke/support/page/files/allFiles.ts    |   4 +-
 web.d.ts                                      |   7 +
 yarn.lock                                     |   8 +
 13 files changed, 303 insertions(+), 121 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-respect-share-expiration-date
 delete mode 100644 packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.js
 create mode 100644 packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.ts

diff --git a/changelog/unreleased/enhancement-respect-share-expiration-date b/changelog/unreleased/enhancement-respect-share-expiration-date
new file mode 100644
index 00000000000..cb8dd427d01
--- /dev/null
+++ b/changelog/unreleased/enhancement-respect-share-expiration-date
@@ -0,0 +1,7 @@
+Enhancement: Respect share max, min and enforced expiration date
+
+if the expiration date max and/or enforcement is supported (defined by the capabilities) the UI now handles the different cases and respects the backend settings.
+In oc10 there are options to enforce the maximum available date for group and user shares, this is now considered in the UI and updates dynamically in both cases.
+
+https://github.com/owncloud/web/pull/6176
+https://github.com/owncloud/web/pull/6039
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index 1520aae83fe..e13546be242 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :data-testid="`collaborator-item-${share.collaborator.name}`"
+    :data-testid="`collaborator-${isUser ? 'user' : 'group'}-item-${share.collaborator.name}`"
     class="files-collaborators-collaborator uk-flex uk-flex-middle oc-py-xs"
   >
     <div class="uk-width-2-3 uk-flex uk-flex-middle" style="gap: 10px">
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue
index f167f521e23..586c2ac5b93 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-if="expirationSupported" class="uk-flex uk-flex-middle uk-flex-nowrap">
+  <div v-if="available" class="uk-flex uk-flex-middle uk-flex-nowrap">
     <oc-datepicker
-      v-model="enteredExpirationDate"
-      :min-date="minExpirationDate"
-      :max-date="maxExpirationDate"
-      :locale="$language.current"
-      :is-required="expirationDateEnforced"
+      v-model="dateCurrent"
+      :min-date="dateMin"
+      :max-date="dateMax"
+      :locale="language.current"
+      :is-required="enforced"
       class="files-recipient-expiration-datepicker"
       data-testid="recipient-datepicker"
     >
@@ -17,141 +17,146 @@
           gap-size="none"
           @click="togglePopover"
         >
-          <translate v-if="!enteredExpirationDate" key="no-expiration-date-label"
+          <translate v-if="!dateCurrent" key="no-expiration-date-label"
             >Set expiration date</translate
           >
           <translate
             v-else
             key="set-expiration-date-label"
-            :translate-params="{ expires: relativeExpirationDate }"
+            :translate-params="{ expires: dateExpire }"
           >
             Expires %{expires}
           </translate>
-          <oc-icon v-if="!enteredExpirationDate" name="expand_more" />
+          <oc-icon v-if="!dateCurrent" name="expand_more" />
         </oc-button>
       </template>
     </oc-datepicker>
     <oc-button
-      v-if="!expirationDateEnforced && enteredExpirationDate"
+      v-if="!enforced && dateCurrent"
       class="recipient-edit-expiration-btn-remove"
       appearance="raw"
-      :aria-label="$gettext('Remove expiration date')"
-      @click="clearExpirationDate"
+      :aria-label="gettext('Remove expiration date')"
+      @click="dateCurrent = null"
     >
       <oc-icon name="close" />
     </oc-button>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script lang="ts">
 import { DateTime } from 'luxon'
-
-export default {
-  name: 'ExpirationDatepicker',
+import {
+  computed,
+  getCurrentInstance,
+  watch,
+  defineComponent,
+  customRef
+} from '@vue/composition-api'
+import { useStore } from '../../../../composables'
+import { ShareTypes } from '../../../../helpers/share'
+
+export default defineComponent({
+  name: 'DateCurrentpicker',
   props: {
-    expirationDate: {
-      type: Date,
+    shareTypes: {
+      type: Array,
       required: false,
-      default: undefined
+      default: () => []
     }
   },
 
-  data() {
-    return {
-      enteredExpirationDate: null
-    }
-  },
-
-  computed: {
-    ...mapGetters(['capabilities']),
-
-    expirationSupported() {
-      return this.userExpirationDate && this.groupExpirationDate
-    },
-
-    defaultExpirationDateSet() {
-      return this.userExpirationDate.enabled || this.groupExpirationDate.enabled
-    },
-
-    userExpirationDate() {
-      return this.capabilities.files_sharing.user.expire_date
-    },
-
-    groupExpirationDate() {
-      return this.capabilities.files_sharing.group.expire_date
-    },
-
-    defaultExpirationDate() {
-      if (!this.defaultExpirationDateSet) {
+  setup(props, { emit }) {
+    const vm = getCurrentInstance().proxy
+    const language = computed(() => vm.$language)
+    const gettext = computed(() => vm.$gettext)
+    const store = useStore()
+    const capabilities = computed(() => store.getters.capabilities)
+    const optionsUser = computed(() => capabilities.value.files_sharing.user?.expire_date)
+    const optionsGroup = computed(() => capabilities.value.files_sharing.group?.expire_date)
+    const available = computed(() => optionsUser.value || optionsGroup.value)
+    const enforced = computed(() => optionsUser.value?.enforced || optionsGroup.value?.enforced)
+    const dateMin = DateTime.now().setLocale(language.value.current).toJSDate()
+    const dateDefault = computed(() => {
+      const hasUserCollaborators = props.shareTypes.includes(ShareTypes.user.value)
+      const hasGroupCollaborators = props.shareTypes.includes(ShareTypes.group.value)
+      const userMaxExpirationDays = parseInt(optionsUser.value?.days)
+      const groupMaxExpirationDays = parseInt(optionsGroup.value?.days)
+
+      if (!(optionsUser.value?.enabled || optionsGroup.value?.enabled)) {
         return null
       }
 
-      const userMaxExpirationDays = parseInt(this.userExpirationDate.days, 10)
-      const groupMaxExpirationDays = parseInt(this.groupExpirationDate.days, 10)
       let days = 0
-
-      if (userMaxExpirationDays && groupMaxExpirationDays) {
+      if (
+        userMaxExpirationDays &&
+        hasUserCollaborators &&
+        groupMaxExpirationDays &&
+        hasGroupCollaborators
+      ) {
         days = Math.min(userMaxExpirationDays, groupMaxExpirationDays)
-      } else {
-        days = userMaxExpirationDays || groupMaxExpirationDays
+      } else if (userMaxExpirationDays && hasUserCollaborators) {
+        days = userMaxExpirationDays
+      } else if (groupMaxExpirationDays && hasGroupCollaborators) {
+        days = groupMaxExpirationDays
       }
 
-      return DateTime.now().setLocale(this.$language.current).plus({ days }).toJSDate()
-    },
-
-    expirationDateEnforced() {
-      return this.userExpirationDate.enforced || this.groupExpirationDate.enforced
-    },
-
-    maxExpirationDate() {
-      if (!this.expirationDateEnforced) {
+      if (!days) {
         return null
       }
 
-      return this.defaultExpirationDate
-    },
-
-    minExpirationDate() {
-      return DateTime.now().setLocale(this.$language.current).toJSDate()
-    },
-
-    relativeExpirationDate() {
-      return DateTime.fromJSDate(this.enteredExpirationDate)
-        .setLocale(this.$language.current)
+      return DateTime.now().setLocale(language.value.current).plus({ days }).toJSDate()
+    })
+    const dateMax = computed(() => (enforced.value ? dateDefault.value : null))
+    const dateCurrent = customRef<Date>((track, trigger) => {
+      let date = null
+      return {
+        get() {
+          track()
+          return date || dateDefault.value
+        },
+        set(val) {
+          date = val
+
+          const dateCurrent = DateTime.fromJSDate(val)
+            .setLocale(language.value.current)
+            .endOf('day')
+          emit('optionChange', {
+            expirationDate: dateCurrent.isValid
+              ? dateCurrent.toFormat("yyyy-MM-dd'T'HH:mm:ssZZZ")
+              : null
+          })
+
+          trigger()
+        }
+      }
+    })
+    const dateExpire = computed(() =>
+      DateTime.fromJSDate(dateCurrent.value)
+        .setLocale(language.value.current)
         .endOf('day')
         .toRelative()
-    }
-  },
+    )
 
-  mounted() {
-    if (this.expirationSupported && this.defaultExpirationDateSet) {
-      this.enteredExpirationDate = this.defaultExpirationDate
-    }
-  },
+    watch(dateMax, (val) => {
+      if (!val || dateCurrent.value < val) {
+        return
+      }
 
-  watch: {
-    enteredExpirationDate: {
-      handler: 'publishChange'
-    }
-  },
+      dateCurrent.value = val
+    })
 
-  methods: {
-    publishChange() {
-      const expirationDate = DateTime.fromJSDate(this.enteredExpirationDate)
-        .setLocale(this.$language.current)
-        .endOf('day')
-      this.$emit('optionChange', {
-        expirationDate: expirationDate.isValid
-          ? expirationDate.toFormat("yyyy-MM-dd'T'HH:mm:ssZZZ")
-          : null
-      })
-    },
-    clearExpirationDate() {
-      this.enteredExpirationDate = null
+    return {
+      language,
+      gettext,
+      enforced,
+      available,
+      dateCurrent,
+      dateMin,
+      dateMax,
+      dateExpire
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
index 3c6e7d654d3..98cbfafb2aa 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
@@ -45,7 +45,10 @@
         :allow-share-permission="!isOcis"
         @optionChange="collaboratorRoleChanged"
       />
-      <expiration-datepicker @optionChange="collaboratorExpiryChanged" />
+      <expiration-datepicker
+        :share-types="selectedCollaborators.map((c) => c.value.shareType)"
+        @optionChange="collaboratorExpiryChanged"
+      />
       <oc-button v-if="saving" key="new-collaborator-saving-button" :disabled="true">
         <oc-spinner :aria-label="$gettext('Creating share')" size="small" />
         <span v-translate :aria-hidden="true">Share</span>
diff --git a/packages/web-app-files/src/composables/index.ts b/packages/web-app-files/src/composables/index.ts
index 5a1e33dec86..b7502e67403 100644
--- a/packages/web-app-files/src/composables/index.ts
+++ b/packages/web-app-files/src/composables/index.ts
@@ -3,9 +3,3 @@ export * from './store'
 export * from './useDefaults'
 export * from './useFileListHeaderPosition'
 export * from './usePagination'
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    [key: string]: any
-  }
-}
diff --git a/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js b/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js
index 7793c0cb1af..81ebf63e04e 100644
--- a/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js
+++ b/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js
@@ -59,7 +59,7 @@ const selectors = {
     containerPrefix: 'recipient-container-'
   },
   listItem: {
-    containerPrefix: 'collaborator-item-',
+    containerPrefix: 'collaborator-user-item-',
     expiration: 'recipient-info-expiration-date',
     editBtn: 'collaborator-edit',
     removeExpirationBtn: 'collaborator-remove-expiration-btn'
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
index 6d133a3ea9a..2e7b7e71129 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
@@ -19,7 +19,7 @@ const collaborators = [Collaborators[0], Collaborators[1]]
 
 const selectors = {
   showCollaboratorButton: 'button[data-testid="collaborators-show-people"]',
-  firstCollaboratorListItem: `div[data-testid="collaborator-item-${Collaborators[0].collaborator.name}"]`
+  firstCollaboratorListItem: `div[data-testid="collaborator-user-item-${Collaborators[0].collaborator.name}"]`
 }
 
 describe('FileShares', () => {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.js
deleted file mode 100644
index 2da34b6955a..00000000000
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-describe('InviteCollaborator ExpirationDatepicker', () => {
-  it.todo('only gets displayed if share expiration is supported')
-  describe('when no expiration date is present', () => {
-    it.todo('renders a button to open the datepicker and set an expiration date')
-  })
-  describe('when an expiration date is present', () => {
-    it.todo('renders a button to open the datepicker and edit the expiration date')
-    it.todo('renders a button to remove the expiration date')
-    it.todo('clicking the remove-expiration-date button emits an event')
-  })
-})
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.ts
new file mode 100644
index 00000000000..c67405ac44b
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.spec.ts
@@ -0,0 +1,166 @@
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
+import VueCompositionAPI, { nextTick } from '@vue/composition-api'
+import ExpirationDatepicker from '../../../../../../src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue'
+import merge from 'lodash-es/merge'
+import Vuex, { GetterTree } from 'vuex'
+import DesignSystem from 'owncloud-design-system'
+import { DateTime } from 'luxon'
+import { ShareTypes } from '../../../../../../src/helpers/share'
+
+const asCapabilitiesGetter = (capabilities = {}): { getters: GetterTree<unknown, unknown> } => ({
+  getters: {
+    capabilities: () => ({
+      files_sharing: capabilities
+    })
+  }
+})
+const createWrapper = (store = {}): Wrapper<any> => {
+  const localVue = createLocalVue()
+  localVue.use(VueCompositionAPI)
+  localVue.use(Vuex)
+  localVue.use(DesignSystem)
+
+  return mount(ExpirationDatepicker, {
+    localVue,
+    store: new Vuex.Store(store),
+    stubs: {
+      translate: true
+    }
+  })
+}
+
+describe('InviteCollaborator ExpirationDatepicker', () => {
+  it('only gets displayed if share expiration is supported', () => {
+    const wrapper = createWrapper(asCapabilitiesGetter())
+    expect(wrapper.html()).toBe('')
+  })
+
+  const bareCapabilities = {
+    user: {
+      expire_date: {}
+    },
+    group: {
+      expire_date: {}
+    }
+  }
+
+  const enabledCapabilities = merge({}, bareCapabilities, {
+    user: {
+      expire_date: {
+        enabled: true,
+        days: 1
+      }
+    },
+    group: {
+      expire_date: {
+        enabled: true,
+        days: 2
+      }
+    }
+  })
+
+  const enforcedCapabilities = merge({}, enabledCapabilities, {
+    user: {
+      expire_date: {
+        enforced: true
+      }
+    },
+    group: {
+      expire_date: {
+        enforced: true
+      }
+    }
+  })
+
+  it('renders a button to open the datepicker and set an expiration date', () => {
+    const wrapper = createWrapper(asCapabilitiesGetter(bareCapabilities))
+
+    expect(wrapper.find('[data-testid="recipient-datepicker-btn"]').exists()).toBe(true)
+  })
+
+  it('does not allow to select a date from the past', () => {
+    const wrapper = createWrapper(asCapabilitiesGetter(bareCapabilities))
+    const minDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['min-date']
+
+    expect(DateTime.now().toISODate()).toBe(DateTime.fromJSDate(new Date(minDate)).toISODate())
+  })
+
+  it('does not set any maximum date if no user or group is selected', () => {
+    const wrapper = createWrapper(asCapabilitiesGetter(enabledCapabilities))
+    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
+
+    expect(maxDate).toBe(undefined)
+  })
+
+  it('pre selects and enforces the default expiration date for users', async () => {
+    const wrapper = createWrapper(asCapabilitiesGetter(enabledCapabilities))
+    await wrapper.setProps({ shareTypes: [ShareTypes.user.value] })
+
+    const selectedDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes().value
+    expect(
+      DateTime.now().plus({ days: enabledCapabilities.user.expire_date.days }).toISODate()
+    ).toBe(DateTime.fromJSDate(new Date(selectedDate)).toISODate())
+
+    wrapper.vm.$store.hotUpdate(asCapabilitiesGetter(enforcedCapabilities))
+    await nextTick()
+    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
+    expect(
+      DateTime.now().plus({ days: enabledCapabilities.user.expire_date.days }).toISODate()
+    ).toBe(DateTime.fromJSDate(new Date(maxDate)).toISODate())
+  })
+
+  it('pre selects and enforces the default expiration date for groups', async () => {
+    const wrapper = createWrapper(asCapabilitiesGetter(enabledCapabilities))
+    await wrapper.setProps({ shareTypes: [ShareTypes.group.value] })
+    const selectedDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes().value
+
+    expect(
+      DateTime.now().plus({ days: enabledCapabilities.group.expire_date.days }).toISODate()
+    ).toBe(DateTime.fromJSDate(new Date(selectedDate)).toISODate())
+
+    wrapper.vm.$store.hotUpdate(asCapabilitiesGetter(enforcedCapabilities))
+    await nextTick()
+    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
+    expect(
+      DateTime.now().plus({ days: enabledCapabilities.group.expire_date.days }).toISODate()
+    ).toBe(DateTime.fromJSDate(new Date(maxDate)).toISODate())
+  })
+
+  it('pre selects and enforces the smallest expiration date if user and group shareTypes are provided', async () => {
+    const wrapper = createWrapper(asCapabilitiesGetter(enabledCapabilities))
+    await wrapper.setProps({ shareTypes: [ShareTypes.group.value, ShareTypes.user.value] })
+    const selectedDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes().value
+
+    expect(
+      DateTime.now().plus({ days: enabledCapabilities.user.expire_date.days }).toISODate()
+    ).toBe(DateTime.fromJSDate(new Date(selectedDate)).toISODate())
+
+    wrapper.vm.$store.hotUpdate(asCapabilitiesGetter(enforcedCapabilities))
+    await nextTick()
+    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
+    expect(
+      DateTime.now().plus({ days: enabledCapabilities.user.expire_date.days }).toISODate()
+    ).toBe(DateTime.fromJSDate(new Date(maxDate)).toISODate())
+  })
+
+  it('emits an event if date changes', async () => {
+    const wrapper = createWrapper(asCapabilitiesGetter(enabledCapabilities))
+    const manualDate = DateTime.now().plus({ days: 5 })
+    const checker = jest.fn()
+    wrapper.vm.$on('optionChange', checker as any)
+    wrapper.setData({ dateCurrent: manualDate.toJSDate() })
+
+    expect(checker).toBeCalledTimes(1)
+    expect(manualDate.toISODate()).toBe(
+      DateTime.fromISO(checker.mock.calls[0][0].expirationDate).toISODate()
+    )
+
+    wrapper.vm.$store.hotUpdate(asCapabilitiesGetter(enforcedCapabilities))
+    await wrapper.setProps({ shareTypes: [ShareTypes.group.value, ShareTypes.user.value] })
+    await nextTick()
+    expect(checker).toBeCalledTimes(2)
+    expect(
+      DateTime.now().plus({ days: enforcedCapabilities.user.expire_date.days }).toISODate()
+    ).toBe(DateTime.fromISO(checker.mock.calls[1][0].expirationDate).toISODate())
+  })
+})
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 236e2e54ea5..a8f0c77f00f 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -45,5 +45,8 @@
     "vuex-router-sync": "^5.0.0",
     "web-pkg": "*",
     "webfontloader": "^1.6.28"
+  },
+  "devDependencies": {
+    "@types/luxon": "^2.0.8"
   }
 }
diff --git a/tests/smoke/support/page/files/allFiles.ts b/tests/smoke/support/page/files/allFiles.ts
index 6a3917805ac..0d83adc94e1 100644
--- a/tests/smoke/support/page/files/allFiles.ts
+++ b/tests/smoke/support/page/files/allFiles.ts
@@ -338,7 +338,7 @@ export class AllFilesPage {
     await cta.files.sidebar.openPanel({ page: page, name: 'sharing' })
 
     for (const user of users) {
-      const userColumn = `//*[@data-testid="collaborator-item-${user.id}"]`
+      const userColumn = `//*[@data-testid="collaborator-user-item-${user.id}"]`
       await page.click(`${userColumn}//button[contains(@class,"files-recipient-role-select-btn")]`)
       await page.click(
         `${userColumn}//ul[contains(@class,"files-recipient-role-drop-list")]//button[@id="files-recipient-role-drop-btn-${role}"]`
@@ -361,7 +361,7 @@ export class AllFilesPage {
     await cta.files.sidebar.openPanel({ page: page, name: 'sharing' })
 
     for (const user of users) {
-      const userColumn = `//*[@data-testid="collaborator-item-${user.id}"]`
+      const userColumn = `//*[@data-testid="collaborator-user-item-${user.id}"]`
 
       await Promise.all([
         page.waitForResponse(
diff --git a/web.d.ts b/web.d.ts
index d9f24faa42e..c6f6add65a3 100644
--- a/web.d.ts
+++ b/web.d.ts
@@ -1,3 +1,10 @@
+declare module 'vue/types/web' {
+  import { ILanguageComponent } from 'vue/types/vue'
+  interface Vue extends ILanguageComponent {
+    [key: string]: any
+  }
+}
+
 declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
diff --git a/yarn.lock b/yarn.lock
index e55d9ad0417..0bc6756cd0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2357,6 +2357,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/luxon@npm:^2.0.8":
+  version: 2.0.8
+  resolution: "@types/luxon@npm:2.0.8"
+  checksum: 630d069a5a719c7512cb8805bcec6bac7f9aa5d434edf2159ba6dfb22eb8de982232a6d3621acd66f6ca2d1d6b0e8b40f9c8dafbbad654eb8cc01229f528ae45
+  languageName: node
+  linkType: hard
+
 "@types/minimatch@npm:*, @types/minimatch@npm:^3.0.3":
   version: 3.0.4
   resolution: "@types/minimatch@npm:3.0.4"
@@ -15085,6 +15092,7 @@ typescript@^4.3.2:
   resolution: "web-runtime@workspace:packages/web-runtime"
   dependencies:
     "@popperjs/core": ^2.4.0
+    "@types/luxon": ^2.0.8
     "@vue/composition-api": ^1.2.4
     easygettext: ^2.16.1
     filesize: ^8.0.0