Create shared by link page

changelog/unreleased/split-shared-with-others

@@ -0,0 +1,5 @@
+Enhancement: Add "Shared via link" page
+
+We've added a new page called "Shared via link". This page displays a files list containing only resources shared via public links.
+
+https://github.com/owncloud/web/pull/4881

packages/web-app-files/src/index.js

@@ -3,6 +3,7 @@ import Personal from './views/Personal.vue'
 import Favorites from './views/Favorites.vue'
 import SharedWithMe from './views/SharedWithMe.vue'
 import SharedWithOthers from './views/SharedWithOthers.vue'
+import SharedViaLink from './views/SharedViaLink.vue'
 import Trashbin from './views/Trashbin.vue'
 import FileInfoVersions from './components/FileInfoVersions.vue'
 import FileSharingSidebar from './components/FileSharingSidebar.vue'
@@ -97,6 +98,14 @@ const navItems = [
       path: `/${appInfo.id}/list/shared-with-others`
     }
   },
+  {
+    name: $gettext('Shared via link'),
+    iconMaterial: 'link',
+    route: {
+      name: 'files-shared-via-link',
+      path: `/${appInfo.id}/list/shared-via-link`
+    }
+  },
   {
     name: $gettext('Deleted files'),
     iconMaterial: 'delete',
@@ -162,6 +171,16 @@ const routes = [
           title: $gettext('Files shared with others')
         }
       },
+      {
+        path: 'shared-via-link',
+        component: SharedViaLink,
+        name: 'shared-via-link',
+        meta: {
+          hideFilelistActions: true,
+          hasBulkActions: true,
+          title: $gettext('Files shared via link')
+        }
+      },
       {
         path: 'trash-bin',
         component: Trashbin,

packages/web-app-files/src/views/SharedViaLink.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <list-loader v-if="loading" />
+    <template v-else>
+      <no-content-message
+        v-if="isEmpty"
+        id="files-shared-via-link-empty"
+        class="files-empty"
+        icon="group"
+      >
+        <template #message>
+          <span v-translate>There are no resources with a public link at the moment</span>
+        </template>
+      </no-content-message>
+      <oc-table-files
+        v-else
+        id="files-shared-via-link-table"
+        v-model="selected"
+        class="files-table"
+        :class="{ 'files-table-squashed': isSidebarOpen }"
+        :are-previews-displayed="displayPreviews"
+        :resources="activeFiles"
+        :target-route="targetRoute"
+        :highlighted="highlightedFile ? highlightedFile.id : null"
+        :header-position="headerPosition"
+        @showDetails="setHighlightedFile"
+        @fileClick="$_fileActions_triggerDefaultAction"
+      >
+        <template #footer>
+          <div
+            v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
+            class="uk-text-nowrap uk-text-meta uk-text-center uk-width-1-1"
+          >
+            <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
+            <translate :translate-n="activeFilesCount.folders" translate-plural="folders">
+              folder
+            </translate>
+            <translate>and</translate>
+            <span id="files-list-count-files" v-text="activeFilesCount.files" />
+            <translate :translate-n="activeFilesCount.files" translate-plural="files">
+              file
+            </translate>
+          </div>
+        </template>
+      </oc-table-files>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
+
+import { aggregateResourceShares, buildResource } from '../helpers/resources'
+import FileActions from '../mixins/fileActions'
+import MixinFilesListPositioning from '../mixins/filesListPositioning'
+import MixinResources from '../mixins/resources'
+
+import ListLoader from '../components/ListLoader.vue'
+import NoContentMessage from '../components/NoContentMessage.vue'
+
+export default {
+  components: { ListLoader, NoContentMessage },
+
+  mixins: [FileActions, MixinFilesListPositioning, MixinResources],
+
+  data: () => ({
+    loading: true
+  }),
+
+  computed: {
+    ...mapState(['app']),
+    ...mapGetters('Files', [
+      'davProperties',
+      'highlightedFile',
+      'activeFiles',
+      'selectedFiles',
+      'inProgress',
+      'activeFilesCount'
+    ]),
+    ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
+
+    selected: {
+      get() {
+        return this.selectedFiles
+      },
+      set(resources) {
+        this.SELECT_RESOURCES(resources)
+      }
+    },
+
+    isEmpty() {
+      return this.activeFiles.length < 1
+    },
+
+    isSidebarOpen() {
+      return this.highlightedFile !== null
+    },
+
+    uploadProgressVisible() {
+      return this.inProgress.length > 0
+    },
+
+    targetRoute() {
+      return { name: 'files-personal' }
+    },
+
+    displayPreviews() {
+      return !this.configuration.options.disablePreviews
+    }
+  },
+
+  watch: {
+    uploadProgressVisible() {
+      this.adjustTableHeaderPosition()
+    }
+  },
+
+  created() {
+    this.loadResources()
+    window.onresize = this.adjustTableHeaderPosition
+  },
+
+  mounted() {
+    this.adjustTableHeaderPosition()
+  },
+
+  methods: {
+    ...mapActions('Files', ['setHighlightedFile', 'loadIndicators', 'loadPreviews']),
+    ...mapMutations('Files', ['LOAD_FILES', 'SELECT_RESOURCES', 'CLEAR_CURRENT_FILES_LIST']),
+    ...mapMutations(['SET_QUOTA']),
+
+    async loadResources() {
+      this.loading = true
+      this.CLEAR_CURRENT_FILES_LIST()
+
+      let resources = await this.$client.requests.ocs({
+        service: 'apps/files_sharing',
+        action: '/api/v1/shares?format=json&share_types=3&include_tags=false',
+        method: 'GET'
+      })
+      let rootFolder = await this.$client.files.fileInfo('/', this.davProperties)
+
+      resources = await resources.json()
+      resources = resources.ocs.data
+      rootFolder = buildResource(rootFolder)
+
+      if (resources.length < 1) {
+        this.LOAD_FILES({ currentFolder: rootFolder, files: [] })
+        this.loading = false
+
+        return
+      }
+
+      resources = await aggregateResourceShares(
+        resources,
+        false,
+        !this.isOcis,
+        this.configuration.server,
+        this.getToken
+      )
+
+      this.LOAD_FILES({ currentFolder: rootFolder, files: resources })
+
+      if (this.displayPreviews) {
+        await this.loadPreviews({
+          resources,
+          isPublic: false,
+          mediaSource: this.mediaSource,
+          encodePath: this.encodePath,
+          headers: this.requestHeaders
+        })
+      }
+
+      // Load quota
+      const user = await this.$client.users.getUser(this.user.id)
+
+      this.SET_QUOTA(user.quota)
+      this.loading = false
+    }
+  }
+}
+</script>

packages/web-app-files/src/views/SharedWithOthers.vue

@@ -42,9 +42,6 @@
             <translate :translate-n="activeFilesCount.files" translate-plural="files"
               >file</translate
             >
-            <template v-if="activeFiles.length > 0">
-              &ndash; {{ getResourceSize(filesTotalSize) }}
-            </template>
           </div>
         </template>
       </oc-table-files>
@@ -80,8 +77,7 @@ export default {
       'activeFiles',
       'selectedFiles',
       'inProgress',
-      'activeFilesCount',
-      'filesTotalSize'
+      'activeFilesCount'
     ]),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
 

tests/acceptance/features/webUISharingPublic/shareByPublicLink.feature

@@ -885,3 +885,14 @@ Feature: Share by public link
       | password | pass123 |
     And the public tries to open the public link page of the last public link created by user "Alice" with password "pass123"
     Then file "lorem.txt" should be listed on the webUI
+
+  Scenario: Shared via link page is displayed
+    Given user "Alice" has created a public link with following settings
+      | path        | lorem.txt             |
+      | name        | Public-link           |
+    And user "Alice" has logged in using the webUI
+    When the user browses to the shared-via-link page using the webUI
+    Then file "lorem.txt" should be listed on the webUI
+    And the following resources should have the following collaborators
+      | fileName  | expectedCollaborators |
+      | lorem.txt | Public-link           |

tests/acceptance/pageObjects/FilesPageElement/filesList.js

@@ -426,7 +426,12 @@ module.exports = {
       const indicators = []
 
       await this.waitForFileVisible(fileName)
-
+      await this.waitForElementVisible({
+        selector: shareIndicatorsXpath,
+        locateStrategy: this.elements.shareIndicatorsInFileRow.locateStrategy,
+        abortOnFailure: false,
+        timeout: client.globals.waitForNegativeConditionTimeout
+      })
       await this.api.elements(
         this.elements.shareIndicatorsInFileRow.locateStrategy,
         shareIndicatorsXpath,

tests/acceptance/pageObjects/sharedViaLinkPage.js

@@ -0,0 +1,20 @@
+const navigationHelper = require('../helpers/navigationHelper')
+const { join } = require('../helpers/path')
+
+module.exports = {
+  url: function() {
+    return join(this.api.launchUrl, '/#/files/list/shared-via-link/')
+  },
+  commands: {
+    /**
+     * like build-in navigate() but also waits till for the progressbar to appear and disappear
+     * @returns {*}
+     */
+    navigateAndWaitTillLoaded: function() {
+      return navigationHelper.navigateAndWaitTillLoaded(
+        this.url(),
+        this.page.FilesPageElement.filesList().elements.filesListProgressBar
+      )
+    }
+  }
+}

tests/acceptance/stepDefinitions/filesContext.js

@@ -54,6 +54,10 @@ When('the user browses to the shared-with-others page using the webUI', function
   return client.page.webPage().navigateToUsingMenu('Shared with others')
 })
 
+When('the user browses to the shared-via-link page using the webUI', function() {
+  return client.page.webPage().navigateToUsingMenu('Shared via link')
+})
+
 Given('the user has browsed to the trashbin page', function() {
   return client.page.trashbinPage().navigateAndWaitTillLoaded()
 })