owncloud · PVince81 · Jan 29, 2020 · Jan 24, 2020 · Jan 24, 2020 · Jan 26, 2020
diff --git a/apps/files/src/components/FileLinkSidebar.vue b/apps/files/src/components/FileLinkSidebar.vue
@@ -1,55 +1,77 @@
 <template>
   <div class="uk-position-relative" id="oc-files-file-link">
-    <div v-if="visiblePanel === PANEL_SHOW">
-      <oc-loader :aria-label="$gettext('Loading list of file links')" v-if="linksLoading"/>
+    <div v-show="visiblePanel === PANEL_SHOW" :aria-hidden="visiblePanel !== PANEL_SHOW">
+      <oc-loader v-if="linksLoading" :aria-label="$gettext('Loading list of file links')"/>
       <template v-else>
-        <template v-if="$_privateLinkOfHighlightedFile">
-          <div class="uk-text-bold" v-translate>Private Link</div>
-          <div class="uk-link" id="files-sidebar-private-link-label" name="link"
-               v-clipboard:copy="$_privateLinkOfHighlightedFile"
-               v-clipboard:success="$_clipboardSuccessHandler"
-               v-show="!linkCopied">
-            {{ $_copyPrivateLinkLabel }}
+        <section v-if="$_privateLinkOfHighlightedFile">
+          <div class="uk-text-bold">
+            <span v-translate>Private Link</span>
+            <oc-button :aria-label="$_privateLinkCopyLabel" variation="raw" class="uk-margin-small-left">
+              <oc-icon v-if="!linksCopied[$_privateLinkOfHighlightedFile]" name="copy_to_clipboard" size="small" id="files-sidebar-private-link-label"
+                       v-clipboard:copy="$_privateLinkOfHighlightedFile" v-clipboard:success="$_clipboardSuccessHandler"/>
+              <oc-icon v-else name="ready" size="small" id="files-sidebar-private-link-icon-copied" class="_clipboard-success-animation"/>
+            </oc-button>
+          </div>
+          <div class="uk-text-meta">
+            <i><translate>Only invited collaborators can use this link.</translate></i>
           </div>
-          <oc-icon id="files-sidebar-private-link-icon-copied" name="ready" v-show="linkCopied"/>
           <hr/>
-        </template>
-        <div class="uk-text-bold" v-translate>Public Links</div>
-        <div class="uk-margin-small-top uk-margin-small-bottom">
-          <oc-button @click="$_addPublicLink" icon="add" variation="primary" id="files-file-link-add">{{ $_addButtonLabel }}</oc-button>
-        </div>
-        <transition-group v-if="$_links.length > 0"
-                          class="uk-list uk-list-divider uk-overflow-hidden"
-                          enter-active-class="uk-animation-slide-left-medium"
-                          leave-active-class="uk-animation-slide-right-medium uk-animation-reverse"
-                          name="custom-classes-transition"
-                          tag="ul">
-          <li :key="'li-' + index" v-for="(link, index) in $_links">
-            <oc-grid flex gutter="small">
-              <div class="uk-width-auto">
-                <oc-icon name="lock" size="medium" v-show="link.password"/>
-                <oc-icon name="link" size="medium" v-show="!link.password"/>
-              </div>
-              <div class="uk-width-expand uk-text-truncate">
-                <a :href="link.url" :uk-tooltip="$_tooltipTextLink" class="uk-text-bold oc-files-file-link-url">{{ link.name }}</a><br>
-                <span class="uk-text-meta">{{ link.description }}<template v-if="link.expiration"> | <span
-                  v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}</template></span>
-              </div>
-              <div class="uk-width-auto uk-button-group">
-                <button :aria-label="$_copyButtonLabel" @click.stop="$_copyToClipboard(link, $event)"
-                        class="uk-button uk-button-default uk-position-relative oc-files-file-link-copy-url">
-                  <oc-icon class="uk-position-center" name="copy_to_clipboard"/>
-                </button>
-                <oc-button :aria-label="$_editButtonLabel" @click="$_editPublicLink(link)" icon="edit" class="oc-files-file-link-edit"/>
-                <oc-button :aria-label="$_deleteButtonLabel" @click="$_removePublicLink(link)" icon="delete" class="oc-files-file-link-delete"/>
-              </div>
-            </oc-grid>
-          </li>
-        </transition-group>
-        <p class="uk-text-meta" v-else><translate>Links can be shared with external collaborators.</translate></p>
+        </section>
+        <section>
+          <div class="uk-text-bold">
+            <translate>Public Links</translate>
+          </div>
+          <div class="uk-text-meta">
+            <i><translate>Any external collaborator with the respective link can access this resource. No sign-in required. Assign a password to avoid unintended document exposure.</translate></i>
+          </div>
+          <div class="uk-margin-small-top uk-margin-small-bottom">
+            <oc-button @click="$_addPublicLink" icon="add" variation="primary" id="files-file-link-add">{{ $_addButtonLabel }}</oc-button>
+          </div>
+          <transition-group v-if="$_links.length > 0"
+                            class="uk-list uk-list-divider uk-overflow-hidden"
+                            enter-active-class="uk-animation-slide-left-medium"
+                            leave-active-class="uk-animation-slide-right-medium uk-animation-reverse"
+                            name="custom-classes-transition"
+                            tag="ul">
+            <li v-for="link in $_links" :key="'li-' + link.id">
+              <oc-table midldle class="files-file-links-link">
+                <oc-table-row class="files-file-links-link-table-row-info">
+                  <oc-table-cell shrink>
+                    <oc-button :aria-label="$_deleteButtonLabel" @click="$_removePublicLink(link)" variation="raw" class="oc-files-file-link-delete">
+                      <oc-icon name="close" />
+                    </oc-button>
+                  </oc-table-cell>
+                  <oc-table-cell>
+                    <a :href="link.url" target="_blank" :uk-tooltip="$_tooltipTextLink" class="uk-text-bold uk-text-truncate oc-files-file-link-url">{{ link.name }}</a>
+                    <br>
+                    <span class="uk-text-meta uk-text-break">
+                      <span>{{ link.description }}</span>
+                      <template v-if="link.expiration"> |
+                        <span v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}
+                      </template>
+                      <template v-if="link.password"> |
+                        <span v-translate>Password protected</span>
+                      </template>
+                    </span>
+                  </oc-table-cell>
+                  <oc-table-cell shrink class="uk-text-nowrap">
+                    <oc-button :aria-label="$_publicLinkCopyLabel" variation="raw" class="oc-files-file-link-copy-url">
+                      <oc-icon v-if="!linksCopied[link.url]"  name="copy_to_clipboard" size="small"
+                               v-clipboard:copy="link.url" v-clipboard:success="$_clipboardSuccessHandler"/>
+                      <oc-icon v-else name="ready" size="small" class="oc-files-file-link-copied-url _clipboard-success-animation"/>
+                    </oc-button>
+                    <oc-button :aria-label="$_editButtonLabel" @click="$_editPublicLink(link)" variation="raw" class="oc-files-file-link-edit">
+                      <oc-icon name="edit" size="small"/>
+                    </oc-button>
+                  </oc-table-cell>
+                </oc-table-row>
+              </oc-table>
+            </li>
+          </transition-group>
+        </section>
       </template>
     </div>
-    <div v-else-if="visiblePanel === PANEL_EDIT">
+    <div v-if="visiblePanel === PANEL_EDIT">
       <transition enter-active-class="uk-animation-slide-right uk-animation-fast"
                   leave-active-class="uk-animation-slide-right uk-animation-reverse uk-animation-fast"
                   name="custom-classes-transition">
@@ -81,7 +103,7 @@ export default {
   data () {
     return {
       visiblePanel: 'showLinks',
-      linkCopied: false,
+      linksCopied: {},
 
       // panel types
       PANEL_SHOW: PANEL_SHOW,
@@ -151,11 +173,11 @@ export default {
     $_editButtonLabel () {
       return this.$gettext('Edit public link')
     },
-    $_copyButtonLabel () {
-      return this.$gettext('Copy link url')
+    $_publicLinkCopyLabel () {
+      return this.$gettext('Copy public link url')
     },
-    $_copyPrivateLinkLabel () {
-      return this.$gettext('Copy Private Link')
+    $_privateLinkCopyLabel () {
+      return this.$gettext('Copy private link url')
     },
     $_privateLinkOfHighlightedFile () {
       if (!this.highlightedFile) {
@@ -199,23 +221,11 @@ export default {
       this.$_resetData()
       this.visiblePanel = PANEL_EDIT
     },
-    $_copyToClipboard (link) {
-      this.$copyText(link.url)
-
-      const clone = event.currentTarget.firstElementChild.cloneNode(true)
-      clone.classList.add('_clipButton')
-      event.currentTarget.append(clone)
-
-      // Remove clone after animation ends
-      setTimeout(() => clone.remove(), 500)
-    },
-    $_clipboardSuccessHandler () {
-      this.linkCopied = true
-
-      // Use copy icon after some time
+    $_clipboardSuccessHandler (event) {
+      this.$set(this.linksCopied, event.text, true)
       setTimeout(() => {
-        this.linkCopied = false
-      }, 1000)
+        this.linksCopied[event.text] = false
+      }, 550)
     },
     $_showList () {
       this.visiblePanel = PANEL_SHOW
@@ -224,27 +234,34 @@ export default {
 }
 </script>
 <style scoped>
-  /* TODO: Move to design system */
-  ._clipButton {
-    animation-name: _clipButton;
+  /* FIXME: Move to design system */
+  ._clipboard-success-animation {
+    animation-name: _clipboard-success-animation;
     animation-duration: .5s;
     animation-timing-function: ease-out;
     animation-fill-mode: both;
   }
 
-  @keyframes _clipButton {
+  @keyframes _clipboard-success-animation {
     0% {
-      transform: translate(-50%, -50%);
       opacity: 1;
     }
+    50% {
+      opacity: 0.9;
+    }
     100% {
-      transform: translate(-50%, -125%);
       opacity: 0;
     }
   }
 </style>
+<style scoped="scoped">
+  /* FIXME: Move to ODS somehow */
+  .files-file-links-link-table-row-info > td {
+    padding: 0 10px 0 0;
+  }
+</style>
 <style>
-  /* TODO: Move to design system (copied from FileSharingSidebar.vue) */
+  /* FIXME: Move to design system (copied from FileSharingSidebar.vue) */
   .oc-app-side-bar .oc-label {
     display: block;
     margin-bottom: 5px;

diff --git a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
@@ -9,7 +9,7 @@
         </div>
       </transition>
       <div class="uk-margin">
-        <label class="oc-label"><span v-translate>Name your link</span>:</label>
+        <label class="oc-label"><span v-translate>Name</span>:</label>
         <input class="uk-input" id="oc-files-file-link-name" v-model="name"/>
       </div>
       <oc-grid childWidth="1-1" gutter="small">
@@ -26,7 +26,7 @@
                            :maxDatetime="$_maxExpirationDate" :minDatetime="$_minExpirationDate"
                            :placeholder="placeholder.expireDate" @input="expireDate = $event" id="oc-files-file-link-expire-date"/>
             <div :uk-tooltip="$_expirationDateRemoveText" @click="expireDate=null" class="uk-position-small uk-position-center-right oc-cursor-pointer" uk-close
-                 id="oc-files-file-link-expire-date-delete" v-if="!!expireDate"/>
+                 id="oc-files-file-link-expire-date-delete" v-if="!$_expirationDate.enforced && !!expireDate"/>
           </div>
         </div>
         <div class="uk-width-1-1 uk-width-3-5@m">
@@ -135,10 +135,12 @@ export default {
     },
 
     $_hasChanges () {
-      return (this.expireDate !== this.params.expireDate) ||
+      const expireDateBefore = this.params.expireDate ? moment(this.params.expireDate).format('DD-MM-YYYY') : null
+      const expireDateNow = this.expireDate ? moment(this.expireDate).format('DD-MM-YYYY') : null
+      return (expireDateNow !== expireDateBefore) ||
           (this.name !== this.params.name) ||
           (this.permissions !== this.params.permissions) ||
-          (this.password !== null)
+          (this.params.hasPassword ? this.password !== null : (this.password !== null && this.password.trim().length > 0))
     },
 
     $_sendMailEnabled () {

diff --git a/apps/files/src/default.js b/apps/files/src/default.js
@@ -45,15 +45,6 @@ const appInfo = {
       enabled (capabilities, highlightedFile) {
         return !!capabilities.core && highlightedFile && highlightedFile.type !== 'folder'
       }
-    }, {
-      app: 'file-link',
-      component: FileLinkSidebar,
-      enabled (capabilities) {
-        if (capabilities.files_sharing) {
-          return capabilities.files_sharing.public.enabled
-        }
-        return false
-      }
     }, {
       app: 'files-sharing',
       component: FileSharingSidebar,
@@ -67,6 +58,15 @@ const appInfo = {
         icon: 'share',
         ariaLabel: $gettext('Collaborators')
       }
+    }, {
+      app: 'file-link',
+      component: FileLinkSidebar,
+      enabled (capabilities) {
+        if (capabilities.files_sharing) {
+          return capabilities.files_sharing.public.enabled
+        }
+        return false
+      }
     }, ...sidebarsFromConfig
   ]
 }

diff --git a/changelog/unreleased/1907 b/changelog/unreleased/1907
@@ -1,10 +1,11 @@
 Change: Bring UI/UX of file links sidebar in line with sharing sidebar
 
-The file links sidebar had inline forms for link creation/editing while the sharing
-sidebar navigates to a new panel when showing forms. Also, within the file link
-creation/editing form the role selection was solved through radio buttons while
-roles for collaborators are selected through a dropdown menu. We adapted both
-UI aspects of the file links sidebar to resemble the sharing sidebar.
+We adapted the UI/UX of the file links sidebar to be in line with the UI/UX of the collaborators
+sidebar. The order of the two sidebars has been reversed (collaborators first, file links
+second). We added info messages to support a clear understanding of the purpose of both private
+and public links. Most notably the file links sidebar has no inline forms anymore.
 
 https://github.com/owncloud/phoenix/issues/1907
+https://github.com/owncloud/phoenix/issues/1307
 https://github.com/owncloud/phoenix/pull/2841
+https://github.com/owncloud/phoenix/pull/2917
diff --git a/tests/acceptance/features/webUIFiles/fileDetails.feature b/tests/acceptance/features/webUIFiles/fileDetails.feature
@@ -25,8 +25,8 @@ Feature: User can open the details panel for any file or folder
     When the user picks the row of folder "simple-folder" in the webUI
     Then the app-sidebar should be visible
     And the thumbnail should be visible in the app-sidebar
-    And the "links" details panel should be visible
-    And no "collaborators" tab should be available in the details panel
+    And the "collaborators" details panel should be visible
+    And no "links" tab should be available in the details panel
     And no "versions" tab should be available in the details panel
 
   @files_versions-app-required
@@ -47,8 +47,8 @@ Feature: User can open the details panel for any file or folder
     When the user picks the row of folder "simple-folder" in the webUI
     Then the app-sidebar should be visible
     And the thumbnail should be visible in the app-sidebar
-    And the "links" details panel should be visible
-    And no "collaborators" tab should be available in the details panel
+    And the "collaborators" details panel should be visible
+    And no "links" tab should be available in the details panel
     And no "versions" tab should be available in the details panel
 
   @skip @yetToImplement

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -648,9 +648,9 @@ module.exports = {
         .click('@sidebarLinksTab')
         .waitForElementVisible('@sidebarPrivateLinkLabel')
         .click('@sidebarPrivateLinkLabel')
-        .waitForElementNotVisible('@sidebarPrivateLinkLabel')
+        .waitForElementNotPresent('@sidebarPrivateLinkLabel')
         .waitForElementVisible('@sidebarPrivateLinkIconCopied')
-        .waitForElementNotVisible('@sidebarPrivateLinkIconCopied')
+        .waitForElementNotPresent('@sidebarPrivateLinkIconCopied')
         .waitForElementVisible('@sidebarPrivateLinkLabel')
     },
     deleteImmediately: async function (fileName) {

diff --git a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
@@ -301,6 +301,7 @@ module.exports = {
       return this
         .initAjaxCounters()
         .waitForElementVisible(linkRowDeleteButton)
+        .pause(500)
         .click(linkRowDeleteButton)
         .waitForOutstandingAjaxCalls()
     },