Fix member display in space details sidebar panel

owncloud · Feb 20, 2023 · e3617f7 · e3617f7
1 parent 7611624
commit e3617f7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 63 deletions.
diff --git a/changelog/unreleased/enhancement-spaces-list-in-admin-settings b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
@@ -23,5 +23,6 @@ https://github.com/owncloud/web/pull/8268
 https://github.com/owncloud/web/pull/8233
 https://github.com/owncloud/web/pull/8333
 https://github.com/owncloud/web/pull/8334
+https://github.com/owncloud/web/pull/8477
 https://github.com/owncloud/web/issues/8219
 https://github.com/owncloud/web/issues/8267
diff --git a/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
@@ -3,7 +3,7 @@
     <div class="oc-space-details-sidebar-image oc-text-center">
       <oc-spinner v-if="loadImageTask.isRunning" />
       <div v-else-if="spaceImage" class="oc-position-relative">
-        <img :src="spaceImage" alt="" class="oc-mb-m" />
+        <img :src="spaceImage" alt="" class="oc-mb-s" />
       </div>
       <oc-icon
         v-else
@@ -14,7 +14,7 @@
     </div>
     <div
       v-if="showShareIndicators && hasShares"
-      class="oc-flex oc-flex-middle oc-space-details-sidebar-members oc-mb-m oc-text-small"
+      class="oc-flex oc-flex-middle oc-space-details-sidebar-members oc-mb-s oc-text-small"
       style="gap: 15px"
     >
       <oc-button
@@ -153,26 +153,19 @@ export default defineComponent({
 
       switch (this.memberShareCount) {
         case 1:
-          return this.$gettextInterpolate(
-            this.$ngettext(
-              'This space has one member and %{linkShareCount} link.',
-              'This space has one member and %{linkShareCount} links.',
-              this.linkShareCount
-            ),
-            {
-              linkShareCount: this.linkShareCount
-            }
+          return this.$ngettext(
+            'This space has one member and %{linkShareCount} link.',
+            'This space has one member and %{linkShareCount} links.',
+            this.linkShareCount,
+            { linkShareCount: this.linkShareCount }
           )
         default:
           if (this.linkShareCount === 1) {
-            return this.$gettextInterpolate(
-              'This space has %{memberShareCount} members and one link.',
-              {
-                memberShareCount: this.memberShareCount
-              }
-            )
+            return this.$gettext('This space has %{memberShareCount} members and one link.', {
+              memberShareCount: this.memberShareCount
+            })
           }
-          return this.$gettextInterpolate(
+          return this.$gettext(
             'This space has %{memberShareCount} members and %{linkShareCount} links.',
             {
               memberShareCount: this.memberShareCount,
@@ -197,31 +190,12 @@ export default defineComponent({
       return formatDateFromISO(this.resource.mdate, this.$language.current)
     },
     ownerUsernames() {
-      /* TODO: Find a better solution for reactiveness
-         Why: Currently we use a different logic for the admin-panel and we need a solution that works for both
-      */
-      if (this.spaceResource) {
-        return this.resource.spaceRoles[spaceRoleManager.name]
-          .map((share) => {
-            if (share.displayName === this.user?.displayName) {
-              return this.$gettextInterpolate(this.$gettext('%{displayName} (me)'), {
-                displayName: share.displayName
-              })
-            }
-            return share.displayName
-          })
-          .join(', ')
-      }
-      const userId = this.user?.id
-      return this.spaceMembers
-        .filter((share) => share.role.name === spaceRoleManager.name)
+      return this.resource.spaceRoles[spaceRoleManager.name]
         .map((share) => {
-          if (share.collaborator.name === userId) {
-            return this.$gettextInterpolate(this.$gettext('%{displayName} (me)'), {
-              displayName: share.collaborator.displayName
-            })
+          if (share.id === this.user?.uuid) {
+            return this.$gettext('%{displayName} (me)', { displayName: share.displayName })
           }
-          return share.collaborator.displayName
+          return share.displayName
         })
         .join(', ')
     },
@@ -238,27 +212,19 @@ export default defineComponent({
       return this.currentFileOutgoingLinks.length
     },
     memberShareLabel() {
-      return this.$gettextInterpolate(
-        this.$ngettext(
-          'This space has %{memberShareCount} member.',
-          'This space has %{memberShareCount} members.',
-          this.memberShareCount
-        ),
-        {
-          memberShareCount: this.memberShareCount
-        }
+      return this.$ngettext(
+        'This space has %{memberShareCount} member.',
+        'This space has %{memberShareCount} members.',
+        this.memberShareCount,
+        { memberShareCount: this.memberShareCount }
       )
     },
     linkShareLabel() {
-      return this.$gettextInterpolate(
-        this.$ngettext(
-          '%{linkShareCount} link giving access.',
-          '%{linkShareCount} links giving access.',
-          this.linkShareCount
-        ),
-        {
-          linkShareCount: this.linkShareCount
-        }
+      return this.$ngettext(
+        '%{linkShareCount} link giving access.',
+        '%{linkShareCount} links giving access.',
+        this.linkShareCount,
+        { linkShareCount: this.linkShareCount }
       )
     }
   },

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
@@ -13,7 +13,7 @@ const spaceMock = {
   id: '1',
   mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
   spaceRoles: {
-    manager: [],
+    manager: [{ id: '1', displayName: 'alice' }],
     editor: [],
     viewer: []
   },
@@ -60,7 +60,7 @@ describe('Details SideBar Panel', () => {
 
 function createWrapper({ spaceResource = spaceMock, props = {} } = {}) {
   const storeOptions = defaultStoreMockOptions
-  storeOptions.getters.user.mockImplementation(() => ({ id: 'marie' }))
+  storeOptions.getters.user.mockImplementation(() => ({ id: 'marie', uuid: '1' }))
   storeOptions.modules.runtime.modules.spaces.getters.spaceMembers.mockImplementation(() => [
     spaceShare
   ])

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-space-details-sidebar-members oc-mb-m oc-text-small" style="gap: 15px;">
+  <div class="oc-flex oc-flex-middle oc-space-details-sidebar-members oc-mb-s oc-text-small" style="gap: 15px;">
     <oc-button-stub appearance="raw" arialabel="Open member list in share panel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
     <!--v-if-->
     <p>This space has 1 member.</p>
@@ -21,7 +21,7 @@ exports[`Details SideBar Panel displays the details side panel 1`] = `
       <tr>
         <th class="oc-pr-s" scope="col">Manager</th>
         <td>
-          <span>alice</span>
+          <span>alice (me)</span>
         </td>
       </tr>
       <tr>