Reorganize sidebar-component structure

packages/web-app-files/src/components/SideBar/FileInfo.vue

@@ -31,7 +31,7 @@ import Mixins from '../../mixins'
 import MixinResources from '../../mixins/resources'
 import { isLocationSpacesActive, isLocationTrashActive } from '../../router'
 import { mapGetters } from 'vuex'
-import PrivateLinkItem from './Links/PrivateLinkItem.vue'
+import PrivateLinkItem from './PrivateLinkItem.vue'
 import { useActiveLocation } from '../../composables'
 
 export default {
@@ -96,7 +96,7 @@ export default {
         this.isPersonalLocation &&
         this.capabilities.files.privateLinks &&
         this.user?.id &&
-        this.displayedItem.owner.username === this.user.username
+        this.displayedItem?.owner?.username === this.user.username
       ) {
         return true
       }

packages/web-app-files/src/components/SideBar/Links/PrivateLinkItem.vue → packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import CopyToClipboardButton from './CopyToClipboardButton.vue'
+import CopyToClipboardButton from './Shared/CopyToClipboardButton.vue'
 
 export default {
   name: 'PrivateLinkItem',

packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/AutocompleteItem.vue → packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { ShareTypes } from '../../../../helpers/share'
+import { ShareTypes } from '../../../../../helpers/share'
 
 export default {
   name: 'AutocompleteItem',

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

@@ -53,7 +53,7 @@ import {
   customRef
 } from '@vue/composition-api'
 import { useStore } from 'web-pkg/src/composables'
-import { ShareTypes } from '../../../../helpers/share'
+import { ShareTypes } from '../../../../../helpers/share'
 
 export default defineComponent({
   name: 'DateCurrentpicker',

packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue → packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -86,7 +86,7 @@ import {
   SharePermissions,
   ShareTypes,
   SpacePeopleShareRoles
-} from '../../../../helpers/share'
+} from '../../../../../helpers/share'
 import { clientService } from 'web-pkg/src/services'
 import { useCapabilityFilesSharingResharing } from 'web-pkg/src/composables'
 

packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue → packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue

@@ -19,8 +19,8 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { avatarUrl } from '../../../../helpers/user'
-import { ShareTypes } from '../../../../helpers/share'
+import { avatarUrl } from '../../../../../helpers/user'
+import { ShareTypes } from '../../../../../helpers/share'
 
 export default {
   props: {

packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue

@@ -103,7 +103,7 @@ import Mixins from '../../../../mixins'
 import { DateTime } from 'luxon'
 
 import EditDropdown from './EditDropdown.vue'
-import RoleDropdown from '../RoleDropdown.vue'
+import RoleDropdown from './RoleDropdown.vue'
 import { SharePermissions, ShareTypes } from '../../../../helpers/share'
 import { clientService } from 'web-pkg/src/services'
 import { useCapabilityFilesSharingResharing } from 'web-pkg/src/composables'

packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue → packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue

@@ -83,7 +83,7 @@ import {
   SharePermissions,
   ShareRole,
   SpacePeopleShareRoles
-} from '../../../helpers/share'
+} from '../../../../helpers/share'
 import * as uuid from 'uuid'
 
 export default {

packages/web-app-files/src/components/SideBar/Links/FileLinks.vue → packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -7,7 +7,7 @@
     >
       <oc-loader v-if="linksLoading" :aria-label="$gettext('Loading list of file links')" />
       <template v-else>
-        <h3 v-translate class="oc-text-bold oc-m-rm oc-text-initial">Public Links</h3>
+        <h3 class="oc-text-bold oc-m-rm oc-text-initial" v-text="linksHeading" />
         <div v-if="canCreatePublicLinks" class="oc-my-s">
           <p v-translate class="oc-text-muted">
             Any external person with the respective link can access this resource. No sign-in
@@ -62,7 +62,7 @@ import { cloneStateObject } from '../../../helpers/store'
 import LinkEdit from './PublicLinks/LinkEdit.vue'
 import ListItem from './PublicLinks/ListItem.vue'
 import { ShareTypes } from '../../../helpers/share'
-import { useStore } from 'web-pkg/src/composables'
+import { useStore, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import { dirname } from 'path'
 import { defineComponent } from '@vue/composition-api'
@@ -89,7 +89,7 @@ export default defineComponent({
       store.getters.getToken
     )
 
-    return { graphClient }
+    return { graphClient, hasSpaces: useCapabilitySpacesEnabled() }
   },
   data() {
     return {
@@ -123,6 +123,13 @@ export default defineComponent({
       return this.currentFileOutgoingSharesLoading || this.sharesTreeLoading
     },
 
+    linksHeading() {
+      if (this.hasSpaces) {
+        return this.$gettext('Share via link')
+      }
+      return this.$gettext('Share via public link')
+    },
+
     links() {
       return [...this.currentFileOutgoingLinks, ...this.indirectLinks]
         .sort(this.linksComparator)

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

@@ -2,6 +2,7 @@
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
     <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading people list')" />
     <template v-else>
+      <h3 v-translate class="oc-text-bold oc-m-rm oc-text-initial">Share with people</h3>
       <invite-collaborator-form v-if="currentUserCanShare" key="new-collaborator" class="oc-my-s" />
       <p
         v-else
@@ -68,7 +69,7 @@ import { useStore, useDebouncedRef } from 'web-pkg/src/composables'
 import { textUtils } from '../../../helpers/textUtils'
 import { getParentPaths } from '../../../helpers/path'
 import { dirname } from 'path'
-import InviteCollaboratorForm from './InviteCollaborator/InviteCollaboratorForm.vue'
+import InviteCollaboratorForm from './Collaborators/InviteCollaborator/InviteCollaboratorForm.vue'
 import CollaboratorListItem from './Collaborators/ListItem.vue'
 import { ShareTypes } from '../../../helpers/share'
 import { clientService } from 'web-pkg/src/services'

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue → packages/web-app-files/src/components/SideBar/Shares/PublicLinks/LinkEdit.vue

@@ -161,7 +161,7 @@
 import { mapGetters, mapActions, mapState } from 'vuex'
 import mixins from '../../../../mixins'
 import { DateTime } from 'luxon'
-import RoleItem from '../../Shared/RoleItem.vue'
+import RoleItem from '../Shared/RoleItem.vue'
 import { LinkShareRoles, SharePermissions } from '../../../../helpers/share'
 
 export default {

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue → packages/web-app-files/src/components/SideBar/Shares/PublicLinks/LinkInfo.vue

@@ -67,7 +67,7 @@
 import { basename } from 'path'
 import Mixins from '../../../../mixins'
 import { createLocationSpaces, isLocationSpacesActive } from '../../../../router'
-import CopyToClipboardButton from '../CopyToClipboardButton.vue'
+import CopyToClipboardButton from '../../Shared/CopyToClipboardButton.vue'
 import { DateTime } from 'luxon'
 
 export default {

packages/web-app-files/src/components/SideBar/Shared/RoleItem.vue → packages/web-app-files/src/components/SideBar/Shares/Shared/RoleItem.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { ShareRole } from '../../../helpers/share'
+import { ShareRole } from '../../../../helpers/share'
 
 export default {
   name: 'RoleItem',

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

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="oc-background-highlight oc-p-m oc-mb-m">
+      <space-members v-if="showSpaceMembers" />
+      <file-shares v-else />
+    </div>
+    <div v-if="showLinks" class="oc-background-highlight oc-p-m">
+      <file-links />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import FileLinks from './FileLinks.vue'
+import FileShares from './FileShares.vue'
+import SpaceMembers from './SpaceMembers.vue'
+
+export default defineComponent({
+  name: 'Share',
+  components: {
+    FileLinks,
+    FileShares,
+    SpaceMembers
+  },
+  props: {
+    showSpaceMembers: { type: Boolean, default: false },
+    showLinks: { type: Boolean, default: false }
+  },
+  computed: {},
+  watch: {},
+  methods: {}
+})
+</script>

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

@@ -27,7 +27,7 @@ import { mapGetters, mapActions, mapState } from 'vuex'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import CollaboratorListItem from './Collaborators/ListItem.vue'
-import InviteCollaboratorForm from './InviteCollaborator/InviteCollaboratorForm.vue'
+import InviteCollaboratorForm from './Collaborators/InviteCollaborator/InviteCollaboratorForm.vue'
 import { ShareTypes, spaceRoleManager } from '../../../helpers/share'
 import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
 import { useTask } from 'vue-concurrency'

packages/web-app-files/src/fileSideBars.ts

@@ -2,12 +2,10 @@ import FileDetails from './components/SideBar/Details/FileDetails.vue'
 import FileDetailsMultiple from './components/SideBar/Details/FileDetailsMultiple.vue'
 import FileActions from './components/SideBar/Actions/FileActions.vue'
 import FileVersions from './components/SideBar/Versions/FileVersions.vue'
-import FileShares from './components/SideBar/Shares/FileShares.vue'
-import FileLinks from './components/SideBar/Links/FileLinks.vue'
+import Shares from './components/SideBar/Shares/Shares.vue'
 import NoSelection from './components/SideBar/NoSelection.vue'
 import SpaceActions from './components/SideBar/Actions/SpaceActions.vue'
 import SpaceDetails from './components/SideBar/Details/SpaceDetails.vue'
-import SpaceMembers from './components/SideBar/Shares/SpaceMembers.vue'
 import { isLocationSpacesActive, isLocationTrashActive, isLocationPublicActive } from './router'
 import { spaceRoleEditor, spaceRoleManager } from './helpers/share'
 import { Panel } from '../../web-pkg/src/components/sidebar'
@@ -111,11 +109,30 @@ const panelGenerators: (({
       ].includes(user.uuid)
     }
   }),
-  ({ capabilities, router, multipleSelection, rootFolder }) => ({
+  ({ capabilities, router, multipleSelection, rootFolder, highlightedFile }) => ({
     app: 'sharing-item',
-    icon: 'group',
-    title: $gettext('People'),
-    component: FileShares,
+    icon: 'user-add',
+    iconFillType: 'line',
+    title: $gettext('Shares'),
+    component: Shares,
+    componentAttrs: {
+      showSpaceMembers: false,
+      get showLinks() {
+        if (multipleSelection || (rootFolder && highlightedFile?.type !== 'space')) return false
+        if (
+          isLocationTrashActive(router, 'files-trash-personal') ||
+          isLocationTrashActive(router, 'files-trash-spaces-project') ||
+          isLocationPublicActive(router, 'files-public-files')
+        ) {
+          return false
+        }
+
+        if (capabilities.files_sharing) {
+          return capabilities.files_sharing.public.enabled
+        }
+        return false
+      }
+    },
     get enabled() {
       if (multipleSelection || rootFolder) return false
       if (
@@ -132,34 +149,31 @@ const panelGenerators: (({
       return false
     }
   }),
-  ({ highlightedFile }) => ({
+  ({ highlightedFile, rootFolder, multipleSelection, router, capabilities }) => ({
     app: 'space-share-item',
     icon: 'group',
     title: $gettext('Members'),
-    component: SpaceMembers,
-    get enabled() {
-      return highlightedFile?.type === 'space'
-    }
-  }),
-  ({ capabilities, router, multipleSelection, rootFolder, highlightedFile }) => ({
-    app: 'links-item',
-    icon: 'link',
-    title: $gettext('Links'),
-    component: FileLinks,
-    get enabled() {
-      if (multipleSelection || (rootFolder && highlightedFile?.type !== 'space')) return false
-      if (
-        isLocationTrashActive(router, 'files-trash-personal') ||
-        isLocationTrashActive(router, 'files-trash-spaces-project') ||
-        isLocationPublicActive(router, 'files-public-files')
-      ) {
-        return false
-      }
+    component: Shares,
+    componentAttrs: {
+      showSpaceMembers: true,
+      get showLinks() {
+        if (multipleSelection || (rootFolder && highlightedFile?.type !== 'space')) return false
+        if (
+          isLocationTrashActive(router, 'files-trash-personal') ||
+          isLocationTrashActive(router, 'files-trash-spaces-project') ||
+          isLocationPublicActive(router, 'files-public-files')
+        ) {
+          return false
+        }
 
-      if (capabilities.files_sharing) {
-        return capabilities.files_sharing.public.enabled
+        if (capabilities.files_sharing) {
+          return capabilities.files_sharing.public.enabled
+        }
+        return false
       }
-      return false
+    },
+    get enabled() {
+      return highlightedFile?.type === 'space'
     }
   }),
   ({ capabilities, highlightedFile, router, multipleSelection, rootFolder }) => ({

packages/web-app-files/src/helpers/statusIndicators.js

@@ -106,7 +106,7 @@ export const getIndicators = (resource, sharesTree) => {
       label: $gettext('Show links'),
       visible: isLinkShare(resource, sharesTree),
       icon: 'link',
-      target: 'links-item',
+      target: 'sharing-item',
       type: isDirectLinkShare(resource) ? 'link-direct' : 'link-indirect',
       handler: indicatorHandler
     }

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

@@ -27,7 +27,7 @@ export function createPublicLink(ctx) {
         storageId: ctx.storageId
       })
       .then((link) => {
-        ctx.store.dispatch('Files/sidebar/openWithPanel', 'links-item').then(() => {
+        ctx.store.dispatch('Files/sidebar/openWithPanel', 'sharing-item').then(() => {
           copyToClipboard(link.url)
           ctx.store.dispatch('showMessage', {
             title: ctx.$gettext('Public link created'),

packages/web-app-files/tests/integration/specs/linkExpirationDate.spec.js

@@ -23,7 +23,7 @@ import { getDateInFuture, navigateToDate } from '../helpers/date'
 // eslint-disable-next-line jest/no-mocks-import
 import sdkMock from '@/__mocks__/sdk'
 import { DateTime } from 'luxon'
-import FileLinks from '@files/src/components/SideBar/Links/FileLinks.vue'
+import FileLinks from '@files/src/components/SideBar/Shares/FileLinks.vue'
 
 const routes = buildRoutes({
   App,