Fix sidebar for spaces on 'Shared via link'-page

changelog/unreleased/bugfix-spaces-on-share-via-link-page

@@ -3,4 +3,6 @@ Bugfix: Spaces on "Shared via link"-page
 Spaces on the "Shared via link"-page are now being displayed correctly. Also, the sidebar for those has been fixed.
 
 https://github.com/owncloud/web/pull/7651
+https://github.com/owncloud/web/pull/7742
 https://github.com/owncloud/web/issues/7103
+https://github.com/owncloud/web/issues/7741

packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue

@@ -16,6 +16,10 @@
           <th scope="col" class="oc-pr-s" v-text="foldersText" />
           <td v-text="foldersCount" />
         </tr>
+        <tr data-testid="spacesCount">
+          <th scope="col" class="oc-pr-s" v-text="spacesText" />
+          <td v-text="spacesCount" />
+        </tr>
         <tr data-testid="size">
           <th scope="col" class="oc-pr-s" v-text="sizeText" />
           <td v-text="sizeValue" />
@@ -68,6 +72,12 @@ export default defineComponent({
     foldersText() {
       return this.$gettext('Folders')
     },
+    spacesCount() {
+      return this.selectedFiles.filter((i) => i.type === 'space').length
+    },
+    spacesText() {
+      return this.$gettext('Spaces')
+    },
     detailsTableLabel() {
       return this.$gettext('Overview of the information about the selected files')
     }

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

@@ -26,7 +26,10 @@
         class="sidebar-panel__file_info"
         :is-sub-panel-active="!!activePanel"
       />
-      <space-info v-if="highlightedFileIsSpace" class="sidebar-panel__space_info" />
+      <space-info
+        v-if="isSingleResource && highlightedFileIsSpace"
+        class="sidebar-panel__space_info"
+      />
     </template>
   </SideBar>
 </template>

packages/web-app-files/src/components/Spaces/SpaceContextActions.vue

@@ -32,7 +32,7 @@ import ReadmeContentModal from './ReadmeContentModal.vue'
 import Delete from '../../mixins/spaces/actions/delete'
 import Rename from '../../mixins/spaces/actions/rename'
 import Restore from '../../mixins/spaces/actions/restore'
-import ShowDetails from '../../mixins/spaces/actions/showDetails'
+import ShowDetails from '../../mixins/actions/showDetails'
 import EditDescription from '../../mixins/spaces/actions/editDescription'
 import EditQuota from '../../mixins/spaces/actions/editQuota'
 import DeletedFiles from '../../mixins/spaces/actions/deletedFiles'

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

@@ -57,24 +57,24 @@ const panelGenerators: (({
       )
     }
   }),
-  ({ multipleSelection, rootFolder }) => ({
+  ({ multipleSelection, rootFolder, highlightedFile }) => ({
     app: 'details-multiple-item',
     icon: 'questionnaire-line',
     title: $gettext('Details'),
     component: FileDetailsMultiple,
     default: () => true,
     get enabled() {
-      return multipleSelection && !rootFolder
+      return multipleSelection && (!rootFolder || highlightedFile?.type === 'space')
     }
   }),
-  ({ highlightedFile }) => ({
+  ({ multipleSelection, highlightedFile }) => ({
     app: 'details-space-item',
     icon: 'questionnaire-line',
     title: $gettext('Details'),
     component: SpaceDetails,
     default: () => true,
     get enabled() {
-      return highlightedFile?.type === 'space'
+      return highlightedFile?.type === 'space' && !multipleSelection
     }
   }),
   ({ router, multipleSelection, rootFolder }) => ({
@@ -87,12 +87,15 @@ const panelGenerators: (({
       return !multipleSelection && !rootFolder
     }
   }),
-  ({ highlightedFile, user }) => ({
+  ({ multipleSelection, highlightedFile, user }) => ({
     app: 'space-actions-item',
     icon: 'slideshow-3',
     title: $gettext('Actions'),
     component: SpaceActions,
     get enabled() {
+      if (multipleSelection) {
+        return false
+      }
       if (highlightedFile?.type !== 'space') {
         return false
       }
@@ -134,7 +137,7 @@ const panelGenerators: (({
       return false
     }
   }),
-  ({ highlightedFile, capabilities }) => ({
+  ({ multipleSelection, highlightedFile, capabilities }) => ({
     app: 'space-share-item',
     icon: 'group',
     title: $gettext('Members'),
@@ -149,7 +152,7 @@ const panelGenerators: (({
       }
     },
     get enabled() {
-      return highlightedFile?.type === 'space'
+      return highlightedFile?.type === 'space' && !multipleSelection
     }
   }),
   ({ capabilities, highlightedFile, router, multipleSelection, rootFolder }) => ({

packages/web-app-files/src/mixins/actions/showDetails.js → packages/web-app-files/src/mixins/actions/showDetails.ts

@@ -1,10 +1,15 @@
-import { mapMutations } from 'vuex'
+import { mapActions, mapMutations } from 'vuex'
 import { isLocationTrashActive } from '../../router'
 import isFilesAppActive from './helpers/isFilesAppActive'
 import { bus } from 'web-pkg/src/instance'
 import { SideBarEventTopics } from '../../composables/sideBar'
+import { isProjectSpaceResource } from 'web-client/src/helpers'
+import { useGraphClient } from 'web-client/src/composables'
 
 export default {
+  setup() {
+    return { ...useGraphClient() }
+  },
   mixins: [isFilesAppActive],
   computed: {
     $_showDetails_items() {
@@ -35,8 +40,13 @@ export default {
   },
   methods: {
     ...mapMutations('Files', ['SET_FILE_SELECTION']),
+    ...mapActions('runtime/spaces', ['loadSpaceMembers']),
 
     $_showDetails_trigger({ resources }) {
+      if (resources.length === 1 && isProjectSpaceResource(resources[0])) {
+        this.loadSpaceMembers({ graphClient: this.graphClient, space: resources[0] })
+      }
+
       this.SET_FILE_SELECTION(resources)
       bus.publish(SideBarEventTopics.open)
     }

packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.js

@@ -33,6 +33,9 @@ function getWrapper(space) {
     localVue,
     store: createStore(),
     mocks: {
+      $route: {
+        path: '/files'
+      },
       $router: {
         currentRoute: createLocationSpaces('some-route'),
         resolve: (r) => {

packages/web-app-files/tests/unit/mixins/actions/showDetails.spec.ts

@@ -0,0 +1,59 @@
+import Vuex from 'vuex'
+import { createStore } from 'vuex-extensions'
+import { mount, createLocalVue } from '@vue/test-utils'
+import showDetails from 'files/src/mixins/actions/showDetails'
+import { defaultComponentMocks } from '../../../../../../tests/unit/mocks/defaultComponentMocks'
+import { defaultStoreMockOptions } from '../../../../../../tests/unit/mocks/store/defaultStoreMockOptions'
+import { bus } from 'web-pkg/src/instance'
+import { SideBarEventTopics } from '../../../../src/composables/sideBar'
+import { buildSpace } from 'web-client/src/helpers'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+const Component: any = {
+  template: '<div></div>',
+  mixins: [showDetails]
+}
+
+describe('showDetails', () => {
+  describe('method "$_showDetails_trigger"', () => {
+    it('should trigger the open sidebar event', () => {
+      const busStub = jest.spyOn(bus, 'publish')
+      const { wrapper } = getWrapper()
+      const resources = [{ id: 1, path: '/folder' }]
+      wrapper.vm.$_showDetails_trigger({ resources })
+      expect(busStub).toHaveBeenCalledWith(SideBarEventTopics.open)
+    })
+    it('should load space members if a project space is selected', () => {
+      const busStub = jest.spyOn(bus, 'publish')
+      const { wrapper } = getWrapper()
+      const loadSpaceMembersStub = jest.spyOn(wrapper.vm, 'loadSpaceMembers')
+      const resources = [buildSpace({ id: 1, driveType: 'project' })]
+      wrapper.vm.$_showDetails_trigger({ resources })
+      expect(busStub).toHaveBeenCalledWith(SideBarEventTopics.open)
+      expect(loadSpaceMembersStub).toHaveBeenCalled()
+    })
+  })
+})
+
+function getWrapper() {
+  const mocks = {
+    ...defaultComponentMocks()
+  }
+
+  const storeOptions = {
+    ...defaultStoreMockOptions
+  }
+
+  const store = createStore(Vuex.Store, storeOptions)
+  return {
+    mocks,
+    storeOptions,
+    wrapper: mount(Component, {
+      localVue,
+      mocks,
+      store
+    })
+  }
+}