From f6af398a051ecc747a1566bae25ee0a9cc038f48 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 3 Mar 2022 17:40:34 +0100
Subject: [PATCH] Introduce Shares overview page

---
 .../unreleased/enhancement-shares-overview    |  7 ++
 .../src/components/AppBar/AppBar.vue          | 36 +++++++----
 .../components/AppBar/SharesNavigation.vue    | 64 +++++++++++++++++++
 packages/web-app-files/src/index.js           | 26 ++------
 .../src/views/{ => shares}/SharedViaLink.vue  | 28 ++++----
 .../src/views/{ => shares}/SharedWithMe.vue   | 30 ++++-----
 .../views/{ => shares}/SharedWithOthers.vue   | 28 ++++----
 .../specs/linkExpirationDate.spec.js          |  6 +-
 .../integration/specs/pagination.spec.js      | 14 ++--
 .../specs/peopleExpirationDate.spec.js        |  6 +-
 .../tests/integration/specs/sidebar.spec.js   |  6 +-
 .../views/{ => shares}/SharedViaLink.spec.js  |  6 +-
 .../views/{ => shares}/SharedWithMe.spec.js   |  4 +-
 .../{ => shares}/SharedWithOthers.spec.js     |  4 +-
 .../__snapshots__/SharedViaLink.spec.js.snap  |  0
 .../SharedWithOthers.spec.js.snap             |  0
 16 files changed, 166 insertions(+), 99 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-shares-overview
 create mode 100644 packages/web-app-files/src/components/AppBar/SharesNavigation.vue
 rename packages/web-app-files/src/views/{ => shares}/SharedViaLink.vue (85%)
 rename packages/web-app-files/src/views/{ => shares}/SharedWithMe.vue (92%)
 rename packages/web-app-files/src/views/{ => shares}/SharedWithOthers.vue (86%)
 rename packages/web-app-files/tests/unit/views/{ => shares}/SharedViaLink.spec.js (96%)
 rename packages/web-app-files/tests/unit/views/{ => shares}/SharedWithMe.spec.js (98%)
 rename packages/web-app-files/tests/unit/views/{ => shares}/SharedWithOthers.spec.js (98%)
 rename packages/web-app-files/tests/unit/views/{ => shares}/__snapshots__/SharedViaLink.spec.js.snap (100%)
 rename packages/web-app-files/tests/unit/views/{ => shares}/__snapshots__/SharedWithOthers.spec.js.snap (100%)

diff --git a/changelog/unreleased/enhancement-shares-overview b/changelog/unreleased/enhancement-shares-overview
new file mode 100644
index 00000000000..e89d42f142a
--- /dev/null
+++ 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
index 94e2a4be13d..e920951e75b 100644
--- 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
new file mode 100644
index 00000000000..115fa07ed60
--- /dev/null
+++ 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
index ccf5b0faffa..5fe9e0f25a3 100644
--- 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/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
similarity index 85%
rename from packages/web-app-files/src/views/SharedViaLink.vue
rename to packages/web-app-files/src/views/shares/SharedViaLink.vue
index 8fa6e176b98..1695791fed3 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/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()
 
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
similarity index 92%
rename from packages/web-app-files/src/views/SharedWithMe.vue
rename to packages/web-app-files/src/views/shares/SharedWithMe.vue
index 0824132425a..babcadf63c0 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-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/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
similarity index 86%
rename from packages/web-app-files/src/views/SharedWithOthers.vue
rename to packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 13027557e24..8d07454bdd0 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/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
index 955da518404..b780db4193f 100644
--- 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
index e2bcb9481ce..6c2125eb500 100644
--- 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
index 695f085f2da..d4210c4f4f4 100644
--- 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
index 2c3a959355c..fb14ce74656 100644
--- 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/packages/web-app-files/tests/unit/views/SharedViaLink.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
similarity index 96%
rename from packages/web-app-files/tests/unit/views/SharedViaLink.spec.js
rename to packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
index 414f6f62f97..794b83007c2 100644
--- a/packages/web-app-files/tests/unit/views/SharedViaLink.spec.js
+++ b/packages/web-app-files/tests/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() }
diff --git a/packages/web-app-files/tests/unit/views/SharedWithMe.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
similarity index 98%
rename from packages/web-app-files/tests/unit/views/SharedWithMe.spec.js
rename to packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
index 96562ae8309..59af310f935 100644
--- a/packages/web-app-files/tests/unit/views/SharedWithMe.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
-import { localVue, getStore, getRouter } from './views.setup'
-import SharedWithMe from '@files/src/views/SharedWithMe.vue'
+import { localVue, getStore, getRouter } from '../views.setup'
+import SharedWithMe from '@files/src/views/shares/SharedWithMe.vue'
 import { ShareStatus, ShareTypes } from '@files/src/helpers/share'
 
 const stubs = {
diff --git a/packages/web-app-files/tests/unit/views/SharedWithOthers.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
similarity index 98%
rename from packages/web-app-files/tests/unit/views/SharedWithOthers.spec.js
rename to packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
index 29eeebe35e6..4d47dde8413 100644
--- a/packages/web-app-files/tests/unit/views/SharedWithOthers.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
-import { getStore, localVue } from './views.setup.js'
+import { getStore, localVue } from '../views.setup.js'
 import FileActions from '@files/src/mixins/fileActions.js'
-import SharedWithOthers from '@files/src/views/SharedWithOthers.vue'
+import SharedWithOthers from '@files/src/views/shares/SharedWithOthers.vue'
 import SharedData from '@/__fixtures__/sharedFiles.js'
 
 const resourcesList = SharedData.json().ocs.data
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap
similarity index 100%
rename from packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap
rename to packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/SharedWithOthers.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
similarity index 100%
rename from packages/web-app-files/tests/unit/views/__snapshots__/SharedWithOthers.spec.js.snap
rename to packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap