Add details panel for unique trash and multi select

changelog/unreleased/enhancement-add-details-panel-to-trash

@@ -0,0 +1,8 @@
+Enhancement: Add details panel to trash
+
+We've added the details panel to the right side bar, when the user selects a resource in the trash.
+We also added a panel for multi select.
+
+https://github.com/owncloud/web/pull/10624
+https://github.com/owncloud/web/issues/10620
+https://github.com/owncloud/web/issues/10616

packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="oc-mt-xl">
-    <div v-if="noGroups" class="oc-flex group-info">
+    <div v-if="noGroups" class="oc-flex group-info oc-text-center">
       <oc-icon name="group-2" size="xxlarge" />
       <p v-translate>Select a group to view details</p>
     </div>
@@ -59,9 +59,11 @@ export default defineComponent({
   align-items: center;
   flex-direction: column;
 }
+
 .group-info-display-name {
   font-size: 1.5rem;
 }
+
 .details-table {
   text-align: left;
 

packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="oc-mt-xl">
-    <div v-if="noUsers" class="oc-flex user-info">
+    <div v-if="noUsers" class="oc-flex user-info oc-text-center">
       <oc-icon name="user" size="xxlarge" />
       <p v-translate>Select a user to view details</p>
     </div>

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -33,6 +33,12 @@
       >
         <col class="oc-width-1-3" />
         <col class="oc-width-2-3" />
+        <tr v-if="hasDeletionDate" data-testid="delete-timestamp">
+          <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Deleted at')" />
+          <td>
+            <span v-text="capitalizedDeletionDate"></span>
+          </td>
+        </tr>
         <tr v-if="hasTimestamp" data-testid="timestamp">
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Last modified')" />
           <td>
@@ -84,7 +90,7 @@
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Size')" />
           <td v-text="resourceSize" />
         </tr>
-        <web-dav-details v-if="showWebDavDetails" />
+        <web-dav-details v-if="showWebDavDetails" :space="space" />
         <tr v-if="showVersions" data-testid="versionsInfo">
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Versions')" />
           <td>
@@ -131,7 +137,8 @@ import {
   useCapabilityStore,
   useConfigStore,
   useClientService,
-  useResourcesStore
+  useResourcesStore,
+  formatDateFromJSDate
 } from '@ownclouders/web-pkg'
 import upperFirst from 'lodash-es/upperFirst'
 import { isShareResource, ShareTypes } from '@ownclouders/web-client/src/helpers/share'
@@ -167,6 +174,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    versionsEnabled: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {
@@ -175,6 +187,7 @@ export default defineComponent({
     const capabilityStore = useCapabilityStore()
     const clientService = useClientService()
     const { getMatchingSpace } = useGetMatchingSpace()
+
     const language = useGettext()
 
     const resourcesStore = useResourcesStore()
@@ -184,6 +197,7 @@ export default defineComponent({
 
     const resource = inject<Ref<Resource>>('resource')
     const space = inject<Ref<SpaceResource>>('space')
+
     const previewService = usePreviewService()
     const preview = ref(undefined)
 
@@ -252,8 +266,11 @@ export default defineComponent({
       () => {
         if (unref(resource)) {
           loadPreviewTask.perform(unref(resource))
-
-          if (!unref(resource).isFolder && !unref(publicLinkContextReady)) {
+          if (
+            props.versionsEnabled &&
+            !unref(resource).isFolder &&
+            !unref(publicLinkContextReady)
+          ) {
             loadVersions(unref(resource).fileId)
           }
         }
@@ -270,13 +287,24 @@ export default defineComponent({
       return props.tagsEnabled && capabilityStore.filesTags
     })
 
+    const hasDeletionDate = computed(() => {
+      return unref(resource).ddate
+    })
+
+    const capitalizedDeletionDate = computed(() => {
+      const displayDate = formatDateFromJSDate(new Date(unref(resource).ddate), language.current)
+      return upperFirst(displayDate)
+    })
+
     return {
       user,
       preview,
       publicLinkContextReady,
       space,
       resource,
       hasTags,
+      hasDeletionDate,
+      capitalizedDeletionDate,
       isPreviewLoading,
       ancestorMetaData,
       sharedAncestor,
@@ -294,7 +322,8 @@ export default defineComponent({
         this.ownerDisplayName ||
         this.showSize ||
         this.showShares ||
-        this.showVersions
+        this.showVersions ||
+        this.hasDeletionDate
       )
     },
     sharedViaTooltip() {

packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue

@@ -20,7 +20,7 @@
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="spacesText" />
           <td v-text="spacesCount" />
         </tr>
-        <tr data-testid="size">
+        <tr v-if="hasSize" data-testid="size">
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="sizeText" />
           <td v-text="sizeValue" />
         </tr>
@@ -29,7 +29,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, unref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { formatFileSize, useResourcesStore } from '@ownclouders/web-pkg'
 
@@ -42,7 +42,11 @@ export default defineComponent({
     const resourcesStore = useResourcesStore()
     const { selectedResources } = storeToRefs(resourcesStore)
 
-    return { selectedResources }
+    const hasSize = computed(() => {
+      return unref(selectedResources).some((resource) => Object.hasOwn(resource, 'size'))
+    })
+
+    return { hasSize, selectedResources }
   },
   computed: {
     selectedFilesCount() {
@@ -60,7 +64,7 @@ export default defineComponent({
     },
     sizeValue() {
       let size = 0
-      this.selectedResources.forEach((i) => (size += parseInt(i.size.toString())))
+      this.selectedResources.forEach((i) => (size += parseInt(i.size?.toString() || '0')))
       return formatFileSize(size, this.$language.current)
     },
     sizeText() {
@@ -110,11 +114,13 @@ export default defineComponent({
     .preview-icon {
       display: inline-block;
     }
+
     .preview-text {
       display: block;
     }
   }
 }
+
 .details-table {
   text-align: left;
 

packages/web-app-files/src/composables/extensions/useFileSideBars.ts

@@ -95,14 +95,13 @@ export const useSideBarPanels = () => {
             component: FileDetails,
             componentAttrs: ({ items }) => ({
               previewEnabled: unref(isFilesAppActive),
-              tagsEnabled: !isPersonalSpaceRoot(items[0])
+              tagsEnabled:
+                !isPersonalSpaceRoot(items[0]) &&
+                !isLocationTrashActive(router, 'files-trash-generic'),
+              versionsEnabled: !isLocationTrashActive(router, 'files-trash-generic')
             }),
-            isRoot: () => !isLocationTrashActive(router, 'files-trash-generic'),
+            isRoot: () => true,
             isVisible: ({ items }) => {
-              if (isLocationTrashActive(router, 'files-trash-generic')) {
-                // details panel is not available in trash
-                return false
-              }
               if (items?.length !== 1) {
                 return false
               }
@@ -148,7 +147,7 @@ export const useSideBarPanels = () => {
             icon: 'slideshow-3',
             title: () => $gettext('Actions'),
             component: FileActions,
-            isRoot: () => isLocationTrashActive(router, 'files-trash-generic'),
+            isRoot: () => false,
             isVisible: ({ items }) => {
               if (items?.length !== 1) {
                 return false

packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

@@ -19,6 +19,7 @@ exports[`ResourceDetails component > renders resource details correctly 1`] = `
         <table data-v-5080a6a4="" class="details-table oc-width-1-1" aria-label="Overview of the information about the selected file">
           <col data-v-5080a6a4="" class="oc-width-1-3">
           <col data-v-5080a6a4="" class="oc-width-2-3">
+          <!--v-if-->
           <tr data-v-5080a6a4="" data-testid="timestamp">
             <th data-v-5080a6a4="" scope="col" class="oc-pr-s oc-font-semibold">Last modified</th>
             <td data-v-5080a6a4=""><span data-v-5080a6a4="">Oct 21, 2015, 7:28 AM</span></td>

packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue

@@ -66,7 +66,7 @@
           <space-quota :space-quota="resource.spaceQuota" />
         </td>
       </tr>
-      <web-dav-details v-if="showWebDavDetails" />
+      <web-dav-details v-if="showWebDavDetails" :space="resource" />
       <portal-target
         name="app.files.sidebar.space.details.table"
         :slot-props="{ space: resource, resource }"

packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="oc-mt-xl">
-    <div class="oc-flex space-info">
+    <div class="oc-flex space-info oc-text-center">
       <oc-icon name="layout-grid" size="xxlarge" />
       <p v-translate>Select a space to view details</p>
     </div>

packages/web-pkg/src/components/SideBar/WebDavDetails.vue

@@ -38,24 +38,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, ref, Ref, computed, unref } from 'vue'
+import { defineComponent, inject, ref, Ref, computed, unref, PropType } from 'vue'
 import { urlJoin } from '@ownclouders/web-client/src/utils'
-import { Resource } from '@ownclouders/web-client'
-import { useConfigStore } from '../../composables'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 
 export default defineComponent({
   name: 'WebDavDetails',
-  setup() {
-    const configStore = useConfigStore()
-
+  props: {
+    space: {
+      type: Object as PropType<SpaceResource>,
+      required: true
+    }
+  },
+  setup(props) {
     const resource = inject<Ref<Resource>>('resource')
     const copiedIcon = 'check'
     const copyIcon = 'file-copy'
     const copyWebDAVPathIcon = ref(copyIcon)
     const copyWebDAVUrlIcon = ref(copyIcon)
 
     const webDavUrl = computed(() => {
-      return urlJoin(configStore.serverUrl, unref(resource).webDavPath)
+      return urlJoin(props.space.root.webDavUrl, unref(resource).path)
     })
 
     const copyWebDAVPathToClipboard = () => {

packages/web-runtime/src/App.vue

@@ -19,6 +19,7 @@ import { eventBus, useResourcesStore, useRouter, useThemeStore } from '@owncloud
 import { useHead } from './composables/head'
 import { RouteLocation } from 'vue-router'
 import { storeToRefs } from 'pinia'
+import { isEqual } from 'lodash-es'
 
 export default defineComponent({
   components: {
@@ -40,14 +41,14 @@ export default defineComponent({
     watch(
       () => unref(activeRoute),
       (newRoute, oldRoute) => {
-        const getAppFromRoute = (route: RouteLocation): string => {
-          return route?.path?.split('/')?.[1]
+        const getAppContextFromRoute = (route: RouteLocation): string[] => {
+          return route?.path?.split('/').slice(1, 4)
         }
 
-        const oldApp = getAppFromRoute(oldRoute)
-        const newApp = getAppFromRoute(newRoute)
+        const oldAppContext = getAppContextFromRoute(oldRoute)
+        const newAppContext = getAppContextFromRoute(newRoute)
 
-        if (oldApp === newApp) {
+        if (isEqual(oldAppContext, newAppContext)) {
           return
         }
 
@@ -56,7 +57,7 @@ export default defineComponent({
         }
 
         /*
-         * If app has been changed and no file context is set, we will reset current folder.
+         * If app context has been changed and no file context is set, we will reset current folder.
          */
         resourcesStore.setCurrentFolder(null)
       }