Merge pull request #6512 from owncloud/shares-overview

[full-ci] Shares overview page

__fixtures__/sidebarNavItems.js

@@ -1,6 +1,6 @@
 export default [
   {
-    name: "All files",
+    name: "Personal",
     icon: "folder",
     route: {
       name: "files-personal",
@@ -9,32 +9,14 @@ export default [
     active: true
   },
   {
-    name: "Shared with me",
-    icon: "shared-with-me",
+    name: "Shares",
+    icon: 'share-forward',
     route: {
       name: "files-shared-with-me",
       path: "/files/list/shared-with-me"
     },
     active: false
   },
-  {
-    name: "Shared with others",
-    icon: "shared-with-others",
-    route: {
-      name: "files-shared-with-others",
-      path: "/files/list/shared-with-others"
-    },
-    active: false
-  },
-  {
-    name: "Shared via link",
-    icon: "link",
-    route: {
-      name: "files-shared-via-link",
-      path: "/files/list/shared-via-link"
-    },
-    active: false
-  },
   {
     name: "Deleted files",
     icon: "delete",

changelog/unreleased/enhancement-shares-overview

@@ -0,0 +1,9 @@
+Enhancement: Shares overview
+
+We've merged the three shares navigation items into one central "Shares" item, 
+with a toggle to switch between the three different kinds of shares (incoming, outgoing, links).
+In the process, we have also renamed the "All files" page to the "Personal" page, indicating that 
+this is the user's personal space since shares (and potentially other shared spaces) live elsewhere.
+
+https://github.com/owncloud/web/issues/6440
+https://github.com/owncloud/web/pull/6512

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -11,18 +11,22 @@
       @progress="onFileProgress"
     />
     <div class="files-topbar oc-py-s">
-      <oc-breadcrumb
-        v-if="breadcrumbs.length"
-        id="files-breadcrumb"
-        data-testid="files-breadcrumbs"
-        class="oc-py-s"
-        :items="breadcrumbs"
-      >
-        <template #contextMenu>
-          <context-actions v-if="showContextActions" :items="[currentFolder]" />
-        </template>
-      </oc-breadcrumb>
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
+      <div class="oc-flex oc-flex-between">
+        <oc-breadcrumb
+          v-if="breadcrumbs.length"
+          id="files-breadcrumb"
+          data-testid="files-breadcrumbs"
+          class="oc-py-s"
+          :items="breadcrumbs"
+        >
+          <template #contextMenu>
+            <context-actions v-if="showContextActions" :items="[currentFolder]" />
+          </template>
+        </oc-breadcrumb>
+        <shares-navigation v-if="isSharesLocation" />
+        <view-options v-if="!hideViewOptions" />
+      </div>
       <div class="files-app-bar-actions">
         <div
           v-if="showActions || selectedFiles.length > 0 || hasBulkActions"
@@ -42,7 +46,6 @@
           <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-mr oc-visible@l" />
           <batch-actions v-if="hasBulkActions" />
         </div>
-        <view-options v-if="!hideViewOptions" />
       </div>
     </div>
   </div>
@@ -57,13 +60,18 @@ import MixinFileActions from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
 import { bus } from 'web-pkg/src/instance'
 import { DavProperties } from 'web-pkg/src/constants'
-import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
+import {
+  isLocationPublicActive,
+  isLocationSharesActive,
+  isLocationSpacesActive
+} from '../../router'
 import { useActiveLocation } from '../../composables'
 
 import BatchActions from './SelectedResources/BatchActions.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
 import CreateAndUpload from './CreateAndUpload.vue'
 import FileDrop from './Upload/FileDrop.vue'
+import SharesNavigation from './SharesNavigation.vue'
 import SizeInfo from './SelectedResources/SizeInfo.vue'
 import ViewOptions from './ViewOptions.vue'
 
@@ -73,12 +81,14 @@ export default {
     ContextActions,
     CreateAndUpload,
     FileDrop,
+    SharesNavigation,
     SizeInfo,
     ViewOptions
   },
   mixins: [Mixins, MixinFileActions],
   setup() {
     return {
+      isSharesLocation: useActiveLocation(isLocationSharesActive),
       isPersonalLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-personal-home'),
       isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-files'),
       isSpacesProjectsLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-projects'),
@@ -186,7 +196,7 @@ export default {
 
             if (acc.length) {
               if (this.isPersonalLocation) {
-                acc[0].text = this.$gettext('All files')
+                acc[0].text = this.$gettext('Personal')
                 acc[0].to = acc[0].to + '/'
               } else if (this.isSpacesProjectLocation || this.isSpacesProjectsLocation) {
                 acc[0] = {

packages/web-app-files/src/components/AppBar/SharesNavigation.vue

@@ -0,0 +1,85 @@
+<template>
+  <nav id="shares-navigation" class="oc-py-s" :aria-label="$gettext('Shares pages navigation')">
+    <oc-list class="oc-flex oc-visible@s">
+      <li v-for="navItem in navItems" :key="`shares-navigation-desktop-${navItem.to}`">
+        <oc-button
+          type="router-link"
+          class="oc-mr-s"
+          appearance="raw"
+          :variation="navItem.active ? 'primary' : 'passive'"
+          :to="navItem.to"
+        >
+          <span v-text="navItem.text" />
+        </oc-button>
+      </li>
+    </oc-list>
+    <div class="oc-hidden@s">
+      <oc-button id="shares_navigation_mobile" appearance="raw" v-text="$gettext('Shares pages')" />
+      <oc-drop toggle="#shares_navigation_mobile" mode="click" close-on-click padding-size="small">
+        <oc-list>
+          <li v-for="navItem in navItems" :key="`shares-navigation-mobile-${navItem.to}`">
+            <oc-button
+              type="router-link"
+              appearance="raw"
+              :variation="navItem.active ? 'primary' : 'passive'"
+              :to="navItem.to"
+            >
+              <span v-text="navItem.text" />
+            </oc-button>
+          </li>
+        </oc-list>
+      </oc-drop>
+    </div>
+  </nav>
+</template>
+
+<script>
+import {
+  isLocationSharesActive,
+  locationSharesViaLink,
+  locationSharesWithMe,
+  locationSharesWithOthers
+} from '../../router/shares'
+import { computed, getCurrentInstance } from '@vue/composition-api'
+import { useRouter } from 'web-pkg/src/composables'
+
+export default {
+  setup() {
+    const $gettext = getCurrentInstance().proxy.$gettext
+    const router = useRouter()
+    const sharesRoutes = [
+      locationSharesWithMe,
+      locationSharesWithOthers,
+      locationSharesViaLink
+    ].reduce((routes, route) => {
+      routes[route.name] = router.getRoutes().find((r) => r.name === route.name)
+      return routes
+    }, {})
+    const navItems = computed(() => [
+      {
+        to: sharesRoutes[locationSharesWithMe.name].path,
+        text: $gettext('Shared with me'),
+        active: isLocationSharesActive(router, 'files-shares-with-me')
+      },
+      {
+        to: sharesRoutes[locationSharesWithOthers.name].path,
+        text: $gettext('Shared with others'),
+        active: isLocationSharesActive(router, 'files-shares-with-others')
+      },
+      {
+        to: sharesRoutes[locationSharesViaLink.name].path,
+        text: $gettext('Shared via link'),
+        active: isLocationSharesActive(router, 'files-shares-via-link')
+      }
+    ])
+    return {
+      navItems
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.router-link-active {
+  text-decoration: underline;
+}
+</style>

packages/web-app-files/src/components/FilesList/NotFoundMessage.vue

@@ -29,7 +29,7 @@
         appearance="raw"
         :to="homeRoute"
       >
-        <translate>Go to »All files«</translate>
+        <translate>Go to »Personal« page</translate>
       </oc-button>
       <oc-button
         v-if="showPublicLinkButton"

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

@@ -35,7 +35,7 @@
       v-if="!enforced && dateCurrent"
       class="recipient-edit-expiration-btn-remove"
       appearance="raw"
-      :aria-label="gettext('Remove expiration date')"
+      :aria-label="$gettext('Remove expiration date')"
       @click="dateCurrent = null"
     >
       <oc-icon name="close" />
@@ -68,7 +68,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const vm = getCurrentInstance().proxy
     const language = computed(() => vm.$language)
-    const gettext = computed(() => vm.$gettext)
     const store = useStore()
     const capabilities = computed(() => store.getters.capabilities)
     const optionsUser = computed(() => capabilities.value.files_sharing.user?.expire_date)
@@ -146,7 +145,6 @@ export default defineComponent({
 
     return {
       language,
-      gettext,
       enforced,
       available,
       dateCurrent,

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

@@ -6,9 +6,9 @@ import PrivateLink from './views/PrivateLink.vue'
 import PublicFiles from './views/PublicFiles.vue'
 import PublicLink from './views/PublicLink.vue'
 import Personal from './views/Personal.vue'
-import SharedWithMe from './views/SharedWithMe.vue'
-import SharedWithOthers from './views/SharedWithOthers.vue'
-import SharedViaLink from './views/SharedViaLink.vue'
+import SharedWithMe from './views/shares/SharedWithMe.vue'
+import SharedWithOthers from './views/shares/SharedWithOthers.vue'
+import SharedViaLink from './views/shares/SharedViaLink.vue'
 import SpaceProject from './views/spaces/Project.vue'
 import SpaceProjects from './views/spaces/Projects.vue'
 import Trashbin from './views/Trashbin.vue'
@@ -40,7 +40,7 @@ const appInfo = {
 }
 const navItems = [
   {
-    name: $gettext('All files'),
+    name: $gettext('Personal'),
     icon: appInfo.icon,
     route: {
       path: `/${appInfo.id}/spaces/personal/home`
@@ -57,24 +57,10 @@ const navItems = [
     }
   },
   {
-    name: $gettext('Shared with me'),
+    name: $gettext('Shares'),
     icon: 'share-forward',
     route: {
-      path: `/${appInfo.id}/shares/with-me`
-    }
-  },
-  {
-    name: $gettext('Shared with others'),
-    icon: 'reply',
-    route: {
-      path: `/${appInfo.id}/shares/with-others`
-    }
-  },
-  {
-    name: $gettext('Shared via link'),
-    icon: 'link',
-    route: {
-      path: `/${appInfo.id}/shares/via-link`
+      path: `/${appInfo.id}/shares`
     }
   },
   {

packages/web-app-files/src/router/spaces.ts

@@ -57,7 +57,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         component: components.Personal,
         meta: {
           hasBulkActions: true,
-          title: $gettext('All files'),
+          title: $gettext('Personal'),
           patchCleanPath: true
         }
       }

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

@@ -216,7 +216,7 @@ export default {
         this.currentAction === batchActions.move
           ? this.$gettext('Move into »%{ target }«')
           : this.$gettext('Copy into »%{ target }«')
-      const target = basename(this.target) || this.$gettext('All files')
+      const target = basename(this.target) || this.$gettext('Personal')
       return this.$gettextInterpolate(translated, { target })
     },
 
@@ -259,7 +259,7 @@ export default {
           breadcrumbs.push(this.createBreadcrumbNode(i + 1, pathSegments[i], itemPath))
         }
       } else {
-        breadcrumbs.push(this.createBreadcrumbNode(0, this.$gettext('All files'), '/'))
+        breadcrumbs.push(this.createBreadcrumbNode(0, this.$gettext('Personal'), '/'))
         for (let i = 0; i < pathSegments.length; i++) {
           const itemPath = join.apply(null, pathSegments.slice(0, i + 1))
           breadcrumbs.push(this.createBreadcrumbNode(i + 1, pathSegments[i], itemPath))

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

@@ -48,27 +48,27 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import ResourceTable, { determineSortFields } from '../components/FilesList/ResourceTable.vue'
-import { useFileListHeaderPosition, usePagination, useSort } from '../composables'
+import ResourceTable, { determineSortFields } from '../../components/FilesList/ResourceTable.vue'
+import { useFileListHeaderPosition, usePagination, useSort } from '../../composables'
 import { useRouteQuery, useStore } from 'web-pkg/src/composables'
 import { computed, unref } from '@vue/composition-api'
 
-import { aggregateResourceShares } from '../helpers/resources'
-import FileActions from '../mixins/fileActions'
-import MixinFilesListFilter from '../mixins/filesListFilter'
-import MixinResources from '../mixins/resources'
-import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
+import { aggregateResourceShares } from '../../helpers/resources'
+import FileActions from '../../mixins/fileActions'
+import MixinFilesListFilter from '../../mixins/filesListFilter'
+import MixinResources from '../../mixins/resources'
+import MixinMountSideBar from '../../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
+import { ImageDimension, ImageType } from '../../constants'
 import debounce from 'lodash-es/debounce'
 import { useTask } from 'vue-concurrency'
 
-import ListLoader from '../components/FilesList/ListLoader.vue'
-import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
-import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
-import ContextActions from '../components/FilesList/ContextActions.vue'
-import { createLocationSpaces } from '../router'
+import ListLoader from '../../components/FilesList/ListLoader.vue'
+import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
+import ListInfo from '../../components/FilesList/ListInfo.vue'
+import Pagination from '../../components/FilesList/Pagination.vue'
+import ContextActions from '../../components/FilesList/ContextActions.vue'
+import { createLocationSpaces } from '../../router'
 
 const visibilityObserver = new VisibilityObserver()