Shared with me: Show / Hide shares (#9531)

changelog/unreleased/enhancement-show-hide-shares

@@ -0,0 +1,9 @@
+Enhancement: Personal shares can be shown and hidden
+
+On the shared-with-me page, there is no distinction between pending, accepted and rejected shares anymore.
+Instead, the user can toggle to display either shown or hidden shares.
+
+Furthermore, accepting and rejecting shares has been renamed to "enable sync"/"disable sync" to better reflect what's happening on the server and on other devices.
+
+https://github.com/owncloud/web/issues/9531
+https://github.com/owncloud/web/pull/9718

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="oc-px-m oc-py-s">
+    <h2 class="oc-px-m oc-py-s oc-invisible-sr">
       {{ title }}
       <span class="oc-text-medium">({{ items.length }})</span>
     </h2>
@@ -39,25 +39,12 @@
           :key="resource.getDomSelector() + resource.status"
           class="oc-text-nowrap oc-flex oc-flex-middle oc-flex-right"
         >
-          <oc-button
-            v-if="getShowAcceptButton(resource)"
-            size="small"
-            variation="success"
-            class="file-row-share-status-accept"
-            @click.stop="triggerAction('accept-share', { space: null, resources: [resource] })"
-          >
-            <oc-icon size="small" name="check" />
-            <span v-translate>Accept</span>
-          </oc-button>
-          <oc-button
-            v-if="getShowDeclineButton(resource)"
-            size="small"
-            class="file-row-share-decline oc-ml-s"
-            @click.stop="triggerAction('decline-share', { space: null, resources: [resource] })"
-          >
-            <oc-icon size="small" name="spam-3" fill-type="line" />
-            <span v-translate>Decline</span>
-          </oc-button>
+          <oc-icon
+            v-if="getShowSynchedIcon(resource)"
+            v-oc-tooltip="$gettext('Synced with your devices')"
+            name="loop-right"
+            class="sync-enabled"
+          />
         </div>
       </template>
       <template #contextMenu="{ resource }">
@@ -66,6 +53,17 @@
           :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
         />
       </template>
+      <template #quickActions="{ resource }">
+        <oc-button
+          size="small"
+          appearance="raw"
+          :class="['oc-ml-s', 'oc-p-s', hideShareAction.class]"
+          @click.stop="hideShareAction.handler({ space: null, resources: [resource] })"
+        >
+          <oc-icon size="small" :name="resource.hidden ? 'eye' : 'eye-off'" fill-type="line" />
+          <span>{{ hideShareAction.label({ space: null, resources: [resource] }) }}</span>
+        </oc-button>
+      </template>
       <template #footer>
         <div v-if="showMoreToggle && hasMore" class="oc-width-1-1 oc-text-center oc-mt">
           <oc-button
@@ -92,13 +90,12 @@
 </template>
 
 <script lang="ts">
-import { ResourceTable } from '@ownclouders/web-pkg'
-import { defineComponent, PropType } from 'vue'
+import { ResourceTable, useFileActions, useFileActionsToggleHideShare } from '@ownclouders/web-pkg'
+import { computed, defineComponent, PropType, unref } from 'vue'
 import { debounce } from 'lodash-es'
 import { ImageDimension, ImageType } from '@ownclouders/web-pkg'
 import { VisibilityObserver } from '@ownclouders/web-pkg'
 import { mapActions } from 'vuex'
-import { useFileActions } from '@ownclouders/web-pkg'
 import { SortDir, useStore, useGetMatchingSpace } from '@ownclouders/web-pkg'
 import { createLocationSpaces } from '@ownclouders/web-pkg'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
@@ -137,7 +134,7 @@ export default defineComponent({
     },
     shareStatus: {
       type: Number,
-      required: true
+      default: ShareStatus.accepted
     },
     sortBy: {
       type: String,
@@ -195,6 +192,10 @@ export default defineComponent({
     const store = useStore()
     const { getMatchingSpace } = useGetMatchingSpace()
 
+    const { triggerDefaultAction } = useFileActions()
+    const { actions: hideShareActions } = useFileActionsToggleHideShare({ store })
+    const hideShareAction = computed(() => unref(hideShareActions)[0])
+
     const resourceTargetRouteCallback = ({
       path,
       fileId,
@@ -207,7 +208,8 @@ export default defineComponent({
     }
 
     return {
-      ...useFileActions(),
+      triggerDefaultAction,
+      hideShareAction,
       resourceTargetRouteCallback,
       ...useSelectedResources({ store }),
       getMatchingSpace
@@ -271,10 +273,13 @@ export default defineComponent({
         onExit: debounced.cancel
       })
     },
-    getShowAcceptButton(resource) {
+    getShowSynchedIcon(resource: Resource) {
+      return resource.status === ShareStatus.accepted
+    },
+    getShowAcceptButton(resource: Resource) {
       return resource.status === ShareStatus.declined || resource.status === ShareStatus.pending
     },
-    getShowDeclineButton(resource) {
+    getShowDeclineButton(resource: Resource) {
       return resource.status === ShareStatus.accepted || resource.status === ShareStatus.pending
     },
     toggleShowMore() {
@@ -285,7 +290,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.files-empty {
-  height: auto;
+.oc-files-actions-hide-share-trigger:hover {
+  background-color: var(--oc-color-background-secondary) !important;
 }
 </style>

packages/web-app-files/src/services/folder/loaderSharedWithMe.ts

@@ -40,7 +40,8 @@ export class FolderLoaderSharedWithMe implements FolderLoader {
       let resources = yield clientService.owncloudSdk.shares.getShares('', {
         state: 'all',
         include_tags: false,
-        shared_with_me: true
+        shared_with_me: true,
+        show_hidden: true
       })
 
       resources = resources.map((r) => r.shareInfo)