[full-ci] Show file icon if no thumbnail is present (#7344)

Show file icon if no thumbnail is present

changelog/unreleased/bugfix-missing-file-icon-in-details-panel

@@ -0,0 +1,6 @@
+Bugfix: Missing file icon in details panel
+
+We've fixed a bug where the file icon in the details panel was not shown, if no preview was available.
+
+https://github.com/owncloud/web/pull/7344
+https://github.com/owncloud/web/issues/7337

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

@@ -12,6 +12,12 @@
       >
         <oc-spinner v-if="$asyncComputed.preview.updating" />
       </div>
+      <div
+        v-else
+        class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb"
+      >
+        <oc-resource-icon class="details-icon" :resource="file" size="xxxlarge" />
+      </div>
       <div
         v-if="shareIndicators.length"
         key="file-shares"
@@ -483,7 +489,8 @@ export default defineComponent({
   }
 }
 
-.details-preview {
+.details-preview,
+.details-icon-wrapper {
   background-color: var(--oc-color-background-muted);
   border: 10px solid var(--oc-color-background-muted);
   height: 230px;
@@ -492,4 +499,11 @@ export default defineComponent({
   background-repeat: no-repeat;
   background-position: center;
 }
+
+.details-icon > svg {
+  height: 192px !important;
+  max-height: 192px !important;
+  max-width: 192px !important;
+  width: 192px !important;
+}
 </style>

packages/web-app-files/src/components/SideBar/FileInfo.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="file_info">
-    <oc-resource-icon :resource="file" size="large" class="file_info__icon" />
+    <oc-resource-icon
+      v-if="sidebarActivePanel"
+      :resource="file"
+      size="large"
+      class="file_info__icon"
+    />
     <div class="file_info__body oc-text-overflow">
       <h3 data-testid="files-info-name">
         <oc-resource-name
@@ -21,7 +26,7 @@
 <script>
 import Mixins from '../../mixins'
 import MixinResources from '../../mixins/resources'
-import { isLocationSpacesActive } from '../../router'
+import { isLocationSpacesActive, isLocationTrashActive } from '../../router'
 import { mapGetters, mapState } from 'vuex'
 import PrivateLinkItem from './PrivateLinkItem.vue'
 import { useActiveLocation } from '../../composables'
@@ -47,6 +52,43 @@ export default {
   computed: {
     ...mapGetters(['capabilities']),
     ...mapState('Files', ['areFileExtensionsShown']),
+    ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
+    timeData() {
+      const interpolate = (obj) => {
+        obj.time = this.formDateFromRFC(obj.sourceTime)
+        obj.timeRelative = this.formRelativeDateFromRFC(obj.sourceTime)
+
+        obj.infoString = this.$gettextInterpolate(obj.infoString, obj)
+        obj.ariaLabel = this.$gettextInterpolate(obj.ariaLabel, obj)
+        return obj
+      }
+
+      if (
+        isLocationTrashActive(this.$router, 'files-trash-personal') ||
+        isLocationTrashActive(this.$router, 'files-trash-spaces-project')
+      ) {
+        return interpolate({
+          sourceTime: this.file.ddate,
+          infoString: this.$pgettext('inline info about deletion date', 'deleted %{timeRelative}'),
+          ariaLabel: this.$pgettext(
+            'aria label for inline info about deletion date',
+            'deleted %{timeRelative} (%{time})'
+          )
+        })
+      }
+
+      return interpolate({
+        sourceTime: this.file.mdate,
+        infoString: this.$pgettext(
+          'inline info about last modification date',
+          'modified %{timeRelative}'
+        ),
+        ariaLabel: this.$pgettext(
+          'aria label for inline info about last modification date',
+          'modified %{timeRelative} (%{time})'
+        )
+      })
+    },
 
     privateLinkEnabled() {
       return this.isPersonalLocation && this.capabilities.files.privateLinks

packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap

@@ -94,7 +94,9 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag
 exports[`Details SideBar Panel displays a resource of type file on a private page with timestamp, size info and (me) as owner 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <!---->
+    <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
+      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+    </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
       <tr data-testid="timestamp">
@@ -322,7 +324,9 @@ exports[`Details SideBar Panel displays a resource of type file on a public page
 exports[`Details SideBar Panel displays a resource of type folder on a private page with timestamp, size info and (me) as owner 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <!---->
+    <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
+      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+    </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
       <tr data-testid="timestamp">
@@ -356,7 +360,9 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p
 exports[`Details SideBar Panel displays a resource of type folder on a private page with timestamp, size info, share info and share date 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <!---->
+    <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
+      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+    </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
       <tr data-testid="timestamp">
@@ -390,7 +396,9 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p
 exports[`Details SideBar Panel displays a resource of type folder on a private page with timestamp, size info, share info and share date running on eos 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <!---->
+    <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
+      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+    </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
       <tr data-testid="timestamp">
@@ -444,7 +452,9 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p
 exports[`Details SideBar Panel displays a resource of type folder on a public page with owner, timestamp, size info and no share info 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <!---->
+    <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
+      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+    </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
       <tr data-testid="timestamp">
@@ -478,7 +488,9 @@ exports[`Details SideBar Panel displays a resource of type folder on a public pa
 exports[`Details SideBar Panel displays a resource of type folder on a public page with owner, timestamp, size info and no share info running on eos 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <!---->
+    <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
+      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+    </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
       <tr data-testid="timestamp">

tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md

@@ -18,11 +18,11 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUIComments/comments.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L40)
 -   [webUIComments/comments.feature:41](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L41)
 -   [webUIComments/comments.feature:42](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L42)
--   [webUIFilesDetails/fileDetails.feature:74](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L74)
 -   [webUIFilesDetails/fileDetails.feature:90](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L90)
--   [webUIFilesDetails/fileDetails.feature:107](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L107)
--   [webUIFilesDetails/fileDetails.feature:124](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L124)
--   [webUIFilesDetails/fileDetails.feature:153](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L153)
+-   [webUIFilesDetails/fileDetails.feature:106](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L106)
+-   [webUIFilesDetails/fileDetails.feature:123](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L123)
+-   [webUIFilesDetails/fileDetails.feature:140](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L140)
+-   [webUIFilesDetails/fileDetails.feature:169](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L169)
 
 ### [Tags page not implemented yet](https://github.com/owncloud/web/issues/5017)
 -   [webUIDeleteFilesFolders/deleteFilesFolders.feature:135](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIDeleteFilesFolders/deleteFilesFolders.feature#L135)

tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md

@@ -152,11 +152,11 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUIComments/comments.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L40)
 -   [webUIComments/comments.feature:41](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L41)
 -   [webUIComments/comments.feature:42](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L42)
--   [webUIFilesDetails/fileDetails.feature:74](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L74)
 -   [webUIFilesDetails/fileDetails.feature:90](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L90)
--   [webUIFilesDetails/fileDetails.feature:107](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L107)
--   [webUIFilesDetails/fileDetails.feature:124](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L124)
--   [webUIFilesDetails/fileDetails.feature:153](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L153)
+-   [webUIFilesDetails/fileDetails.feature:106](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L106)
+-   [webUIFilesDetails/fileDetails.feature:123](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L123)
+-   [webUIFilesDetails/fileDetails.feature:140](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L140)
+-   [webUIFilesDetails/fileDetails.feature:169](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L169)
 
 ### [Deletion of a recursive folder from trashbin is not possible](https://github.com/owncloud/product/issues/188)
 -   [webUITrashbinDelete/trashbinDelete.feature:85](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUITrashbinDelete/trashbinDelete.feature#L85)
@@ -299,8 +299,8 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUIUpload/upload.feature:42](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIUpload/upload.feature#L42)
 
 ### [Favorites deactivated in ocis temporarily](https://github.com/owncloud/ocis/issues/1228)
--   [webUIFilesDetails/fileDetails.feature:42](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L42)
--   [webUIFilesDetails/fileDetails.feature:57](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L57)
+-   [webUIFilesDetails/fileDetails.feature:50](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L50)
+-   [webUIFilesDetails/fileDetails.feature:70](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesDetails/fileDetails.feature#L70)
 -   [webUIRenameFiles/renameFiles.feature:257](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIRenameFiles/renameFiles.feature#L257)
 
 ### [Copy/move not possible from and into shares in oCIS](https://github.com/owncloud/web/issues/6892)