Show space default image image and hide member count in spaces manage…

…ment (#8236)
owncloud · Jan 16, 2023 · 9f305a6 · 9f305a6
1 parent 8723750
commit 9f305a6
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 7 deletions.
diff --git a/changelog/unreleased/enhancement-spaces-list-in-admin-settings b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
@@ -11,6 +11,7 @@ https://github.com/owncloud/web/pull/8224
 https://github.com/owncloud/web/pull/8228
 https://github.com/owncloud/web/pull/8229
 https://github.com/owncloud/web/pull/8231
+https://github.com/owncloud/web/pull/8236
 https://github.com/owncloud/web/pull/8238
 https://github.com/owncloud/web/pull/8234
 https://github.com/owncloud/web/issues/8219
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -162,7 +162,8 @@ export default defineComponent({
           default: true,
           enabled: unref(selectedSpaces).length === 1,
           componentAttrs: {
-            spaceResource: unref(selectedSpaces)[0]
+            spaceResource: unref(selectedSpaces)[0],
+            showSpaceImage: false
           }
         },
         {

diff --git a/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
@@ -12,7 +12,11 @@
         class="space-default-image oc-px-m oc-py-m"
       />
     </div>
-    <div v-if="hasShares" class="oc-flex oc-flex-middle oc-mb-m oc-text-small" style="gap: 15px">
+    <div
+      v-if="!spaceResource && hasShares"
+      class="oc-flex oc-flex-middle oc-space-details-sidebar-members oc-mb-m oc-text-small"
+      style="gap: 15px"
+    >
       <oc-button
         v-if="hasMemberShares"
         appearance="raw"
@@ -86,15 +90,20 @@ export default defineComponent({
     spaceResource: {
       type: Object as PropType<SpaceResource>,
       required: false
+    },
+    showSpaceImage: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
-  setup() {
+  setup(props) {
     const store = useStore()
     const accessToken = useAccessToken({ store })
     const spaceImage = ref('')
 
     const loadImageTask = useTask(function* (signal, ref) {
-      if (!ref.space?.spaceImageData) {
+      if (!ref.space?.spaceImageData || !props.showSpaceImage) {
         spaceImage.value = undefined
         return
       }

diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
@@ -12,6 +12,11 @@ const spaceMock = {
   name: ' space',
   id: '1',
   mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  spaceRoles: {
+    manager: [],
+    editor: [],
+    viewer: []
+  },
   spaceQuota: {
     used: 100,
     total: 1000
@@ -30,14 +35,27 @@ const spaceShare = {
   }
 }
 
+const selectors = {
+  spaceDefaultImage: '.space-default-image',
+  spaceMembers: '.oc-space-details-sidebar-members'
+}
+
 describe('Details SideBar Panel', () => {
   it('displays the details side panel', () => {
-    const { wrapper } = createWrapper(spaceMock)
+    const { wrapper } = createWrapper()
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('does render the space default image if "showSpaceImage" is false', () => {
+    const { wrapper } = createWrapper({ props: { showSpaceImage: false } })
+    expect(wrapper.find(selectors.spaceDefaultImage).exists()).toBeTruthy()
+  })
+  it('does not render the space members count if spaceResource is given', () => {
+    const { wrapper } = createWrapper({ props: { spaceResource: spaceMock } })
+    expect(wrapper.find(selectors.spaceMembers).exists()).toBeFalsy()
+  })
 })
 
-function createWrapper(spaceResource) {
+function createWrapper({ spaceResource = spaceMock, props = {} } = {}) {
   const storeOptions = defaultStoreMockOptions
   storeOptions.getters.user.mockImplementation(() => ({ id: 'marie' }))
   storeOptions.modules.runtime.modules.spaces.getters.spaceMembers.mockImplementation(() => [
@@ -50,6 +68,7 @@ function createWrapper(spaceResource) {
   const store = createStore(storeOptions)
   return {
     wrapper: shallowMount(SpaceDetails, {
+      props: { ...props },
       global: {
         plugins: [...defaultPlugins(), store],
         directives: {

diff --git a/...-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap b/...-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Details SideBar Panel displays the details side panel 1`] = `
   <div class="oc-space-details-sidebar-image oc-text-center">
     <oc-icon-stub accessiblelabel="" class="space-default-image oc-px-m oc-py-m" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
   </div>
-  <div class="oc-flex oc-flex-middle oc-mb-m oc-text-small" style="gap: 15px;">
+  <div class="oc-flex oc-flex-middle oc-space-details-sidebar-members oc-mb-m oc-text-small" style="gap: 15px;">
     <oc-button-stub appearance="raw" arialabel="Open member list in share panel" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
     <!--v-if-->
     <p>This space has 1 member.</p>