Fix 'show' button in space sidebar details

owncloud · Jun 17, 2022 · f1150d6 · f1150d6
1 parent 5d6f401
commit f1150d6
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 102 deletions.
diff --git a/changelog/unreleased/bugfix-space-sidebar-sharingindicators b/changelog/unreleased/bugfix-space-sidebar-sharingindicators
@@ -0,0 +1,6 @@
+Bugfix: Space sidebar sharing indicators
+
+We have fixed the way the sharing indicators for space members and link shares were displayed in the details panel of the sidebar as well as the click behavior for accessing the shares panel through the sharing information.
+
+https://github.com/owncloud/web/pull/6921
+https://github.com/owncloud/web/issues/6917
diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -12,91 +12,68 @@
         class="space-default-image oc-px-m oc-py-m"
       />
     </div>
-    <div
-      v-if="hasMemberShares || hasLinkShares"
-      class="oc-flex oc-flex-middle oc-mb-m oc-text-small"
-    >
-      <div v-if="hasMemberShares" class="oc-flex oc-flex-middle">
-        <oc-button
-          appearance="raw"
-          :aria-label="$gettext('Open the member panel')"
-          @click="expandMemberPanel"
-        >
-          <oc-icon name="group" class="oc-mr-s" />
-        </oc-button>
-      </div>
-      <div v-if="hasLinkShares" class="oc-flex oc-flex-middle">
-        <oc-button
-          appearance="raw"
-          :aria-label="$gettext('Open the link panel')"
-          @click="expandLinkPanel"
-        >
-          <oc-icon name="link" class="oc-mr-s" />
-        </oc-button>
-      </div>
-      <div>
-        <span v-if="hasMemberShares">
-          <span v-text="memberShareLabel" />
-          <oc-button
-            appearance="raw"
-            :aria-label="$gettext('Open the member panel')"
-            size="small"
-            @click="expandMemberPanel"
-          >
-            <span class="oc-text-small" v-text="$gettext('Show')"></span>
-          </oc-button>
-        </span>
-        <span v-if="hasMemberShares && hasLinkShares">·</span>
-        <span v-if="hasLinkShares">
-          <span v-text="linkShareLabel" />
-          <oc-button
-            appearance="raw"
-            :aria-label="$gettext('Open the link panel')"
-            size="small"
-            @click="expandLinkPanel"
-          >
-            <span class="oc-text-small" v-text="$gettext('Show')"></span>
-          </oc-button>
-        </span>
-      </div>
-    </div>
-    <div>
-      <table class="details-table" :aria-label="detailsTableLabel">
-        <tr>
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Last activity')" />
-          <td v-text="lastModifyDate" />
-        </tr>
-        <tr v-if="space.description">
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Subtitle')" />
-          <td v-text="space.description" />
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Manager')" />
-          <td>
-            <span v-text="ownerUsernames" />
-          </td>
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Quota')" />
-          <td>
-            <space-quota :space-quota="space.spaceQuota" />
-          </td>
-        </tr>
-      </table>
+    <div v-if="hasShares" class="oc-flex oc-flex-middle oc-mb-m oc-text-small" style="gap: 15px">
+      <oc-button
+        v-if="hasMemberShares"
+        appearance="raw"
+        :aria-label="openSharesPanelMembersHint"
+        @click="expandSharesPanel"
+      >
+        <oc-icon name="group" />
+      </oc-button>
+      <oc-button
+        v-if="hasLinkShares"
+        appearance="raw"
+        :aria-label="openSharesPanelLinkHint"
+        @click="expandSharesPanel"
+      >
+        <oc-icon name="link" />
+      </oc-button>
+      <p v-text="shareLabel" />
+      <oc-button
+        appearance="raw"
+        :aria-label="openSharesPanelHint"
+        size="small"
+        @click="expandSharesPanel"
+      >
+        <span class="oc-text-small" v-text="$gettext('Show')" />
+      </oc-button>
     </div>
+    <table class="details-table" :aria-label="detailsTableLabel">
+      <tr>
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Last activity')" />
+        <td v-text="lastModifyDate" />
+      </tr>
+      <tr v-if="space.description">
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Subtitle')" />
+        <td v-text="space.description" />
+      </tr>
+      <tr>
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Manager')" />
+        <td>
+          <span v-text="ownerUsernames" />
+        </td>
+      </tr>
+      <tr>
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Quota')" />
+        <td>
+          <space-quota :space-quota="space.spaceQuota" />
+        </td>
+      </tr>
+    </table>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api'
-import Mixins from '../../../mixins'
-import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
+import Mixins from '../../../mixins'
+import MixinResources from '../../../mixins/resources'
 import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources'
-import { spaceRoleManager } from '../../../helpers/share'
-import SpaceQuota from '../../SpaceQuota.vue'
 import { loadPreview } from '../../../helpers/resource'
+import { spaceRoleManager } from '../../../helpers/share'
 import { ImageDimension } from '../../../constants'
+import SpaceQuota from '../../SpaceQuota.vue'
 
 export default defineComponent({
   name: 'SpaceDetails',
@@ -141,10 +118,59 @@ export default defineComponent({
       'currentFileOutgoingLinks'
     ]),
     ...mapGetters(['user', 'getToken']),
-
     space() {
       return this.displayedItem.value
     },
+    hasShares() {
+      return this.hasMemberShares || this.hasLinkShares
+    },
+    shareLabel() {
+      if (this.hasMemberShares && !this.hasLinkShares) {
+        return this.memberShareLabel
+      }
+      if (!this.hasMemberShares && this.hasLinkShares) {
+        return this.linkShareLabel
+      }
+
+      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
+            }
+          )
+        default:
+          if (this.linkShareCount === 1) {
+            return this.$gettextInterpolate(
+              'This space has %{memberShareCount} members and one link.',
+              {
+                memberShareCount: this.memberShareCount
+              }
+            )
+          }
+          return this.$gettextInterpolate(
+            'This space has %{memberShareCount} members and %{linkShareCount} links.',
+            {
+              memberShareCount: this.memberShareCount,
+              linkShareCount: this.linkShareCount
+            }
+          )
+      }
+    },
+    openSharesPanelHint() {
+      return this.$gettext('Open share panel')
+    },
+    openSharesPanelLinkHint() {
+      return this.$gettext('Open link list in share panel')
+    },
+    openSharesPanelMembersHint() {
+      return this.$gettext('Open member list in share panel')
+    },
     detailsTableLabel() {
       return this.$gettext('Overview of the information about the selected space')
     },
@@ -166,7 +192,7 @@ export default defineComponent({
         .join(', ')
     },
     hasMemberShares() {
-      return this.memberShareCount > 1
+      return this.memberShareCount > 0
     },
     hasLinkShares() {
       return this.linkShareCount > 0
@@ -218,13 +244,8 @@ export default defineComponent({
       setSidebarPanel: 'setActivePanel',
       closeSidebar: 'close'
     }),
-
-    expandMemberPanel() {
+    expandSharesPanel() {
       this.setSidebarPanel('space-share-item')
-    },
-
-    expandLinkPanel() {
-      this.setSidebarPanel('links-item')
     }
   }
 })

diff --git a/...b-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap b/...b-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap
@@ -5,25 +5,30 @@ exports[`Details SideBar Panel displays the details side panel 1`] = `
   <div class="oc-space-details-sidebar-image oc-text-center">
     <oc-icon-stub name="layout-grid" size="xxlarge" class="space-default-image oc-px-m oc-py-m"></oc-icon-stub>
   </div>
-  <!---->
-  <div>
-    <table aria-label="Overview of the information about the selected space" class="details-table">
-      <tr>
-        <th scope="col" class="oc-pr-s">Last activity</th>
-        <td>Invalid DateTime</td>
-      </tr>
-      <!---->
-      <tr>
-        <th scope="col" class="oc-pr-s">Manager</th>
-        <td><span>alice</span></td>
-      </tr>
-      <tr>
-        <th scope="col" class="oc-pr-s">Quota</th>
-        <td>
-          <space-quota-stub spacequota="[object Object]"></space-quota-stub>
-        </td>
-      </tr>
-    </table>
+  <div class="oc-flex oc-flex-middle oc-mb-m oc-text-small" style="gap: 15px;">
+    <oc-button-stub appearance="raw" aria-label="Open member list in share panel">
+      <oc-icon-stub name="group"></oc-icon-stub>
+    </oc-button-stub>
+    <!---->
+    <p>This space has 1 member.</p>
+    <oc-button-stub appearance="raw" aria-label="Open share panel" size="small"><span class="oc-text-small">Show</span></oc-button-stub>
   </div>
+  <table aria-label="Overview of the information about the selected space" class="details-table">
+    <tr>
+      <th scope="col" class="oc-pr-s">Last activity</th>
+      <td>Invalid DateTime</td>
+    </tr>
+    <!---->
+    <tr>
+      <th scope="col" class="oc-pr-s">Manager</th>
+      <td><span>alice</span></td>
+    </tr>
+    <tr>
+      <th scope="col" class="oc-pr-s">Quota</th>
+      <td>
+        <space-quota-stub spacequota="[object Object]"></space-quota-stub>
+      </td>
+    </tr>
+  </table>
 </div>
 `;