refactor: move link expiration rules to a helper method

This is necessary because we need the method in more than one place in the future. Also, previously this was named "expiration date", although it defines rules for setting an expiration date for a link. Hence the rename to "expiration rules".

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

@@ -14,14 +14,14 @@
       <name-and-copy v-if="quicklink" :link="quicklink" />
       <create-quick-link
         v-else-if="canCreateLinks"
-        :expiration-date="expirationDate"
+        :expiration-rules="expirationRules"
         @create-public-link="checkLinkToCreate"
       />
       <details-and-edit
         v-if="quicklink"
         :available-role-options="getAvailableRoleOptions(quicklink)"
         :can-rename="false"
-        :expiration-date="expirationDate"
+        :expiration-rules="expirationRules"
         :is-folder-share="resource.isFolder"
         :is-modifiable="canEditLink(quicklink)"
         :is-password-enforced="isPasswordEnforcedFor(quicklink)"
@@ -54,7 +54,7 @@
         <details-and-edit
           :available-role-options="getAvailableRoleOptions(link)"
           :can-rename="true"
-          :expiration-date="expirationDate"
+          :expiration-rules="expirationRules"
           :is-folder-share="resource.isFolder"
           :is-modifiable="canEditLink(link)"
           :is-password-enforced="isPasswordEnforcedFor(link)"
@@ -89,7 +89,7 @@
           <name-and-copy :link="link" />
           <details-and-edit
             :available-role-options="getAvailableRoleOptions(link)"
-            :expiration-date="expirationDate"
+            :expiration-rules="expirationRules"
             :is-folder-share="true"
             :is-modifiable="false"
             :link="link"
@@ -113,6 +113,7 @@
 import { computed, defineComponent, inject, ref, Ref, unref } from 'vue'
 import { DateTime } from 'luxon'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
+import { useGettext } from 'vue3-gettext'
 import {
   useStore,
   useCapabilitySpacesEnabled,
@@ -124,7 +125,8 @@ import {
   useCapabilityFilesSharingPublicPasswordEnforcedFor,
   useAbility,
   usePasswordPolicyService,
-  getDefaultLinkPermissions
+  getDefaultLinkPermissions,
+  getExpirationRules
 } from '@ownclouders/web-pkg'
 import { shareViaLinkHelp, shareViaIndirectLinkHelp } from '../../../helpers/contextualHelpers'
 import {
@@ -160,6 +162,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+    const { current: currentLanguage } = useGettext()
     const ability = useAbility()
     const { can } = ability
     const passwordPolicyService = usePasswordPolicyService()
@@ -219,6 +222,8 @@ export default defineComponent({
       )
     }
 
+    const expirationRules = computed(() => getExpirationRules({ store, currentLanguage }))
+
     return {
       $store: store,
       ability,
@@ -241,7 +246,8 @@ export default defineComponent({
       configurationManager,
       passwordPolicyService,
       canCreateLinks,
-      canEditLink
+      canEditLink,
+      expirationRules
     }
   },
   computed: {
@@ -264,36 +270,6 @@ export default defineComponent({
       return this.outgoingLinks.find((link) => link.quicklink === true && !link.indirect)
     },
 
-    expirationDate() {
-      const expireDate = this.capabilities.files_sharing.public.expire_date
-
-      let defaultExpireDate = null
-      let maxExpireDateFromCaps = null
-
-      if (expireDate.days) {
-        const days = parseInt(expireDate.days)
-        defaultExpireDate = DateTime.now()
-          .setLocale(getLocaleFromLanguage(this.$language.current))
-          .plus({ days })
-          .toJSDate()
-      }
-
-      if (expireDate.enforced) {
-        const days = parseInt(expireDate.days)
-        maxExpireDateFromCaps = DateTime.now()
-          .setLocale(getLocaleFromLanguage(this.$language.current))
-          .plus({ days })
-          .toJSDate()
-      }
-
-      return {
-        enforced: expireDate.enforced,
-        default: defaultExpireDate,
-        min: DateTime.now().setLocale(getLocaleFromLanguage(this.$language.current)).toJSDate(),
-        max: maxExpireDateFromCaps
-      }
-    },
-
     helpersEnabled() {
       return this.configuration?.options?.contextHelpers
     },
@@ -415,7 +391,7 @@ export default defineComponent({
             ability: this.ability,
             store: this.$store
           }).toString(),
-          expiration: this.expirationDate.default,
+          expiration: this.expirationRules.default,
           password: false
         }
       })

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

@@ -26,16 +26,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { useAbility, getDefaultLinkPermissions, useStore } from '@ownclouders/web-pkg'
+import { defineComponent, PropType } from 'vue'
+import {
+  useAbility,
+  getDefaultLinkPermissions,
+  useStore,
+  ExpirationRules
+} from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'CreateQuickLink',
   props: {
-    expirationDate: {
-      type: Object,
-      default: () => {},
+    expirationRules: {
+      type: Object as PropType<ExpirationRules>,
       required: true
     }
   },
@@ -50,7 +54,7 @@ export default defineComponent({
         link: {
           name: $gettext('Link'),
           permissions: getDefaultLinkPermissions({ ability, store }).toString(),
-          expiration: props.expirationDate.enforced ? props.expirationDate.default : null,
+          expiration: props.expirationRules.enforced ? props.expirationRules.default : null,
           quicklink: true,
           password: false
         }

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

@@ -136,10 +136,10 @@
                 v-if="option.showDatepicker"
                 v-model="newExpiration"
                 class="link-expiry-picker oc-flex oc-width-1-1"
-                :min-date="expirationDate.min"
-                :max-date="expirationDate.max"
+                :min-date="expirationRules.min"
+                :max-date="expirationRules.max"
                 :locale="$language.current"
-                :is-required="expirationDate.enforce"
+                :is-required="expirationRules.enforced"
               >
                 <template #default="{ togglePopover }">
                   <oc-button
@@ -212,7 +212,7 @@ import { formatDateFromDateTime, formatRelativeDateFromDateTime } from '@ownclou
 import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import { createFileRouteOptions } from '@ownclouders/web-pkg'
 import { OcDrop } from 'design-system/src/components'
-import { usePasswordPolicyService } from '@ownclouders/web-pkg'
+import { usePasswordPolicyService, ExpirationRules } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
@@ -226,9 +226,8 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    expirationDate: {
-      type: Object,
-      default: () => ({}),
+    expirationRules: {
+      type: Object as PropType<ExpirationRules>,
       required: true
     },
     isFolderShare: {
@@ -316,7 +315,7 @@ export default defineComponent({
             id: 'remove-expiration',
             title: this.$gettext('Remove expiration date'),
             icon: 'close',
-            isRemovable: !this.expirationDate.enforced,
+            isRemovable: !this.expirationRules.enforced,
             method: () =>
               this.updateLink({
                 link: {

packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts

@@ -77,7 +77,7 @@ function getShallowMountedWrapper(link, expireDateEnforced = false, isModifiable
       props: {
         availableRoleOptions,
         canRename: true,
-        expirationDate: {
+        expirationRules: {
           enforced: expireDateEnforced,
           default: null,
           min: 'Wed Apr 01 2020 00:00:00 GMT+0000 (Coordinated Universal Time)',

packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap

@@ -73,7 +73,7 @@ exports[`DetailsAndEdit component if user can edit renders dropdown and edit but
             </oc-button-stub>
           </li>
           <li class="oc-rounded oc-menu-item-hover">
-            <date-picker-stub class="oc-datepicker link-expiry-picker oc-flex oc-width-1-1 link-expiry-picker oc-flex oc-width-1-1" inputdebounce="1000" is24hr="false" isrange="false" locale="en" min-date="Wed Apr 01 2020 00:00:00 GMT+0000 (Coordinated Universal Time)" mode="date" modelconfig="[object Object]" popover="[object Object]" updateoninput="true">
+            <date-picker-stub class="oc-datepicker link-expiry-picker oc-flex oc-width-1-1 link-expiry-picker oc-flex oc-width-1-1" inputdebounce="1000" is24hr="false" isrange="false" isrequired="false" locale="en" min-date="Wed Apr 01 2020 00:00:00 GMT+0000 (Coordinated Universal Time)" mode="date" modelconfig="[object Object]" popover="[object Object]" updateoninput="true">
               <!-- @slot Default slot to use as the popover anchor for datepicker -->
               <!-- args is undefined during initial render, hence we check it here -->
               <!--v-if-->

packages/web-client/src/ocs/capabilities.ts

@@ -26,6 +26,12 @@ export interface PasswordEnforcedForCapability {
   read_write_delete?: boolean
 }
 
+export interface PublicExpirationCapability {
+  days?: string
+  enabled?: boolean
+  enforced?: boolean
+}
+
 export interface LastModifiedFilterCapability {
   keywords?: string[]
   enabled?: boolean
@@ -101,9 +107,7 @@ export interface Capabilities {
         alias?: boolean
         can_edit: boolean
         enabled: boolean
-        expire_date: {
-          enabled: boolean
-        }
+        expire_date: PublicExpirationCapability
         multiple: boolean
         password: {
           enforced: boolean

packages/web-pkg/src/helpers/share/link.ts

@@ -13,6 +13,8 @@ import { Resource } from '@ownclouders/web-client'
 import { Language } from 'vue3-gettext'
 import { unref } from 'vue'
 import { showQuickLinkPasswordModal } from '../../quickActions'
+import { getLocaleFromLanguage } from '../locale'
+import { PublicExpirationCapability } from '@ownclouders/web-client/src/ocs/capabilities'
 
 export interface CreateQuicklink {
   clientService: ClientService
@@ -181,3 +183,42 @@ export const getDefaultLinkPermissions = ({
 
   return defaultPermissions
 }
+
+export type ExpirationRules = { enforced: boolean; default: DateTime; min: DateTime; max: DateTime }
+
+export const getExpirationRules = ({
+  store,
+  currentLanguage
+}: {
+  store: Store<any>
+  currentLanguage: string
+}): ExpirationRules => {
+  const expireDate: PublicExpirationCapability =
+    store.getters.capabilities.files_sharing.public.expire_date
+
+  let defaultExpireDate: DateTime = null
+  let maxExpireDateFromCaps: DateTime = null
+
+  if (expireDate.days) {
+    const days = parseInt(expireDate.days)
+    defaultExpireDate = DateTime.now()
+      .setLocale(getLocaleFromLanguage(currentLanguage))
+      .plus({ days })
+      .toJSDate()
+  }
+
+  if (expireDate.enforced) {
+    const days = parseInt(expireDate.days)
+    maxExpireDateFromCaps = DateTime.now()
+      .setLocale(getLocaleFromLanguage(currentLanguage))
+      .plus({ days })
+      .toJSDate()
+  }
+
+  return {
+    enforced: expireDate.enforced,
+    default: defaultExpireDate,
+    min: DateTime.now().setLocale(getLocaleFromLanguage(currentLanguage)).toJSDate(),
+    max: maxExpireDateFromCaps
+  }
+}

packages/web-pkg/tests/unit/helpers/share/link.spec.ts

@@ -2,7 +2,8 @@ import {
   copyQuicklink,
   createQuicklink,
   CreateQuicklink,
-  getDefaultLinkPermissions
+  getDefaultLinkPermissions,
+  getExpirationRules
 } from '../../../../src/helpers/share'
 import { DateTime } from 'luxon'
 import { Store } from 'vuex'
@@ -13,6 +14,7 @@ import { mock, mockDeep } from 'jest-mock-extended'
 import { Language } from 'vue3-gettext'
 import { Resource } from '@ownclouders/web-client'
 import { SharePermissionBit } from '@ownclouders/web-client/src/helpers'
+import { PublicExpirationCapability } from '@ownclouders/web-client/src/ocs/capabilities'
 
 jest.mock('@vueuse/core', () => ({
   useClipboard: jest.fn().mockReturnValue({ copy: jest.fn() })
@@ -186,3 +188,22 @@ describe('getDefaultLinkPermissions', () => {
     }
   )
 })
+
+describe('getExpirationRules', () => {
+  it('correctly computes rules based on the "expire_date"-capability', () => {
+    jest.useFakeTimers().setSystemTime(new Date('2000-01-01'))
+
+    const capabilities = mock<PublicExpirationCapability>({ enforced: true, days: '10' })
+    const rules = getExpirationRules({
+      currentLanguage: 'de',
+      store: {
+        getters: { capabilities: { files_sharing: { public: { expire_date: capabilities } } } }
+      } as Store<any>
+    })
+
+    expect(rules.enforced).toEqual(capabilities.enforced)
+    expect(rules.default).toEqual(new Date('2000-01-11'))
+    expect(rules.min).toEqual(new Date('2000-01-01'))
+    expect(rules.max).toEqual(new Date('2000-01-11'))
+  })
+})

packages/web-runtime/src/App.vue

@@ -45,9 +45,9 @@
       <template v-if="modal.customContent || modal.customComponent" #content>
         <div v-if="modal.customContent" v-html="modal.customContent" />
         <component
-          ref="modalComponent"
           :is="modal.customComponent"
           v-else
+          ref="modalComponent"
           :modal="modal"
           v-bind="modal.customComponentAttrs"
         />