From 31f74262dd45e788d111822f6ba82b08565ba6b5 Mon Sep 17 00:00:00 2001
From: Jan <jackermann@owncloud.com>
Date: Tue, 2 Aug 2022 11:30:33 +0200
Subject: [PATCH] [full-ci] Show file icon if no thumbnail is present (#7344)

Show file icon if no thumbnail is present
---
 .../bugfix-missing-file-icon-in-details-panel |  6 +++
 .../SideBar/Details/FileDetails.vue           | 16 ++++++-
 .../src/components/SideBar/FileInfo.vue       | 46 ++++++++++++++++++-
 .../__snapshots__/FileDetails.spec.js.snap    | 24 +++++++---
 ...-failures-with-oc10-server-oauth2-login.md |  8 ++--
 ...-failures-with-ocis-server-ocis-storage.md | 12 ++---
 .../webUIFilesDetails/fileDetails.feature     | 42 +++++++++++------
 .../FilesPageElement/appSideBar.js            | 20 ++++++--
 .../stepDefinitions/filesContext.js           |  9 ++--
 9 files changed, 144 insertions(+), 39 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-missing-file-icon-in-details-panel

diff --git a/changelog/unreleased/bugfix-missing-file-icon-in-details-panel b/changelog/unreleased/bugfix-missing-file-icon-in-details-panel
new file mode 100644
index 00000000000..4a722ad3ce2
--- /dev/null
+++ b/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
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index f22c40b58ff..2d64ca1beb8 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/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>
diff --git a/packages/web-app-files/src/components/SideBar/FileInfo.vue b/packages/web-app-files/src/components/SideBar/FileInfo.vue
index 7a9b7f45849..27fd363b574 100644
--- a/packages/web-app-files/src/components/SideBar/FileInfo.vue
+++ b/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
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap
index 065d9cec18b..7fa2bea2674 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap
+++ b/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">
diff --git a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
index 1e42f1044c5..9cbb276e9cd 100644
--- a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
+++ b/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)
diff --git a/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md b/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
index 64b7cc013c0..3f10abba851 100644
--- a/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
+++ b/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) 
diff --git a/tests/acceptance/features/webUIFilesDetails/fileDetails.feature b/tests/acceptance/features/webUIFilesDetails/fileDetails.feature
index c57fac9d092..bd9f23f5317 100644
--- a/tests/acceptance/features/webUIFilesDetails/fileDetails.feature
+++ b/tests/acceptance/features/webUIFilesDetails/fileDetails.feature
@@ -16,12 +16,17 @@ Feature: User can open the details panel for any file or folder
     And the user has browsed to the personal page
     When the user opens the sidebar for file "lorem.txt" on the webUI
     Then the app-sidebar should be visible
-    And the thumbnail should be visible in the app-sidebar
     And the "details" details panel should be visible
+    And the "big" preview of thumbnail should be visible in the "details" panel
     When the user switches to "actions" panel in details panel using the webUI
-    And the "actions" details panel should be visible
+    Then the "actions" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "actions" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "people" panel
+    When the user switches to "versions" panel in details panel using the webUI
+    Then the "versions" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "versions" panel
 
   @files_versions-app-required
   Scenario: View different areas of the app-sidebar for a folder in files page
@@ -29,14 +34,17 @@ Feature: User can open the details panel for any file or folder
     And the user has browsed to the personal page
     When the user opens the sidebar for folder "simple-folder" on the webUI
     Then the app-sidebar should be visible
-    And the thumbnail should be visible in the app-sidebar
     And the "details" details panel should be visible
+    And the "big" preview of thumbnail should be visible in the "details" panel
     When the user switches to "actions" panel in details panel using the webUI
-    And the "actions" details panel should be visible
+    Then the "actions" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "actions" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "people" panel
     When the user switches to "links" panel in details panel using the webUI
     Then the "links" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "links" panel
 
   @files_versions-app-required @ocis-reva-issue-39
   Scenario: View different areas of the app-sidebar for a file in favorites page
@@ -46,12 +54,17 @@ Feature: User can open the details panel for any file or folder
     And the user has browsed to the favorites page
     When the user opens the sidebar for file "lorem.txt" on the webUI
     Then the app-sidebar should be visible
-    And the thumbnail should be visible in the app-sidebar
     And the "details" details panel should be visible
+    And the "big" preview of thumbnail should be visible in the "details" panel
     When the user switches to "actions" panel in details panel using the webUI
-    And the "actions" details panel should be visible
+    Then the "actions" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "actions" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "people" panel
+    When the user switches to "versions" panel in details panel using the webUI
+    Then the "versions" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "versions" panel
 
   @files_versions-app-required @ocis-reva-issue-39
   Scenario: View different areas of the app-sidebar for a folder in favorites page
@@ -61,14 +74,17 @@ Feature: User can open the details panel for any file or folder
     And the user has browsed to the favorites page
     When the user opens the sidebar for folder "simple-folder" on the webUI
     Then the app-sidebar should be visible
-    And the thumbnail should be visible in the app-sidebar
     And the "details" details panel should be visible
+    And the "big" preview of thumbnail should be visible in the "details" panel
     When the user switches to "actions" panel in details panel using the webUI
-    And the "actions" details panel should be visible
+    Then the "actions" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "actions" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "people" panel
     When the user switches to "links" panel in details panel using the webUI
     Then the "links" details panel should be visible
+    And the "small" preview of thumbnail should be visible in the "links" panel
 
   @issue-1158 @comments-app-required @public_link_share-feature-required
   Scenario: user shares a file through public link and then the details dialog should work in a Shared by link page
@@ -78,7 +94,7 @@ Feature: User can open the details panel for any file or folder
       | path | simple-folder |
     And the user has browsed to the shared-via-link page
     When the user opens the actions sidebar panel of folder "simple-folder" on the webUI
-    Then the thumbnail should be visible in the app-sidebar
+    Then the "small" preview of thumbnail should be visible in the "actions" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
     When the user switches to "links" panel in details panel using the webUI
@@ -95,7 +111,7 @@ Feature: User can open the details panel for any file or folder
     Then folder "simple-folder" should be listed on the webUI
     When the user opens the sidebar for folder "simple-folder" on the webUI
     Then the app-sidebar should be visible
-    And the thumbnail should be visible in the app-sidebar
+    And the "big" preview of thumbnail should be visible in the "details" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
     When the user switches to "comments" panel in details panel using the webUI
@@ -112,7 +128,7 @@ Feature: User can open the details panel for any file or folder
     Then folder "simple-folder" should be listed on the webUI
     When the user opens the sidebar for folder "simple-folder" on the webUI
     Then the app-sidebar should be visible
-    And the thumbnail should be visible in the app-sidebar
+    And the "big" preview of thumbnail should be visible in the "details" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
     When the user switches to "comments" panel in details panel using the webUI
@@ -130,7 +146,7 @@ Feature: User can open the details panel for any file or folder
     Then folder "simple-folder" should be listed on the webUI
     When the user opens the sidebar for folder "simple-folder" on the webUI
     Then the app-sidebar should be visible
-    And the thumbnail should be visible in the app-sidebar
+    And the "big" preview of thumbnail should be visible in the "details" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
     When the user switches to "comments" panel in details panel using the webUI
@@ -159,7 +175,7 @@ Feature: User can open the details panel for any file or folder
     And the user searches for tag "simple" using the webUI
     Then folder "simple-folder" should be listed on the webUI
     When the user opens the actions sidebar panel of folder "simple-folder" on the webUI
-    Then the thumbnail should be visible in the app-sidebar
+    And the "small" preview of thumbnail should be visible in the "actions" panel
     When the user switches to "people" panel in details panel using the webUI
     Then the "people" details panel should be visible
     When the user switches to "links" panel in details panel using the webUI
diff --git a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
index 4be6599bcb8..13b1e08dd01 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
@@ -6,8 +6,17 @@ const util = require('util')
 
 module.exports = {
   commands: {
-    isThumbnailVisible: function () {
-      return this.waitForElementVisible('@sidebar').waitForElementVisible('@fileInfoIcon')
+    isThumbnailVisible: function (previewSize, item) {
+      if (previewSize === 'big') {
+        return this.waitForElementVisible('@sidebar').waitForElementVisible(
+          '@fileInfoIconBigPreview'
+        )
+      } else {
+        const panelName = item === 'people' || item === 'links' ? 'sharing' : item
+        return this.waitForElementVisible('@sidebar').waitForElementVisible(
+          util.format(this.elements.fileInfoIconSmallPreview.selector, panelName)
+        )
+      }
     },
     closeSidebarIfOpen: async function (timeout = 300) {
       if (!(await this.isSideBarOpen(false))) {
@@ -208,8 +217,11 @@ module.exports = {
       selector: '//*[@id="files-sidebar"]',
       locateStrategy: 'xpath'
     },
-    fileInfoIcon: {
-      selector: '.file_info .oc-icon'
+    fileInfoIconBigPreview: {
+      selector: '#oc-file-details-sidebar .details-icon'
+    },
+    fileInfoIconSmallPreview: {
+      selector: '#sidebar-panel-%s-item .file_info__icon'
     },
     fileInfoResourceNameAnyType: {
       selector: `//div[contains(@id, "files-sidebar")]//span[contains(@class, "oc-resource-name") and (@data-test-resource-name=%s or @data-test-resource-path=%s)]`,
diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 1fc70a0f05f..4fb816e81b1 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -1032,9 +1032,12 @@ Then(
   }
 )
 
-Then('the thumbnail should be visible in the app-sidebar', function () {
-  return client.page.FilesPageElement.appSideBar().isThumbnailVisible()
-})
+Then(
+  'the {string} preview of thumbnail should be visible in the {string} panel',
+  function (previewSize, panelName) {
+    return client.page.FilesPageElement.appSideBar().isThumbnailVisible(previewSize, panelName)
+  }
+)
 
 When('the user deletes the file {string} from the deleted files list', function (element) {
   return client.page.FilesPageElement.filesList().deleteImmediately(element)