Add rename for public links, start styling public link role dropdown,…

… start fixing integration tests
owncloud · Apr 13, 2022 · 7ee8f24 · 7ee8f24
1 parent 867361c
commit 7ee8f24
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 27 deletions.
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -28,7 +28,12 @@
           v-text="noResharePermsMessage"
         />
         <oc-list v-if="links.length" class="oc-overflow-hidden oc-my-m">
-          <li v-for="link in links" :key="link.key" class="oc-py-s">
+          <li
+            v-for="link in links"
+            :key="link.key"
+            class="oc-py-s"
+            :data-testid="`files-link-id-${link.id}`"
+          >
             <name-and-copy :link="link" />
             <details-and-edit
               :link="link"

diff --git a/packages/web-app-files/src/components/SideBar/Shares/PublicLinks/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/PublicLinks/DetailsAndEdit.vue
@@ -4,6 +4,7 @@
       <oc-button
         :id="`edit-public-link-role-dropdown-toggl-${link.id}`"
         appearance="raw"
+        class="oc-text-left"
         gap-size="none"
       >
         <span v-text="visibilityHint" />
@@ -13,13 +14,16 @@
         ref="editPublicLinkRoleDropdown"
         :drop-id="`edit-public-link-role-dropdown`"
         :toggle="`#edit-public-link-role-dropdown-toggl-${link.id}`"
+        padding-size="remove"
         mode="click"
       >
-        <oc-list>
+        <oc-list class="roleDropdownList">
           <li v-for="(descriptor, i) in availableRoleOptions" :key="`role-dropdown-${i}`">
-            <!-- needs "active" handling && correct permission "calculation" -->
             <oc-button
+              :class="{ selected: parseInt(link.permissions) === descriptor.role.bitmask(false) }"
               appearance="raw"
+              justify-content="space-between"
+              class="oc-py-xs oc-px-s"
               @click="
                 updateLink({
                   link: {
@@ -30,7 +34,12 @@
                 })
               "
             >
-              <span v-text="descriptor.label" />
+              <span class="oc-text-bold oc-display-block oc-width-1-1" v-text="descriptor.label" />
+              <span>{{ roleTexts[descriptor.role.bitmask(false)] }} </span>
+              <oc-icon
+                v-if="parseInt(link.permissions) === descriptor.role.bitmask(false)"
+                name="check"
+              />
             </oc-button>
           </li>
         </oc-list>
@@ -65,7 +74,11 @@
         fill-type="line"
       />
       <div v-if="modifiable">
-        <oc-button :id="`edit-public-link-dropdown-toggl-${link.id}`" appearance="raw">
+        <oc-button
+          :id="`edit-public-link-dropdown-toggl-${link.id}`"
+          appearance="raw"
+          :data-testid="`files-link-id-${link.id}-btn-edit`"
+        >
           <oc-icon name="more-2" />
         </oc-button>
         <oc-drop
@@ -83,11 +96,10 @@
                 :max-date="expirationDate.max"
                 :locale="$language.current"
                 :is-required="expirationDate.enforce"
-                class="files-recipient-expiration-datepicker"
-                data-testid="recipient-datepicker"
               >
                 <template #default="{ togglePopover }">
                   <oc-button
+                    :data-testid="`files-link-id-${link.id}-edit-${option.id}`"
                     appearance="raw"
                     :variation="option.variation"
                     @click="togglePopover"
@@ -98,6 +110,7 @@
               <oc-button
                 v-else
                 appearance="raw"
+                :data-testid="`files-link-id-${link.id}-edit-${option.id}`"
                 :variation="option.variation"
                 @click="option.method"
                 v-text="option.title"
@@ -153,75 +166,90 @@ export default {
       return linkRoleDescriptions[parseInt(this.link.permissions)]
     },
 
+    roleTexts() {
+      return linkRoleDescriptions
+    },
+
     editButtonLabel() {
       return this.$gettext('Edit public link')
     },
 
     editOptions() {
       const result = []
+
+      // renaming not allowed for (future) quick links
+      if (this.link) {
+        result.push({
+          id: 'rename',
+          title: this.$gettext('Rename'),
+          method: this.showRenameModal
+        })
+      }
+
       // enabled equals false for oCIS, what am I missing here? Is this about the default expiry date?
       // if (this.expirationDate.enabled) {
       if (this.link.expiration) {
         result.push({
+          id: 'edit-expiration',
           title: this.$gettext('Edit expiration date'),
           method: () => this.updateLink(),
-          showDatepicker: true,
-          variation: 'passive'
+          showDatepicker: true
         })
         if (!this.expirationDate.enforced) {
           result.push({
+            id: 'remove-expiration',
             title: this.$gettext('Remove expiration date'),
             method: () =>
               this.updateLink({
                 link: {
                   ...this.link,
                   expiration: ''
                 }
-              }),
-            variation: 'passive'
+              })
           })
         }
       } else {
         result.push({
+          id: 'add-expiration',
           title: this.$gettext('Add expiration date'),
           method: () => this.updateLink(),
-          showDatepicker: true,
-          variation: 'passive'
+          showDatepicker: true
         })
       }
       // }
 
       if (this.link.password) {
         result.push({
+          id: 'edit-password',
           title: this.$gettext('Edit password'),
-          method: this.showPasswordModal,
-          variation: 'passive'
+          method: this.showPasswordModal
         })
 
         if (!this.passwordEnforced) {
           result.push({
+            id: 'remove-password',
             title: this.$gettext('Remove password'),
             method: () =>
               this.updateLink({
                 link: {
                   ...this.link,
                   password: ''
                 }
-              }),
-            variation: 'passive'
+              })
           })
         }
       } else {
         result.push({
+          id: 'add-password',
           title: this.$gettext('Add password'),
-          method: this.showPasswordModal,
-          variation: 'passive'
+          method: this.showPasswordModal
         })
       }
 
       return [
         ...result,
         {
+          id: 'delete',
           title: this.$gettext('Delete public link'),
           method: this.deleteLink,
           variation: 'danger'
@@ -308,13 +336,38 @@ export default {
       this.$emit('removePublicLink', { link: this.link })
       this.$refs.editPublicLinkDropdown.hide()
     },
+    showRenameModal() {
+      const modal = {
+        variation: 'passive',
+        title: this.$gettext('Edit name'),
+        cancelText: this.$gettext('Cancel'),
+        confirmText: this.$gettext('Save'),
+        hasInput: true,
+        inputValue: this.link.name ? this.link.name : this.link.token,
+        inputLabel: this.$gettext('Link name'),
+        onCancel: this.hideModal,
+        onConfirm: (name) =>
+          this.updateLink({
+            link: {
+              ...this.link,
+              name
+            },
+            onSuccess: () => {
+              this.hideModal()
+            }
+          })
+      }
+
+      this.createModal(modal)
+    },
     showPasswordModal() {
       const modal = {
         variation: 'passive',
-        title: this.$gettext('Title'),
+        title: this.link.password ? this.$gettext('Edit password') : this.$gettext('Add password'),
         cancelText: this.$gettext('Cancel'),
-        confirmText: this.$gettext('Rename'),
+        confirmText: this.link.password ? this.$gettext('Apply') : this.$gettext('Set'),
         hasInput: true,
+        // inputType: 'password',
         inputLabel: this.$gettext('Password'),
         onCancel: this.hideModal,
         onConfirm: (password) =>
@@ -341,4 +394,28 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+
+.roleDropdownList li {
+  .oc-button {
+    text-align: left;
+    border-radius: 0;
+    width: 100%;
+
+    &:hover,
+    &:focus {
+      color: var(--oc-color-text-default) !important;
+    }
+
+    &.selected,
+    &:hover,
+    &:focus {
+      background-color: var(--oc-color-swatch-primary-default) !important;
+      color: var(--oc-color-text-inverse) !important;
+
+      ::v-deep .oc-icon > svg {
+        fill: var(--oc-color-text-inverse) !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/packages/web-app-files/tests/integration/specs/linkExpirationDate.spec.js b/packages/web-app-files/tests/integration/specs/linkExpirationDate.spec.js
@@ -172,15 +172,11 @@ describe('Users can set expiration date when sharing via public link', () => {
     expect(editBtn).toBeVisible()
     await fireEvent.click(editBtn)
 
-    const removeExpiryDateBtn = getByTestId('files-link-remove-expiration-date')
+    const removeExpiryDateBtn = getByTestId('files-link-id-1-edit-remove-expiration')
     expect(removeExpiryDateBtn).toBeVisible()
     await fireEvent.click(removeExpiryDateBtn)
-
-    const shareBtn = getByTestId('save-files-link-btn')
-    expect(shareBtn).toBeVisible()
-    await fireEvent.click(shareBtn)
     await waitFor(() => {
-      return expect(queryByTestId('files-link-being-saved')).toBe(null)
+      return expect(queryByTestId('files-link-id-1-edit-remove-expiration')).toBe(null)
     })
 
     expect(within(link).queryByTestId('files-link-id-1-expiration-date')).toBe(null)