Merge pull request #6612 from owncloud/status-indicators-followup

[full-ci] StatusIndicators in ResourceTable Followup
owncloud · Mar 28, 2022 · ef7a66d · ef7a66d
2 parents d6dd73e + ae2eb0c
commit ef7a66d
Show file tree

Hide file tree

Showing 26 changed files with 203 additions and 153 deletions.
diff --git a/changelog/5.3.0_2022-03-23/enhancement-move-share-indicators b/changelog/5.3.0_2022-03-23/enhancement-move-share-indicators
@@ -6,4 +6,4 @@ and adjusted the design in ODS.
 https://github.com/owncloud/web/issues/5976
 https://github.com/owncloud/web/pull/6552
 https://github.com/owncloud/owncloud-design-system/pull/2014
-https://github.com/owncloud/web/pull/6583
+https://github.com/owncloud/web/pull/6583
diff --git a/changelog/unreleased/enhancement-remove-links-shared-with-others b/changelog/unreleased/enhancement-remove-links-shared-with-others
@@ -0,0 +1,6 @@
+Enhancement: Remove public links from SharedWithOthers page
+
+We've removed links from the shared-with-others page as those belong in the `Shared via link` page (and already exist there).
+
+https://github.com/owncloud/web/issues/5976
+https://github.com/owncloud/web/pull/6612
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
@@ -144,61 +144,3 @@ main {
   grid-area: upload;
 }
 </style>
-
-<style lang="scss">
-// Hide files table columns
-.files-table {
-  .oc-table-header-cell-mdate,
-  .oc-table-data-cell-mdate,
-  .oc-table-header-cell-sdate,
-  .oc-table-data-cell-sdate,
-  .oc-table-header-cell-ddate,
-  .oc-table-data-cell-ddate,
-  .oc-table-header-cell-size,
-  .oc-table-data-cell-size,
-  .oc-table-header-cell-sharedWith,
-  .oc-table-data-cell-sharedWith,
-  .oc-table-header-cell-owner,
-  .oc-table-data-cell-owner,
-  .oc-table-header-cell-status,
-  .oc-table-data-cell-status {
-    display: none;
-
-    @media only screen and (min-width: 640px) {
-      display: table-cell;
-    }
-  }
-
-  .oc-table-header-cell-owner,
-  .oc-table-data-cell-owner {
-    display: none;
-
-    @media only screen and (min-width: 960px) {
-      display: table-cell;
-    }
-  }
-
-  &-squashed {
-    .oc-table-header-cell-mdate,
-    .oc-table-data-cell-mdate,
-    .oc-table-header-cell-sdate,
-    .oc-table-data-cell-sdate,
-    .oc-table-header-cell-ddate,
-    .oc-table-data-cell-ddate,
-    .oc-table-header-cell-size,
-    .oc-table-data-cell-size,
-    .oc-table-header-cell-sharedWith,
-    .oc-table-data-cell-sharedWith,
-    .oc-table-header-cell-owner,
-    .oc-table-data-cell-owner,
-    .oc-table-header-cell-status,
-    .oc-table-data-cell-status {
-      display: none;
-
-      @media only screen and (min-width: 1600px) {
-        display: table-cell;
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -189,7 +189,7 @@ export default {
         return []
       }
 
-      const personalRouteName = this.hasSpaces
+      const personalRouteTitle = this.hasSpaces
         ? this.$gettext('Personal')
         : this.$gettext('All files')
 
@@ -200,7 +200,7 @@ export default {
             to: '/files/trash'
           },
           {
-            text: personalRouteName,
+            text: personalRouteTitle,
             onClick: () => bus.publish('app.files.list.load')
           }
         ]
@@ -243,7 +243,7 @@ export default {
 
             if (acc.length) {
               if (this.isPersonalLocation) {
-                acc[0].text = personalRouteName
+                acc[0].text = personalRouteTitle
                 acc[0].to = acc[0].to + '/'
               } else if (this.isSpacesProjectLocation || this.isSpacesProjectsLocation) {
                 acc[0] = {

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -72,14 +72,16 @@
       <slot name="status" :resource="item" />
     </template>
     <template #sharedWith="{ item }">
-      <oc-avatars
-        class="resource-table-people"
-        :items="item.sharedWith"
-        :stacked="true"
-        :max-displayed="3"
-        :is-tooltip-displayed="true"
-        :accessible-description="getSharedWithAvatarDescription(item)"
-      />
+      <oc-button appearance="raw" variation="inverse" @click="openSharingSidebar(item)">
+        <oc-avatars
+          class="resource-table-people"
+          :items="item.sharedWith"
+          :stacked="true"
+          :max-displayed="3"
+          :is-tooltip-displayed="true"
+          :accessible-description="getSharedWithAvatarDescription(item)"
+        />
+      </oc-button>
     </template>
     <template #size="{ item }">
       <oc-resource-size :size="item.size || Number.NaN" />
@@ -91,7 +93,7 @@
         v-text="formatDateRelative(item.mdate)"
       />
     </template>
-    <template #shareTypes="{ item }">
+    <template #indicators="{ item }">
       <oc-status-indicators
         v-if="item.indicators.length"
         :resource="item"
@@ -113,12 +115,14 @@
       />
     </template>
     <template #owner="{ item }">
-      <oc-avatars
-        class="resource-table-people"
-        :items="item.owner"
-        :is-tooltip-displayed="true"
-        :accessible-description="getOwnerAvatarDescription(item)"
-      />
+      <oc-button appearance="raw" variation="inverse" @click="openSharingSidebar(item)">
+        <oc-avatars
+          class="resource-table-people"
+          :items="item.owner"
+          :is-tooltip-displayed="true"
+          :accessible-description="getOwnerAvatarDescription(item)"
+        />
+      </oc-button>
     </template>
     <template #actions="{ item }">
       <div class="resource-table-actions">
@@ -161,7 +165,7 @@
 <script lang="ts">
 import { DateTime } from 'luxon'
 import maxSize from 'popper-max-size-modifier'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from '../../constants'
 import { SortDir } from '../../composables'
 import * as path from 'path'
@@ -170,6 +174,7 @@ import { useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import Rename from '../../mixins/actions/rename'
 import { defineComponent, PropType } from '@vue/composition-api'
 import { Resource } from '../../helpers/resource'
+import { ShareTypes } from '../../helpers/share'
 
 export default defineComponent({
   mixins: [Rename],
@@ -310,6 +315,15 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    /**
+     * Define what fields should be displayed in the table
+     * If null, all fields are displayed
+     */
+    fieldsDisplayed: {
+      type: Array,
+      required: false,
+      default: null
+    },
     /**
      * Show that the table is sorted ascendingly/descendingly (no actual sorting takes place)
      */
@@ -382,7 +396,7 @@ export default defineComponent({
             wrap: 'truncate'
           },
           {
-            name: 'shareTypes',
+            name: 'indicators',
             title: this.$gettext('Shares'),
             type: 'slot',
             alignH: 'right',
@@ -444,7 +458,11 @@ export default defineComponent({
               this.formatDateRelative(item.ddate) + ' (' + this.formatDate(item.ddate) + ')'
           }
         ]
-          .filter((field) => Object.prototype.hasOwnProperty.call(firstResource, field.name))
+          .filter((field) => {
+            const hasField = Object.prototype.hasOwnProperty.call(firstResource, field.name)
+            if (!this.fieldsDisplayed) return hasField
+            return hasField && this.fieldsDisplayed.includes(field.name)
+          })
           .map((field) => {
             const sortField = sortFields.find((f) => f.name === field.name)
             if (sortField) {
@@ -498,13 +516,21 @@ export default defineComponent({
     }
   },
   methods: {
+    ...mapActions('Files/sidebar', ['openWithPanel']),
     hasRenameAction(item) {
       return this.$_rename_items.filter((menuItem) => menuItem.isEnabled({ resources: [item] }))
         .length
     },
     openRenameDialog(item) {
       this.$_rename_trigger({ resources: [item] })
     },
+    openSharingSidebar(file) {
+      if (file.share?.shareType === ShareTypes.link.value) {
+        this.openWithPanel('links-item')
+        return
+      }
+      this.openWithPanel('sharing-item')
+    },
     folderLink(file) {
       return this.createFolderLink(file.path, file.storageId)
     },
@@ -702,4 +728,60 @@ export default defineComponent({
     justify-content: center;
   }
 }
+
+// Hide files table columns
+.files-table {
+  .oc-table-header-cell-mdate,
+  .oc-table-data-cell-mdate,
+  .oc-table-header-cell-sdate,
+  .oc-table-data-cell-sdate,
+  .oc-table-header-cell-ddate,
+  .oc-table-data-cell-ddate,
+  .oc-table-header-cell-size,
+  .oc-table-data-cell-size,
+  .oc-table-header-cell-sharedWith,
+  .oc-table-data-cell-sharedWith,
+  .oc-table-header-cell-owner,
+  .oc-table-data-cell-owner,
+  .oc-table-header-cell-status,
+  .oc-table-data-cell-status {
+    display: none;
+
+    @media only screen and (min-width: 640px) {
+      display: table-cell;
+    }
+  }
+
+  .oc-table-header-cell-owner,
+  .oc-table-data-cell-owner {
+    display: none;
+
+    @media only screen and (min-width: 960px) {
+      display: table-cell;
+    }
+  }
+
+  &-squashed {
+    .oc-table-header-cell-mdate,
+    .oc-table-data-cell-mdate,
+    .oc-table-header-cell-sdate,
+    .oc-table-data-cell-sdate,
+    .oc-table-header-cell-ddate,
+    .oc-table-data-cell-ddate,
+    .oc-table-header-cell-size,
+    .oc-table-data-cell-size,
+    .oc-table-header-cell-sharedWith,
+    .oc-table-data-cell-sharedWith,
+    .oc-table-header-cell-owner,
+    .oc-table-data-cell-owner,
+    .oc-table-header-cell-status,
+    .oc-table-data-cell-status {
+      display: none;
+
+      @media only screen and (min-width: 1600px) {
+        display: table-cell;
+      }
+    }
+  }
+}
 </style>
diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
@@ -19,6 +19,7 @@
         v-model="selected"
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
+        :fields-displayed="['name', 'ddate']"
         :are-paths-displayed="true"
         :are-thumbnails-displayed="false"
         :resources="paginatedResources"

diff --git a/packages/web-app-files/src/services/folder/loaderFavorites.ts b/packages/web-app-files/src/services/folder/loaderFavorites.ts
@@ -16,6 +16,7 @@ export class FolderLoaderFavorites implements FolderLoader {
       clientService: { owncloudSdk: client }
     } = context
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     return useTask(function* (signal1, signal2) {
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
 

diff --git a/packages/web-app-files/src/services/folder/loaderSharedViaLink.ts b/packages/web-app-files/src/services/folder/loaderSharedViaLink.ts
@@ -19,6 +19,7 @@ export class FolderLoaderSharedViaLink implements FolderLoader {
 
     const hasResharing = useCapabilityFilesSharingResharing(store)
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     return useTask(function* (signal1, signal2) {
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
 

diff --git a/packages/web-app-files/src/services/folder/loaderSharedWithMe.ts b/packages/web-app-files/src/services/folder/loaderSharedWithMe.ts
@@ -19,6 +19,7 @@ export class FolderLoaderSharedWithMe implements FolderLoader {
 
     const hasResharing = useCapabilityFilesSharingResharing(store)
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     return useTask(function* (signal1, signal2) {
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
 

diff --git a/packages/web-app-files/src/services/folder/loaderSharedWithOthers.ts b/packages/web-app-files/src/services/folder/loaderSharedWithOthers.ts
@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { isLocationSharesActive } from '../../router'
 import { aggregateResourceShares } from '../../helpers/resources'
+import { ShareTypes } from '../../helpers/share'
 import { useCapabilityFilesSharingResharing } from 'web-pkg/src/composables'
 import { unref } from '@vue/composition-api'
 
@@ -19,12 +20,18 @@ export class FolderLoaderSharedWithOthers implements FolderLoader {
 
     const hasResharing = useCapabilityFilesSharingResharing(store)
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     return useTask(function* (signal1, signal2) {
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
 
+      const shareTypes = ShareTypes.authenticated
+        .filter((type) => type.value !== ShareTypes.space.value)
+        .map((share) => share.value)
+        .join(',')
+
       let resources = yield client.requests.ocs({
         service: 'apps/files_sharing',
-        action: '/api/v1/shares?format=json&reshares=true&include_tags=false',
+        action: `/api/v1/shares?format=json&reshares=true&include_tags=false&share_types=${shareTypes}`,
         method: 'GET'
       })