Introduce new ux for edit/remove expiration date for share links

changelog/unreleased/enhancement-unify-sharing-expiration-date-menu-items

@@ -0,0 +1,7 @@
+Enhancement: Unify sharing expiration date menu items
+
+We've unified the sharing expiration date menu item for links and regular user/group shares,
+the delete expiration date button shows up next to the edit expiration date and therefore declutter the UI.
+
+https://github.com/owncloud/web/pull/9706
+https://github.com/owncloud/web/issues/9705

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

@@ -17,7 +17,7 @@
             :max-date="maxExpirationDate"
             :locale="$language.current"
             :is-required="isExpirationDateEnforced"
-            class="files-recipient-expiration-datepicker"
+            class="files-recipient-expiration-datepicker oc-flex"
             data-testid="recipient-datepicker"
           >
             <template #default="{ togglePopover }">
@@ -30,11 +30,20 @@
                 <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
                 <span
                   v-if="isExpirationDateSet"
-                  class="oc-ml-s"
-                  v-text="$gettext('Edit expiration date')"
+                  v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
                 />
                 <span v-else v-text="$gettext('Set expiration date')" />
               </oc-button>
+              <oc-button
+                v-if="isRemoveExpirationPossible"
+                class="remove-expiration-date"
+                data-testid="collaborator-remove-expiration-btn"
+                appearance="raw"
+                :aria-label="$gettext('Remove expiration date')"
+                @click="removeExpirationDate"
+              >
+                <oc-icon name="close" />
+              </oc-button>
             </template>
           </oc-datepicker>
         </li>
@@ -72,13 +81,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, Ref } from 'vue'
+import { computed, defineComponent, inject, Ref } from 'vue'
 import { mapGetters } from 'vuex'
 import { DateTime } from 'luxon'
 import uniqueId from 'design-system/src/utils/uniqueId'
 import { OcDrop } from 'design-system/src/components'
 import { Resource } from 'web-client/src'
 import { isProjectSpaceResource } from 'web-client/src/helpers'
+import { formatRelativeDateFromDateTime } from 'web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'EditDropdown',
@@ -111,13 +122,22 @@ export default defineComponent({
   },
   emits: ['expirationDateChanged', 'removeShare', 'showAccessDetails', 'setDenyShare'],
   setup(props, { emit }) {
+    const language = useGettext()
     const toggleShareDenied = (value) => {
       emit('setDenyShare', value)
     }
 
+    const dateExpire = computed(() =>
+      formatRelativeDateFromDateTime(
+        DateTime.fromJSDate(props.expirationDate).endOf('day'),
+        language.current
+      )
+    )
+
     return {
       resource: inject<Ref<Resource>>('resource'),
-      toggleShareDenied
+      toggleShareDenied,
+      dateExpire
     }
   },
   data: function () {
@@ -129,21 +149,7 @@ export default defineComponent({
     ...mapGetters(['capabilities']),
 
     options() {
-      const result = []
-      if (this.isRemoveExpirationPossible) {
-        result.push({
-          title: this.$gettext('Remove expiration date'),
-          method: this.removeExpirationDate,
-          class: 'remove-expiration-date',
-          enabled: this.canEditOrDelete,
-          icon: 'calendar',
-          additionalAttributes: {
-            'data-testid': 'collaborator-remove-expiration-btn'
-          }
-        })
-      }
       return [
-        ...result,
         {
           title: isProjectSpaceResource(this.resource)
             ? this.$gettext('Remove member')
@@ -199,7 +205,10 @@ export default defineComponent({
 
     isRemoveExpirationPossible() {
       return (
-        this.isExpirationSupported && this.isExpirationDateSet && !this.isExpirationDateEnforced
+        this.canEditOrDelete &&
+        this.isExpirationSupported &&
+        this.isExpirationDateSet &&
+        !this.isExpirationDateEnforced
       )
     },
 

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

@@ -122,7 +122,7 @@
               <oc-datepicker
                 v-if="option.showDatepicker"
                 v-model="newExpiration"
-                class="link-expiry-picker"
+                class="link-expiry-picker oc-flex oc-width-1-1"
                 :min-date="expirationDate.min"
                 :max-date="expirationDate.max"
                 :locale="$language.current"
@@ -139,6 +139,15 @@
                     <oc-icon :name="option.icon" fill-type="line" size="medium" />
                     <span v-text="option.title" />
                   </oc-button>
+                  <oc-button
+                    v-if="option.remove && option.remove.isRemovable"
+                    :data-testid="`files-link-id-${link.id}-edit-${option.id}`"
+                    :aria-label="option.remove.title"
+                    appearance="raw"
+                    @click="option.remove.method"
+                  >
+                    <oc-icon :name="option.remove.icon" />
+                  </oc-button>
                 </template>
               </oc-datepicker>
               <oc-button
@@ -183,12 +192,13 @@ import {
   LinkShareRoles,
   ShareRole
 } from 'web-client/src/helpers/share'
-import { defineComponent, inject, PropType, Ref } from 'vue'
+import { computed, defineComponent, inject, PropType, Ref } from 'vue'
 import { formatDateFromDateTime, formatRelativeDateFromDateTime } from 'web-pkg/src/helpers'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { OcDrop } from 'design-system/src/components'
 import { usePasswordPolicyService } from 'web-pkg/src/composables/passwordPolicyService'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'DetailsAndEdit',
@@ -224,13 +234,21 @@ export default defineComponent({
     }
   },
   emits: ['removePublicLink', 'updateLink'],
-  setup() {
+  setup(props) {
+    const { current } = useGettext()
     const passwordPolicyService = usePasswordPolicyService()
+    const dateExpire = computed(() => {
+      return formatRelativeDateFromDateTime(
+        DateTime.fromISO(props.link.expiration).endOf('day'),
+        current
+      )
+    })
 
     return {
       space: inject<Ref<SpaceResource>>('space'),
       resource: inject<Ref<Resource>>('resource'),
-      passwordPolicyService
+      passwordPolicyService,
+      dateExpire
     }
   },
   data() {
@@ -269,29 +287,28 @@ export default defineComponent({
       if (this.link.expiration) {
         result.push({
           id: 'edit-expiration',
-          title: this.$gettext('Edit expiration date'),
+          title: this.$gettext('Expires %{expires}', { expires: this.dateExpire }),
           method: this.updateLink,
           icon: 'calendar-event',
-          showDatepicker: true
-        })
-        if (!this.expirationDate.enforced) {
-          result.push({
+          showDatepicker: true,
+          remove: {
             id: 'remove-expiration',
             title: this.$gettext('Remove expiration date'),
-            icon: 'calendar',
+            icon: 'close',
+            isRemovable: !this.expirationDate.enforced,
             method: () =>
               this.updateLink({
                 link: {
                   ...this.link,
                   expiration: ''
                 }
               })
-          })
-        }
+          }
+        })
       } else {
         result.push({
           id: 'add-expiration',
-          title: this.$gettext('Add expiration date'),
+          title: this.$gettext('Set expiration date'),
           method: this.updateLink,
           icon: 'calendar-event',
           showDatepicker: true
@@ -424,8 +441,8 @@ export default defineComponent({
     updateLink({ link, dropRef = undefined, onSuccess = () => {} }) {
       link = link || this.link
       dropRef = dropRef || this.$refs.editPublicLinkDropdown
-      this.$emit('updateLink', { link, onSuccess })
       dropRef.hide()
+      this.$emit('updateLink', { link, onSuccess })
     },
     deleteLink() {
       this.$emit('removePublicLink', { link: this.link })

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

@@ -71,7 +71,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 link-expiry-picker" 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" 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-->

tests/e2e/support/objects/app-files/link/actions.ts

@@ -78,7 +78,7 @@ const editPublicLinkButton =
 const editPublicLinkRenameButton =
   '//div[contains(@id,"edit-public-link-dropdown")]//button/span[text()="Rename"]'
 const editPublicLinkSetExpirationButton =
-  '//div[contains(@id,"edit-public-link-dropdown")]//button/span[text()="Add expiration date"]'
+  '//div[contains(@id,"edit-public-link-dropdown")]//button/span[text()="Set expiration date"]'
 const editPublicLinkAddPasswordButton =
   '//div[contains(@id,"edit-public-link-dropdown")]//button/span[text()="Add password"]'
 const editPublicLinkInput = '.oc-modal-body input.oc-text-input'