Introduce Shares overview page

owncloud · Mar 3, 2022 · f6af398 · f6af398
1 parent db9d30b
commit f6af398
Show file tree

Hide file tree

Showing 16 changed files with 166 additions and 99 deletions.
diff --git a/changelog/unreleased/enhancement-shares-overview b/changelog/unreleased/enhancement-shares-overview
@@ -0,0 +1,7 @@
+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).
+
+https://github.com/owncloud/web/issues/6440
+https://github.com/owncloud/web/pull/6512
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/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="isLocationSharesActive" />
+ <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 {
+ isLocationSharesActive: useActiveLocation(isLocationSharesActive),
  isPersonalLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-personal-home'),
  isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-files'),
  isSpacesProjectsLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-projects'),

diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -0,0 +1,64 @@
+<template>
+ <div class="oc-py-s">
+ <nav class="oc-visible@s" :aria-label="$gettext('Shares pages navigation')">
+ <oc-list class="oc-flex">
+ <li v-for="navItem in navItems" :key="`shares-navigation-${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>
+ </nav>
+ <div class="oc-hidden@s">
+ <oc-button id="shares_navigation_mobile" appearance="raw">Shares pages</oc-button>
+ <oc-drop toggle="#shares_navigation_mobile">
+ <oc-list>
+ <li v-for="navItem in navItems" :key="`shares-navigation-${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>
+ </div>
+</template>
+
+<script>
+export default {
+ computed: {
+ navItems() {
+ return [
+ {
+ to: '/files/shares/with-me',
+ text: this.$gettext('Shared with me')
+ },
+ {
+ to: '/files/shares/with-others',
+ text: this.$gettext('Shared with others')
+ },
+ {
+ to: '/files/shares/via-link',
+ text: this.$gettext('Shared via link')
+ }
+ ]
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.router-link-active {
+ text-decoration: underline;
+}
+</style>
diff --git a/packages/web-app-files/src/index.js b/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`
  }
  },
  {

diff --git a/...web-app-files/src/views/SharedViaLink.vue → ...-files/src/views/shares/SharedViaLink.vue b/...web-app-files/src/views/SharedViaLink.vue → ...-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()
 

diff --git a/.../web-app-files/src/views/SharedWithMe.vue → ...p-files/src/views/shares/SharedWithMe.vue b/.../web-app-files/src/views/SharedWithMe.vue → ...p-files/src/views/shares/SharedWithMe.vue
@@ -161,27 +161,27 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import ResourceTable, { determineSortFields } from '../components/FilesList/ResourceTable.vue'
-import { aggregateResourceShares } from '../helpers/resources'
-import FileActions from '../mixins/fileActions'
-import MixinAcceptShare from '../mixins/actions/acceptShare'
-import MixinDeclineShare from '../mixins/actions/declineShare'
-import MixinFilesListFilter from '../mixins/filesListFilter'
-import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
+import ResourceTable, { determineSortFields } from '../../components/FilesList/ResourceTable.vue'
+import { aggregateResourceShares } from '../../helpers/resources'
+import FileActions from '../../mixins/fileActions'
+import MixinAcceptShare from '../../mixins/actions/acceptShare'
+import MixinDeclineShare from '../../mixins/actions/declineShare'
+import MixinFilesListFilter from '../../mixins/filesListFilter'
+import MixinMountSideBar from '../../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
-import { useFileListHeaderPosition, useSort } from '../composables'
+import { ImageDimension, ImageType } from '../../constants'
+import { useFileListHeaderPosition, useSort } from '../../composables'
 import { useRouteQuery, useStore } from 'web-pkg/src/composables'
 import debounce from 'lodash-es/debounce'
 
-import ListLoader from '../components/FilesList/ListLoader.vue'
-import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
-import ListInfo from '../components/FilesList/ListInfo.vue'
-import ContextActions from '../components/FilesList/ContextActions.vue'
+import ListLoader from '../../components/FilesList/ListLoader.vue'
+import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
+import ListInfo from '../../components/FilesList/ListInfo.vue'
+import ContextActions from '../../components/FilesList/ContextActions.vue'
 import { useTask } from 'vue-concurrency'
-import { ShareStatus } from '../helpers/share'
+import { ShareStatus } from '../../helpers/share'
 import { computed, unref } from '@vue/composition-api'
-import { createLocationSpaces } from '../router'
+import { createLocationSpaces } from '../../router'
 
 const visibilityObserver = new VisibilityObserver()
 

diff --git a/...-app-files/src/views/SharedWithOthers.vue → ...les/src/views/shares/SharedWithOthers.vue b/...-app-files/src/views/SharedWithOthers.vue → ...les/src/views/shares/SharedWithOthers.vue
@@ -51,26 +51,26 @@
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 import { computed, unref } from '@vue/composition-api'
-import ResourceTable, { determineSortFields } from '../components/FilesList/ResourceTable.vue'
+import ResourceTable, { determineSortFields } from '../../components/FilesList/ResourceTable.vue'
 
-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 { useFileListHeaderPosition, usePagination, useSort } from '../composables'
+import { ImageDimension, ImageType } from '../../constants'
+import { useFileListHeaderPosition, usePagination, useSort } from '../../composables'
 import { useRouteQuery, useStore } from 'web-pkg/src/composables'
 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()
 

diff --git a/packages/web-app-files/tests/integration/specs/linkExpirationDate.spec.js b/packages/web-app-files/tests/integration/specs/linkExpirationDate.spec.js
@@ -11,9 +11,9 @@ import PrivateLink from '@files/src/views/PrivateLink.vue'
 import PublicFiles from '@files/src/views/PublicFiles.vue'
 import PublicLink from '@files/src/views/PublicLink.vue'
 import Personal from '@files/src/views/Personal.vue'
-import SharedWithMe from '@files/src/views/SharedWithMe.vue'
-import SharedWithOthers from '@files/src/views/SharedWithOthers.vue'
-import SharedViaLink from '@files/src/views/SharedViaLink.vue'
+import SharedWithMe from '@files/src/views/shares/SharedWithMe.vue'
+import SharedWithOthers from '@files/src/views/shares/SharedWithOthers.vue'
+import SharedViaLink from '@files/src/views/shares/SharedViaLink.vue'
 import SpaceProject from '@files/src/views/spaces/Project.vue'
 import SpaceProjects from '@files/src/views/spaces/Projects.vue'
 import Trashbin from '@files/src/views/Trashbin.vue'

diff --git a/packages/web-app-files/tests/integration/specs/pagination.spec.js b/packages/web-app-files/tests/integration/specs/pagination.spec.js
@@ -7,13 +7,13 @@ import toKebabCase from '../../../../../tests/helpers/toKebabCase'
 import StoreFiles from '@files/src/store'
 import Store from '@runtime/src/store'
 
-import Personal from '../../../src/views/Personal.vue'
-import Favorites from '../../../src/views/Favorites.vue'
-import LocationPicker from '../../../src/views/LocationPicker.vue'
-import PublicFiles from '../../../src/views/PublicFiles.vue'
-import SharedViaLink from '../../../src/views/SharedViaLink.vue'
-import SharedWithOthers from '../../../src/views/SharedWithOthers.vue'
-import Trashbin from '../../../src/views/Trashbin.vue'
+import Personal from '@files/src/views/Personal.vue'
+import Favorites from '@files/src/views/Favorites.vue'
+import LocationPicker from '@files/src/views/LocationPicker.vue'
+import PublicFiles from '@files/src/views/PublicFiles.vue'
+import SharedViaLink from '@files/src/views/shares/SharedViaLink.vue'
+import SharedWithOthers from '@files/src/views/shares/SharedWithOthers.vue'
+import Trashbin from '@files/src/views/Trashbin.vue'
 
 // TODO: Make routes importable instead of defining them manually
 const routes = [

diff --git a/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js b/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js
@@ -12,9 +12,9 @@ import PrivateLink from '@files/src/views/PrivateLink.vue'
 import PublicFiles from '@files/src/views/PublicFiles.vue'
 import PublicLink from '@files/src/views/PublicLink.vue'
 import Personal from '@files/src/views/Personal.vue'
-import SharedWithMe from '@files/src/views/SharedWithMe.vue'
-import SharedWithOthers from '@files/src/views/SharedWithOthers.vue'
-import SharedViaLink from '@files/src/views/SharedViaLink.vue'
+import SharedWithMe from '@files/src/views/shares/SharedWithMe.vue'
+import SharedWithOthers from '@files/src/views/shares/SharedWithOthers.vue'
+import SharedViaLink from '@files/src/views/shares/SharedViaLink.vue'
 import SpaceProject from '@files/src/views/spaces/Project.vue'
 import SpaceProjects from '@files/src/views/spaces/Projects.vue'
 import Trashbin from '@files/src/views/Trashbin.vue'

diff --git a/packages/web-app-files/tests/integration/specs/sidebar.spec.js b/packages/web-app-files/tests/integration/specs/sidebar.spec.js
@@ -15,9 +15,9 @@ import PrivateLink from '@files/src/views/PrivateLink.vue'
 import PublicFiles from '@files/src/views/PublicFiles.vue'
 import PublicLink from '@files/src/views/PublicLink.vue'
 import Personal from '@files/src/views/Personal.vue'
-import SharedWithMe from '@files/src/views/SharedWithMe.vue'
-import SharedWithOthers from '@files/src/views/SharedWithOthers.vue'
-import SharedViaLink from '@files/src/views/SharedViaLink.vue'
+import SharedWithMe from '@files/src/views/shares/SharedWithMe.vue'
+import SharedWithOthers from '@files/src/views/shares/SharedWithOthers.vue'
+import SharedViaLink from '@files/src/views/shares/SharedViaLink.vue'
 import SpaceProject from '@files/src/views/spaces/Project.vue'
 import SpaceProjects from '@files/src/views/spaces/Projects.vue'
 import Trashbin from '@files/src/views/Trashbin.vue'

diff --git a/...es/tests/unit/views/SharedViaLink.spec.js → ...s/unit/views/shares/SharedViaLink.spec.js b/...es/tests/unit/views/SharedViaLink.spec.js → ...s/unit/views/shares/SharedViaLink.spec.js
@@ -1,9 +1,9 @@
 import { shallowMount, mount } from '@vue/test-utils'
-import { getStore, localVue, createFile } from './views.setup.js'
+import { getStore, localVue, createFile } from '../views.setup.js'
 import VueRouter from 'vue-router'
-import { createLocationSpaces } from '../../../src/router'
+import { createLocationSpaces } from '../../../../src/router'
 import FileActions from '@files/src/mixins/fileActions'
-import SharedViaLink from '@files/src/views/SharedViaLink.vue'
+import SharedViaLink from '@files/src/views/shares/SharedViaLink.vue'
 localVue.use(VueRouter)
 
 const component = { ...SharedViaLink, mounted: jest.fn() }